ui(uxp): v2.1.8 — density redesign on top of v2.1.7
Three changes, surgical so timeline.js / conform / relink / growing all keep working: A. Header → 24px status strip + ⋯ menu `connected-bar` rule kept as an alias to `.status-strip` so any code path that still emits the old class falls through cleanly. Markup replaced with .signal-dot + #connected-host + .btn-ghost ⋯ that toggles a .menu containing the Disconnect button. Menu auto-closes on outside click. Reclaims ~12px of permanent vertical chrome and removes the always-visible Disconnect. B. Compact action footer `.action-row .btn` now: 22px tall, 11px font, 0.01em letterspacing. `.advanced-section .action-row .btn` goes a step smaller (20px / 10.5px). Global `.btn` untouched so #connect-btn stays at full weight on the connect pane. D. Token alignment with services/web-ui DESIGN.md --bg-0 #0B0D11 (was #0e0f12), --accent #5B7CFA (was #4f7cff), plus the full --text-1..4 / --success / --warning / --danger / --live palette. Legacy --ok / --warn aliased to --success / --warning so existing rules keep resolving. C (per-card meta) was already in v2.1.7 — no change needed. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Claude
parent
b04882a310
commit
c2a6c1557b
4 changed files with 152 additions and 32 deletions
|
|
@ -30,11 +30,15 @@
|
|||
<!-- ── Library Pane ─────────────────────────────────────────────── -->
|
||||
<section id="library-pane" class="pane hidden">
|
||||
|
||||
<!-- Connected bar -->
|
||||
<header class="connected-bar">
|
||||
<span class="dot dot-ok"></span>
|
||||
<!-- Connection status strip (v2.1.8): dot + identity + ⋯ menu.
|
||||
Disconnect lives inside the menu so it's not always visible. -->
|
||||
<header class="status-strip">
|
||||
<span class="signal-dot"></span>
|
||||
<span id="connected-host" class="connected-host"></span>
|
||||
<button id="disconnect-btn" class="btn btn-link">Disconnect</button>
|
||||
<button id="menu-btn" class="btn-ghost" title="More" aria-label="More">⋯</button>
|
||||
<div id="status-menu" class="menu hidden" role="menu">
|
||||
<button id="disconnect-btn" class="menu-item" role="menuitem">Disconnect</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Tabs -->
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"manifestVersion": 5,
|
||||
"id": "net.wilddragon.dragonflight.uxp",
|
||||
"name": "Dragonflight MAM",
|
||||
"version": "2.1.7",
|
||||
"version": "2.1.8",
|
||||
"main": "index.html",
|
||||
"host": {
|
||||
"app": "premierepro",
|
||||
|
|
|
|||
|
|
@ -43,7 +43,25 @@
|
|||
}
|
||||
|
||||
function wireLibraryPane() {
|
||||
// Overflow menu toggle (v2.1.8). Click ⋯ to open; click elsewhere closes.
|
||||
const menuBtn = $('menu-btn');
|
||||
const menu = $('status-menu');
|
||||
if (menuBtn && menu) {
|
||||
menuBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
menu.classList.toggle('hidden');
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!menu.classList.contains('hidden')
|
||||
&& !menu.contains(e.target)
|
||||
&& e.target !== menuBtn) {
|
||||
menu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('disconnect-btn').addEventListener('click', () => {
|
||||
if (menu) menu.classList.add('hidden');
|
||||
API.disconnect();
|
||||
Library.stopGrowingPoll();
|
||||
$('server-url').value = '';
|
||||
|
|
|
|||
|
|
@ -1,22 +1,52 @@
|
|||
/* Dragonflight UXP panel — v2.1.0 */
|
||||
/* Design tokens mirror web UI dark theme */
|
||||
/* Dragonflight UXP panel — v2.1.8 */
|
||||
/* Tokens mirror services/web-ui DESIGN.md (canonical) */
|
||||
|
||||
:root {
|
||||
--bg-0: #0e0f12;
|
||||
--bg-1: #16181d;
|
||||
--bg-2: #1c1f25;
|
||||
--bg-3: #232730;
|
||||
--border: #2a2f3a;
|
||||
--text-1: #e6e8ec;
|
||||
--text-2: #b6bac3;
|
||||
--text-3: #7e848f;
|
||||
--accent: #4f7cff;
|
||||
--accent-h: #6a91ff;
|
||||
--danger: #e25c5c;
|
||||
--danger-soft: #3a1d20;
|
||||
--ok: #4ec07a;
|
||||
--warn: #e2a45c;
|
||||
--live: #e25c5c;
|
||||
/* Surfaces */
|
||||
--bg-0: #0B0D11;
|
||||
--bg-1: #14171E;
|
||||
--bg-2: #1B1F27;
|
||||
--bg-3: #232833;
|
||||
--bg-4: #2D3340;
|
||||
|
||||
/* Borders + hover overlays */
|
||||
--border: rgba(255, 255, 255, 0.06);
|
||||
--border-strong: rgba(255, 255, 255, 0.10);
|
||||
--border-stronger: rgba(255, 255, 255, 0.14);
|
||||
--hover: rgba(255, 255, 255, 0.04);
|
||||
--hover-strong: rgba(255, 255, 255, 0.07);
|
||||
|
||||
/* Text */
|
||||
--text-1: #F2F3F6;
|
||||
--text-2: #A8AEBC;
|
||||
--text-3: #6B7280;
|
||||
--text-4: #4B5260;
|
||||
|
||||
/* Accent + status (canonical from DESIGN.md) */
|
||||
--accent: #5B7CFA;
|
||||
--accent-h: #6B89FB;
|
||||
--accent-soft: rgba(91, 124, 250, 0.14);
|
||||
--accent-soft-2: rgba(91, 124, 250, 0.22);
|
||||
--accent-text: #B4C3FF;
|
||||
|
||||
--success: #2DD4A8;
|
||||
--warning: #F5A623;
|
||||
--danger: #FF5B5B;
|
||||
--live: #FF3B30;
|
||||
|
||||
--danger-soft: rgba(255, 91, 91, 0.14);
|
||||
--success-soft: rgba(45, 212, 168, 0.14);
|
||||
|
||||
/* Legacy aliases — keep so v2.1.x rules using them still resolve */
|
||||
--ok: var(--success);
|
||||
--warn: var(--warning);
|
||||
|
||||
/* Type */
|
||||
--font-sans: "Geist", -apple-system, "Segoe UI", system-ui, sans-serif;
|
||||
--font-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
|
||||
|
||||
--t-fast: 80ms;
|
||||
--t-med: 120ms;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
|
@ -135,27 +165,80 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
|
|||
.dot-bad { background: var(--danger); }
|
||||
.dot-warn { background: var(--warn); }
|
||||
|
||||
/* ── connected bar ───────────────────────────────────────────────── */
|
||||
.connected-bar {
|
||||
/* ── status strip + overflow menu (v2.1.8 redesign) ──────────────── */
|
||||
/* 24px-tall identity bar. Disconnect lives behind ⋯ — out of the way
|
||||
but discoverable. Legacy `.connected-bar` rule is kept as an alias
|
||||
so any markup that still uses the old class falls through cleanly. */
|
||||
.connected-bar,
|
||||
.status-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 8px;
|
||||
gap: 8px;
|
||||
padding: 0 8px;
|
||||
height: 24px;
|
||||
background: var(--bg-1);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 6px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.signal-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--success);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.connected-host {
|
||||
font-family: ui-monospace, Menlo, monospace;
|
||||
font-size: 10.5px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
color: var(--text-2);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn-ghost {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
background: transparent;
|
||||
color: var(--text-3);
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background var(--t-fast), color var(--t-fast);
|
||||
}
|
||||
.btn-ghost:hover { background: var(--hover); color: var(--text-1); }
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 4px;
|
||||
min-width: 130px;
|
||||
background: var(--bg-2);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 6px;
|
||||
padding: 4px;
|
||||
z-index: 50;
|
||||
}
|
||||
.menu-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 6px 10px;
|
||||
font-size: 11.5px;
|
||||
font-family: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-1);
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-item:hover { background: var(--hover-strong); }
|
||||
|
||||
/* ── tabs ────────────────────────────────────────────────────────── */
|
||||
.tab-nav {
|
||||
|
|
@ -359,7 +442,22 @@ input[type="search"]::-webkit-search-cancel-button { display: none; }
|
|||
gap: 4px;
|
||||
}
|
||||
.action-row { display: flex; gap: 4px; }
|
||||
.action-row .btn { flex: 1; }
|
||||
/* Compact action buttons (v2.1.8 density): 22px tall, smaller type, less
|
||||
padding. Operators have many actions visible at once — shrink the chrome
|
||||
per DESIGN.md "density over whitespace". */
|
||||
.action-row .btn {
|
||||
flex: 1;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.advanced-section .action-row .btn {
|
||||
height: 20px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
/* ── advanced section ────────────────────────────────────────────── */
|
||||
.advanced-section {
|
||||
|
|
|
|||
Loading…
Reference in a new issue