diff --git a/docker/frontend/src/App.tsx b/docker/frontend/src/App.tsx index 9ae7690..6c3a3e0 100644 --- a/docker/frontend/src/App.tsx +++ b/docker/frontend/src/App.tsx @@ -3108,17 +3108,6 @@ export function Workspace() { ...(masks.length ? [{ key: 'masks-clear', label: 'CLEAR', onClick: clearMasks }] : []), ]; - // The mark a sub-chip wears on its tile on a phone (see .chip-icon and - // .col-sub .chip in app.css): the initials of a phrase — COLOR TEMP -> CT, - // PRO NEG HI -> PNH — and the opening letter of a single word. A table of - // hand-picked glyphs for every option the app owns would be a second set of - // names to keep, and the name under the mark is already there to read. - const chipIcon = (d: string): string => { - const words = d.split(/\s+/).filter(Boolean); - return words.length > 1 ? words.map((w) => w[0]).join('').slice(0, 3).toUpperCase() : d[0].toUpperCase(); - }; - const withIcon = (c: ChipDef): ChipDef => (c.divider || c.disabled ? c : { ...c, icon: chipIcon(c.label) }); - // A find alone does not narrow its argument: the guard is what tells the rest // of the function that g is a panel key and not a group's. const isDevPanel = (k: StripKey): k is DevPanel => DEV_PANELS.some((p) => p.key === k); @@ -3126,8 +3115,8 @@ export function Workspace() { const stripChips = (g: Exclude): ChipDef[] => { // The two tool strips hold chips that arm the pointer rather than options to // pick, so groupDefs has nothing to say about them. - if (g === 'fix') return fixChips.map(withIcon); - if (g === 'gradient') return gradientChips.map(withIcon); + if (g === 'fix') return fixChips; + if (g === 'gradient') return gradientChips; // LIGHT's four panels: the panel's rows first — each a knob that opens its // ruler above — then the picks that close it, because a panel is read as its // rows and the picks its name is about. @@ -3162,7 +3151,7 @@ export function Workspace() { ...(g === 'effects' ? choiceChips('dr', DR_OPTIONS, String(recipe.adjustments.dynamicRange ?? 'auto'), groupDefs.dr.onPick) : []), - ].map(withIcon); + ]; } const out: ChipDef[] = [ { key: `hint-${g}`, label: groupDefs[g].label, disabled: true, onClick: () => {} }, @@ -3219,7 +3208,7 @@ export function Workspace() { ] : []), ]; - return out.map(withIcon); + return out; }; // RECIPES = this account's own files (SAVE RECENT) + what this session made diff --git a/docker/frontend/src/styles/app.css b/docker/frontend/src/styles/app.css index 7738a70..faed2fa 100644 --- a/docker/frontend/src/styles/app.css +++ b/docker/frontend/src/styles/app.css @@ -114,11 +114,10 @@ /* RESET is the way out of an edit, not one more chip: a rule and some air keep it apart from the tab's own buttons at the foot of the column. */ .reset-row { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); } -/* Three things that belong to the phone alone: the mark a sub-chip wears on its - tile, the path back up under the strip, and LIGHT's panels as a chip row. A - desktop draws none of them — a chip there is its label, every column is in - sight, and LIGHT's panels are the column itself. */ -.chip-icon, .crumb, .dev-chips { display: none; } +/* Two things that belong to the phone alone: the path back up under the strip, + and LIGHT's panels as a chip row. A desktop draws neither — every column is + in sight, and LIGHT's panels are the column itself. */ +.crumb, .dev-chips { display: none; } .chip-row { display: flex; flex-wrap: wrap; gap: 6px; } /* The rule a strip is read across (the mixer's PICK, its bands, the three knobs): a line of its own, so it breaks the row it is written into whichever @@ -1657,7 +1656,17 @@ input[type="range"] { width: 100%; accent-color: var(--accent); } .workspace:has(.chips > .col-sub[data-col="options"]) .col-main, .workspace:has(.chips > .col-sub[data-col="wm"]) .col-main { display: none; } - /* --- a chip's own sub-chips: the tiles the strip is drawn as ------------- */ + /* One strip at a time holds here too: the ruler a knob opens is the last + strip of the walk, so it takes the place of the strip that opened it. The + panel it came from stands down rather than sitting under the ruler it + launched — the path under the bar (.crumb) already names that panel, so + the row the panel would hold is a row of the photo spent on a name the + finger can read below. With the strip and the bar both gone the ruler is + the only thing left between the photo and the path, which is the slot. */ + .workspace:has(.col[data-col="slider"]) .col-sub[data-col="options"], + .workspace:has(.col[data-col="slider"]) .col-main { display: none; } + + /* --- a chip's own sub-chips: the pills the strip is drawn as ------------- */ .col-sub:not(.wm-extra) { flex-direction: row; align-items: center; @@ -1668,36 +1677,6 @@ input[type="range"] { width: 100%; accent-color: var(--accent); } overflow-y: hidden; } .col-sub:not(.wm-extra) .chip-row { flex-wrap: nowrap; } - /* A sub-chip whose options are buttons wears them as tiles — a mark over a - short name, in a bordered square — the way an icon set is read on a phone. - A list of NAMES (the recipes, a frame's history) keeps the pill: there the - name is the whole point and a square would cut it off. */ - .col-sub[data-col="options"] .chip, - .col-sub[data-col="mask"] .chip { - position: relative; - flex: 0 0 auto; - width: 60px; - height: 60px; - flex-direction: column; - justify-content: center; - gap: 2px; - padding: 4px 3px; - border-radius: var(--radius-sm); - } - .chip-icon { display: block; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text-dim); } - .col-sub .chip.on .chip-icon { color: inherit; } - .col-sub[data-col="options"] .chip .chip-label, - .col-sub[data-col="mask"] .chip .chip-label { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 9px; - letter-spacing: 0.04em; - } - /* PRO is a mark on the corner of the tile, not a third line in it. */ - .col-sub[data-col="options"] .chip .pro, - .col-sub[data-col="mask"] .chip .pro { position: absolute; top: 2px; right: 3px; font-size: 7px; } /* The strip's own name is a heading, not a pick: it keeps the leading edge of the line and drops the button around it. */ .col-sub .chip[data-key^="hint-"] { @@ -1713,7 +1692,7 @@ input[type="range"] { width: 100%; accent-color: var(--accent); } color: var(--text-dim); } - /* --- the open ruler: the row over those -------------------------------- */ + /* --- the open ruler: the strip's own slot ------------------------------ */ /* A ruler is the photo's own scale, not a panel: no box, no fill, just the ticks. They are drawn in the theme's own ink — dark on the light theme, light on the dark — at two weights, a finer mark every eighth of the track @@ -1732,6 +1711,11 @@ input[type="range"] { width: 100%; accent-color: var(--accent); } border: 0; background: none; } + /* The way back is the path under the bar (.crumb), which names the panel the + ruler came from — the strip this "<" would reopen, one row lower and with + the rest of the walk beside it. A wide screen draws no path, so the button + is the phone's alone to drop. */ + .col[data-col="slider"] .back { display: none; } .col[data-col="slider"] input[type="range"] { -webkit-appearance: none; appearance: none; diff --git a/docker/frontend/src/ui/ChipColumn.tsx b/docker/frontend/src/ui/ChipColumn.tsx index 7b3ac44..d6d3966 100644 --- a/docker/frontend/src/ui/ChipColumn.tsx +++ b/docker/frontend/src/ui/ChipColumn.tsx @@ -17,10 +17,6 @@ export interface ChipDef { // CSS colour drawn as a dot on the chip's leading edge — the HSL mixer's band // chips name a colour, so they show it too. color?: string; - // The button's face on a phone, where a sub-chip is a tile: a short mark over - // the name (see .col-sub .chip in app.css). Desktop never paints it — the - // label alone is what a chip reads as in a column. - icon?: string; // The chip's own FILL and the text colour that fill can carry (WB's preset // table: the swatch the pick paints, printed on the button itself). `bg` wins // over the class's own background, so an active button keeps its swatch and @@ -103,7 +99,6 @@ export function ChipRow({ chips, grid }: { chips: ChipDef[]; grid?: boolean }) { }} > {chip.color ? : null} - {chip.icon ? : 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 own, and on iOS that item stops being painted until the column