mirror of
https://github.com/Ark0N/Codeman.git
synced 2026-10-09 16:59:43 +02:00
style(tiles): bigger tile header buttons, the app header's icon size
Owner feedback: the tile header's ⋯ ⤢ + × read as tiny next to the session name. The buttons inherited the header's 12px font. They are now 26px click targets (min-width, so a wider glyph still fits) with a 16px glyph, the same as the app header's own icon buttons (.btn-icon-header); the thin ellipsis and cross get 19px so all four read at one visual size. The header grows from 24 to 28px to hold them, the inline rename input to 22px. Checked live at DSF 1 on a dark (daylight-blue) and a light (paper-gray) skin, focused and unfocused tiles, and a zoomed tile. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -138,6 +138,29 @@ describe('header buttons', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('header button size (owner feedback: the 12px glyphs read as tiny)', () => {
|
||||
const css = readFileSync(resolve(import.meta.dirname, '../src/web/public/styles.css'), 'utf8');
|
||||
const rule = (selector: string) => {
|
||||
const at = css.indexOf(`${selector} {`);
|
||||
return at === -1 ? '' : css.slice(at, css.indexOf('}', at));
|
||||
};
|
||||
|
||||
it("buttons are the app header's icon size: 26px targets, a 16px glyph, never the header's inherited 12px", () => {
|
||||
const btn = rule('.tile-btn');
|
||||
expect(btn).toContain('min-width: 26px;');
|
||||
expect(btn).toContain('height: 26px;');
|
||||
expect(btn).toContain('font-size: 16px;');
|
||||
expect(btn).not.toMatch(/\bfont: inherit;/);
|
||||
});
|
||||
|
||||
it('the thin glyphs (ellipsis, cross) get a step more, and the header holds the buttons', () => {
|
||||
expect(rule('.tile-btn.tile-menu,\n.tile-btn.tile-remove')).toContain('font-size: 19px;');
|
||||
const header = rule('.tile-header');
|
||||
expect(header).toContain('flex: 0 0 28px;');
|
||||
expect(header).toContain('height: 28px;');
|
||||
});
|
||||
});
|
||||
|
||||
describe('rename', () => {
|
||||
function startRename(app: GridApp, id: string) {
|
||||
headerOf(id).children[1].dispatch('dblclick', { stopPropagation: vi.fn() });
|
||||
|
||||
Reference in New Issue
Block a user