Fix disclosure fading and global package toggles
Fade the shared virtual item group from transparent to opaque while expanding and reverse the opacity while collapsing, preserving the clipping row as the geometry owner. Move the downloads package toggle to the far toolbar edge and add a collector toolbar toggle backed by raw unfiltered package IDs. Cover opacity endpoints, intermediate frame geometry, toolbar ordering, and filter-independent collector toggle semantics.
This commit is contained in:
@@ -11,6 +11,7 @@ import {
|
||||
selectCollectorPackageLinks
|
||||
} from "../src/renderer/views/collector/collector-model";
|
||||
import { CollectorContent, CollectorInputDialog, CollectorSidebar, CollectorToolbar, CollectorView, type CollectorViewActions } from "../src/renderer/views/collector/CollectorView";
|
||||
import * as collectorViewModule from "../src/renderer/views/collector/CollectorView";
|
||||
|
||||
function visitElements(node: ReactNode, visit: (element: ReactElement) => void): void {
|
||||
if (Array.isArray(node)) {
|
||||
@@ -48,6 +49,7 @@ function createActions(overrides: Partial<CollectorViewActions> = {}): Collector
|
||||
onLinkSelectionChange: () => {},
|
||||
onPackageSelectionChange: () => {},
|
||||
onPackageCollapseChange: () => {},
|
||||
onToggleAllPackages: () => {},
|
||||
onRemoveSelected: () => {},
|
||||
...overrides
|
||||
};
|
||||
@@ -111,6 +113,19 @@ describe("collector workspace model", () => {
|
||||
{ id: "all", label: "Alle Links", count: 4 }, { id: "online", label: "Online", count: 2 }, { id: "unknown", label: "Ungeprüft", count: 1 }, { id: "offline", label: "Offline", count: 1 }
|
||||
]);
|
||||
});
|
||||
|
||||
it("toggles every raw package even when the workspace shows only a filtered subset", () => {
|
||||
const toggleAllCollectorPackageIds = (collectorViewModule as unknown as {
|
||||
toggleAllCollectorPackageIds?: (packageIds: readonly string[], collapsedPackageIds: ReadonlySet<string>) => Set<string>;
|
||||
}).toggleAllCollectorPackageIds;
|
||||
expect(toggleAllCollectorPackageIds).toBeTypeOf("function");
|
||||
if (!toggleAllCollectorPackageIds) return;
|
||||
|
||||
const rawPackageIds = packages.map((pkg) => pkg.id);
|
||||
expect([...toggleAllCollectorPackageIds(rawPackageIds, new Set())].sort()).toEqual(["package-mixed", "package-sbs"]);
|
||||
expect([...toggleAllCollectorPackageIds(rawPackageIds, new Set(["package-sbs"]))].sort()).toEqual(["package-mixed", "package-sbs"]);
|
||||
expect([...toggleAllCollectorPackageIds(rawPackageIds, new Set(rawPackageIds))]).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("CollectorView", () => {
|
||||
@@ -166,6 +181,24 @@ describe("CollectorView", () => {
|
||||
expect(all).toBe(1);
|
||||
});
|
||||
|
||||
it("keeps the global package toggle enabled at the right toolbar edge despite active filters", () => {
|
||||
let toggles = 0;
|
||||
const model = buildCollectorWorkspaceViewModel(packages, "online", "no-visible-result", false, [], [], "", true);
|
||||
const toolbar = CollectorToolbar({ actions: createActions({ onToggleAllPackages: () => { toggles += 1; } }), model });
|
||||
const toolbarButtons: ReactElement[] = [];
|
||||
visitElements(toolbar, (element) => {
|
||||
if (element.type === "button") toolbarButtons.push(element);
|
||||
});
|
||||
const toggle = findButton(toolbar, "Alle ein-/ausklappen");
|
||||
|
||||
expect(model.empty).toBe(true);
|
||||
expect(model.totalCount).toBe(4);
|
||||
expect(toggle.props.disabled).toBe(false);
|
||||
expect(toolbarButtons.at(-1)?.props.children).toBe("Alle ein-/ausklappen");
|
||||
toggle.props.onClick();
|
||||
expect(toggles).toBe(1);
|
||||
});
|
||||
|
||||
it("renders accessible mixed package selection", () => {
|
||||
const html = renderToStaticMarkup(<CollectorContent actions={createActions()} model={buildCollectorWorkspaceViewModel(packages, "all", "", false, ["link-1"], [], "", true)} />);
|
||||
expect(html).toContain("aria-label=\"Paket SBS14HD auswählen\"");
|
||||
|
||||
@@ -371,7 +371,7 @@ describe("virtualisierte Paketanimation", () => {
|
||||
expect(prepared.animated).toBe(true);
|
||||
expect(prepared.rows.map((row) => [row.id, row.height, row.disclosurePhase, row.disclosureOpacity])).toEqual([
|
||||
["package-a", 40, "stable", 1],
|
||||
["package-a:items", 0, "entering", 1],
|
||||
["package-a:items", 0, "entering", 0],
|
||||
["package-b", 40, "stable", 1],
|
||||
["b-1", 38, "stable", 1]
|
||||
]);
|
||||
@@ -411,7 +411,7 @@ describe("virtualisierte Paketanimation", () => {
|
||||
expect(preparedGroup?.type === "item-group" ? preparedGroup.items.map((row) => row.height) : []).toEqual([38, 38]);
|
||||
expect(activateDownloadDisclosureTransition(prepared.rows).map((row) => [row.id, row.height, row.disclosureOpacity])).toEqual([
|
||||
["package-a", 40, 1],
|
||||
["package-a:items", 0, 1],
|
||||
["package-a:items", 0, 0],
|
||||
["package-b", 40, 1],
|
||||
["b-1", 38, 1]
|
||||
]);
|
||||
@@ -1098,6 +1098,23 @@ describe("downloads view", () => {
|
||||
expect(toolbar).not.toContain("downloads-search-input");
|
||||
});
|
||||
|
||||
it("places the global package disclosure action at the right toolbar edge", () => {
|
||||
let toggles = 0;
|
||||
const model = withRuntime(createInput({ filter: "paused" }));
|
||||
const actions = createActions({ onToggleAllPackages: () => { toggles += 1; } });
|
||||
const sidebar = renderToStaticMarkup(<DownloadsSidebar actions={actions} model={model} />);
|
||||
const toolbar = DownloadsToolbar({ actions, model });
|
||||
const toolbarButtons: ReactElement[] = [];
|
||||
visitElements(toolbar, (element) => {
|
||||
if (element.type === "button") toolbarButtons.push(element);
|
||||
});
|
||||
|
||||
expect(sidebar).not.toContain("Alle ein-/ausklappen");
|
||||
expect(toolbarButtons.at(-1)?.props.children).toBe("Alle ein-/ausklappen");
|
||||
findButton(toolbar, "Alle ein-/ausklappen").props.onClick();
|
||||
expect(toggles).toBe(1);
|
||||
});
|
||||
|
||||
it("blocks native package dragging while preserving explicit reorder actions", () => {
|
||||
const model = withRuntime(createInput());
|
||||
const component = PackageCardContent({
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import type { DownloadLogicalRow } from "../../src/renderer/views/downloads/downloads-model";
|
||||
import {
|
||||
activateDownloadDisclosureTransition,
|
||||
prepareDownloadDisclosureTransition,
|
||||
stableDownloadDisclosureRows,
|
||||
type DownloadDisclosureRow
|
||||
} from "../../src/renderer/views/downloads/download-disclosure-transition";
|
||||
import {
|
||||
DOWNLOAD_FILE_ROW_HEIGHT,
|
||||
DOWNLOAD_PACKAGE_ROW_HEIGHT
|
||||
} from "../../src/renderer/views/downloads/download-virtualizer";
|
||||
|
||||
type DisclosureFrameRow = {
|
||||
id: string;
|
||||
top: number;
|
||||
bottom: number;
|
||||
opacity: number;
|
||||
};
|
||||
|
||||
function packageRow(id: string, collapsed: boolean, itemIds: readonly string[]): DownloadLogicalRow {
|
||||
return {
|
||||
type: "package",
|
||||
id,
|
||||
packageId: id,
|
||||
height: DOWNLOAD_PACKAGE_ROW_HEIGHT,
|
||||
packageRow: {
|
||||
id,
|
||||
collapsed,
|
||||
items: itemIds.map((itemId) => ({ id: itemId, packageId: id }))
|
||||
}
|
||||
} as unknown as DownloadLogicalRow;
|
||||
}
|
||||
|
||||
function itemRow(id: string, packageId: string): DownloadLogicalRow {
|
||||
return {
|
||||
type: "item",
|
||||
id,
|
||||
packageId,
|
||||
height: DOWNLOAD_FILE_ROW_HEIGHT,
|
||||
item: { id, packageId }
|
||||
} as unknown as DownloadLogicalRow;
|
||||
}
|
||||
|
||||
function logicalRows(firstCollapsed: boolean): DownloadLogicalRow[] {
|
||||
return [
|
||||
packageRow("package-a", firstCollapsed, ["a-1", "a-2"]),
|
||||
...(firstCollapsed ? [] : [itemRow("a-1", "package-a"), itemRow("a-2", "package-a")]),
|
||||
packageRow("package-b", false, ["b-1"]),
|
||||
itemRow("b-1", "package-b")
|
||||
];
|
||||
}
|
||||
|
||||
function disclosureFrame(
|
||||
startRows: readonly DownloadDisclosureRow[],
|
||||
targetRows: readonly DownloadDisclosureRow[],
|
||||
progress: number
|
||||
): DisclosureFrameRow[] {
|
||||
const targetById = new Map(targetRows.map((row) => [row.id, row]));
|
||||
let top = 0;
|
||||
return startRows.map((row) => {
|
||||
const target = targetById.get(row.id) ?? row;
|
||||
const height = row.height + (target.height - row.height) * progress;
|
||||
const opacity = row.disclosureOpacity + (target.disclosureOpacity - row.disclosureOpacity) * progress;
|
||||
const frameRow = { id: row.id, top, bottom: top + height, opacity };
|
||||
top += height;
|
||||
return frameRow;
|
||||
});
|
||||
}
|
||||
|
||||
function prepareFrameRows(beforeCollapsed: boolean, afterCollapsed: boolean): {
|
||||
start: DownloadDisclosureRow[];
|
||||
target: DownloadDisclosureRow[];
|
||||
} {
|
||||
const prepared = prepareDownloadDisclosureTransition(
|
||||
stableDownloadDisclosureRows(logicalRows(beforeCollapsed)),
|
||||
logicalRows(afterCollapsed)
|
||||
);
|
||||
expect(prepared.animated).toBe(true);
|
||||
return {
|
||||
start: prepared.rows,
|
||||
target: activateDownloadDisclosureTransition(prepared.rows)
|
||||
};
|
||||
}
|
||||
|
||||
describe("download disclosure render contract", () => {
|
||||
it.each([
|
||||
{ beforeCollapsed: true, afterCollapsed: false, startOpacity: 0, targetOpacity: 1 },
|
||||
{ beforeCollapsed: false, afterCollapsed: true, startOpacity: 1, targetOpacity: 0 }
|
||||
])("keeps the shared clipping group ahead of the following package in every measured frame", ({ beforeCollapsed, afterCollapsed, startOpacity, targetOpacity }) => {
|
||||
const { start, target } = prepareFrameRows(beforeCollapsed, afterCollapsed);
|
||||
const measuredFrames = [0, 0.2, 0.5, 0.8, 1].map((progress) => disclosureFrame(start, target, progress));
|
||||
|
||||
for (const frame of measuredFrames) {
|
||||
const group = frame.find((row) => row.id === "package-a:items");
|
||||
const following = frame.find((row) => row.id === "package-b");
|
||||
expect(group).toBeDefined();
|
||||
expect(following).toBeDefined();
|
||||
expect(group!.bottom).toBeLessThanOrEqual(following!.top + 1);
|
||||
}
|
||||
|
||||
const groupOpacities = measuredFrames.map((frame) => frame.find((row) => row.id === "package-a:items")!.opacity);
|
||||
expect(groupOpacities[0]).toBe(startOpacity);
|
||||
expect(groupOpacities.at(-1)).toBe(targetOpacity);
|
||||
expect(groupOpacities[2]).toBe((startOpacity + targetOpacity) / 2);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user