Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2026-05-07 05:37:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: #14094, notification drawer UX improvements

Browse Source
This commit is contained in:
Julian Lam
2026-03-16 12:33:47 -04:00
parent 2eb0964d3a
commit 6c01a5d84f
3 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
install/package.json
View File

@@ -108,10 +108,10 @@
"nodebb-plugin-spam-be-gone": "2.3.2", "nodebb-plugin-spam-be-gone": "2.3.2",
"nodebb-plugin-web-push": "0.7.7", "nodebb-plugin-web-push": "0.7.7",
"nodebb-rewards-essentials": "1.0.2", "nodebb-rewards-essentials": "1.0.2",
"nodebb-theme-harmony": "2.2.54", "nodebb-theme-harmony": "2.2.55",
"nodebb-theme-lavender": "7.1.21", "nodebb-theme-lavender": "7.1.21",
"nodebb-theme-peace": "2.2.57", "nodebb-theme-peace": "2.2.57",
"nodebb-theme-persona": "14.2.28", "nodebb-theme-persona": "14.2.29",
"nodebb-widget-essentials": "7.0.43", "nodebb-widget-essentials": "7.0.43",
"nodemailer": "8.0.2", "nodemailer": "8.0.2",
"nprogress": "0.2.0", "nprogress": "0.2.0",

18
public/src/client/header/notifications.js
View File

@@ -5,6 +5,7 @@ define('forum/header/notifications', function () {
notifications.prepareDOM = function () { notifications.prepareDOM = function () {
const notifTrigger = $('[component="notifications"] [data-bs-toggle="dropdown"]'); const notifTrigger = $('[component="notifications"] [data-bs-toggle="dropdown"]');
const listEl = document.querySelector('[component="notifications/list"]');
notifTrigger.on('show.bs.dropdown', async (ev) => { notifTrigger.on('show.bs.dropdown', async (ev) => {
const notifications = await app.require('notifications'); const notifications = await app.require('notifications');
@@ -15,11 +16,26 @@ define('forum/header/notifications', function () {
notifTrigger.each((index, el) => { notifTrigger.each((index, el) => {
const triggerEl = $(el); const triggerEl = $(el);
const dropdownEl = triggerEl.parent().find('.dropdown-menu'); const dropdownEl = triggerEl.parent().find('.dropdown-menu');
const listEl = dropdownEl.find('[component="notifications/list"]');
if (dropdownEl.hasClass('show')) { if (dropdownEl.hasClass('show')) {
app.require('notifications').then((notifications) => { app.require('notifications').then((notifications) => {
notifications.loadNotifications(triggerEl, dropdownEl.find('[component="notifications/list"]')); notifications.loadNotifications(triggerEl, listEl);
}); });
} }
dropdownEl.on('click', '[data-filter]', (e) => {
const filter = e.target.getAttribute('data-filter');
if (filter === 'unread') {
listEl.get(0).querySelectorAll('[data-nid]:not(.unread)').forEach((e) => {
e.classList.toggle('hidden', true);
});
} else {
listEl.get(0).querySelectorAll('[data-nid]').forEach((e) => {
e.classList.toggle('hidden', false);
});
}
});
}); });
socket.removeListener('event:new_notification', onNewNotification); socket.removeListener('event:new_notification', onNewNotification);

6
public/src/modules/notifications.js
View File

@@ -42,7 +42,7 @@ define('notifications', [
hooks.fire('filter:notifications.load', { notifications: notifs }).then(({ notifications }) => { hooks.fire('filter:notifications.load', { notifications: notifs }).then(({ notifications }) => {
app.parseAndTranslate('partials/notifications_list', { notifications }, function (html) { app.parseAndTranslate('partials/notifications_list', { notifications }, function (html) {
notifList.html(html); notifList.html(html);
notifList.off('click').on('click', '[data-nid]', function (ev) { notifList.off('click').on('click', '[component="notifications/item/link"]', function (ev) {
const notifEl = $(this); const notifEl = $(this);
if (scrollToPostIndexIfOnPage(notifEl)) { if (scrollToPostIndexIfOnPage(notifEl)) {
ev.stopPropagation(); ev.stopPropagation();
@@ -62,6 +62,9 @@ define('notifications', [
components.get('notifications').on('click', '.mark-all-read', () => { components.get('notifications').on('click', '.mark-all-read', () => {
Notifications.markAllRead(); Notifications.markAllRead();
}); });
components.get('notifications').on('click', `[href="${config.relative_path}/notifications"]`, () => {
triggerEl.dropdown('toggle');
});
Notifications.handleUnreadButton(notifList); Notifications.handleUnreadButton(notifList);
@@ -86,7 +89,6 @@ define('notifications', [
$this.find('.unread').toggleClass('hidden', unread); $this.find('.unread').toggleClass('hidden', unread);
$this.find('.read').toggleClass('hidden', !unread); $this.find('.read').toggleClass('hidden', !unread);
}); });
return false;
}); });
}; };