Animate the terminal dock with transform only so entry never drops text contrast.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -160,12 +160,10 @@
|
|||||||
|
|
||||||
@keyframes terminal-dock-in {
|
@keyframes terminal-dock-in {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(0.4rem);
|
transform: translateY(0.4rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
import { readFileSync } from 'node:fs';
|
||||||
|
import { join } from 'node:path';
|
||||||
|
|
||||||
import { DOCUMENT } from '@angular/common';
|
import { DOCUMENT } from '@angular/common';
|
||||||
import { ApplicationRef, PLATFORM_ID } from '@angular/core';
|
import { ApplicationRef, PLATFORM_ID } from '@angular/core';
|
||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
@@ -475,3 +478,32 @@ describe('TerminalDock', () => {
|
|||||||
expect(remove).toHaveBeenCalledWith('keydown', added?.[1]);
|
expect(remove).toHaveBeenCalledWith('keydown', added?.[1]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('terminal dock stylesheet', () => {
|
||||||
|
const css = readFileSync(join(process.cwd(), 'src/app/shared/terminal/terminal-dock.scss'), 'utf8');
|
||||||
|
|
||||||
|
it('does not fade a text-bearing terminal container during entry', () => {
|
||||||
|
expect(css).toMatch(/\.terminal-dock-panel[\s\S]*?animation:\s*terminal-dock-in/);
|
||||||
|
|
||||||
|
const keyframesStart = css.indexOf('@keyframes terminal-dock-in');
|
||||||
|
expect(keyframesStart).toBeGreaterThan(-1);
|
||||||
|
const reducedMotion = css.indexOf('@media (prefers-reduced-motion: reduce)', keyframesStart);
|
||||||
|
expect(reducedMotion).toBeGreaterThan(keyframesStart);
|
||||||
|
|
||||||
|
const keyframes = css.slice(keyframesStart, reducedMotion);
|
||||||
|
expect(keyframes).toMatch(/transform:\s*translateY/);
|
||||||
|
expect(keyframes).not.toMatch(/opacity\s*:/);
|
||||||
|
|
||||||
|
const panelStart = css.indexOf('.terminal-dock-panel {');
|
||||||
|
const panelBlock = css.slice(panelStart, css.indexOf('}', panelStart) + 1);
|
||||||
|
expect(panelBlock).toContain('animation: terminal-dock-in');
|
||||||
|
expect(panelBlock).not.toMatch(/opacity\s*:/);
|
||||||
|
|
||||||
|
const reduceBlock = css.slice(css.indexOf('prefers-reduced-motion'));
|
||||||
|
expect(reduceBlock).toMatch(/\.terminal-dock-panel\s*\{[^}]*animation:\s*none/);
|
||||||
|
|
||||||
|
expect(css).toMatch(
|
||||||
|
/\.terminal-dock-form input::placeholder[\s\S]*?color:\s*var\(--color-text-subtle\)[\s\S]*?opacity:\s*1/,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user