chore: snapshot notifications hardening and css/docs alignment
This commit is contained in:
@@ -1,125 +1,159 @@
|
||||
@layer components {
|
||||
ul.app-notification-dropdown {
|
||||
width: 360px;
|
||||
padding: 0;
|
||||
}
|
||||
ul.app-notification-dropdown {
|
||||
width: 360px;
|
||||
padding: 0;
|
||||
--app-notification-text: var(--app-dropdown-color);
|
||||
--app-notification-muted: var(--app-muted-color);
|
||||
--app-notification-hover: var(--app-dropdown-hover-background-color);
|
||||
--app-notification-border: var(--app-dropdown-border-color);
|
||||
--app-notification-focus: var(--app-primary-focus);
|
||||
}
|
||||
|
||||
.app-notification-dropdown__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--app-border, #dee2e6);
|
||||
}
|
||||
.app-notification-dropdown__header {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--app-notification-border);
|
||||
}
|
||||
|
||||
.app-notification-dropdown__title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.app-notification-dropdown__title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--app-notification-text);
|
||||
}
|
||||
|
||||
.app-notification-dropdown__mark-all {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--app-primary, #105433);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
.app-notification-dropdown__mark-all {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--app-primary);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-notification-dropdown__mark-all:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.app-notification-dropdown__mark-all:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.app-notification-dropdown__body {
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
padding: 0;
|
||||
}
|
||||
.app-notification-dropdown__body {
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-notification-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--app-border-light, #f0f0f0);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.app-notification-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--app-notification-border);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
color: var(--app-notification-text);
|
||||
}
|
||||
|
||||
.app-notification-item:hover {
|
||||
background: var(--app-hover, #f8f9fa);
|
||||
}
|
||||
/* Keep row-link notifications visually stable despite global role-based styles. */
|
||||
.app-notification-item--link {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--app-notification-border);
|
||||
outline: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--app-notification-text);
|
||||
font: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.app-notification-item--unread {
|
||||
border-left: 3px solid var(--app-primary, #105433);
|
||||
}
|
||||
.app-notification-item--link:is(:hover, :active, :focus) {
|
||||
background: var(--app-notification-hover);
|
||||
box-shadow: none;
|
||||
color: var(--app-notification-text);
|
||||
}
|
||||
|
||||
.app-notification-item__icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
margin-top: 2px;
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
.app-notification-item--link:focus-visible {
|
||||
outline: 2px solid var(--app-notification-focus);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.app-notification-item--unread .app-notification-item__icon {
|
||||
color: var(--app-primary, #105433);
|
||||
}
|
||||
.app-notification-item:hover {
|
||||
background: var(--app-notification-hover);
|
||||
}
|
||||
|
||||
.app-notification-item__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.app-notification-item--unread {
|
||||
border-left: 3px solid var(--app-primary);
|
||||
}
|
||||
|
||||
.app-notification-item__title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
margin: 0 0 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-notification-item__icon {
|
||||
flex-shrink: 0;
|
||||
font-size: 16px;
|
||||
margin-top: 2px;
|
||||
color: var(--app-notification-muted);
|
||||
}
|
||||
|
||||
.app-notification-item__body {
|
||||
font-size: 12px;
|
||||
color: var(--app-muted, #6c757d);
|
||||
line-height: 1.3;
|
||||
margin: 0 0 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.app-notification-item--unread .app-notification-item__icon {
|
||||
color: var(--app-primary);
|
||||
}
|
||||
|
||||
.app-notification-item__time {
|
||||
font-size: 11px;
|
||||
color: var(--app-muted, #6c757d);
|
||||
}
|
||||
.app-notification-item__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-notification-item__actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.app-notification-item__title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--app-notification-text);
|
||||
line-height: 1.3;
|
||||
margin: 0 0 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-notification-item:hover .app-notification-item__actions {
|
||||
opacity: 1;
|
||||
}
|
||||
.app-notification-item__body {
|
||||
font-size: 12px;
|
||||
color: var(--app-notification-muted);
|
||||
line-height: 1.3;
|
||||
margin: 0 0 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-notification-item__action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--app-muted, #6c757d);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.app-notification-item__time {
|
||||
font-size: 11px;
|
||||
color: var(--app-notification-muted);
|
||||
}
|
||||
|
||||
.app-notification-item__action-btn:hover {
|
||||
color: var(--app-text, #212529);
|
||||
background: var(--app-border-light, #f0f0f0);
|
||||
}
|
||||
.app-notification-item__actions {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.app-notification-item:hover .app-notification-item__actions,
|
||||
.app-notification-item:focus-within .app-notification-item__actions {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-notification-item__action-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--app-notification-muted);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
line-height: 1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.app-notification-item__action-btn:hover {
|
||||
color: var(--app-notification-text);
|
||||
background: var(--app-notification-border);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +1,40 @@
|
||||
@layer layout {
|
||||
.app-topbar-notification-menu > summary {
|
||||
position: relative;
|
||||
}
|
||||
.app-topbar-notification-menu {
|
||||
--app-notification-badge-bg: var(--app-action-danger-background);
|
||||
--app-notification-badge-color: var(--app-action-danger-color);
|
||||
}
|
||||
|
||||
.app-notification-badge {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
padding: 0 4px;
|
||||
border-radius: 9px;
|
||||
background: var(--app-danger, #dc3545);
|
||||
color: #fff;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
.app-topbar-notification-menu > summary {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-topbar-notification-menu > summary::after {
|
||||
display: none;
|
||||
content: none;
|
||||
}
|
||||
|
||||
.app-topbar-notification-menu > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-topbar-notification-menu > summary::marker {
|
||||
content: "";
|
||||
}
|
||||
|
||||
.app-notification-badge {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0px;
|
||||
min-width: 13px;
|
||||
height: 13px;
|
||||
padding: 0 3px;
|
||||
border-radius: 999px;
|
||||
background: var(--app-notification-badge-bg);
|
||||
color: var(--app-notification-badge-color);
|
||||
font-size: 7px;
|
||||
font-weight: 600;
|
||||
line-height: 13px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,10 +5,16 @@
|
||||
* notification list rendering, mark-read and dismiss actions.
|
||||
*/
|
||||
|
||||
import { telemetry } from '../../../../js/core/app-telemetry.js';
|
||||
import { getAppBase } from '../../../../js/pages/app-list-utils.js';
|
||||
|
||||
const POLL_INTERVAL_MS = 60_000;
|
||||
const TYPE_ICONS = {
|
||||
'user.created': 'bi-person-plus',
|
||||
'user.deleted': 'bi-person-dash',
|
||||
'user.activated': 'bi-person-check',
|
||||
'user.deactivated': 'bi-person-x',
|
||||
'user.assignment_changed': 'bi-diagram-3',
|
||||
'system': 'bi-gear',
|
||||
};
|
||||
|
||||
@@ -47,6 +53,8 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
const details = root.querySelector('[data-notification-bell]');
|
||||
const dropdown = root.querySelector('[data-notification-dropdown]');
|
||||
if (!details || !dropdown) return { destroy() {} };
|
||||
const appBase = getAppBase();
|
||||
const endpoint = (path) => new URL(path, appBase).toString();
|
||||
|
||||
const badge = details.querySelector('[data-notification-badge]');
|
||||
const list = dropdown.querySelector('[data-notification-list]');
|
||||
@@ -109,15 +117,34 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
`<button type="button" class="app-notification-item__action-btn" data-action="dismiss" title="${escapeHtml(dropdown.dataset.labelDismiss || '')}"><i class="bi bi-x"></i></button>` +
|
||||
`</div>`;
|
||||
|
||||
// Click on item navigates if link exists
|
||||
item.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
if (n.link) {
|
||||
// Keyboard + click navigation for items with a link
|
||||
if (n.link) {
|
||||
item.classList.add('app-notification-item--link');
|
||||
item.setAttribute('role', 'link');
|
||||
item.setAttribute('tabindex', '0');
|
||||
|
||||
const navigate = () => {
|
||||
if (n.is_read === 0) markRead(n.id);
|
||||
const base = document.querySelector('base')?.getAttribute('href') || '/';
|
||||
window.location.href = base + n.link;
|
||||
}
|
||||
}, { signal });
|
||||
window.location.href = endpoint(String(n.link));
|
||||
};
|
||||
|
||||
item.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
navigate();
|
||||
}, { signal });
|
||||
|
||||
item.addEventListener('keydown', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
navigate();
|
||||
}
|
||||
}, { signal });
|
||||
} else {
|
||||
item.addEventListener('click', (e) => {
|
||||
if (e.target.closest('[data-action]')) return;
|
||||
}, { signal });
|
||||
}
|
||||
|
||||
// Action buttons
|
||||
item.addEventListener('click', (e) => {
|
||||
@@ -135,21 +162,33 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
// --- API ---
|
||||
async function loadNotifications() {
|
||||
try {
|
||||
const data = await fetchJson('notifications/list-data', { signal });
|
||||
const data = await fetchJson(endpoint('notifications/list-data'), { signal });
|
||||
if (data.ok) {
|
||||
renderNotifications(data.notifications || []);
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: load failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'load' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function pollUnreadCount() {
|
||||
try {
|
||||
const data = await fetchJson('notifications/unread-count-data', { signal });
|
||||
const data = await fetchJson(endpoint('notifications/unread-count-data'), { signal });
|
||||
if (data.ok) {
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: poll failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'poll' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function markRead(id) {
|
||||
@@ -159,7 +198,7 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
body.set('id', String(id));
|
||||
if (csrf.key) body.set(csrf.key, csrf.token);
|
||||
|
||||
const data = await fetchJson('notifications/mark-read-data', {
|
||||
const data = await fetchJson(endpoint('notifications/mark-read-data'), {
|
||||
method: 'POST',
|
||||
body,
|
||||
signal,
|
||||
@@ -168,7 +207,13 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
if (details.open) loadNotifications();
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: mark-read failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'mark-read' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function markAllRead() {
|
||||
@@ -178,7 +223,7 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
body.set('all', '1');
|
||||
if (csrf.key) body.set(csrf.key, csrf.token);
|
||||
|
||||
const data = await fetchJson('notifications/mark-read-data', {
|
||||
const data = await fetchJson(endpoint('notifications/mark-read-data'), {
|
||||
method: 'POST',
|
||||
body,
|
||||
signal,
|
||||
@@ -187,7 +232,13 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
updateBadge(data.unread_count ?? 0);
|
||||
if (details.open) loadNotifications();
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: mark-all-read failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'mark-all-read' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function dismiss(id) {
|
||||
@@ -197,7 +248,7 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
body.set('id', String(id));
|
||||
if (csrf.key) body.set(csrf.key, csrf.token);
|
||||
|
||||
const data = await fetchJson('notifications/delete-data', {
|
||||
const data = await fetchJson(endpoint('notifications/delete-data'), {
|
||||
method: 'POST',
|
||||
body,
|
||||
signal,
|
||||
@@ -212,7 +263,13 @@ export function initNotificationBell(root = document, config = {}) {
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch { /* swallow */ }
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === 'AbortError') return;
|
||||
telemetry.capture('warn_once', {
|
||||
message: 'Notification bell: dismiss failed',
|
||||
meta: { module: 'notifications', component: 'notification-bell', action: 'dismiss' },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// --- Events ---
|
||||
|
||||
Reference in New Issue
Block a user