feat(ext): add GLYPH_NEXT and replace ASCII arrows with ▸
Replaces the ASCII rightwards arrow → with U+25B8 ▸ in settings-vault buttons. Matches the existing ▾/▸ disclosure-glyph family.
This commit is contained in:
@@ -7,6 +7,7 @@ import type {
|
|||||||
VaultSettings, TrashRetention, HistoryRetention, GeneratorRequest,
|
VaultSettings, TrashRetention, HistoryRetention, GeneratorRequest,
|
||||||
} from '../../shared/types';
|
} from '../../shared/types';
|
||||||
import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from './generator-panel';
|
import { openGeneratorPanel, closeGeneratorPanel, isGeneratorPanelOpen } from './generator-panel';
|
||||||
|
import { GLYPH_NEXT } from '../../shared/glyphs';
|
||||||
|
|
||||||
let pendingSettings: VaultSettings | null = null;
|
let pendingSettings: VaultSettings | null = null;
|
||||||
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
|
let activeKeyHandler: ((e: KeyboardEvent) => void) | null = null;
|
||||||
@@ -161,14 +162,14 @@ export function renderVaultSettings(app: HTMLElement): void {
|
|||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<div class="settings-section__title">backup & restore</div>
|
<div class="settings-section__title">backup & restore</div>
|
||||||
<div class="settings-row">
|
<div class="settings-row">
|
||||||
<button class="btn" id="open-backup">Backup & restore →</button>
|
<button class="btn" id="open-backup">Backup & restore ${GLYPH_NEXT}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="settings-section">
|
<div class="settings-section">
|
||||||
<div class="settings-section__title">import</div>
|
<div class="settings-section__title">import</div>
|
||||||
<div class="settings-row">
|
<div class="settings-row">
|
||||||
<button class="btn" id="open-import">LastPass CSV →</button>
|
<button class="btn" id="open-import">LastPass CSV ${GLYPH_NEXT}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,10 @@
|
|||||||
import { describe, it, expect } from 'vitest';
|
import { describe, it, expect } from 'vitest';
|
||||||
import * as glyphs from '../glyphs';
|
import * as glyphs from '../glyphs';
|
||||||
|
import {
|
||||||
|
GLYPH_REVEAL, GLYPH_HIDE, GLYPH_GENERATE, GLYPH_FILL_FROM_TAB,
|
||||||
|
GLYPH_QR, GLYPH_MONO, GLYPH_TRASH, GLYPH_DEVICES, GLYPH_SETTINGS,
|
||||||
|
GLYPH_LOCK, GLYPH_NEXT,
|
||||||
|
} from '../glyphs';
|
||||||
|
|
||||||
describe('glyphs', () => {
|
describe('glyphs', () => {
|
||||||
it('exports the documented glyph constants', () => {
|
it('exports the documented glyph constants', () => {
|
||||||
@@ -19,3 +24,20 @@ describe('glyphs', () => {
|
|||||||
expect(glyphs.REQUIRED_PILL_HTML).toBe('<span class="req-pill">required</span>');
|
expect(glyphs.REQUIRED_PILL_HTML).toBe('<span class="req-pill">required</span>');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('glyph constants', () => {
|
||||||
|
it('uses single unicode codepoints (no emoji multi-codepoint)', () => {
|
||||||
|
const all = [
|
||||||
|
GLYPH_REVEAL, GLYPH_HIDE, GLYPH_GENERATE, GLYPH_FILL_FROM_TAB,
|
||||||
|
GLYPH_QR, GLYPH_MONO, GLYPH_TRASH, GLYPH_DEVICES, GLYPH_SETTINGS,
|
||||||
|
GLYPH_LOCK, GLYPH_NEXT,
|
||||||
|
];
|
||||||
|
for (const g of all) {
|
||||||
|
expect([...g].length).toBe(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
it('GLYPH_NEXT is the small right triangle (U+25B8)', () => {
|
||||||
|
expect(GLYPH_NEXT).toBe('▸');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ export const GLYPH_TRASH = '▦'; // sidebar trash nav
|
|||||||
export const GLYPH_DEVICES = '⌬'; // sidebar devices nav
|
export const GLYPH_DEVICES = '⌬'; // sidebar devices nav
|
||||||
export const GLYPH_SETTINGS = '⚙'; // sidebar settings nav
|
export const GLYPH_SETTINGS = '⚙'; // sidebar settings nav
|
||||||
export const GLYPH_LOCK = '⏻'; // sidebar lock nav
|
export const GLYPH_LOCK = '⏻'; // sidebar lock nav
|
||||||
|
export const GLYPH_NEXT = '▸'; // forward / next button (matches ▾/▸ disclosure family)
|
||||||
|
|
||||||
/// Inline HTML snippet for the required-field pill. Use after a label's text:
|
/// Inline HTML snippet for the required-field pill. Use after a label's text:
|
||||||
/// `<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>`
|
/// `<label class="label" for="f-title">title ${REQUIRED_PILL_HTML}</label>`
|
||||||
|
|||||||
Reference in New Issue
Block a user