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:
@@ -149,6 +149,7 @@ export function commitDownloadColumnDrag(
|
||||
const deltaX = first.left - last.left;
|
||||
if (Math.abs(deltaX) < 0.5) continue;
|
||||
for (const target of Array.from(element.children)) {
|
||||
if (target.matches(".downloads-column-move-controls")) continue;
|
||||
const animation = target.animate([
|
||||
{ transform: `translate3d(${deltaX}px, 0, 0)` },
|
||||
{ transform: "translate3d(0, 0, 0)" }
|
||||
|
||||
@@ -78,10 +78,15 @@ describe("animated download column drag", () => {
|
||||
let committed = false;
|
||||
const outerAnimate = 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 = {
|
||||
animate: outerAnimate,
|
||||
children: [motionTarget],
|
||||
children: [motionTarget, controls],
|
||||
getBoundingClientRect: () => ({ left: committed ? afterLeft : beforeLeft, width: 300 })
|
||||
} as unknown as HTMLElement;
|
||||
const root = {
|
||||
@@ -118,6 +123,7 @@ describe("animated download column drag", () => {
|
||||
expect(events.indexOf("prepare-grid")).toBeLessThan(events.indexOf(`commit:${next.join("|")}`));
|
||||
expect(events).toContain(`commit:${next.join("|")}`);
|
||||
expect(outerAnimate).not.toHaveBeenCalled();
|
||||
expect(controlsAnimate).not.toHaveBeenCalled();
|
||||
expect(animate).toHaveBeenCalledWith([
|
||||
{ transform: `translate3d(${expectedDelta}px, 0, 0)` },
|
||||
{ transform: "translate3d(0, 0, 0)" }
|
||||
|
||||
Reference in New Issue
Block a user