Content
View differences
Updated by Marc Alcobé over 4 years ago
**As a** project member
**I want to** be reminded that when I enter notification center, no notification is selected by default
**so that** I can start by clicking on any unread notification (and not necessarily the one at the top)
**Acceptance Criteria**
* When the user enters notification center by clicking on the bell icon on the top bar, they arrive at the split screen view with no work package selected.
* When unread notifications exist in list view but none is selected, the right panel is empty and displays the empty state (see visual 1).
* When clicking on a notification, the right side is replaced by the normal details view.
* When there are no unread notifications in list view (because they have all been read or because no new unread ones exist since last visit), both the middle pane and right panes display empty states (see visual 2).
* The notification row will consist of a highlighted box (with grey background) with two texts:
* Main text: "New notifications will appear here when there is activity that concerns you"
* Sub-text: "To view and change your notification settings, click here". The click here is a link that will lead you to your notification settings.
* The split screen will content the illustration attached to this work package and the text: "Looks like you’re all caught up!"
* When the user is using a filter or view (from the sidebar) where there are no notifications but there are notifications in other filters or views (see visual 3)
* The notification row will consist of a highlighted box (with grey background) with two texts:
* Main text: "There are no notifications in this view at the moment"
* Sub-text: "To view and change your notification settings, click here". The click here is a link that will lead you to your notification settings.
* The split screen will content the illustration attached (same as visual 1) to this work package and the text: "Change of involvement or go back to the
Inbox to view notifications"
**Visuals**
_Visual 1: No notification selected_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22013/content"></div></figure>
_Visual 2: No unread notifications_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22014/content"></div></figure>
_Visual 3: No notifications in this view_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22603/content"></div></figure>
**Mockups in Figma**
\- Empty State _No notification selected_: [https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=137%3A2423](https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=137%3A2423)
\- Empty State _No unread notifications:_ [_https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=584%3A2014_](https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=584%3A2014)
**I want to** be reminded that when I enter notification center, no notification is selected by default
**so that** I can start by clicking on any unread notification (and not necessarily the one at the top)
**Acceptance Criteria**
* When the user enters notification center by clicking on the bell icon on the top bar, they arrive at the split screen view with no work package selected.
* When unread notifications exist in list view but none is selected, the right panel is empty and displays the empty state (see visual 1).
* When clicking on a notification, the right side is replaced by the normal details view.
* When there are no unread notifications in list view (because they have all been read or because no new unread ones exist since last visit), both the middle pane and right panes display empty states (see visual 2).
* The notification row will consist of a highlighted box (with grey background) with two texts:
* Main text: "New notifications will appear here when there is activity that concerns you"
* Sub-text: "To view and change your notification settings, click here". The click here is a link that will lead you to your notification settings.
* The split screen will content the illustration attached to this work package and the text: "Looks like you’re all caught up!"
* When the user is using a filter or view (from the sidebar) where there are no notifications but there are notifications in other filters or views (see visual 3)
* The notification row will consist of a highlighted box (with grey background) with two texts:
* Main text: "There are no notifications in this view at the moment"
* Sub-text: "To view and change your notification settings, click here". The click here is a link that will lead you to your notification settings.
* The split screen will content the illustration attached (same as visual 1) to this work package and the text: "Change of involvement or go back to the
Inbox to view notifications"
**Visuals**
_Visual 1: No notification selected_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22013/content"></div></figure>
_Visual 2: No unread notifications_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22014/content"></div></figure>
_Visual 3: No notifications in this view_
<figure class="image op-uc-figure" style="width:75%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/22603/content"></div></figure>
**Mockups in Figma**
\- Empty State _No notification selected_: [https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=137%3A2423](https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=137%3A2423)
\- Empty State _No unread notifications:_ [_https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=584%3A2014_](https://www.figma.com/file/54psSIYZuUgcyXrpGxHB1Z/Notification-Center-Main-View?node-id=584%3A2014)