fix(downloads): keep column controls vertically anchored

Exclude the absolute column move controls from FLIP content animations so their translateY centering remains intact throughout left and right column switches.
This commit is contained in:
Sucukdeluxe
2026-08-20 10:34:23 +02:00
parent e030daff3e
commit 71a286aa94
2 changed files with 9 additions and 2 deletions
@@ -149,6 +149,7 @@ export function commitDownloadColumnDrag(
const deltaX = first.left - last.left; const deltaX = first.left - last.left;
if (Math.abs(deltaX) < 0.5) continue; if (Math.abs(deltaX) < 0.5) continue;
for (const target of Array.from(element.children)) { for (const target of Array.from(element.children)) {
if (target.matches(".downloads-column-move-controls")) continue;
const animation = target.animate([ const animation = target.animate([
{ transform: `translate3d(${deltaX}px, 0, 0)` }, { transform: `translate3d(${deltaX}px, 0, 0)` },
{ transform: "translate3d(0, 0, 0)" } { transform: "translate3d(0, 0, 0)" }
+8 -2
View File
@@ -78,10 +78,15 @@ describe("animated download column drag", () => {
let committed = false; let committed = false;
const outerAnimate = vi.fn(() => ({ finished: Promise.resolve() } as unknown as Animation)); const outerAnimate = vi.fn(() => ({ finished: Promise.resolve() } as unknown as Animation));
const animate = vi.fn(() => ({ finished: Promise.resolve() } as unknown as Animation)); const animate = vi.fn(() => ({ finished: Promise.resolve() } as unknown as Animation));
const motionTarget = { animate } as unknown as HTMLElement; const motionTarget = { animate, matches: () => false } as unknown as HTMLElement;
const controlsAnimate = vi.fn(() => ({ finished: Promise.resolve() } as unknown as Animation));
const controls = {
animate: controlsAnimate,
matches: (selector: string) => selector === ".downloads-column-move-controls"
} as unknown as HTMLElement;
const element = { const element = {
animate: outerAnimate, animate: outerAnimate,
children: [motionTarget], children: [motionTarget, controls],
getBoundingClientRect: () => ({ left: committed ? afterLeft : beforeLeft, width: 300 }) getBoundingClientRect: () => ({ left: committed ? afterLeft : beforeLeft, width: 300 })
} as unknown as HTMLElement; } as unknown as HTMLElement;
const root = { const root = {
@@ -118,6 +123,7 @@ describe("animated download column drag", () => {
expect(events.indexOf("prepare-grid")).toBeLessThan(events.indexOf(`commit:${next.join("|")}`)); expect(events.indexOf("prepare-grid")).toBeLessThan(events.indexOf(`commit:${next.join("|")}`));
expect(events).toContain(`commit:${next.join("|")}`); expect(events).toContain(`commit:${next.join("|")}`);
expect(outerAnimate).not.toHaveBeenCalled(); expect(outerAnimate).not.toHaveBeenCalled();
expect(controlsAnimate).not.toHaveBeenCalled();
expect(animate).toHaveBeenCalledWith([ expect(animate).toHaveBeenCalledWith([
{ transform: `translate3d(${expectedDelta}px, 0, 0)` }, { transform: `translate3d(${expectedDelta}px, 0, 0)` },
{ transform: "translate3d(0, 0, 0)" } { transform: "translate3d(0, 0, 0)" }