Administrator/Multi-Debrid-Downloader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 596 Wiki Activity

fix(history): align columns and animate details

Browse Source 
Anchor the history action column to the table edge, left-align size values with their header, and replace the raw expanded row with a measured disclosure surface. Reuse the global animation preference so history details open and close smoothly when enabled and switch immediately when animations are disabled. Preserve responsive column resizing and cover the new model and layout behavior with focused tests.
This commit is contained in:
Sucukdeluxe
2026-08-15 04:40:02 +02:00
parent 83c9afca90
commit 1d71860d91
5 changed files with 194 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/history-view.test.tsx
+25 -9
View File
@@ -432,8 +432,9 @@ describe("HistoryView", () => {
expect(actionCell.props.children.props.children).toBe("⋮");
expect(styles).toMatch(/\.history-row-action button\s*\{[^}]*background:\s*var\(--ui-input\);[^}]*border:\s*1px solid var\(--ui-border\);[^}]*height:\s*30px;[^}]*width:\s*30px;/s);
expect(styles).toMatch(/\.history-table-header-row > span,\s*\.history-row > span\s*\{[^}]*text-align:\s*left;/s);
expect(styles).toMatch(/\.history-table-header-row > span:nth-child\(4\),\s*\.history-row > span:nth-child\(4\)\s*\{[^}]*text-align:\s*right;/s);
expect(styles).toMatch(/\.history-row-action\s*\{[^}]*place-items:\s*center;/s);
expect(styles).not.toMatch(/\.history-table-header-row > span:nth-child\(4\),\s*\.history-row > span:nth-child\(4\)\s*\{[^}]*text-align:\s*right;/s);
expect(styles).toMatch(/\.history-table-header-row > span:last-child\s*\{[^}]*justify-items:\s*end;/s);
expect(styles).toMatch(/\.history-row-action\s*\{[^}]*place-items:\s*center end;/s);
});
it("renders each visual marker once, occupied main rows separately from closed detail rows and an honest footer", () => {
@@ -448,8 +449,8 @@ describe("HistoryView", () => {
expect(html.match(new RegExp(`data-visual-region=\\"${marker}\\"`, "g"))).toHaveLength(1);
}
expect(html.match(/data-history-row-id=/g)).toHaveLength(2);
expect(html).not.toContain("history-detail-row");
expect(html).toContain("1–2 von 2");
expect(html).not.toContain("history-detail-row");
expect(html).toContain("1–2 von 2");
});
it("dispatches selection, expansion, select-all and context coordinates with exact visible ids", () => {
@@ -566,11 +567,26 @@ describe("HistoryView", () => {
/>
);
expect(html).toContain("history-detail-row");
expect(html).toContain("history-copyable");
expect(html).toContain("C:\\Downloads\\Heute Paket");
expect(html).toContain("https://rapidgator.net/file/test");
});
expect(html).toContain("history-detail-row");
expect(html).toContain("history-detail-disclosure is-expanded");
expect(html).toContain('aria-hidden="false"');
expect(html).toContain("history-copyable");
expect(html).toContain("C:\\Downloads\\Heute Paket");
expect(html).toContain("https://rapidgator.net/file/test");
});
it("uses the global animation setting for the history disclosure surface", () => {
const animated = buildHistoryViewModel(entries.slice(0, 1), "all", "", [], ["today"], false, "", now, true);
const immediate = buildHistoryViewModel(entries.slice(0, 1), "all", "", [], ["today"], false, "", now, false);
const animatedHtml = renderToStaticMarkup(<HistoryView actions={createActions()} model={animated} />);
const immediateHtml = renderToStaticMarkup(<HistoryView actions={createActions()} model={immediate} />);
expect(animated.animationsEnabled).toBe(true);
expect(immediate.animationsEnabled).toBe(false);
expect(animatedHtml).toContain("history-detail-disclosure is-expanded");
expect(animatedHtml).not.toContain("is-history-motion-disabled");
expect(immediateHtml).toContain("history-detail-disclosure is-expanded is-history-motion-disabled");
});
});
describe("visual history states", () => {