Improve layout and usability of projects
dottorer opened this issue · comments
Based on deep user feedback, we need to improve the way projects are represented in Lale and can be interacted with. Here is a new design mockup with changes required:
- Create 4 tabs under the title/descr area: 2 tabs for tasks and supplies, one for comments, one for stats (later we will also have 'Documents' here and attach files to projects as in #337)
- on the task tab, add a button to directly add tasks inside this project. When clicking it, the task is pre-populated with the project and working group which cannot be changed.
- on the supply tab, add a button to directly add supplies inside this project. When clicking it, the supply is pre-populated with the project and working group which cannot be changed.
- Sort all tasks and supplies by the due date field showing the newest first.
- When opening a task from the task list, we are presented with the task page. When closing it, we should be taken to the task tab of the project home page (same for supplies). This is the page we came from and makes sense to the user.
- Offer ability to comments on the project by re-using the comments section. No notifications will be sent when comments are added.
- Add tab for 'Stats' showing the existing sign-up stats. Possible add few more metrics such as 'Last task assigned at' and 'Last task completed'
Also, we should implement #330 as an improvement.
@diegoaad Per our chat yesterday, I simplified the design / UX aspect of the layout somewhat to be in line with the currently applied layouts. Might be easier to do this way. Added the comments in there as a requested feature. Take a look and let me know what you think...maybe we can find someone for it.
@dottorer can you send me or add the icon for the description? I have a prototype of the following parts of the new layout:
- Moved working group and period underneath the description
- Created Comments tab with a box for adding comments and a list of previous comments
- Created Stats tab containing the basic stats for helpers, tasks, and supplies
Also, any guidance on the sizing of text in the header of the project would be much appreciated!
Hi @jprokay we could try one of the following icons...
Ooops, these uploaded quite large so we will need to size them accordingly...
The title size should be the same as for tasks. The font size for the description should be legible but not taking too much space.
For the comments tab, i assume you reused the existing commentaboe feature like we do for tasks today, right?
Looking forward to seeing your prototype in a review app :-)
@dottorer what gems are used to encode the icons? I resized and converted one to a SVG, but I am not sure how I expose it as a variable in:
app/assets/stylesheets/settings/_icons.scss
I assume the \f119 assigned to $lale-icon-supply automatically happens with the use of some gem?
Other than that, it's ready for you to take a look at
I think we encoded some icons in a font, too. @phillipoertel did that and might be best to show how.
We could add the icon later, too, if we want to proceed for now on the PR.
Tested this much improved way for projects UX in the review app. Here are the missing items:
- translations to German for field 'Description', 'Add xxx' buttons and 'Stats' tab
- Icon for description needs to be added
- spacing of new 'Add task' button with the toggle for 'completed tasks...' needs adjustment (same for supplies)
- Invite buttons should not be tied to the horizontal level of the tabs, but be under the 'Edit project' button
- Name of project organizer should be a link to the helper, ideally with the hover over popping out
- [NIT] When opening a supply and then navigating back, we are taken to the Tasks tab, not the 'Supplies' tab
- [CAN'T REPRODUCE] Layout of header table not quite using all the space it should.
Mostly spit & polish at this point! :-)
FYI @jprokay I just documented how to add icons to the font: https://github.com/lale-help/lale-help/tree/projects_layout#adding-icons-to-the-lale-iconfont.
I'm working on the issue right now, added the icon and will do some more; hope we don't step on each other's toes?
@dottorer The project dashboard has working group and organizer name in one row; task and supply pages have them in separate rows (please compare screenshots). Should I update task and supply to also use only one row, or stay with the existing layout?
Project
Task/Supply
@dottorer btw. the sentence "{working_group} organized by {user}" is a little confusing since we display the project admin there, rather than one of the working group organizer(s).
In practice this probably won't cause problems since a project admin needs to be a working group organizer (as of now).
@phillipoertel I think the new one-line version from the projects should be used in task/supply as well to make it cleaner and consistent. I think we could leave a bit more spacing before the 'organized ...' and after the '... by'.
Thinking more about it, it seems that the most important info is who organizes the project (or task/supply), secondary is the working group this is in so we have a quick link to it. With this in mind, we might change to a one line version composed of:
- 'Organized by' / 'Organisiert von' in large font
- Initials circle + organizer name as link
- ' in working group' / ' in Arbeitsgruppe'
- working group name as link
This should work consistently in project / task / supply and clean it up a bit.
What are our thoughts?
@phillipoertel Please add a thin frame around the invite buttons to make it more consistent with task/supply...
@dottorer what would the area above the buttons look like then? Just adding a border around the buttons wouldn't make it consistent with to task/supply, since there's no box title and user badges. I didn't manage to make this look good ...
Merged and ready to deploy...thanks @jprokay and @phillipoertel !!!