LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX polish: terminal design system alignment pass

Browse Source 
Views:
- DashboardView.php: remove hardcoded [ ] from admin-badge button (CSS adds them)
- DashboardView.php: view toggle ≡/▦ → [ = ]/[ # ] (view-btn suppresses auto-brackets)
- DashboardView.php: clear-search ✗ → [ X ] (plain text, no auto-brackets on <a>)
- DashboardView.php: remove ↓ arrow emoji from export button text
- TicketView.php: tab labels → UPPERCASE (tab-btn CSS adds [ ] around text)
- TicketView.php: Edit Ticket/Clone/Add Comment/Add → title-case → UPPERCASE
- TicketView.php: reply button ↩ → [ << ] (comment-action-btn has no auto-brackets)

JavaScript:
- dashboard.js: modal/action button text all → UPPERCASE (CONFIRM/CANCEL/SAVE/ASSIGN/UPDATE/DELETE PERMANENTLY)
- dashboard.js: null guard in loadTemplate(), toggleSelectAll()
- ticket.js: null guards in addDependency(), handleFileUpload()

CSS:
- dashboard.css: z-index 1001/1002 magic numbers → var(--z-modal)/var(--z-popover)
- ticket.css: status-select hover/focus border rgba(white) → terminal palette

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jared Vititoe
2026-03-19 22:50:59 -04:00
parent 84bea80abd
commit 90c5b3ff71
6 changed files with 46 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/js/dashboard.js
View File

@@ -620,6 +620,7 @@ function saveTicket() {
*/
function loadTemplate() {
const templateSelect = document.getElementById('templateSelect');
if (!templateSelect) return;
const templateId = templateSelect.value;
if (!templateId) {
@@ -685,6 +686,7 @@ function loadTemplate() {
function toggleSelectAll() {
const selectAll = document.getElementById('selectAllCheckbox');
if (!selectAll) return;
const checkboxes = document.querySelectorAll('.ticket-checkbox');
checkboxes.forEach(checkbox => {
@@ -819,8 +821,8 @@ function showBulkAssignModal() {
</select>
</div>
<div class="lt-modal-footer">
<button data-action="perform-bulk-assign" class="lt-btn lt-btn-primary">Assign</button>
<button data-action="close-bulk-assign-modal" class="lt-btn lt-btn-ghost">Cancel</button>
<button data-action="perform-bulk-assign" class="lt-btn lt-btn-primary">ASSIGN</button>
<button data-action="close-bulk-assign-modal" class="lt-btn lt-btn-ghost">CANCEL</button>
</div>
</div>
</div>
@@ -921,8 +923,8 @@ function showBulkPriorityModal() {
</select>
</div>
<div class="lt-modal-footer">
<button data-action="perform-bulk-priority" class="lt-btn lt-btn-primary">Update</button>
<button data-action="close-bulk-priority-modal" class="lt-btn lt-btn-ghost">Cancel</button>
<button data-action="perform-bulk-priority" class="lt-btn lt-btn-primary">UPDATE</button>
<button data-action="close-bulk-priority-modal" class="lt-btn lt-btn-ghost">CANCEL</button>
</div>
</div>
</div>
@@ -1037,8 +1039,8 @@ function showBulkStatusModal() {
</select>
</div>
<div class="lt-modal-footer">
<button data-action="perform-bulk-status" class="lt-btn lt-btn-primary">Update</button>
<button data-action="close-bulk-status-modal" class="lt-btn lt-btn-ghost">Cancel</button>
<button data-action="perform-bulk-status" class="lt-btn lt-btn-primary">UPDATE</button>
<button data-action="close-bulk-status-modal" class="lt-btn lt-btn-ghost">CANCEL</button>
</div>
</div>
</div>
@@ -1116,8 +1118,8 @@ function showBulkDeleteModal() {
<p style="color: var(--terminal-green);">You are about to permanently delete ${ticketIds.length} ticket(s).<br>All associated comments and history will be lost.</p>
</div>
<div class="lt-modal-footer">
<button data-action="perform-bulk-delete" class="lt-btn lt-btn-primary" style="background: var(--status-closed); border-color: var(--status-closed);">Delete Permanently</button>
<button data-action="close-bulk-delete-modal" class="lt-btn lt-btn-ghost">Cancel</button>
<button data-action="perform-bulk-delete" class="lt-btn lt-btn-primary" style="background: var(--status-closed); border-color: var(--status-closed);">DELETE PERMANENTLY</button>
<button data-action="close-bulk-delete-modal" class="lt-btn lt-btn-ghost">CANCEL</button>
</div>
</div>
</div>
@@ -1209,8 +1211,8 @@ function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel
<p style="color: var(--terminal-green); white-space: pre-line;">${safeMessage}</p>
</div>
<div class="lt-modal-footer">
<button class="lt-btn lt-btn-primary" id="${modalId}_confirm">Confirm</button>
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">Cancel</button>
<button class="lt-btn lt-btn-primary" id="${modalId}_confirm">CONFIRM</button>
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">CANCEL</button>
</div>
</div>
</div>
@@ -1261,8 +1263,8 @@ function showInputModal(title, label, placeholder = '', onSubmit, onCancel = nul
<input type="text" id="${inputId}" class="lt-input" placeholder="${safePlaceholder}" style="width: 100%;" />
</div>
<div class="lt-modal-footer">
<button class="lt-btn lt-btn-primary" id="${modalId}_submit">Save</button>
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">Cancel</button>
<button class="lt-btn lt-btn-primary" id="${modalId}_submit">SAVE</button>
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">CANCEL</button>
</div>
</div>
</div>
@@ -1317,8 +1319,8 @@ function quickStatusChange(ticketId, currentStatus) {
</select>
</div>
<div class="lt-modal-footer">
<button data-action="perform-quick-status" data-ticket-id="${ticketId}" class="lt-btn lt-btn-primary">Update</button>
<button data-action="close-quick-status-modal" class="lt-btn lt-btn-ghost">Cancel</button>
<button data-action="perform-quick-status" data-ticket-id="${ticketId}" class="lt-btn lt-btn-primary">UPDATE</button>
<button data-action="close-quick-status-modal" class="lt-btn lt-btn-ghost">CANCEL</button>
</div>
</div>
</div>
@@ -1384,8 +1386,8 @@ function quickAssign(ticketId) {
</select>
</div>
<div class="lt-modal-footer">
<button data-action="perform-quick-assign" data-ticket-id="${ticketId}" class="lt-btn lt-btn-primary">Assign</button>
<button data-action="close-quick-assign-modal" class="lt-btn lt-btn-ghost">Cancel</button>
<button data-action="perform-quick-assign" data-ticket-id="${ticketId}" class="lt-btn lt-btn-primary">ASSIGN</button>
<button data-action="close-quick-assign-modal" class="lt-btn lt-btn-ghost">CANCEL</button>
</div>
</div>
</div>