cosmic-utils/tasks

UI suggestions

Opened this issue ยท 9 comments

M00NJ commented

I've been using tasks for a while now and enjoy it a lot. There are some changes to the UI I'd like to suggest though, so I created a mockup. I've looked at other task managers like Errands and Planify and also the Cosmic apps for reference.

Mockup

My main suggestion is to remove most of the high emphasis icon buttons, since they make the UI look quite busy. The default Cosmic apps have a minimalistic approach and don't use them. So I'd drop them where they are not necessary, like the button for adding new tasks. You need to use the keyboard to write the task name, so you'll probably just press enter instead. Also the icon looks more like a send button in a messenger app to me. The same goes for the edit button. You can edit the task name by clicking on it. This is more intuitive, so I'd drop that button as well. I would also replace the export button, with a button to move all completed tasks to the trash. Errands has this feature and it's quite useful. I'd make the export functionality accessible via the files menu in the window header instead. I don't think people are exporting their list three times a day, so that space could be utilized better. With a new button to remove completed tasks, the trash button behind every task could be dropped as well. Again making the UI cleaner and avoiding component duplication. So the only button I'd keep there is for opening the context drawer. I'd also split tasks into separate cards and show a expand / collapse icon on hover if a task has sub-tasks, like Errands. Clicking anywhere on the task (except the name) could expand or collapse it, so the target area is bigger than a button. Showing the number of uncompleted task in a list and the progress for each task would also the helpful. The context drawer is great already, I'd just apply the same things as above to the sub-task section too. Lastly, context menus could be used to expose more actions, without cluttering the UI.

Maybe some of these ideas are useful to you. Thank you for this great application :)

I've been wanting to improve the UI but had no idea how, now I know.

I'll work on this for the next release. ๐ŸŽ‰

This is great feedback, thanks for taking the time with the mock up and the issue ๐Ÿ‘๐Ÿผ

To-do's:

  • Remove high-emphasis icon buttons.
  • Use context menus for tasks.
  • Use separate cards for tasks with expand/collapse functionality.
  • Show task progress and number of uncompleted sub-tasks.
  • Show number of tasks in a list.
  • Move export functionality to navigation menu.
  • Add button to move all completed tasks to the trash.

There's currently an issue with context menus, which is preventing me from implementing the suggested behavior.

Managed to implement some things already:

image
Context menu

image
Details

image
Export

M00NJ commented

Wow, that was fast! The app looks very polished now :)

I need to sleep now, I've been coding straight for 8-9 hours ๐Ÿ˜ด

M00NJ commented

Please don't over-work yourself. Burnout is no fun. There are no deadlines is the foss world... ๐Ÿ˜Œ

I got a little carried away, working on this is fun for me!

@edfloreshz How do you have light theme? Mine didn't switch to light theme at all. #31

I haven't had a chance to take a look at that, but it is most likely related to libcosmic or flatpak.