3430ef823e
ROOT CAUSE: UXP renders native <button> chrome that ignores CSS `background` and does not draw <svg>-only button content. The original panel "worked" only because its buttons had TEXT (native buttons render their text label); the redesign stripped text out, leaving empty grey pills. Non-<button> elements (the <span> status chips, the <label> search field + magnifier) render custom backgrounds and SVG children correctly in this exact UXP -- proof divs are the right vehicle. FIX: convert the 12 rail/dock/menu icon controls from <button> to <div role="button" tabindex="0">. Divs have no native `disabled`, so main.js installs a `disabled` accessor that reflects to a [disabled] attribute; CSS keys disabled styling off [disabled]. Reverted the non-working ::before cover back to direct backgrounds (divs honor them). Text buttons (Connect, slide-panel actions, glyph close) stay <button>. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
246 lines
15 KiB
HTML
246 lines
15 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Dragonflight MAM</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div id="root">
|
||
|
||
<!-- ── Connect Pane ─────────────────────────────────────────────── -->
|
||
<section id="connect-pane" class="pane pane-connect">
|
||
<div class="brand">
|
||
<div class="brand-icon">
|
||
<svg width="28" height="28" viewBox="0 0 24 24"><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
|
||
</div>
|
||
<div class="brand-title">Dragonflight</div>
|
||
<div class="brand-tag">Wild Dragon Broadcast</div>
|
||
<div class="brand-version" id="brand-version"></div>
|
||
</div>
|
||
<label class="field-label" for="server-url">Server URL</label>
|
||
<input id="server-url" type="text" placeholder="https://dragonflight.live" />
|
||
<label class="field-label" for="api-token">API Token</label>
|
||
<input id="api-token" type="password" placeholder="Bearer token from web UI" autocomplete="off" />
|
||
<button id="connect-btn" class="btn btn-primary" disabled>Connect</button>
|
||
<div id="connect-status" class="status-msg muted"></div>
|
||
</section>
|
||
|
||
<!-- ── Library Pane (app-shell: statusbar · rail · main · dock) ──── -->
|
||
<section id="library-pane" class="pane hidden">
|
||
<div class="app">
|
||
|
||
<!-- Connection collapsed to a status line: dot + host + version + ⋯ -->
|
||
<header class="statusbar">
|
||
<span class="signal-dot"></span>
|
||
<span id="connected-host" class="connected-host"></span>
|
||
<span id="panel-version" class="panel-version" title="Plugin version"></span>
|
||
<div id="menu-btn" role="button" tabindex="0" class="iconbtn iconbtn--sm" data-tip="More" data-tip-pos="down-left" aria-label="More">
|
||
<svg width="15" height="15" viewBox="0 0 24 24"><path fill="currentColor" d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||
</div>
|
||
<div id="status-menu" class="menu hidden" role="menu">
|
||
<button id="disconnect-btn" class="menu-item" role="menuitem">Disconnect</button>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="workspace">
|
||
|
||
<!-- Vertical icon rail: views on top, global actions below -->
|
||
<nav class="rail">
|
||
<div id="tab-library" role="button" tabindex="0" class="rail-btn active" data-tip="Library" data-tip-pos="right">
|
||
<svg width="18" height="18" viewBox="0 0 24 24"><rect x="3" y="3" width="7.5" height="7.5" rx="1.5" fill="currentColor"/><rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" fill="currentColor"/><rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" fill="currentColor"/><rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" fill="currentColor"/></svg>
|
||
</div>
|
||
<div id="tab-growing" role="button" tabindex="0" class="rail-btn" data-tip="Growing" data-tip-pos="right">
|
||
<svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z"/></svg>
|
||
<span id="growing-count" class="rail-count" style="display:none">0</span>
|
||
</div>
|
||
|
||
<span class="rail-spacer"></span>
|
||
|
||
<div id="export-timeline-btn" role="button" tabindex="0" class="rail-btn rail-btn--accent" data-tip="Export Timeline" data-tip-pos="right">
|
||
<svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/></svg>
|
||
</div>
|
||
<div id="refresh-btn" role="button" tabindex="0" class="rail-btn" data-tip="Refresh" data-tip-pos="right">
|
||
<svg width="18" height="18" viewBox="0 0 24 24"><path fill="currentColor" d="M17.65 6.35A7.96 7.96 0 0 0 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0 1 12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Main column -->
|
||
<div class="main">
|
||
|
||
<!-- Search + project filter -->
|
||
<div class="toolbar">
|
||
<label class="search">
|
||
<svg width="13" height="13" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27a6.5 6.5 0 0 0 1.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.5 6.5 0 0 0-7.27 7.27c.34 2.8 2.56 5.12 5.34 5.59a6.5 6.5 0 0 0 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
|
||
<input id="search-input" type="search" placeholder="Search assets" />
|
||
</label>
|
||
<select id="project-filter" class="filter-select" title="Filter by project">
|
||
<option value="all">All Projects</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Active sequence info bar -->
|
||
<div id="seq-info-bar" class="seq-info-bar hidden">
|
||
<span class="chip chip-ok">SEQ</span>
|
||
<span id="seq-info-name" class="seq-info-name"></span>
|
||
</div>
|
||
|
||
<!-- Asset grid (library tab) -->
|
||
<div id="library-container" class="grid-container">
|
||
<div id="asset-grid" class="asset-grid">
|
||
<div class="empty muted">Loading…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Growing grid -->
|
||
<div id="growing-container" class="grid-container hidden">
|
||
<div id="growing-grid" class="asset-grid">
|
||
<div class="empty muted">No growing files</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Details panel retired (v2.2.0) — card meta carries name/codec/duration. -->
|
||
<div id="details-panel" class="hidden"></div>
|
||
|
||
<!-- Progress + toast sit just above the action dock -->
|
||
<div id="progress-row" class="progress-row hidden">
|
||
<div class="progress-bar"><div id="progress-fill"></div></div>
|
||
<div id="progress-label" class="progress-label">…</div>
|
||
</div>
|
||
<div id="toast" class="toast hidden"></div>
|
||
|
||
<!-- Contextual action dock: text buttons replaced by icon buttons
|
||
with hover labels. Per-asset actions left, batch actions right. -->
|
||
<footer class="dock">
|
||
<div id="import-proxy-btn" role="button" tabindex="0" class="iconbtn iconbtn--primary" data-tip="Import Proxy" data-tip-pos="up" disabled>
|
||
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
|
||
</div>
|
||
<div id="import-hires-btn" role="button" tabindex="0" class="iconbtn" data-tip="Import Hi-Res" data-tip-pos="up" disabled>
|
||
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z"/></svg>
|
||
</div>
|
||
<div id="mount-live-btn" role="button" tabindex="0" class="iconbtn" data-tip="Mount Live" data-tip-pos="up" disabled>
|
||
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M14 12c0 1.11-.89 2-2 2s-2-.89-2-2 .89-2 2-2 2 .89 2 2zm-2-6c-3.31 0-6 2.69-6 6 0 2.22 1.21 4.15 3 5.19l1-1.74A3.98 3.98 0 0 1 8 12c0-2.21 1.79-4 4-4s4 1.79 4 4c0 1.48-.81 2.75-2 3.45l1 1.74c1.79-1.04 3-2.97 3-5.19 0-3.31-2.69-6-6-6zm0-4C7.58 2 4 5.58 4 10c0 2.96 1.61 5.53 4 6.92l1-1.73C7.21 14.07 6 12.18 6 10c0-3.31 2.69-6 6-6s6 2.69 6 6c0 2.18-1.21 4.07-3 5.19l1 1.73c2.39-1.39 4-3.96 4-6.92 0-4.42-3.58-8-8-8z"/></svg>
|
||
</div>
|
||
<div id="relink-btn" role="button" tabindex="0" class="iconbtn" data-tip="Relink Hi-Res" data-tip-pos="up" disabled>
|
||
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg>
|
||
</div>
|
||
|
||
<span class="dock-sep"></span>
|
||
|
||
<div id="import-all-btn" role="button" tabindex="0" class="iconbtn" data-tip="Import All" data-tip-pos="up-left" disabled>
|
||
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>
|
||
</div>
|
||
<div id="export-conform-btn" role="button" tabindex="0" class="iconbtn" data-tip="Export & Conform" data-tip-pos="up-left" disabled>
|
||
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/></svg>
|
||
</div>
|
||
<div id="fetch-relink-btn" role="button" tabindex="0" class="iconbtn" data-tip="Fetch & Relink All" data-tip-pos="up-left" disabled>
|
||
<svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46A7.93 7.93 0 0 0 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74A7.93 7.93 0 0 0 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/></svg>
|
||
</div>
|
||
</footer>
|
||
|
||
</div><!-- /main -->
|
||
</div><!-- /workspace -->
|
||
</div><!-- /app -->
|
||
</section>
|
||
|
||
<!-- ── Export Timeline Slide Panel ──────────────────────────────── -->
|
||
<div id="export-overlay" class="slide-overlay hidden"></div>
|
||
<div id="export-panel" class="slide-panel hidden">
|
||
<div class="slide-header">
|
||
<span class="slide-title">Push Timeline to MAM</span>
|
||
<button id="export-close-btn" class="btn btn-icon">✕</button>
|
||
</div>
|
||
<div class="slide-body">
|
||
<label class="field-label">Sequence name</label>
|
||
<input id="export-seq-name" type="text" placeholder="Sequence 1" />
|
||
<label class="field-label">Target project</label>
|
||
<select id="export-proj-select"><option value="">— Select project —</option></select>
|
||
<div id="export-clip-info" class="clip-info"></div>
|
||
</div>
|
||
<div class="slide-footer">
|
||
<button id="export-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||
<button id="export-confirm-btn" class="btn btn-primary">Push to MAM</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Export & Conform Slide Panel ─────────────────────────────── -->
|
||
<div id="conform-overlay" class="slide-overlay hidden"></div>
|
||
<div id="conform-panel" class="slide-panel hidden">
|
||
<div class="slide-header">
|
||
<span class="slide-title">Export & Conform</span>
|
||
<button id="conform-close-btn" class="btn btn-icon">✕</button>
|
||
</div>
|
||
<div class="slide-body">
|
||
<label class="field-label">Target project</label>
|
||
<select id="conform-proj-select"><option value="">— Select project —</option></select>
|
||
<label class="field-label">Preset</label>
|
||
<div id="preset-cards" class="preset-grid">
|
||
<div class="preset-card selected" data-preset="broadcast"><div class="pc-title">Broadcast</div><div class="pc-desc">ProRes 422 HQ · 1080p · 48kHz</div></div>
|
||
<div class="preset-card" data-preset="web"><div class="pc-title">Web</div><div class="pc-desc">H.264 · 1080p · AAC 320k</div></div>
|
||
<div class="preset-card" data-preset="archive"><div class="pc-title">Archive</div><div class="pc-desc">ProRes 4444 · UHD · 48kHz</div></div>
|
||
<div class="preset-card" data-preset="custom"><div class="pc-title">Custom</div><div class="pc-desc">Manual settings</div></div>
|
||
</div>
|
||
<label class="field-label">Codec</label>
|
||
<select id="conform-codec">
|
||
<option value="prores_hq">ProRes 422 HQ</option>
|
||
<option value="prores_4444">ProRes 4444</option>
|
||
<option value="h264">H.264</option>
|
||
<option value="h265">H.265 / HEVC</option>
|
||
<option value="dnxhr_hq">DNxHR HQ</option>
|
||
</select>
|
||
<label class="field-label">Quality</label>
|
||
<select id="conform-quality">
|
||
<option value="high">High</option>
|
||
<option value="medium" selected>Medium</option>
|
||
<option value="low">Low</option>
|
||
</select>
|
||
<label class="field-label">Resolution</label>
|
||
<select id="conform-resolution">
|
||
<option value="uhd">UHD (3840×2160)</option>
|
||
<option value="1080p" selected>Full HD (1920×1080)</option>
|
||
<option value="720p">HD (1280×720)</option>
|
||
<option value="source">Source</option>
|
||
</select>
|
||
<label class="field-label">Audio</label>
|
||
<select id="conform-audio">
|
||
<option value="broadcast">Broadcast (48kHz PCM)</option>
|
||
<option value="web">Web (AAC 320k)</option>
|
||
<option value="archive">Archive (96kHz PCM)</option>
|
||
</select>
|
||
<div id="conform-clip-info" class="clip-info"></div>
|
||
</div>
|
||
<div class="slide-footer">
|
||
<button id="conform-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||
<button id="conform-start-btn" class="btn btn-primary" disabled>Start Conform</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ── Fetch & Relink Slide Panel ───────────────────────────────── -->
|
||
<div id="relink-overlay" class="slide-overlay hidden"></div>
|
||
<div id="relink-panel" class="slide-panel hidden">
|
||
<div class="slide-header">
|
||
<span class="slide-title">Fetch & Relink Hi-Res</span>
|
||
<button id="relink-close-btn" class="btn btn-icon">✕</button>
|
||
</div>
|
||
<div class="slide-body">
|
||
<div class="field-label" style="margin-bottom:6px">Select clips to upgrade to hi-res:</div>
|
||
<div id="clip-list" class="clip-list"></div>
|
||
<div id="relink-summary" class="relink-summary hidden"></div>
|
||
</div>
|
||
<div class="slide-footer">
|
||
<button id="relink-cancel-btn" class="btn btn-secondary">Cancel</button>
|
||
<button id="relink-start-btn" class="btn btn-primary" disabled>Start Relink</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div><!-- /#root -->
|
||
|
||
<script src="src/ui.js"></script>
|
||
<script src="src/api.js"></script>
|
||
<script src="src/library.js"></script>
|
||
<script src="src/import-flow.js"></script>
|
||
<script src="src/timeline.js"></script>
|
||
<script src="src/tooltip.js"></script>
|
||
<script src="src/main.js"></script>
|
||
</body>
|
||
</html>
|