From cb85e08eec46c9566863b1d6c01a9651bef32b97 Mon Sep 17 00:00:00 2001 From: Sucukdeluxe <259325684+Sucukdeluxe@users.noreply.github.com> Date: Sun, 6 Sep 2026 13:17:20 +0200 Subject: [PATCH] style: swap date and status in queue card footer --- CHANGELOG.md | 4 ++++ PROJECT_MEMORY.md | 1 + scripts/smoke-test-queue-cards.js | 7 +++++-- scripts/smoke-test-workspace-ui.js | 8 ++++---- src/renderer-queue.ts | 4 ++-- src/style-modules.production-path.test.ts | 2 +- src/styles-workflows.css | 5 +++-- 7 files changed, 20 insertions(+), 11 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d49b2a4..0189450 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Changelog +## Unreleased + +- Place the queue-card date on the left beside the details arrow and the download status on the right below the progress bar. + ## 1.0.20 - 2026-09-06 - Fix automatic media-tool setup in long Windows paths by using the built-in archive extractor. Report extraction failures instead of accepting incomplete installations. diff --git a/PROJECT_MEMORY.md b/PROJECT_MEMORY.md index c5ca68f..3c632fb 100644 --- a/PROJECT_MEMORY.md +++ b/PROJECT_MEMORY.md @@ -20,6 +20,7 @@ Aktueller veröffentlichter Stand: **1.0.20**, Tag `v1.0.20`, veröffentlicht am ## Letzte Änderungen +- Nach Release 1.0.20: Datum und Status in der Queue-Card getauscht. Datum steht jetzt links neben dem Detailpfeil, Status rechts unter dem Fortschrittsbalken. Schriftgrößen, gelber Wartepunkt und Aufklappanimation bleiben erhalten. Build, 19 gezielte Tests, Queue-UI-Test in Deutsch/Englisch und Hell/Dunkel sowie vollständiger Workspace-UI-Test erfolgreich; Lint ohne Fehler bei 15 bestehenden Warnungen. Änderung zunächst nur auf `public-v1`/Hot-Dev, noch nicht veröffentlicht. - Queue-Detailpfeil reagiert seit der Nachbesserung am 6. September 2026 auf jeden Klick, auch während der Animation. Die frühere Sperre für `MouseEvent.detail > 1` hatte schnelle Folge-Klicks verschluckt und wurde entfernt. Doppelklick auf freie Kartenflächen bleibt erhalten; auf dem Pfeil zählen beide Klicks einzeln. Build, gezielte Queue-Tests und isolierte UI-Prüfung inklusive schneller Klickfolgen erfolgreich. - Queue-Details fahren seit dem 6. September 2026 beim Auf-/Zuklappen animiert ein und aus: Grid-Höhe und Deckkraft über 220/180 ms, Pfeilrotation über 220 ms. Bei reduzierten Windows-Animationen bleibt eine kurze 160-ms-Transition wie bei den bestehenden Workspace-Steuerelementen erhalten. Eingeklappte Details sind `inert`, damit unsichtbare Dateiaktionen nicht per Tastatur erreichbar sind. Build, 19 gezielte Tests und isolierter Queue-UI-Test einschließlich gemessener Zwischenhöhen in beiden Bewegungsmodi erfolgreich. - Queue-Card-Nachbesserung am 6. September 2026: Wartestatus ohne sichtbare Umrandung und ohne gelblichen Hintergrund; gelber Statuspunkt und bisherige Abstände bleiben erhalten. In Hell/Dunkel geprüft, Queue-UI- und Stylesheet-Tests erfolgreich. diff --git a/scripts/smoke-test-queue-cards.js b/scripts/smoke-test-queue-cards.js index b3c5cda..ea41496 100644 --- a/scripts/smoke-test-queue-cards.js +++ b/scripts/smoke-test-queue-cards.js @@ -51,11 +51,14 @@ async function main() { const rect = (selector) => item.querySelector(selector).getBoundingClientRect(); const date = rect('.queue-date'); const bar = rect('.queue-progress-wrap'); + const status = rect('.queue-status-badge'); + const toggle = rect('.queue-details-toggle'); const remove = rect('.remove'); return { id: item.dataset.id, dateBelow: date.top >= bar.bottom, - dateRight: Math.abs(date.right - bar.right) <= 1, + dateLeft: date.left >= toggle.right && date.right < status.left, + statusRight: Math.abs(status.right - bar.right) <= 1, dateSize: parseFloat(getComputedStyle(item.querySelector('.queue-date')).fontSize), removeSize: Math.min(remove.width, remove.height), overflow: item.scrollWidth - item.clientWidth, @@ -63,7 +66,7 @@ async function main() { }; })); for (const card of layout) { - assert(card.dateBelow && card.dateRight, `Date placement: ${JSON.stringify(card)}`); + assert(card.dateBelow && card.dateLeft && card.statusRight, `Footer placement: ${JSON.stringify(card)}`); assert(card.dateSize >= 12 && card.removeSize >= 32 && card.tinyText === 0, `Readability: ${JSON.stringify(card)}`); assert(card.overflow <= 1, `Card overflow: ${JSON.stringify(card)}`); } diff --git a/scripts/smoke-test-workspace-ui.js b/scripts/smoke-test-workspace-ui.js index b880b66..8733ddf 100644 --- a/scripts/smoke-test-workspace-ui.js +++ b/scripts/smoke-test-workspace-ui.js @@ -1222,7 +1222,7 @@ async function run() { const remove = downloading?.querySelector('.remove'); const statusRect = statusLabel?.getBoundingClientRect(); const removeRect = remove?.getBoundingClientRect(); - const statusLeftEdges = leftEdges('.status'); + const statusRightEdges = alignedRows.map((row) => row?.querySelector('.queue-status-badge')?.getBoundingClientRect().right || 0); const titleLeftEdges = leftEdges('.title'); const dateLeftEdges = leftEdges('.queue-date'); const successProbe = document.createElement('span'); @@ -1258,7 +1258,7 @@ async function run() { startingAnimated: starting?.querySelector('.queue-progress-status')?.classList.contains('is-starting') === true, resumedProgress: paused?.querySelector('.queue-progress-wrap')?.getAttribute('aria-valuenow') || '', resumedBarWidth: paused?.querySelector('.queue-progress-bar')?.style.width || '', - statusLeftEdges, + statusRightEdges, titleLeftEdges, dateLeftEdges, dateText: starting?.querySelector('.queue-date')?.textContent || '', @@ -1283,8 +1283,8 @@ async function run() { check(dynamicQueue.startingStatusCount === 1, `Starting queue status is rendered ${dynamicQueue.startingStatusCount} times instead of once`); check(dynamicQueue.startingStatusText === dynamicQueue.expectedStartingStatusText && dynamicQueue.startingAnimated, `Queue start state is not visibly active: ${dynamicQueue.startingStatusText}`); check(dynamicQueue.resumedProgress === '42' && dynamicQueue.resumedBarWidth === '42%', `Resuming queue item loses its paused progress: value=${dynamicQueue.resumedProgress}, width=${dynamicQueue.resumedBarWidth}`); - check(dynamicQueue.statusLeftEdges.every((value) => value > 0) && dynamicQueue.titleLeftEdges.every((value) => value > 0) && dynamicQueue.dateLeftEdges.every((value) => value > 0), 'Queue alignment fixture was measured while hidden'); - check(Math.max(...dynamicQueue.statusLeftEdges) - Math.min(...dynamicQueue.statusLeftEdges) <= 1, `Queue status columns are offset: ${dynamicQueue.statusLeftEdges.join(', ')}`); + check(dynamicQueue.statusRightEdges.every((value) => value > 0) && dynamicQueue.titleLeftEdges.every((value) => value > 0) && dynamicQueue.dateLeftEdges.every((value) => value > 0), 'Queue alignment fixture was measured while hidden'); + check(Math.max(...dynamicQueue.statusRightEdges) - Math.min(...dynamicQueue.statusRightEdges) <= 1, `Queue status columns are offset: ${dynamicQueue.statusRightEdges.join(', ')}`); check(Math.max(...dynamicQueue.titleLeftEdges) - Math.min(...dynamicQueue.titleLeftEdges) <= 1, `Queue title columns are offset: ${dynamicQueue.titleLeftEdges.join(', ')}`); check(Math.max(...dynamicQueue.dateLeftEdges) - Math.min(...dynamicQueue.dateLeftEdges) <= 1, `Queue date columns are offset: ${dynamicQueue.dateLeftEdges.join(', ')}`); check(dynamicQueue.dateText === '10.08.2026', `Queue VOD date is missing or incorrectly formatted: ${dynamicQueue.dateText}`); diff --git a/src/renderer-queue.ts b/src/renderer-queue.ts index 4d94e74..e4af696 100644 --- a/src/renderer-queue.ts +++ b/src/renderer-queue.ts @@ -718,9 +718,9 @@ function renderQueue(): void {
- ${safeStatusLabel} + ${safeDate}
- ${safeDate} + ${safeStatusLabel}
${safeProgressStatus} diff --git a/src/style-modules.production-path.test.ts b/src/style-modules.production-path.test.ts index 8fb558e..ba689b5 100644 --- a/src/style-modules.production-path.test.ts +++ b/src/style-modules.production-path.test.ts @@ -20,7 +20,7 @@ describe('production style modules', () => { .replace(/\r\n/g, '\n')); const digest = createHash('sha256').update(content).digest('hex'); - expect(digest).toBe('b937d229d00f4a35098f288399331025580a1448f7c7aab7908f12ec826628e9'); + expect(digest).toBe('eccaa49c879b53f95816408514a741f9aef7701ec9153ef9c8d70173a5b67056'); }); test('derives the Windows hot-development executable version from package metadata', () => { diff --git a/src/styles-workflows.css b/src/styles-workflows.css index b4b0a26..3edf9d6 100644 --- a/src/styles-workflows.css +++ b/src/styles-workflows.css @@ -209,16 +209,17 @@ .queue-date { flex-shrink: 0; - margin-left: auto; color: var(--text-secondary); font-size: 12px; line-height: 18px; font-variant-numeric: tabular-nums; - text-align: right; + text-align: left; } .queue-status-badge { display: inline-flex; + flex-shrink: 0; + margin-left: auto; align-items: center; gap: 6px; padding: 2px 7px;