Improve modal view design

[juliusknorr]

The current modal view design is basically a larger sidebar and doesn't properly use the available space. When talking about this in the past with @jancborchardt and @Clementine46 the Trello approach of showing only the available UI parts and having a set of "Add to card" options for attachments seemed quite interesting, so maybe we should consider redesigning the card modal view in a similar way.

With that we could give the users direct access to all card content without the need of switching between tabs.

@Clementine46 Would this be something you'd be interested in to see how we could redesign the modal in that regard?

[Clementine46]

Here is the modal redesign we came up with:

We got rid of the tabs and went for toggle buttons to save some space. Clicking on one of the button will enable the chosen option. That way, only the needed options will be opened.

Here are several examples:

Assigning a member

Assigning a tag

Setting a due date

Once enabled, the button switches to blue so the user knows it's activated. The selection process remains the same, the main change is the way it's presented. Once the user is done choosing, the new category appears with the current selection and the "+" icon allows them to add more.

Here is the modal with members, tags and due date selected:

This content is flexible and moves depending on how much space is taken.

Here, the addition of two other tags is pushing the due date below the first two options:

Lastly, the buttons are sticky and will stay on top of the modal even when scrolled for easy access.

Here is how it looks like when scrolling to the bottom of the modal:

The activity category in the bottom combines the comments and the timeline. By default, only the last 3 events from the timeline are shown.

If the user want to see all of it, they can click on the "show details" buttons on the right.

If anyone is interested, here is an interactive version of the mockups presented above:
https://marvelapp.com/prototype/237i8946/section/1281212
(If you do not know where to click, click anywhere on the screen and a blue rectangle will show you where to click)

Any feedback is appreciated :)

[dodedodo]

@Clementine46 I love it! Uncluttered by default with the option of showing everything you could need, right where you want it 😄.

I just want to make 1 small addition. Maybe we could show fields that contain information, by default? Why would you add a tag/duedate/member/... if you don't want to see it?

I can also imagine a scenario where a team member adds a due date, but you fail to notice because your deck is set to not show that duedate.

[juliusknorr]

I just want to make 1 small addition. Maybe we could show fields that contain information, by default? Why would you add a tag/duedate/member/... if you don't want to see it?

The idea there was to use the buttons to add or jump to the information, not to add a way to toggle the visibility. If a duedate is set it should definitely always be visible on the details view.

[luka-nextcloud]

@juliushaertl @Clementine46
Is there any way that I can get exact CSS from the design?

[luka-nextcloud]

@juliushaertl I guess it would be good to create small tasks for the new design implementation.

• Reorder the tabs
  Create tab buttons and make it look like the design
  Render content based on the tab selected

• Make the content flexible depending on the tab selected

• Assign member
  Redesign the select member box
  Show list members assigned

• Assign a tag
  Redesign the tag box selector
  Show the tag assigned

• Setting a due date

• Leave a comment function
  Debug and design the database tables
  API to create a comment
  API to get and show the comments

• Changelogs
  API to save the changelogs
  API to get the changelogs
  Show hide the changelogs

[juliusknorr]

Is there any way that I can get exact CSS from the design?

No, they were mainly drawn mockups. Please check the vue components or maybe reach out to the designers team with questions in regards to specific design polishing then, but approaching this in an iterative way is definitely a good idea.

I think a good starting point is to start off with a new CardModal component that is for the beginning a copy of https://github.com/nextcloud/deck/blob/master/src/components/card/CardSidebar.vue and then rename the modal slot to modal so that the sidebar and modal are separate views:

https://github.com/nextcloud/deck/blob/master/src/router.js#L122
https://github.com/nextcloud/deck/blob/master/src/App.vue#L36

Next steps would be then to work on the CardModal:

• Not use the AppSidebar component anymore

• Put all existing sidebar tabs below each other without the tabs

• Rearrange individual card metadata each with the button on top and then the relevant section below:

  • Assign member
    • Redesign the select member box
    • Show list members assigned
  • Assign a tag
    • Redesign the tag box selector
    • Show the tag assigned
  • Setting a due date
  • Project
  • Attachments

• Comments/Activities

  • The functionality is already there but we need to think about how we can properly merge activity and comments again as they are two different endpoints at the moment. Maybe we can put this one on hold and discuss that more in detail once I'm back, but should not be a blocker for the other parts

[nicolnt]

Would be nice to have a button to insert checklists for people who don't know how to use markdown effectively.
Like on Trello it's called"Checklist".
And it would simply append a first item into the description maybe 🤔

[marcoambrosini]

@Clementine46 I really like the design, but I'm wondering whether it'd be better to use a separate sidebar for the optional elements, just like Trello. That would have a couple of advantages:

• The toggles wouldn't take up valuable vertical space from the card
• It'd be future-proof, because the list of toggles is likely to grow over time

What do you think?

[Clementine46]

@marcoambrosini Do you mean inside or outside the card ?
Inside the car would take some space and isn't super cohesive with the usual Nextcloud design so I'm not sure about that.
Outside the card doesn't seem possible since both would need to be open separately.

Do you have an example you could show me ?

[marcoambrosini]

@Clementine46 I mean in the card, like in this screenshot, there's a right column where all the optional element are stacked vertically