From e4e69973e519a37f1a43599c08556551315cdf48 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 28 May 2026 13:03:56 -0400 Subject: [PATCH] =?UTF-8?q?ui(uxp):=20v2.2.0=20=E2=80=94=20density=20pass:?= =?UTF-8?q?=20drop=20details=20panel,=20tighter=20buttons,=20collapsible?= =?UTF-8?q?=20Advanced?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User feedback after v2.1.9: panel still chrome-heavy. The Asset Info panel duplicates what the card already shows; 8 buttons across 3 full-width rows still claim too much vertical real estate. Three surgical changes: 1. Drop the Asset Info details panel entirely. Card meta (name + duration + codec) already carries everything we showed in the key:value table. Library._showDetails / hideDetails become no-ops so the existing call sites in main.js + library.js don't need conditional branches. 2. Shrink .action-row .btn to 20px tall, 10.5px font, 6px horiz padding, 3px radius. Two rows of compact buttons fit where one bulky row used to. 3. Collapse Advanced section behind a toggle (▸ / ▾). Default collapsed so the main 6 buttons stay the primary action surface; click the row to expand and reveal Export & Conform / Fetch & Relink All. Per DESIGN.md "density over whitespace." Co-Authored-By: Claude Opus 4.7 --- services/premiere-plugin-uxp/index.html | 30 ++++++------- services/premiere-plugin-uxp/manifest.json | 2 +- services/premiere-plugin-uxp/src/library.js | 27 +++-------- services/premiere-plugin-uxp/src/main.js | 10 +++++ services/premiere-plugin-uxp/styles.css | 50 +++++++++++++++------ 5 files changed, 66 insertions(+), 53 deletions(-) diff --git a/services/premiere-plugin-uxp/index.html b/services/premiere-plugin-uxp/index.html index 578fdb8..67cdb04 100644 --- a/services/premiere-plugin-uxp/index.html +++ b/services/premiere-plugin-uxp/index.html @@ -89,17 +89,10 @@ - - + +
@@ -126,12 +119,17 @@
- +
-
Advanced
-
- - + +
diff --git a/services/premiere-plugin-uxp/manifest.json b/services/premiere-plugin-uxp/manifest.json index af129ca..db6c4f0 100644 --- a/services/premiere-plugin-uxp/manifest.json +++ b/services/premiere-plugin-uxp/manifest.json @@ -2,7 +2,7 @@ "manifestVersion": 5, "id": "net.wilddragon.dragonflight.uxp", "name": "Dragonflight MAM", - "version": "2.1.9", + "version": "2.2.0", "main": "index.html", "host": { "app": "premierepro", diff --git a/services/premiere-plugin-uxp/src/library.js b/services/premiere-plugin-uxp/src/library.js index b5d4128..6be4101 100644 --- a/services/premiere-plugin-uxp/src/library.js +++ b/services/premiere-plugin-uxp/src/library.js @@ -199,32 +199,15 @@ }; Library.hideDetails = function () { + // v2.2.0: details panel dropped — clearing selection is enough. Library.state.selectedId = null; - document.getElementById('details-panel').classList.add('hidden'); Library._syncActions(); }; - Library._showDetails = function (asset) { - const p = document.getElementById('details-panel'); - p.classList.remove('hidden'); - document.getElementById('d-filename').textContent = asset.display_name || asset.filename || '—'; - document.getElementById('d-codec').textContent = asset.codec || asset.media_type || '—'; - document.getElementById('d-res').textContent = asset.resolution || '—'; - document.getElementById('d-fps').textContent = asset.fps ? asset.fps + ' fps' : '—'; - document.getElementById('d-dur').textContent = asset.duration_ms ? UI.formatDuration(asset.duration_ms / 1000) : '—'; - document.getElementById('d-size').textContent = asset.file_size ? UI.formatBytes(Number(asset.file_size)) : '—'; - const tagsEl = document.getElementById('d-tags'); - tagsEl.innerHTML = ''; - const tags = asset.tags || []; - if (tags.length) { - tags.forEach(t => { - const s = document.createElement('span'); - s.className = 'tag'; s.textContent = t; - tagsEl.appendChild(s); - }); - } else { - tagsEl.innerHTML = '—'; - } + Library._showDetails = function (_asset) { + // v2.2.0: card already shows display_name / duration / codec, and the + // accent-bordered selected card is the affordance. No-op kept so call + // sites in main.js / library.js don't need branching. }; Library._syncActions = function () { diff --git a/services/premiere-plugin-uxp/src/main.js b/services/premiere-plugin-uxp/src/main.js index 9653de6..cf9e2a0 100644 --- a/services/premiere-plugin-uxp/src/main.js +++ b/services/premiere-plugin-uxp/src/main.js @@ -184,6 +184,16 @@ $('export-timeline-btn').addEventListener('click', openExportPanel); $('export-conform-btn').addEventListener('click', openConformPanel); $('fetch-relink-btn').addEventListener('click', openRelinkPanel); + + // Advanced collapsible toggle (v2.2.0). + const advToggle = $('advanced-toggle'); + const advBody = $('advanced-body'); + if (advToggle && advBody) { + advToggle.addEventListener('click', () => { + const open = advBody.classList.toggle('hidden') === false; + advToggle.setAttribute('aria-expanded', String(open)); + }); + } } function _disableImportBtns(dis) { diff --git a/services/premiere-plugin-uxp/styles.css b/services/premiere-plugin-uxp/styles.css index 4cbcc57..d2b3201 100644 --- a/services/premiere-plugin-uxp/styles.css +++ b/services/premiere-plugin-uxp/styles.css @@ -460,37 +460,59 @@ input[type="search"]::-webkit-search-cancel-button { display: none; } gap: 4px; } .action-row { display: flex; gap: 4px; } -/* 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". */ +/* Compact action buttons (v2.2.0): tighter again. 20px tall, 10.5px font, + thinner padding. Two rows fit where one used to. */ .action-row .btn { flex: 1; - height: 22px; - padding: 0 8px; - font-size: 11px; + height: 20px; + padding: 0 6px; + font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; -} -.advanced-section .action-row .btn { - height: 20px; - font-size: 10.5px; + border-radius: 3px; } -/* ── advanced section ────────────────────────────────────────────── */ +/* ── advanced section ────────────────────────────────────────────── + v2.2.0: collapsible. The toggle is a tiny full-width strip with a + caret + label; clicking it reveals the action row below. Default + collapsed so the main 6 buttons stay the dominant action surface. */ .advanced-section { flex-shrink: 0; border-top: 1px solid var(--border); - padding: 6px 0 8px; margin-top: 4px; } +.advanced-toggle { + display: flex; + align-items: center; + gap: 6px; + width: 100%; + padding: 4px 4px; + font: inherit; + background: transparent; + border: none; + border-radius: 3px; + cursor: pointer; + color: var(--text-3); + transition: color var(--t-fast), background var(--t-fast); +} +.advanced-toggle:hover { color: var(--text-2); background: var(--hover); } +.advanced-caret { + display: inline-block; + font-size: 8px; + width: 10px; + text-align: center; + transition: transform var(--t-fast); +} +.advanced-toggle[aria-expanded="true"] .advanced-caret { transform: rotate(90deg); } .advanced-title { font-size: 9.5px; font-weight: 700; - color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; - margin-bottom: 5px; +} +.advanced-body { + padding: 4px 0 8px; } /* ── progress ────────────────────────────────────────────────────── */