See it in action (disabled vs enabled)
Apply the userscript using greasemonkey or similar to urls like https://phabricator.wikimedia.org/notification/query/unread/
Last active
January 14, 2019 18:55
-
-
Save joakin/c0e5dffc23aaf05175a580d24a2adefe to your computer and use it in GitHub Desktop.
Collapse repeated unread notifications in phabricator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name phab unread grouping | |
| // @namespace joaquin | |
| // @include https://phabricator.wikimedia.org/notification/* | |
| // @version 1 | |
| // @grant none | |
| // ==/UserScript== | |
| const notifos = Array.from(document.querySelectorAll('.phabricator-notification-list .phabricator-notification')) | |
| .map((el) => ({ | |
| el, | |
| task: el.querySelector('.phui-handle:not(.phui-link-person)') | |
| })) | |
| const groups = notifos.reduce((gs, n) => { | |
| let key = n.task.href | |
| gs[key] = gs[key] || { | |
| title: n.task.textContent, | |
| href: key, | |
| children: [] | |
| } | |
| gs[key].children.push(n) | |
| return gs | |
| }, {}) | |
| const notifoList = document.querySelector('.phabricator-notification-list') | |
| notifoList.innerHTML = '' | |
| Object.keys(groups).forEach((k) => { | |
| let group = groups[k] | |
| notifoList.appendChild(renderGroup(group)) | |
| }) | |
| function renderGroup(group) { | |
| var container = document.createElement('div') | |
| container.style.padding = '0.5em 1em' | |
| container.innerHTML = ` | |
| <h3 class='phui-header-header'> | |
| <span style='float: right;'> | |
| <span class="read visual-only phui-icon-view phui-font-fa fa-eye-slash" aria-hidden="true" style='cursor:pointer'></span> | |
| <span class='toggle' style='min-width: 40px; text-align: right; display: inline-block; cursor: pointer; font-weight: bold;'>< ${group.children.length}</span> | |
| </span> | |
| <a href='${group.href}'>${group.title}</a> | |
| </h3> | |
| <div class='grouped-notifos' style='display: none; font-size: 0.8em;'> | |
| </div> | |
| ` | |
| var toggle = container.querySelector('.toggle') | |
| var read = container.querySelector('.read') | |
| var grouped = container.querySelector('.grouped-notifos') | |
| read.addEventListener('click', () => { | |
| var i = document.createElement('img') | |
| i.src = group.href | |
| container.remove() | |
| }) | |
| toggle.addEventListener('click', () => { | |
| if (toggle.textContent.slice(0,1) === '<') { | |
| toggle.textContent='v'+toggle.textContent.slice(1) | |
| grouped.style.display = 'block' | |
| } else { | |
| toggle.textContent='<'+toggle.textContent.slice(1) | |
| grouped.style.display = 'none' | |
| } | |
| }) | |
| group.children.forEach((n) => | |
| grouped.appendChild(n.el.cloneNode(true))) | |
| return container | |
| } |
This is a clear win for usability. I like it a lot.
What's the license for this? I'd love to add it to my personal "make phab suck less" greasemonkey script.
where's the rest of your's? :P
What's the license for this? I'd love to add it to my personal "make phab suck less" greasemonkey script.
where's the rest of your's? :P
Btw, @20after4 made https://addons.mozilla.org/en-US/firefox/addon/phabricatornotificationgroups/ out of this gist
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What's the license for this? I'd love to add it to my personal "make phab suck less" greasemonkey script.