Tasks: Update the design

[jakobroehrl]

The sidebar looks a litte bit outdated.
Maybe we could do some polish and use elements of the deck or calendar app (each from the vue branch):

Deck:

---

Calendar:

[raimund-schluessler]

I also thought about updating the sidebar. Especially I would like to

• introduce tabs since the amount of information in the sidebar increased over time
• add an illustration same as the Calendar app does it now

What I want to keep as it is, is that I want to show input elements only after the user clicks on something he wants to edit. I find all these input fields visually noisy.

[jakobroehrl]

@raimund-schluessler
I would like to help here, maybe after the Deck VUE migration is done.

[timkrief]

On top of the sidebar, the task list was a bit intimidating for me.

I don't know if this could help, but I made a custom CSS style-sheet for my personal use. It's full of tricks right now since I'm only using a CSS on top of what's already existing, but if the general direction is of your liking, I'm willing to properly change the style of the app to make a PR.

(the background could be removed I just like bright colors!)

[raimund-schluessler]

I think it looks very nice, but it somehow doesn't match the overall nextcloud style. What do the @nextcloud/designers think?

[timkrief]

Maybe the background could get in the way of judging the style, so here's with a neutral one:

I'm open to potential feedback and changes to try and fit to the overall nextcloud style :smiley:

[juliushaertl]

I think that it would fit quite good if the shadows and border radius would just use the amount we have by default in our css variables, worth a try with that imo.

[timkrief]

Ok, I used the CSS variables as advised and the draft looks like this now:

[raimund-schluessler]

A bit of feedback:

• Whether we want to introduce a different background would need to be discussed with @nextcloud/designers. I know there is the idea to change it to background-color: var(--color-background-dark); for Deck https://github.com/nextcloud/deck/issues/1892, so it might make sense to do that for Tasks as well to keep it consistent.
• I like the coloring and style of the checkboxes. It looks friendly to have a bit more color in the task list. However, we had a discussion to unify the checkbox appearance in https://github.com/nextcloud/tasks/issues/506 and https://github.com/nextcloud/tasks/issues/572, so changing it would partly reverse that effort. I don't know if that is desired. If we just change the border (color, thickness and border-radius) of the box, it might be ok.
• I would like to keep the star icon, as it's an active icon allowing to toggle the importance of a task without opening the sidebar. I know you moved the color to the checkbox, but that doesn't make up for the missing toggling option.
• Is it intended that the subtasks overlap their parents? It looks a bit weird imo and we do that nowhere else afaik.
• I just realized that you changed the colors indicating the importance of a task. If we agree to change them, we would need to do that all over Tasks. And at least the yellow is the standard yellow of the star icon in Nextcloud, which wouldn't fit then anymore.
• We also need to check that everything works with the dark mode.

Also @jancborchardt here.

[timkrief]

Thanks for the feedback!

• For the background, that's exactly what I did here, I used background-color: var(--color-background-dark);
• For the checkbox, I just changed the attribute you mentioned and the color for the priority
• The star icon was always using a priority 1 so I was not using it because I'm always using another priority level by default and 1 when there's something really important. However I can understand why one would want to keep it if always using only one priority value. Keeping it then creates redundant information since the colors will be at two places at once. Maybe introducing a setting to toggle between the two ways of displaying the priority could be interesting. What I really like in having the check box colored is that you can clearly know the priority when reading the task (proximity between the text and the color that informs you)
• The sub-task overlapping their parents was not intended, it's fixed.
• The change in priority colors was not my intention, I just chose colors randomly. As I said before, it was just a personal CSS style initially. Here's a version with the right colors:

Keep in mind it's a draft I made using a custom CSS stylesheet. As I said, if the general direction is ok, then it will be made as part of a proper PR.

[jancborchardt]

@timkrief that looks all really nice! :) Only one piece of feedback on that last screenshot: It’s a bit strange that the shadow of parent elements overlaps the first child, since they have the same amount of shadow. In earlier screenshots it didn’t overlap and looked a bit nicer.

Also your other designs from earlier look quite nice! :) As the others said it is first good to use the main variables, and then if you like we can see if it makes sense to change the variables.

As I said, if the general direction is ok, then it will be made as part of a proper PR.

Sounds great! By the way, we have a Nextcloud Talk instance with a "Design team" and "Tasks team" room – I can invite you there with a guest account?

[timkrief]

Thanks for the feedback. Of course you can!

[Bugsbane]

Overall I'd say it's really nice and a definite step forward.

Something that I find conceptually doesn't make sense to me though, is that there are gaps between a task and it's subtask. These two things are conceptually linked (one is part of the other) and yet there's a gap between them.

On the other hand, a sub task and an unrelated shallower level task are conceptually unrelated, but they're shown as linked, with no gap between them.

I would suggest switching this, so there is no gap between a task and it's subtask (as they're connected), but a gap between a subtask and a task of a shallower level (as they're unrelated). Here's my imperfect mockup to demonstrate what I mean:

[timkrief]

Oh sorry for the misunderstanding @Bugsbane It's wasn't a gap, it was a shadow, ignore it, as @jancborchardt said it was nicer without it.

(the gaps are making me really confused as if random tasks were separated from the others for no reason ^^)

[raimund-schluessler]

Oh sorry for the misunderstanding @Bugsbane It's wasn't a gap, it was a shadow, ignore it, as @jancborchardt said it was nicer without it.

(the gaps are making me really confused as if random tasks were separated from the others for no reason ^^)

I think this looks really nice. A PR would be great.

[skjnldsv]

Just passing by and love all the great support and feedback everyone gave here! This looks super awesome!
Thanks for being part of this awesome community everyone!! :hugs:

[marcoambrosini]

Great stuff :)
some remarks from my side:

• I think that the idea of separation mentioned here is really nice, but I would limit it only to root tasks, so that we have clearly separated main blocks;

• It would be amazing to be able to expand and collapse tasks, at least the root ones. Readability of what you need to get done would improve sooo much :)

• For the future, something that I'd really like would be some sort of "focus mode", in which you are able to hit the "focus" button on a task making everything else disappears: no sidebars, no header... Only the task details, sub-tasks and notes nicely laid out :pray:

---

edit:
On that last point, that could actually become the default behavior for when you click a task. ATM upon clicking a task, your main "work area" becomes the sidebar. this approach:

• Gives you something like 20% of your screen for the thing that you actually want to focus on, since it's the single most important thing in that moment, we should give it more real estate;
• Leaves countless of other clickable (and distracting) UI elements around the rest of the screen --> bad if you're trying to focus on a task;

[raimund-schluessler]

• It would be amazing to be able to expand and collapse tasks, at least the root ones. Readability of what you need to get done would improve sooo much :)

@ma12-co This is possible already. You can click "Hide subtasks" in the dropdown menu and all subtasks will be hidden:

Subtasks shown:

Subtasks hidden:

This works for every task, also subtasks.

[raimund-schluessler]

• I think that the idea of separation mentioned here is really nice, but I would limit it only to root tasks, so that we have clearly separated main blocks;

I am not sure about the separation. I think this would look weird if you have a lot of tasks without subtasks. I would not introduce that by default and refer to the custom CSS app since it is a small change.

[marcoambrosini]

@ma12-co This is possible already. You can click "Hide subtasks" in the dropdown menu and all subtasks will be hidden

Oh, I didn't notice it! @raimund-schluessler, don't you think it would be better to show an icon on the left of the checkbox? Like:
> [] My task for a collapsed task that has subtasks
[] My task for a task that doesn't have subtasks
Atm I don't see any distinction between the two

[raimund-schluessler]

We show an icon on the right side, left of the dropdown menu (see the second image). If we want to show an icon at the left we would need to shift the checkbox which would leave unused space if no icon is shown. I guess we would need a mockup to judge if that would work.

[marcoambrosini]

I think this would look weird if you have a lot of tasks without sub-tasks

Not if the gap is small enough imo, like 4 to 8 px. Currently If you have a lot of tasks with sub-tasks it there's very little hierarchy and it all looks like the same slab.

P.S. I'm probably abusing the fact that the title of the issue is very generic xD

[marcoambrosini]

If we want to show an icon at the left we would need to shift the checkbox which would leave unused space if no icon is shown.

no problem with the checkbox shift imo, it's yet another clue that suggests you that there's something different about that particular task :)

Edit: that's also where the plus button could go, to quickly add subtasks, like:

+ [] My task

Upon clicking +, a subtask is added and It's input field is focused:

▼ [] My task
        |Add title to your sub-task         <--- focused input field

Once you've clicked enter and confirmed the creation of the first sub-task, a second focused input field appears below it

▼ [] My task
        + [] My subtask
            |Add title to your sub-task        <--- focused input field

[timkrief]

In my humble opinion, the checkbox should be the first thing to be seen, followed by the name of the task. Simple todo lists have to look clean too. If you really wanted to, you could display the number of subtasks and an option to show/hide them as a label, as it is done in tasks.org

[marcoambrosini]

To be honest those variable height elements with labels all around do not look very tidy to me. I think my proposal would still look cleaner.

[raimund-schluessler]

I would like to keep the checkbox on the very left. In my opinion it is the most important action element. Moving it to the right would be counterintuitive for me. And every other todo app I am aware of also has the checkbox to the very left. Breaking that custom for the add-subtask/show-subtask button is not reasonable for me, since these buttons are not so important.

However, I can understand that one would like to show it more prominently when a task has subtasks (which might be even hidden). But I would like to show that on the right side at the position where we already have the respective icon. We could maybe show the number of subtasks as a counter with a colored background (similar to how tasks.org apparently does it, but in a single line).

[marcoambrosini]

Ok, so how about putting the arrow on the far right of the task element?

Too many icons on the right? We can move the favorite star to the right of the checkbox, gmail style.

[timkrief]

Yeah I don't like multiple lines at all either. I think they do that because of the size of mobile displays. but I like that the number of subtasks is displayed and that it is shown the same way as a label. As if the fact that it has subtasks put it in a "has subtasks" category 🙂

I really think the checkbox should be the only thing on the right personnally.

[timkrief]

I'm almost done editing the style.scss file to make my PR and I found out there's a --border-radius and a --border-radius-large as standard css variables. which one do you like the most?

border-radius: var(--border-radius)

border-radius: var(--border-radius-large)

[szaimen]

I like the border-radius: var(--border-radius-large) more
But I am aware that it doesn't fit the overall Nextcloud Design so it probably will be border-radius: var(--border-radius) in the end.

[Bugsbane]

I agree that the gaps between deeper and shallower elements in my previous mockup looks weird (although less so than what came before).

That said, I feel that just removing all gaps, visually throws all tasks in together as one rather jumbled lump, reducing readability. Instead of either, what about if we only have a gap before a new root level task that has subtasks displayed above it? I didn't bother to mockup where the arrows/stars go:

There would be no gap between root tasks that had their subtasks collapsed:

In CSS terms, this would just be adding a bottom margin on the last tubtask for each root task.

[timkrief]

I find it weird that it would act differently for tasks with or without subtasks and on top of that for root tasks and deeper tasks. Plus it could create confusion for when tasks from all calendars are displayed as groups in the main view, as it would visually create multiple groups for one calendar. I think the indentation already provides the information we need to clearly comprehend the hierarchy and separations etc.

[marcoambrosini]

I don't think there's any problem if we have a 4px gap even when the tasks are collapsed or for when they don't have subtasks. @timkrief, the indentation might be enough for you as a programmer but screenshot 1 of the previous comment is unquestionably clearer to read for the average user and presents no significant drawbacks. That's why I think we should go for it.

[timkrief]

Okay so I'm testing with the dark theme, and it's looking pretty good imho

[jancborchardt]

Just some meta input, since the issue has long veered off its original intention:

• Can this be split into smaller changes and/or pull requests? This way we don’t have one huge changeset where a tiny disagreement can block everything. E.g. the main discussion now is about the content list, and the sidebar is completely separate topic.
• With everyone putting in their thoughts on design, keep in mind who our competition is and what people are used to. That would be: Microsoft To Do, Apple Reminders, Google Tasks (which is integrated in Gmail), Todoist, Things, Any.do, and a to do list written on paper. We can learn a lot from their designs and the problems they solved, and the things they do or don’t show.

[raimund-schluessler]

I agree, for the PRs we should keep it small and start to include only the stuff where we have a consensus.

I will try to summarize a bit:

Where we have a consensus:

• The proposed changes to the task list from @timkrief should go into a PR. The task list will look like this for light mode
  
  and dark mode
  

Various opinions:

• There where proposals to separate different tasks (only when they have subtasks) by a 4 px gap, e.g. https://github.com/nextcloud/tasks/issues/664#issuecomment-660698956. I personally don't like that to much and since it's a simple change, I would refer to the custom CSS app for now.
• It should be better highlighted / shown if a task has hidden subtasks. We have the proposal to show an arrow on the right side when the subtasks are hidden or to adjust the current icon so that it is more prominent (e.g. by adding a counter of the hidden subtasks).

Since I have likely forgotten some ideas, I think it would be best to open separate issues for them. Also, I will close this issue once the task list and sidebar are updated.

@timkrief Could you please create a PR with the adjustments to the task list you proposed? And @jancborchardt please add @timkrief to the Tasks repo.

[jancborchardt]

Thanks for the summary @raimund-schluessler!

There where proposals to separate different tasks (only when they have subtasks) by a 4 px gap, e.g. #664 (comment). I personally don't like that to much and since it's a simple change, I would refer to the custom CSS app for now.

We can always see about this in the future, but it should not block the other enhancements indeed. :)

It should be better highlighted / shown if a task has hidden subtasks. We have the proposal to show an arrow on the right side when the subtasks are hidden or to adjust the current icon so that it is more prominent (e.g. by adding a counter of the hidden subtasks).

Yep, a counter as a subline is pretty good, Microsoft To Do does the same:

And @jancborchardt please add @timkrief to the Tasks repo.

Added, welcome @timkrief! :)
@raimund-schluessler did you get the invite for the Nextcloud Talk instance via guest account btw? We have a "Deck & Tasks team" channel there we can also use for quicker coordination.

[raimund-schluessler]

Please have a look at https://github.com/nextcloud/tasks/pull/1136 for the task list style PR.