Keep the panel rails still when a tall panel opens

A tall panel moves its stack to the focus or tail layout, and the rail
inside the stack went with it, so the Data Layers and Authoring buttons
jumped up and the right rail followed. Each layout pass now offsets the
rail back to the resting top, with the same transition as the stack, and
the right rail lines up with the left rail's buttons. Cyber pins the left
stack's top, so it flags that and the rail takes no offset.
This commit is contained in:
Sameh Khamis committed 2026-11-01 16:58:37 -08:00
1 parent b20c80e590
commit 06994e0d0e
5 files changed
+48 -3

No files matched your search

+26
View File
@@ -349,6 +349,32 @@ test('right rail aligns to the current left rail and excludes hidden obstacles',
assert.equal(f.stack.dataset.safeTop, '200.0');
});
// An opened panel moves the left stack up, but its rail buttons hold still:
// the right rail lines up with those buttons, not with the moved stack.
test('right rail aligns to the left rail buttons while the left stack is offset', () => {
const f = fixture('right');
f.options.leftStack.rect.top = 100;
f.options.leftStack.style.setProperty('--panel-rail-offset', '186.7px');
f.run();
assert.equal(f.stack.dataset.safeTop, '286.7');
});
test('left rail buttons hold still while a tall panel moves the stack', () => {
const f = fixture('left');
f.expand(f.first, 900);
f.run();
assert.equal(f.stack.dataset.layoutMode, 'focus');
assert.ok(
parseFloat(f.stack.style.getPropertyValue('--panel-rail-offset')) > 0,
);
// A theme that pins the stack's top (Cyber) leaves nothing to offset.
f.stack.computed.getPropertyValue = (name) =>
name === '--panel-stack-top-pinned' ? ' 1' : '';
f.run();
assert.equal(f.stack.style.getPropertyValue('--panel-rail-offset'), '0.0px');
});
// The left rail's `top` animates after the right pass runs, and nothing
// re-runs it when the transition lands: the right rail must read the end value.
function animatingLeftRail({ keyframes = true } = {}) {