fix: toast crash, notification dropdown, ticket detail editable, toolbar dropdowns
- Fix duplicate function showToast declaration causing infinite recursion (showToast declared twice → function hoisting → _origShowToast === self) Progress bar now inlined directly into _displayToast; Module 47 removed - Notification bell now opens a proper dropdown panel with unread items, per-item click-to-read, "Mark all read", close on outside click/Esc - Ticket detail drawer now has real editable fields (title, status, priority, assignee, description textarea, comment box) instead of read-only KV pairs; Save Changes and Post Comment buttons functional - Advanced ▾ filter dropdown: status/priority/assignee selects + Apply/Reset - Bulk Actions dropdown: Close/Reassign/Export/Delete with toast feedback - Generic .lt-dropdown-trigger toggle system (works for any future dropdown) - Add CSS sections 76 (notification panel) and 77 (dropdown widget + .lt-textarea) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -117,10 +117,49 @@
|
||||
</div>
|
||||
<!-- Theme toggle -->
|
||||
<button class="lt-theme-btn" id="lt-theme-btn" aria-label="Switch to light mode" title="Switch to light mode">☀</button>
|
||||
<!-- Notifications with badge -->
|
||||
<span class="lt-notif-wrap" id="lt-notif-bell" aria-label="Notifications">
|
||||
<button class="lt-btn lt-btn-sm" style="padding:0 0.5rem;min-height:32px;" aria-label="Open notifications">🔔</button>
|
||||
</span>
|
||||
<!-- Notifications with badge + dropdown -->
|
||||
<div class="lt-notif-dropdown-wrap" id="lt-notif-bell">
|
||||
<button class="lt-btn lt-btn-sm lt-notif-bell-btn" id="lt-notif-bell-btn" aria-label="Open notifications" aria-expanded="false" aria-haspopup="true" style="padding:0 0.5rem;min-height:32px;">🔔</button>
|
||||
<div class="lt-notif-panel" id="lt-notif-panel" aria-hidden="true">
|
||||
<div class="lt-notif-panel-header">
|
||||
<span>Notifications</span>
|
||||
<button class="lt-notif-panel-clear" id="lt-notif-clear-all">Mark all read</button>
|
||||
</div>
|
||||
<div class="lt-notif-panel-list">
|
||||
<div class="lt-notif-item lt-notif-item--unread">
|
||||
<span class="lt-notif-dot"></span>
|
||||
<div class="lt-notif-item-body">
|
||||
<div class="lt-notif-item-title">P1 alert: storage link-down</div>
|
||||
<div class="lt-notif-item-time">5 min ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-notif-item lt-notif-item--unread">
|
||||
<span class="lt-notif-dot"></span>
|
||||
<div class="lt-notif-item-body">
|
||||
<div class="lt-notif-item-title">Worker node-03 reconnected</div>
|
||||
<div class="lt-notif-item-time">12 min ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-notif-item lt-notif-item--unread">
|
||||
<span class="lt-notif-dot"></span>
|
||||
<div class="lt-notif-item-body">
|
||||
<div class="lt-notif-item-title">Export CSV complete — 42 rows</div>
|
||||
<div class="lt-notif-item-time">1 hr ago</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-notif-item">
|
||||
<span class="lt-notif-dot lt-notif-dot--read"></span>
|
||||
<div class="lt-notif-item-body">
|
||||
<div class="lt-notif-item-title">Scheduled maintenance completed</div>
|
||||
<div class="lt-notif-item-time">3 hr ago</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-notif-panel-footer">
|
||||
<button class="lt-btn lt-btn-sm lt-btn-ghost" style="width:100%;font-size:0.72rem">View all notifications</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Current user -->
|
||||
<span class="lt-header-user">operator</span>
|
||||
<!-- Admin badge (only show for admins) -->
|
||||
@@ -135,16 +174,64 @@
|
||||
<button class="lt-drawer-right-close" data-drawer-close aria-label="Close detail panel">✕</button>
|
||||
</div>
|
||||
<div class="lt-drawer-right-body">
|
||||
<div class="lt-kv-grid">
|
||||
<!-- Read-only meta row -->
|
||||
<div class="lt-kv-grid" style="margin-bottom:1rem">
|
||||
<div class="lt-kv-row"><span class="lt-kv-label">ID</span><span class="lt-kv-value lt-text-cyan">#123456789</span></div>
|
||||
<div class="lt-kv-row"><span class="lt-kv-label">Status</span><span class="lt-kv-value"><span class="lt-badge lt-badge-open">Open</span></span></div>
|
||||
<div class="lt-kv-row"><span class="lt-kv-label">Priority</span><span class="lt-kv-value"><span class="lt-badge lt-badge-p1">P1 Critical</span></span></div>
|
||||
<div class="lt-kv-row"><span class="lt-kv-label">Assignee</span><span class="lt-kv-value" style="display:flex;align-items:center;gap:0.5rem"><span class="lt-avatar lt-avatar--sm lt-avatar--orange">JD</span>jdoe</span></div>
|
||||
<div class="lt-kv-row"><span class="lt-kv-label">Created</span><span class="lt-kv-value">2026-03-10</span></div>
|
||||
<div class="lt-kv-row"><span class="lt-kv-label">Created</span><span class="lt-kv-value lt-text-muted">2026-03-10 09:14 UTC</span></div>
|
||||
</div>
|
||||
<div class="lt-divider-label" style="margin:1rem 0">Description</div>
|
||||
<p style="font-size:0.78rem;color:var(--text-secondary);line-height:1.6">Storage array link-down on compute-storage-01. Affects prod write path. Investigate RAID controller firmware.</p>
|
||||
<div class="lt-divider-label" style="margin:1rem 0">Activity</div>
|
||||
|
||||
<!-- Editable fields -->
|
||||
<div class="lt-form-group">
|
||||
<label class="lt-label" for="td-title">Title</label>
|
||||
<input id="td-title" class="lt-input" type="text" value="Storage array link-down on compute-storage-01">
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem">
|
||||
<div class="lt-form-group">
|
||||
<label class="lt-label" for="td-status">Status</label>
|
||||
<select id="td-status" class="lt-select">
|
||||
<option selected>Open</option>
|
||||
<option>In Progress</option>
|
||||
<option>Pending</option>
|
||||
<option>Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-form-group">
|
||||
<label class="lt-label" for="td-priority">Priority</label>
|
||||
<select id="td-priority" class="lt-select">
|
||||
<option selected>P1 Critical</option>
|
||||
<option>P2 High</option>
|
||||
<option>P3 Medium</option>
|
||||
<option>P4 Low</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-form-group">
|
||||
<label class="lt-label" for="td-assignee">Assignee</label>
|
||||
<select id="td-assignee" class="lt-select">
|
||||
<option>Unassigned</option>
|
||||
<option selected>jdoe</option>
|
||||
<option>operator</option>
|
||||
<option>admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-form-group">
|
||||
<label class="lt-label" for="td-desc">Description</label>
|
||||
<textarea id="td-desc" class="lt-input lt-textarea" rows="3" style="resize:vertical">Storage array link-down on compute-storage-01. Affects prod write path. Investigate RAID controller firmware.</textarea>
|
||||
</div>
|
||||
|
||||
<!-- Add a comment -->
|
||||
<div class="lt-divider-label" style="margin:1rem 0 0.75rem">Add Comment</div>
|
||||
<div class="lt-form-group" style="margin-bottom:0.5rem">
|
||||
<textarea id="td-comment" class="lt-input lt-textarea" rows="2" placeholder="Leave a comment…" style="resize:vertical"></textarea>
|
||||
</div>
|
||||
<button class="lt-btn lt-btn-sm" onclick="
|
||||
const c=document.getElementById('td-comment');
|
||||
if(c.value.trim()){lt.toast.success('Comment posted');c.value='';}
|
||||
else lt.toast.warning('Comment is empty');
|
||||
">Post Comment</button>
|
||||
|
||||
<!-- Activity timeline -->
|
||||
<div class="lt-divider-label" style="margin:1rem 0 0.75rem">Activity</div>
|
||||
<div class="lt-timeline">
|
||||
<div class="lt-timeline-item lt-timeline-item--orange">
|
||||
<div class="lt-timeline-meta"><span class="lt-timeline-actor">jdoe</span> assigned ticket<span class="lt-timeline-time">2h ago</span></div>
|
||||
@@ -161,8 +248,8 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-drawer-right-footer">
|
||||
<button class="lt-btn lt-btn-sm" onclick="lt.rightDrawer.close('lt-detail-drawer')">Close</button>
|
||||
<button class="lt-btn lt-btn-primary lt-btn-sm">Save Changes</button>
|
||||
<button class="lt-btn lt-btn-sm" onclick="lt.rightDrawer.close('lt-detail-drawer')">Cancel</button>
|
||||
<button class="lt-btn lt-btn-primary lt-btn-sm" onclick="lt.toast.success('Ticket #123456789 updated')">Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-detail-overlay" class="lt-drawer-right-overlay"></div>
|
||||
@@ -293,14 +380,65 @@
|
||||
<div class="lt-toolbar">
|
||||
<div class="lt-toolbar-left">
|
||||
<div class="lt-search">
|
||||
<input type="search" class="lt-input lt-search-input"
|
||||
<input type="search" class="lt-input lt-search-input" id="ticket-search"
|
||||
placeholder="Search tickets..." aria-label="Search">
|
||||
</div>
|
||||
<button class="lt-btn lt-btn-sm">Advanced ▾</button>
|
||||
<!-- Advanced filter dropdown -->
|
||||
<div class="lt-dropdown-wrap" id="adv-filter-wrap">
|
||||
<button class="lt-btn lt-btn-sm lt-dropdown-trigger" id="adv-filter-btn" aria-expanded="false" aria-haspopup="true">Advanced ▾</button>
|
||||
<div class="lt-dropdown-panel" id="adv-filter-panel" aria-hidden="true">
|
||||
<div style="padding:0.75rem;display:grid;gap:0.5rem;min-width:240px">
|
||||
<div class="lt-form-group" style="margin:0">
|
||||
<label class="lt-label" style="font-size:0.7rem">Status</label>
|
||||
<select class="lt-select" style="font-size:0.75rem">
|
||||
<option value="">All</option>
|
||||
<option>Open</option>
|
||||
<option>In Progress</option>
|
||||
<option>Pending</option>
|
||||
<option>Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-form-group" style="margin:0">
|
||||
<label class="lt-label" style="font-size:0.7rem">Priority</label>
|
||||
<select class="lt-select" style="font-size:0.75rem">
|
||||
<option value="">All</option>
|
||||
<option>P1 Critical</option>
|
||||
<option>P2 High</option>
|
||||
<option>P3 Medium</option>
|
||||
<option>P4 Low</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-form-group" style="margin:0">
|
||||
<label class="lt-label" style="font-size:0.7rem">Assignee</label>
|
||||
<select class="lt-select" style="font-size:0.75rem">
|
||||
<option value="">Anyone</option>
|
||||
<option>Unassigned</option>
|
||||
<option>jdoe</option>
|
||||
<option>operator</option>
|
||||
<option>admin</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex;gap:0.5rem;margin-top:0.25rem">
|
||||
<button class="lt-btn lt-btn-sm lt-btn-primary" style="flex:1" onclick="lt.toast.info('Filters applied');document.getElementById('adv-filter-panel').setAttribute('aria-hidden','true');document.getElementById('adv-filter-btn').setAttribute('aria-expanded','false')">Apply</button>
|
||||
<button class="lt-btn lt-btn-sm lt-btn-ghost" onclick="lt.toast.info('Filters cleared')">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-toolbar-right">
|
||||
<span class="lt-text-muted lt-text-xs">42 results</span>
|
||||
<button class="lt-btn lt-btn-sm lt-btn-ghost">Bulk Actions</button>
|
||||
<span class="lt-text-muted lt-text-xs" id="ticket-result-count">42 results</span>
|
||||
<!-- Bulk actions dropdown -->
|
||||
<div class="lt-dropdown-wrap" id="bulk-action-wrap">
|
||||
<button class="lt-btn lt-btn-sm lt-btn-ghost lt-dropdown-trigger" id="bulk-action-btn" aria-expanded="false" aria-haspopup="true">Bulk Actions ▾</button>
|
||||
<div class="lt-dropdown-panel lt-dropdown-panel--right" id="bulk-action-panel" aria-hidden="true">
|
||||
<button class="lt-dropdown-item" onclick="lt.toast.success('Closed selected tickets');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">✓ Close Selected</button>
|
||||
<button class="lt-dropdown-item" onclick="lt.toast.info('Reassign dialog…');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">↩ Reassign…</button>
|
||||
<button class="lt-dropdown-item" onclick="lt.toast.info('Exporting selected…');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">⤓ Export Selected</button>
|
||||
<div class="lt-dropdown-divider"></div>
|
||||
<button class="lt-dropdown-item lt-dropdown-item--danger" onclick="lt.toast.error('Deleted selected');this.closest('.lt-dropdown-panel').setAttribute('aria-hidden','true')">🗑 Delete Selected</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1721,6 +1859,86 @@ Storage array link-down on `compute-storage-01`.
|
||||
// Sidebar submenus (re-init for demo sidebar)
|
||||
lt.sidebarSubmenus.init(document.querySelector('.lt-section-body'));
|
||||
|
||||
// ----- Notification bell dropdown -----
|
||||
(function() {
|
||||
const btn = document.getElementById('lt-notif-bell-btn');
|
||||
const panel = document.getElementById('lt-notif-panel');
|
||||
if (!btn || !panel) return;
|
||||
|
||||
function open() {
|
||||
panel.setAttribute('aria-hidden', 'false');
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
// Mark all as read visually
|
||||
}
|
||||
function close() {
|
||||
panel.setAttribute('aria-hidden', 'true');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
|
||||
btn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
panel.getAttribute('aria-hidden') === 'false' ? close() : open();
|
||||
});
|
||||
|
||||
// "Mark all read" button
|
||||
const clearBtn = document.getElementById('lt-notif-clear-all');
|
||||
if (clearBtn) clearBtn.addEventListener('click', () => {
|
||||
panel.querySelectorAll('.lt-notif-item--unread').forEach(el => el.classList.remove('lt-notif-item--unread'));
|
||||
panel.querySelectorAll('.lt-notif-dot').forEach(el => { el.classList.remove('lt-notif-dot'); el.classList.add('lt-notif-dot', 'lt-notif-dot--read'); });
|
||||
lt.notif.clear('#lt-notif-bell');
|
||||
lt.toast.info('All notifications marked as read');
|
||||
});
|
||||
|
||||
// Individual item click
|
||||
panel.querySelectorAll('.lt-notif-item').forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
item.classList.remove('lt-notif-item--unread');
|
||||
const dot = item.querySelector('.lt-notif-dot');
|
||||
if (dot) { dot.classList.add('lt-notif-dot--read'); }
|
||||
close();
|
||||
});
|
||||
});
|
||||
|
||||
// Close on outside click
|
||||
document.addEventListener('click', e => {
|
||||
if (!document.getElementById('lt-notif-bell').contains(e.target)) close();
|
||||
});
|
||||
|
||||
// Esc close
|
||||
document.addEventListener('keydown', e => { if (e.key === 'Escape') close(); });
|
||||
}());
|
||||
|
||||
// ----- Generic dropdown toggle (Advanced filter + Bulk Actions) -----
|
||||
document.querySelectorAll('.lt-dropdown-trigger').forEach(btn => {
|
||||
const wrap = btn.closest('.lt-dropdown-wrap');
|
||||
const panel = wrap && wrap.querySelector('.lt-dropdown-panel');
|
||||
if (!panel) return;
|
||||
|
||||
btn.addEventListener('click', e => {
|
||||
e.stopPropagation();
|
||||
const isOpen = panel.getAttribute('aria-hidden') === 'false';
|
||||
// Close all other dropdowns first
|
||||
document.querySelectorAll('.lt-dropdown-panel[aria-hidden="false"]').forEach(p => {
|
||||
p.setAttribute('aria-hidden', 'true');
|
||||
const t = p.closest('.lt-dropdown-wrap').querySelector('.lt-dropdown-trigger');
|
||||
if (t) t.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
if (!isOpen) {
|
||||
panel.setAttribute('aria-hidden', 'false');
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Close dropdowns on outside click / Esc
|
||||
document.addEventListener('click', () => {
|
||||
document.querySelectorAll('.lt-dropdown-panel[aria-hidden="false"]').forEach(p => {
|
||||
p.setAttribute('aria-hidden', 'true');
|
||||
const t = p.closest('.lt-dropdown-wrap').querySelector('.lt-dropdown-trigger');
|
||||
if (t) t.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
// Tab bar switching
|
||||
document.querySelectorAll('.lt-tab-bar').forEach(bar => {
|
||||
bar.addEventListener('click', e => {
|
||||
|
||||
Reference in New Issue
Block a user