Align UI with web_template TDS v1.2 standards
- Replace lt-chip priority badges with lt-badge lt-badge-p[1-4] across DashboardView, TemplatesView (matches web_template sticky table pattern) - Add lt-theme-btn theme toggle to header-right; wire lt.theme.toggle() - Replace ASCII art empty state with lt-empty-state component in dashboard - Standardize tab wrapper lt-tabs → lt-tab-bar in Dashboard and TicketView - Add missing lt-keys-help modal to layout_footer (fixes ? key doing nothing) - Add lt-cmd-overlay command palette container + lt.cmdPalette.init() nav - Add .lt-timeline-action CSS rule (used in TicketView, was undefined) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+4
-3
@@ -4465,9 +4465,10 @@ body.lt-is-offline .lt-main { margin-top: 2rem; transition: margin-top 0.25s eas
|
|||||||
margin-bottom: 0.2rem;
|
margin-bottom: 0.2rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.lt-timeline-actor { color: var(--accent-cyan); }
|
.lt-timeline-actor { color: var(--accent-cyan); }
|
||||||
.lt-timeline-time { margin-left: auto; white-space: nowrap; }
|
.lt-timeline-action { color: var(--text-secondary); font-style: italic; }
|
||||||
.lt-timeline-body { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
|
.lt-timeline-time { margin-left: auto; white-space: nowrap; }
|
||||||
|
.lt-timeline-body { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
|
||||||
.lt-timeline-body code { font-size: 0.72rem; color: var(--accent-green); }
|
.lt-timeline-body code { font-size: 0.72rem; color: var(--accent-green); }
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
+13
-12
@@ -143,7 +143,7 @@ include __DIR__ . '/layout_header.php';
|
|||||||
<!-- ═══════════════════════════════════════════════════════════
|
<!-- ═══════════════════════════════════════════════════════════
|
||||||
VIEW TABS (Table / Kanban) — dual-purpose: lt.tabs + dashboard.js set-view-mode
|
VIEW TABS (Table / Kanban) — dual-purpose: lt.tabs + dashboard.js set-view-mode
|
||||||
═══════════════════════════════════════════════════════════ -->
|
═══════════════════════════════════════════════════════════ -->
|
||||||
<div class="lt-tabs" role="tablist" aria-label="Ticket view mode">
|
<div class="lt-tab-bar" role="tablist" aria-label="Ticket view mode">
|
||||||
<button type="button" id="tableViewBtn"
|
<button type="button" id="tableViewBtn"
|
||||||
class="lt-tab active"
|
class="lt-tab active"
|
||||||
role="tab" aria-selected="true" aria-controls="tab-table"
|
role="tab" aria-selected="true" aria-controls="tab-table"
|
||||||
@@ -158,7 +158,7 @@ include __DIR__ . '/layout_header.php';
|
|||||||
data-action="set-view-mode" data-mode="card">
|
data-action="set-view-mode" data-mode="card">
|
||||||
⊕ Kanban
|
⊕ Kanban
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div><!-- /.lt-tab-bar -->
|
||||||
|
|
||||||
<!-- ═══════════════════════════════════════════════════════════
|
<!-- ═══════════════════════════════════════════════════════════
|
||||||
LAYOUT WRAPPER: sidebar + main content
|
LAYOUT WRAPPER: sidebar + main content
|
||||||
@@ -387,14 +387,15 @@ include __DIR__ . '/layout_header.php';
|
|||||||
<tbody>
|
<tbody>
|
||||||
<?php if (empty($tickets)): ?>
|
<?php if (empty($tickets)): ?>
|
||||||
<tr>
|
<tr>
|
||||||
<td colspan="<?= $colCount ?>" class="lt-empty" style="text-align:center;padding:2rem">
|
<td colspan="<?= $colCount ?>" class="lt-empty">
|
||||||
<pre class="lt-text-muted lt-text-xs" style="display:inline-block;text-align:left">
|
<div class="lt-empty-state">
|
||||||
╔══════════════════════════════════╗
|
<div class="lt-empty-state-icon">📭</div>
|
||||||
║ ║
|
<div class="lt-empty-state-title">No Tickets Found</div>
|
||||||
║ NO TICKETS FOUND ║
|
<div class="lt-empty-state-body">No tickets match your current filters.</div>
|
||||||
║ [ ] Empty queue — all clear ║
|
<?php if (!empty($activeFilters) || !empty($_GET['search'])): ?>
|
||||||
║ ║
|
<a href="?" class="lt-btn lt-btn-sm lt-btn-ghost">Clear Filters</a>
|
||||||
╚══════════════════════════════════╝</pre>
|
<?php endif ?>
|
||||||
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<?php else: ?>
|
<?php else: ?>
|
||||||
@@ -422,8 +423,8 @@ include __DIR__ . '/layout_header.php';
|
|||||||
class="ticket-link"><?= htmlspecialchars($row['ticket_id']) ?></a>
|
class="ticket-link"><?= htmlspecialchars($row['ticket_id']) ?></a>
|
||||||
</td>
|
</td>
|
||||||
<td data-label="Priority">
|
<td data-label="Priority">
|
||||||
<?php $chipClass = match($pNum) { 1 => 'lt-chip-critical', 2 => 'lt-chip-warn', 3 => 'lt-chip-info', default => 'lt-chip-ok' }; ?>
|
<?php $badgeClass = match($pNum) { 1 => 'lt-badge-p1', 2 => 'lt-badge-p2', 3 => 'lt-badge-p3', default => 'lt-badge-p4' }; ?>
|
||||||
<span class="lt-chip <?= $chipClass ?>">P<?= $pNum ?></span>
|
<span class="lt-badge <?= $badgeClass ?>">P<?= $pNum ?></span>
|
||||||
</td>
|
</td>
|
||||||
<td data-label="Title"><?= htmlspecialchars($row['title']) ?></td>
|
<td data-label="Title"><?= htmlspecialchars($row['title']) ?></td>
|
||||||
<td data-label="Category" class="lt-text-muted lt-text-xs"><?= htmlspecialchars($row['category']) ?></td>
|
<td data-label="Category" class="lt-text-muted lt-text-xs"><?= htmlspecialchars($row['category']) ?></td>
|
||||||
|
|||||||
@@ -266,7 +266,7 @@ include __DIR__ . '/layout_header.php';
|
|||||||
<!-- ═══════════════════════════════════════════════════════════
|
<!-- ═══════════════════════════════════════════════════════════
|
||||||
TAB NAVIGATION
|
TAB NAVIGATION
|
||||||
═══════════════════════════════════════════════════════════ -->
|
═══════════════════════════════════════════════════════════ -->
|
||||||
<div class="lt-tabs" role="tablist" aria-label="Ticket content sections">
|
<div class="lt-tab-bar" role="tablist" aria-label="Ticket content sections">
|
||||||
<button type="button" class="lt-tab active" id="description-tab-btn"
|
<button type="button" class="lt-tab active" id="description-tab-btn"
|
||||||
role="tab" data-tab="description-panel" aria-selected="true" aria-controls="description-panel">
|
role="tab" data-tab="description-panel" aria-selected="true" aria-controls="description-panel">
|
||||||
Description
|
Description
|
||||||
|
|||||||
@@ -45,8 +45,8 @@ include __DIR__ . '/../../views/layout_header.php';
|
|||||||
<td data-label="Name"><strong><?= htmlspecialchars($tpl['template_name']) ?></strong></td>
|
<td data-label="Name"><strong><?= htmlspecialchars($tpl['template_name']) ?></strong></td>
|
||||||
<td data-label="Category" class="lt-text-xs"><?= htmlspecialchars($tpl['category'] ?? 'Any') ?></td>
|
<td data-label="Category" class="lt-text-xs"><?= htmlspecialchars($tpl['category'] ?? 'Any') ?></td>
|
||||||
<td data-label="Type" class="lt-text-xs"><?= htmlspecialchars($tpl['type'] ?? 'Any') ?></td>
|
<td data-label="Type" class="lt-text-xs"><?= htmlspecialchars($tpl['type'] ?? 'Any') ?></td>
|
||||||
<?php $tp = (int)($tpl['default_priority'] ?? 4); $tChip = match($tp) { 1 => 'lt-chip-critical', 2 => 'lt-chip-warn', 3 => 'lt-chip-info', default => 'lt-chip-ok' }; ?>
|
<?php $tp = (int)($tpl['default_priority'] ?? 4); $tBadge = match($tp) { 1 => 'lt-badge-p1', 2 => 'lt-badge-p2', 3 => 'lt-badge-p3', default => 'lt-badge-p4' }; ?>
|
||||||
<td data-label="Priority"><span class="lt-chip <?= $tChip ?>">P<?= $tp ?></span></td>
|
<td data-label="Priority"><span class="lt-badge <?= $tBadge ?>">P<?= $tp ?></span></td>
|
||||||
<td data-label="Status">
|
<td data-label="Status">
|
||||||
<span class="lt-status <?= ($tpl['is_active'] ?? 1) ? 'lt-status-open' : 'lt-status-closed' ?>">
|
<span class="lt-status <?= ($tpl['is_active'] ?? 1) ? 'lt-status-open' : 'lt-status-closed' ?>">
|
||||||
<?= ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive' ?>
|
<?= ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive' ?>
|
||||||
|
|||||||
@@ -55,6 +55,63 @@
|
|||||||
<span aria-label="Application version">TINKER TICKETS — TDS v1.2</span>
|
<span aria-label="Application version">TINKER TICKETS — TDS v1.2</span>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<!-- ================================================================
|
||||||
|
KEYBOARD SHORTCUTS HELP MODAL — opened by ? key or footer [?] hint
|
||||||
|
================================================================ -->
|
||||||
|
<div id="lt-keys-help" class="lt-modal-overlay" aria-hidden="true">
|
||||||
|
<div class="lt-modal" role="dialog" aria-modal="true" aria-labelledby="keys-help-title">
|
||||||
|
<div class="lt-modal-header">
|
||||||
|
<span class="lt-modal-title" id="keys-help-title">Keyboard Shortcuts</span>
|
||||||
|
<button type="button" class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
||||||
|
</div>
|
||||||
|
<div class="lt-modal-body">
|
||||||
|
<table class="lt-data-table" style="width:100%">
|
||||||
|
<thead>
|
||||||
|
<tr><th scope="col">Shortcut</th><th scope="col">Action</th></tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr><td>Ctrl / ⌘ + K</td><td>Focus search box</td></tr>
|
||||||
|
<tr><td>Ctrl / ⌘ + E</td><td>Toggle edit mode (ticket page)</td></tr>
|
||||||
|
<tr><td>Ctrl / ⌘ + S</td><td>Save changes (ticket page)</td></tr>
|
||||||
|
<tr><td>j / ↓</td><td>Select next row</td></tr>
|
||||||
|
<tr><td>k / ↑</td><td>Select previous row</td></tr>
|
||||||
|
<tr><td>Enter</td><td>Open selected ticket</td></tr>
|
||||||
|
<tr><td>n</td><td>New ticket</td></tr>
|
||||||
|
<tr><td>1–4</td><td>Change ticket status (ticket page)</td></tr>
|
||||||
|
<tr><td>c</td><td>Jump to comment box (ticket page)</td></tr>
|
||||||
|
<tr><td>?</td><td>Show this help</td></tr>
|
||||||
|
<tr><td>ESC</td><td>Close modal / cancel</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div class="lt-modal-footer">
|
||||||
|
<button type="button" class="lt-btn" data-modal-close>Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ================================================================
|
||||||
|
COMMAND PALETTE — Ctrl+K opens when no search input focused
|
||||||
|
================================================================ -->
|
||||||
|
<div id="lt-cmd-overlay" class="lt-cmd-overlay" role="dialog" aria-modal="true" aria-label="Command palette" aria-hidden="true">
|
||||||
|
<div class="lt-cmd-palette" id="lt-cmd-palette">
|
||||||
|
<div class="lt-cmd-input-wrap">
|
||||||
|
<span class="lt-cmd-prompt">></span>
|
||||||
|
<input id="lt-cmd-input" class="lt-cmd-input" type="text"
|
||||||
|
placeholder="Search commands…" autocomplete="off"
|
||||||
|
spellcheck="false" aria-label="Search commands">
|
||||||
|
</div>
|
||||||
|
<div class="lt-cmd-results" id="lt-cmd-results">
|
||||||
|
<div class="lt-cmd-empty">Start typing to search…</div>
|
||||||
|
</div>
|
||||||
|
<div class="lt-cmd-footer">
|
||||||
|
<span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
|
||||||
|
<span><kbd>Enter</kbd> Select</span>
|
||||||
|
<span><kbd>Esc</kbd> Close</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- base.js + utils.js + globals already loaded in <head> via layout_header.php -->
|
<!-- base.js + utils.js + globals already loaded in <head> via layout_header.php -->
|
||||||
|
|
||||||
<?php if (!empty($pageScripts)): ?>
|
<?php if (!empty($pageScripts)): ?>
|
||||||
@@ -75,6 +132,27 @@
|
|||||||
<script nonce="<?= htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8') ?>">
|
<script nonce="<?= htmlspecialchars($nonce, ENT_QUOTES, 'UTF-8') ?>">
|
||||||
if (window.lt) {
|
if (window.lt) {
|
||||||
lt.init({ bootName: 'TINKER TICKETS' });
|
lt.init({ bootName: 'TINKER TICKETS' });
|
||||||
|
|
||||||
|
// Theme toggle button
|
||||||
|
var themeBtn = document.getElementById('lt-theme-btn');
|
||||||
|
if (themeBtn) themeBtn.addEventListener('click', function() { lt.theme.toggle(); });
|
||||||
|
|
||||||
|
// Command palette — global navigation commands available on all pages
|
||||||
|
lt.cmdPalette.init([
|
||||||
|
{
|
||||||
|
group: 'Navigation',
|
||||||
|
items: [
|
||||||
|
{ icon: '~', label: 'Dashboard', kbd: 'G D', action: function() { window.location.href = '/'; } },
|
||||||
|
{ icon: '+', label: 'New Ticket', kbd: 'N', action: function() { window.location.href = '/ticket/create'; } },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
group: 'Help',
|
||||||
|
items: [
|
||||||
|
{ icon: '?', label: 'Keyboard Shortcuts', kbd: '?', action: function() { lt.modal.open('lt-keys-help'); } },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Footer hint bar actions (keyboard help + settings — work on all pages)
|
// Footer hint bar actions (keyboard help + settings — work on all pages)
|
||||||
|
|||||||
@@ -156,6 +156,8 @@ $_lt_navActive = $activeNav ?? 'dashboard';
|
|||||||
<span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
|
<span class="lt-badge lt-badge-admin" aria-label="Administrator">ADMIN</span>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
<?php endif; ?>
|
<?php endif; ?>
|
||||||
|
<button type="button" class="lt-theme-btn" id="lt-theme-btn"
|
||||||
|
aria-label="Switch to light mode" title="Switch to light mode">☀</button>
|
||||||
</div><!-- /.lt-header-right -->
|
</div><!-- /.lt-header-right -->
|
||||||
|
|
||||||
</header><!-- /.lt-header -->
|
</header><!-- /.lt-header -->
|
||||||
|
|||||||
Reference in New Issue
Block a user