Make new notifications behave more like old notifications UI
See original GitHub issueSome people like the new UI, some people hate it.
GitHub (I don’t know when) added “group by repository” which kinda makes the UI look like the old one (I personally like this view), but there are some things missing from this and some things that can be removed.
- Linkify
user/repo
when grouping by notifications is applied, allows you to quickly go to a repo (there is no link on notifications UI that lets you do this). - Remove redundant
user/repo
on each notification when grouping by notifications is applied, also move issue/PR id down. - Move notification count and notification reasons on top of each other, thay should make more room for notification title
- Convert blue dots on the left to blue bars, similar to how it looks like on issue/PR lists
Why am I opening this issue: reading this https://twitter.com/ljharb/status/1253018009091731456 (/cc @ljharb) Why don’t I have any screenshots included: I’m opening this issue from mobile.
Some personal preferences in here, open to discussion and be proven wrong.
Issue Analytics
- State:
- Created 3 years ago
- Reactions:6
- Comments:16 (9 by maintainers)
Top Results From Across the Web
Make new notifications behave more like old notifications UI
Linkify user/repo when grouping by notifications is applied, allows you to quickly go to a repo (there is no link on notifications UI...
Read more >UI Cheat Sheet: in-app notifications | by Tess Gadd
In this setup, the user first sees a badge on the notification icon, then when they click on it, they are taken to...
Read more >Create a Custom Notification Layout | Android Developers
Create custom layout for the content area · Build a basic notification with NotificationCompat.Builder . · Call setStyle() , passing it an ...
Read more >A Comprehensive Guide to Notification Design - Toptal
Notifications are an indispensable part of digital products, but they should never harm the user experience. Proper notification design during the product ...
Read more >Android notifications - Material Design
These two types of notifications are the most effective: ... For example, a messaging app might have a summary notification that says "3...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Quick testing with CSS for option 1:
Style 1
CSS
Style 2
CSS
Some
font-size
trickery going on here, but IMO it’s fine (considering GH moved to using utility classes for everything).Style 2 looks good structurally, but only if all issue/PR numbers contain the same number of digits. This also fails for releases, invitations, vulnerabilities, and types of notifications.
Style 1 looks promising, considering that the id’s are already all over the place.
WDYT?
For option 2, that would require JS.
Actually, I tweaked it again so it’s now:
And this gives me:
So much neater to me and I can see a lot more in one window than I could before, so again @fregante thanks for the idea