feat: #14094, notification drawer UX improvements

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

View File

@@ -108,10 +108,10 @@
"nodebb-plugin-spam-be-gone": "2.3.2",
"nodebb-plugin-web-push": "0.7.7",
"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-peace": "2.2.57",
"nodebb-theme-persona": "14.2.28",
"nodebb-theme-persona": "14.2.29",
"nodebb-widget-essentials": "7.0.43",
"nodemailer": "8.0.2",
"nprogress": "0.2.0",

View File

@@ -5,6 +5,7 @@ define('forum/header/notifications', function () {
notifications.prepareDOM = function () {
const notifTrigger = $('[component="notifications"] [data-bs-toggle="dropdown"]');
const listEl = document.querySelector('[component="notifications/list"]');
notifTrigger.on('show.bs.dropdown', async (ev) => {
const notifications = await app.require('notifications');
@@ -15,11 +16,26 @@ define('forum/header/notifications', function () {
notifTrigger.each((index, el) => {
const triggerEl = $(el);
const dropdownEl = triggerEl.parent().find('.dropdown-menu');
const listEl = dropdownEl.find('[component="notifications/list"]');
if (dropdownEl.hasClass('show')) {
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);

View File

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