jared
6c491c1baa
- ticket.js: status change requiring a comment now shows an inline modal with a textarea — comment is actually posted before the status changes, instead of just warning the user and changing anyway - layout_header.php: add ⌘K button in header so users can discover the command palette; also removes inline onclick in favor of JS (CSP-safe via nonce script block already present) - TicketView.php: upgrade breadcrumb to lt-breadcrumb markup with ticket title preview (truncated at 45 chars) and aria-current - ticket.js + ticket.css: image attachments now render as clickable thumbnails (3rem×3rem) that open in lt.lightbox; non-image files keep the icon display unchanged Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
368 lines
11 KiB
CSS
368 lines
11 KiB
CSS
/* ================================================================
|
|
ticket.css — Tinker Tickets TDS v1.2
|
|
App-specific ticket view styles. base.css handles base components.
|
|
================================================================ */
|
|
|
|
/* ── Ticket frame ────────────────────────────────────────────── */
|
|
.lt-frame-ticket {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* Priority left-border accent on ticket frame */
|
|
.lt-frame-ticket[data-priority="1"] { border-left: 3px solid var(--lt-danger, #ff4d4d); }
|
|
.lt-frame-ticket[data-priority="2"] { border-left: 3px solid var(--lt-amber, #ffb000); }
|
|
.lt-frame-ticket[data-priority="3"] { border-left: 3px solid var(--lt-cyan, #00ffff); }
|
|
.lt-frame-ticket[data-priority="4"] { border-left: 3px solid var(--lt-text-primary, #00ff41); }
|
|
.lt-frame-ticket[data-priority="5"] { border-left: 3px solid rgba(0,255,65,0.3); }
|
|
|
|
/* ── Ticket title row ────────────────────────────────────────── */
|
|
.ticket-title-row {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.ticket-title-heading {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
line-height: 1.3;
|
|
flex: 1;
|
|
font-family: inherit;
|
|
font-weight: 600;
|
|
}
|
|
.ticket-id-badge {
|
|
white-space: nowrap;
|
|
padding-top: 0.15rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Edit mode — show editable fields as inputs ──────────────── */
|
|
body.edit-mode .editable[contenteditable="true"] {
|
|
border: 1px solid var(--lt-text-primary, #00ff41);
|
|
padding: 0.2rem 0.4rem;
|
|
outline: none;
|
|
background: rgba(0,255,65,0.03);
|
|
}
|
|
body.edit-mode .editable-metadata {
|
|
pointer-events: all;
|
|
}
|
|
|
|
/* ── Status select styling ───────────────────────────────────── */
|
|
.lt-status-select {
|
|
font-family: inherit;
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.lt-status-select.lt-status-open { color: var(--lt-success, #00ff41); border-color: var(--lt-success, #00ff41); }
|
|
.lt-status-select.lt-status-pending { color: var(--lt-amber, #ffb000); border-color: var(--lt-amber, #ffb000); }
|
|
.lt-status-select.lt-status-in-progress { color: var(--lt-cyan, #00ffff); border-color: var(--lt-cyan, #00ffff); }
|
|
.lt-status-select.lt-status-closed { color: var(--lt-danger, #ff4d4d); border-color: var(--lt-danger, #ff4d4d); }
|
|
|
|
/* ── Ticket meta KV grid ─────────────────────────────────────── */
|
|
.ticket-meta-grid {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* ── Description textarea ────────────────────────────────────── */
|
|
#ticketDescription {
|
|
width: 100%;
|
|
resize: vertical;
|
|
min-height: 16rem;
|
|
font-family: inherit;
|
|
}
|
|
|
|
/* ── Comments ────────────────────────────────────────────────── */
|
|
.comments-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.comment {
|
|
position: relative;
|
|
padding: 0.75rem;
|
|
border: 1px solid rgba(0, 255, 65, 0.2);
|
|
}
|
|
.comment-reply {
|
|
/* depth-1 default; .thread-depth-N overrides for deeper nesting */
|
|
margin-left: 1.5rem;
|
|
border-color: rgba(0, 255, 65, 0.12);
|
|
}
|
|
/* Explicit depth overrides using combined selectors — higher specificity prevents
|
|
cascade order from determining winner when both classes are present */
|
|
.comment.thread-depth-2,
|
|
.comment-reply.thread-depth-2 { margin-left: 3rem; }
|
|
.comment.thread-depth-3,
|
|
.comment-reply.thread-depth-3 { margin-left: 4.5rem; }
|
|
|
|
.thread-line {
|
|
position: absolute;
|
|
left: -1rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: rgba(0, 255, 65, 0.15);
|
|
}
|
|
|
|
.comment-header {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
.comment-user { font-size: 0.75rem; font-weight: 600; }
|
|
.comment-date { font-size: 0.7rem; opacity: 0.6; }
|
|
.comment-actions { margin-left: auto; }
|
|
|
|
.comment-text {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.comment-text[data-markdown] { white-space: normal; }
|
|
|
|
.comment-edited { font-size: 0.65rem; opacity: 0.5; }
|
|
|
|
/* Reply/edit inline textarea */
|
|
.comment-edit-raw {
|
|
width: 100%;
|
|
margin-top: 0.4rem;
|
|
resize: vertical;
|
|
min-height: 4rem;
|
|
}
|
|
|
|
/* Comment controls bar */
|
|
.comment-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
.markdown-toggles {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Markdown preview */
|
|
.markdown-preview {
|
|
margin-top: 0.5rem;
|
|
padding: 0.5rem;
|
|
border: 1px dashed rgba(0,255,65,0.3);
|
|
font-size: 0.8rem;
|
|
min-height: 2rem;
|
|
}
|
|
|
|
/* ── Upload zone ─────────────────────────────────────────────── */
|
|
.upload-zone {
|
|
border: 2px dashed rgba(0,255,65,0.4);
|
|
padding: 2rem 1rem;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
.upload-zone:hover,
|
|
.upload-zone:focus-visible,
|
|
.upload-zone.drag-over {
|
|
border-color: var(--lt-text-primary, #00ff41);
|
|
background: rgba(0,255,65,0.04);
|
|
outline: none;
|
|
}
|
|
.upload-zone-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
|
|
.upload-zone-content { pointer-events: none; }
|
|
|
|
/* Progress bar */
|
|
.progress-bar {
|
|
height: 4px;
|
|
background: rgba(0,255,65,0.15);
|
|
margin-top: 0.5rem;
|
|
}
|
|
.progress-fill {
|
|
height: 100%;
|
|
width: 0%;
|
|
background: var(--lt-text-primary, #00ff41);
|
|
transition: width 0.3s ease;
|
|
}
|
|
.upload-status-text { margin-top: 0.25rem; }
|
|
|
|
/* Attachments list */
|
|
.attachments-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* Image thumbnail in attachment list */
|
|
.attachment-thumb {
|
|
display: block;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
object-fit: cover;
|
|
border-radius: 3px;
|
|
border: 1px solid var(--border-color);
|
|
cursor: zoom-in;
|
|
flex-shrink: 0;
|
|
}
|
|
.lt-lightbox-trigger { display: block; line-height: 0; }
|
|
|
|
/* ── Dependencies list ───────────────────────────────────────── */
|
|
.dependencies-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
/* ── Visibility groups toggle ────────────────────────────────── */
|
|
.ticket-visibility-groups.is-hidden { display: none !important; }
|
|
|
|
/* ── Page header utility ─────────────────────────────────────── */
|
|
.lt-page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 0 0.75rem;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* ── lt-select-sm ────────────────────────────────────────────── */
|
|
.lt-select-sm {
|
|
font-size: 0.75rem;
|
|
padding: 0.2rem 0.4rem;
|
|
}
|
|
|
|
/* ── lt-flex utilities ───────────────────────────────────────── */
|
|
.lt-flex-align-center { align-items: center; }
|
|
.lt-flex-gap-sm { gap: 0.5rem; }
|
|
.lt-flex-wrap { flex-wrap: wrap; }
|
|
|
|
/* ── Ticket tabs margin ──────────────────────────────────────── */
|
|
.lt-tabs {
|
|
margin-bottom: 0;
|
|
}
|
|
.lt-tab-panel {
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* ── Settings section (also used in ticket settings modal) ───── */
|
|
.settings-section {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.settings-section:last-child { margin-bottom: 0; }
|
|
|
|
.shortcut-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.2rem 0;
|
|
}
|
|
kbd {
|
|
font-family: inherit;
|
|
font-size: 0.7rem;
|
|
padding: 0.1rem 0.35rem;
|
|
border: 1px solid rgba(0,255,65,0.4);
|
|
}
|
|
|
|
/* ── lt-mb-md ────────────────────────────────────────────────── */
|
|
.lt-mb-md { margin-bottom: 1rem; }
|
|
|
|
/* ── lt-toggle small variant (comment area) ──────────────────── */
|
|
.lt-toggle--sm { font-size: 0.72rem; gap: 0.35rem; }
|
|
.lt-toggle--sm .lt-toggle-track { width: 28px; height: 14px; }
|
|
.lt-toggle--sm .lt-toggle-thumb { width: 9px; height: 9px; top: 1.5px; left: 1.5px; }
|
|
.lt-toggle--sm input:checked ~ .lt-toggle-track .lt-toggle-thumb { transform: translateX(14px); }
|
|
|
|
/* ── Responsive ──────────────────────────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
.ticket-title-row {
|
|
flex-direction: column;
|
|
}
|
|
.ticket-meta-grid .lt-kv-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.comment-reply { margin-left: 0.75rem; }
|
|
.thread-depth-2 { margin-left: 1.5rem; }
|
|
.thread-depth-3 { margin-left: 2.25rem; }
|
|
}
|
|
|
|
/* ── @mention autocomplete dropdown ─────────────────────────── */
|
|
.mention-autocomplete {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 200;
|
|
background: var(--bg-overlay, #060c14);
|
|
border: 1px solid var(--accent-cyan-border, rgba(0,212,255,0.3));
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
}
|
|
.mention-autocomplete.active { display: block; }
|
|
.mention-option {
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: 0.5rem;
|
|
padding: 0.4rem 0.75rem;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border-dim, rgba(0,255,65,0.1));
|
|
transition: background 0.1s;
|
|
}
|
|
.mention-option:last-child { border-bottom: none; }
|
|
.mention-option.selected,
|
|
.mention-option:hover {
|
|
background: rgba(0,212,255,0.08);
|
|
}
|
|
.mention-username {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: var(--accent-cyan, #00d4ff);
|
|
}
|
|
.mention-displayname {
|
|
font-size: 0.7rem;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* ── Watcher avatar group in toolbar ────────────────────────── */
|
|
.lt-avatar-group {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.lt-avatar-group .lt-avatar {
|
|
margin-left: -0.4rem;
|
|
border: 1px solid var(--bg-primary, #030508);
|
|
flex-shrink: 0;
|
|
}
|
|
.lt-avatar-group .lt-avatar:first-child { margin-left: 0; }
|
|
.lt-avatar--overflow {
|
|
background: var(--bg-tertiary, #1a1f2e);
|
|
border: 1px solid var(--border-dim, rgba(0,255,65,0.2)) !important;
|
|
font-size: 0.55rem;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
cursor: default;
|
|
}
|
|
|
|
/* ── Description read view ───────────────────────────────────── */
|
|
/* Shown in read mode instead of a disabled (faded) textarea. */
|
|
/* Uses lt-markdown typography for full contrast on dark/OLED. */
|
|
.ticket-description-view {
|
|
min-height: 8rem;
|
|
padding: 0.5rem 0.25rem;
|
|
line-height: 1.75;
|
|
color: var(--text-primary);
|
|
/* pre-wrap preserves newlines and multiple spaces so ASCII art aligns correctly.
|
|
font-mono is inherited from body, so box-drawing characters line up. */
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
.ticket-description-view p {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 0.6rem;
|
|
}
|
|
.ticket-description-view p:last-child { margin-bottom: 0; }
|
|
|
|
/* Metadata selects use .lt-display-field (base.css) in read mode
|
|
instead of disabled — full opacity, non-interactive, no fading. */
|