fix(downloads): keep layout reset in header menu

This commit is contained in:
Sucukdeluxe
2026-08-21 00:02:24 +02:00
parent 06a9b82f64
commit 09caf8f364
4 changed files with 7 additions and 38 deletions
@@ -512,7 +512,6 @@ export interface DownloadsTableHeaderProps {
actions: DownloadsTableActions;
columnOrder: readonly string[];
gridTemplate: string;
onResetColumnLayout?: () => void;
sortColumn: DownloadSortColumn;
sortDirection: "asc" | "desc";
selectedCount: number;
@@ -534,7 +533,7 @@ function moveColumnWithPointerActions(column: string, direction: -1 | 1, element
actions.onColumnPointerUp(column, pointerEvent(clientX));
}
export function DownloadsTableHeader({ actions, columnOrder, gridTemplate, onResetColumnLayout, sortColumn, sortDirection, selectedCount, visibleIds }: DownloadsTableHeaderProps): ReactElement {
export function DownloadsTableHeader({ actions, columnOrder, gridTemplate, sortColumn, sortDirection, selectedCount, visibleIds }: DownloadsTableHeaderProps): ReactElement {
const allSelected = visibleIds.length > 0 && selectedCount === visibleIds.length;
const mixedSelection = selectedCount > 0 && selectedCount < visibleIds.length;
return (
@@ -575,7 +574,7 @@ export function DownloadsTableHeader({ actions, columnOrder, gridTemplate, onRes
</div>
);
})}
<span className="downloads-action-cell downloads-header-action-cell" role="columnheader"><span>Aktion</span>{onResetColumnLayout ? <button aria-label="Spaltenlayout zurücksetzen" className="downloads-column-reset-button" onClick={onResetColumnLayout} title="Spaltenlayout zurücksetzen" type="button"></button> : null}</span>
<span className="downloads-action-cell" role="columnheader">Aktion</span>
</div>
);
}
@@ -149,7 +149,7 @@ export function DownloadsContent({ actions, model }: { actions: DownloadsViewAct
return (
<main className="downloads-content">
<div className="downloads-table" role="table" aria-label="Downloads">
<DownloadsTableHeader actions={actions} columnOrder={model.columnOrder} gridTemplate={model.gridTemplate} onResetColumnLayout={actions.onResetColumnLayout} selectedCount={model.actionableSelectedIds.length} sortColumn={model.sortColumn ?? "name"} sortDirection={model.sortDirection ?? "asc"} visibleIds={model.visibleRowIds} />
<DownloadsTableHeader actions={actions} columnOrder={model.columnOrder} gridTemplate={model.gridTemplate} selectedCount={model.actionableSelectedIds.length} sortColumn={model.sortColumn ?? "name"} sortDirection={model.sortDirection ?? "asc"} visibleIds={model.visibleRowIds} />
<VirtualizedDownloadsBody actions={actions} model={model} state={state} />
</div>
</main>
@@ -527,21 +527,6 @@
padding: 0;
}
.downloads-header-action-cell {
flex-direction: column;
gap: 1px;
line-height: 11px;
}
.downloads-header-action-cell .downloads-column-reset-button {
width: 20px;
height: 20px;
min-height: 20px;
border-radius: 4px;
font-size: 15px;
line-height: 1;
}
.downloads-collapse-button {
box-sizing: border-box;
flex: 0 0 30px;
+4 -19
View File
@@ -95,28 +95,13 @@ describe("Downloadtabellen-Spalten", () => {
expect(header.props.style.gridTemplateColumns).toBe(expected);
});
it("exposes a header action that delegates resetting the column layout", () => {
const reset = vi.fn();
const actions = createActions({ onResetColumnLayout: reset });
it("keeps the column layout reset out of the table action header", () => {
const actions = createActions();
const model = withRuntime(createInput());
const content = renderToStaticMarkup(<DownloadsContent actions={actions} model={model} />);
const header = DownloadsTableHeader({
actions,
columnOrder: model.columnOrder,
gridTemplate: model.gridTemplate,
onResetColumnLayout: actions.onResetColumnLayout,
selectedCount: 0,
sortColumn: "name",
sortDirection: "asc",
visibleIds: model.visibleRowIds
});
const button = findElement(header, (element) => element.type === "button" && element.props["aria-label"] === "Spaltenlayout zurücksetzen");
button.props.onClick();
expect(content).toContain('aria-label="Spaltenlayout zurücksetzen"');
expect(button.props.title).toBe("Spaltenlayout zurücksetzen");
expect(reset).toHaveBeenCalledTimes(1);
expect(content).not.toContain('aria-label="Spaltenlayout zurücksetzen"');
expect(content).toMatch(/class="downloads-action-cell" role="columnheader">Aktion<\/span>/);
});
it("never interpolates download grid tracks while column contents move", () => {