[Feature:Notifications] Improve Panel Interactivity#12012
Conversation
…into noti-mark-seen
Index no longer needed (for now) since we are not doing the mark all as seen option. I commented out mark all as seen but did not delete so that it is easy to bring back in the future if necessary. Made the notifications array reactive so we can apply updates to its seen/unseen status without having to reload the page.
Will break into a separate PR
Bug where if 2 threads in different courses had the same ID, only the first one would be visually marked as seen.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #12012 +/- ##
============================================
- Coverage 21.69% 21.68% -0.01%
- Complexity 9588 9591 +3
============================================
Files 268 268
Lines 36605 36618 +13
Branches 475 475
============================================
Hits 7940 7940
- Misses 28194 28207 +13
Partials 471 471
Flags with carried forward coverage won't be shown. Click here to find out more. 🚀 New features to boost your workflow:
|
While the 2 pages are not the same design yet, this should be consistent across both.
…into improve-noti-ui
1. Made the entire container clickable again 2. Added a tooltip for the course button 3. Changed the mark seen anchor to a button
Removed commented out code and switch case
To reflect the changes made in #12012
Rkoester47
left a comment
There was a problem hiding this comment.
I tested this new UI improvement on Firefox, Edge and Chrome in both light and dark modes. I was able to successfully get the hover functionality for both the course name, as well as the mark as seen icon. In both light and dark mode, these would underline/ highlight as intended. Clicking on the course name, which was underlined when hovered, did bring me to the course page.
However, in the PR if I understand correctly you describe that there should be an underline effect when hovering on the content itself. I was not able to get an underline on the content of the notification itself, in any browser or theme.
Hovering over the icon on the left did give a description ("gradeable"), but it would not become highlighted like the mark as seen icon, nor does the actual description of the content get underlined. If underlining the body text or this left icon is the intention of the changes, there may be an issue.
Otherwise, I think this is a strong change so far and I think linking directly to the course when selecting the course name is a smart feature. The new bolder font for the notification is attention grabbing, as a notification should probably be.
Thanks for the review! I went back on my original design choices and decided to make the entire container clickable again. Unfortunately, I forgot to update that part of the PR description. It is now up to date if you want to give it a second look. |
Rkoester47
left a comment
There was a problem hiding this comment.
Okay that makes sense! I checked again with your updated PR in mind, and everything mentioned works as described. This change looks to be in good order, and makes sense as an improvement to the notifications on the home page. The list is more eye-catching, and the individual notifications contain more functionality with the course name link on each.
Indentation
Implementation is now the same as it was
This PR is branched from #12007, which refactored the structure of the notification containers to support multiple anchor elements (e.g., one for linking to the notification and another for marking it as read). This structural change was necessary to enable the functionality implemented here.
Why is this Change Important & Necessary?
The notifications panel lacked clear visual hierarchy and interactivity, making the UI feel flat and less intuitive.
What is the New Behavior?
Clicking on the course name in a notification now navigates to that course's notifications page.
A star icon now appears next to gradeable notifications. I also added this icon on the course notifications page:
UI improvements:
This change is inspired by GMail's inbox, where the entire container is clickable, along with separate items within it being clickable:
Before
After
Full View (Unread Only)
Full View (Unread Only, Dark Mode)
What steps should a reviewer take to reproduce or test the bug or new feature?
Other information
This is not a breaking change.