Content
View differences
Updated by Marc Alcobé almost 2 years ago
After the results of both usability testings some UX/UI improvements has been designed in order to create a more complete and user friendly application. This changes imply the update on all screens of the app and will most likely close the scope of the current spike.
### Focus
Notifications centre
### Current implementation
OpenProject version 0.0.39
<img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116041/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116042/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116043/content">
### Acceptance criteria
* [ ] Ensure the header is a 22px font in Regular, fgColor-onEmphasis.
* [ ] A divider is missing between this view selector and the beginning of the list as [designed here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=1085-263254&t=fMvAXNkqOl5XEgPG-4). Also, the change of colour to light blue on scroll is not necessary, it can be maintained with a white background.
* [ ] Ensure the text of the _Unread/All_ selector is Medium.
* [ ] Open the tab on the _Unread_ notifications and not in the _All_.
* [ ] Add a floating button with the icon _op-read-all-24_ to mark all notifications as read. When used show a snackbar for some seconds with the text _All notifications marked as read_ as [designed here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=1004-216527&t=fMvAXNkqOl5XEgPG-4).
* [ ] The notification rows have more margin on the right than on the left (_mentioned_ is further away from the screen margin than the other info).
* [ ] The spacing and fonts of the work packages information seems to not be the same as in [the designs specified](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21264&t=fMvAXNkqOl5XEgPG-4).
* [ ] Ensure the description texts inside of the empty status uses a 12px font in Regular, fgColor-muted. Also add the link to notification settings in the text.
* [ ] Implement a long press selection to do bulk edit and mark as read similar to what Gmail does. See the [mockups for the concept here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=952-34138&t=xi3CAOiSg42CS7Ei-4) (related to <mention class="mention" data-id="56760" data-type="work_package" data-text="#56760">#56760</mention>).
### Open questions
* What is the aggregation time on notifications in the app? If I mention myself (which I don't know if it triggers a notification) I don't see the notification in the tab appearing immediately, is because there is some times where we check if there are notifications or not?
* How complex would it be to implement a long press selection to do bulk edit similar to what Gmail does? See the mockups for the concept here.
### Figma and visuals
https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=130-24392
### Focus
Notifications centre
### Current implementation
OpenProject version 0.0.39
<img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116041/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116042/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:236px;" src="/api/v3/attachments/116043/content">
### Acceptance criteria
* [ ] Ensure the header is a 22px font in Regular, fgColor-onEmphasis.
* [ ] A divider is missing between this view selector and the beginning of the list as [designed here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=1085-263254&t=fMvAXNkqOl5XEgPG-4). Also, the change of colour to light blue on scroll is not necessary, it can be maintained with a white background.
* [ ] Ensure the text of the _Unread/All_ selector is Medium.
* [ ] Open the tab on the _Unread_ notifications and not in the _All_.
* [ ] Add a floating button with the icon _op-read-all-24_ to mark all notifications as read. When used show a snackbar for some seconds with the text _All notifications marked as read_ as [designed here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=1004-216527&t=fMvAXNkqOl5XEgPG-4).
* [ ] The notification rows have more margin on the right than on the left (_mentioned_ is further away from the screen margin than the other info).
* [ ] The spacing and fonts of the work packages information seems to not be the same as in [the designs specified](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=127-21264&t=fMvAXNkqOl5XEgPG-4).
* [ ] Ensure the description texts inside of the empty status uses a 12px font in Regular, fgColor-muted. Also add the link to notification settings in the text.
* [ ] Implement a long press selection to do bulk edit and mark as read similar to what Gmail does. See the [mockups for the concept here](https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=952-34138&t=xi3CAOiSg42CS7Ei-4) (related to <mention class="mention" data-id="56760" data-type="work_package" data-text="#56760">#56760</mention>).
### Open questions
* What is the aggregation time on notifications in the app? If I mention myself (which I don't know if it triggers a notification) I don't see the notification in the tab appearing immediately, is because there is some times where we check if there are notifications or not?
* How complex would it be to implement a long press selection to do bulk edit similar to what Gmail does? See the mockups for the concept here.
### Figma and visuals
https://www.figma.com/design/arGHBRVi6WLJDLTv0YoOoo/Mobile-App---Spike?node-id=130-24392