diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx index 8d199c3..562da07 100644 --- a/docker/frontend/src/App.tsx +++ b/docker/frontend/src/App.tsx @@ -3834,7 +3834,7 @@ export function Workspace() { /> ) : ( - + )} )} @@ -3960,7 +3960,7 @@ export function Workspace() { {/* column 3 — the open chip's sub-chips, or PRESETS' RECIPES list */} {optGroup ? (
- + {/* PHOTO STYLE is one name per look, so its strip is the visitor's to widen — the sims' names are longer than the column. */} {optGroup === 'style' ? : null} @@ -4006,7 +4006,7 @@ export function Workspace() { {tab === 'presets' && showRecipes ? (
{recipeStrip.length === 0 ?

{t('sec.savedEmpty')}

: null} - + {/* RECIPES reads the same way MY PHOTOS does: names, and a width of the visitor's own. */} diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index 31dff57..36b3a16 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -118,6 +118,14 @@ padding: 2px 0; } .chip-row.list .chip:hover .chip-label { text-decoration: underline; } +/* The mark at the head of a list row. It says what the name is, not what state + the row is in, so it never takes the accent — the label does that. */ +.chip-row.list .chip-glyph { + flex: 0 0 auto; + font-size: 10px; + line-height: 1; + color: var(--text-dim); +} /* The edge of a column, dragged to widen it (see ColGrip): a strip of the cursor over the border that is already there. `touch-action: none` is what lets a finger drag it rather than scroll the column. */ diff --git a/docker/frontend/src/ui/ChipColumn.tsx b/docker/frontend/src/ui/ChipColumn.tsx index a4525f9..1a30d71 100644 --- a/docker/frontend/src/ui/ChipColumn.tsx +++ b/docker/frontend/src/ui/ChipColumn.tsx @@ -65,9 +65,24 @@ export interface SliderDef { // (WB's presets, LIGHT's two Color Chromes) instead of the wrapping strip the // option rows use. `list` is the other end of it: the rows that are a LIST OF // NAMES — MY PHOTOS' frames, FAVORITED and RECIPES' looks, PHOTO STYLE's sims — -// drop the button's chrome and read as plain text, with only the accent marking -// the one in force (see .chip-row.list). -export function ChipRow({ chips, grid, grid3, list }: { chips: ChipDef[]; grid?: boolean; grid3?: boolean; list?: boolean }) { +// drop the button's chrome and read as plain text, with a lead glyph saying what +// kind of thing the name is and only the accent marking the one in force (see +// .chip-row.list). +export function ChipRow({ + chips, + grid, + grid3, + list, + glyph, +}: { + chips: ChipDef[]; + grid?: boolean; + grid3?: boolean; + list?: boolean; + // The mark drawn at the head of every row of a `list` (a frame, a look). It + // is decoration and nothing else — the name beside it is the row. + glyph?: string; +}) { return (
{chips.map((chip) => @@ -102,6 +117,7 @@ export function ChipRow({ chips, grid, grid3, list }: { chips: ChipDef[]; grid?: chip.onClick(); }} > + {list && glyph ? : null} {chip.color ? : null} {/* The name is a box, not the bare text node it used to be: a flex container turns a loose text node into an anonymous item of its