Open juliushaertl opened 3 years ago
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 :)
@Clementine46 I love it! Uncluttered by default with the option of showing everything you could need, right where you want it :smile:.
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.
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.
@juliushaertl @Clementine46 Is there any way that I can get exact CSS from the design?
@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
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:
Comments/Activities
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 🤔
@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:
What do you think?
@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 ?
@Clementine46 I mean in the card, like in this screenshot, there's a right column where all the optional element are stacked vertically
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?