web: a knob's ruler stands in the strip's slot, and a sub-chip is its name again
The strip a chip opened kept a row of its own while a knob's ruler opened over it, so WB's COLOR TEMP put the panel on the screen twice — the rows in the strip and the panel under them — and charged the photo a row for the saying. The path under the bar (.crumb) already names the panel the ruler came from and is one tap from its strip, so the ruler now stands in the strip's slot and the strip stands down with the bar: on 390x844 LIGHT's WB strip is 42px and the photo 639px, COLOR TEMP's ruler 60px and the photo 621px, the path TABS > LIGHT > WB > COLOR TEMP walking back to the strip and then to the bar. A sub-chip also wore the initials of its own label on a tile over it — COLOR TEMP as CT, PRO NEG HI as PNH — which is the name the pill already prints, spelled twice and set 60px tall: LIGHT's WB strip measured 73px on that tile, 42px as the name alone. The ruler's own "<" goes with them: the path names the strip it would reopen, and a wide screen draws neither the path nor a ruler in the bar. Checks: - npm run build (tsc --noEmit + vite) clean: dist/assets/index-2IP_1LL_.css 71.42 kB. - Chromium 390x844, light and dark, LIGHT: the bar 40px / the photo 641px; WB open, the bar gone and its strip 42px in the slot, the photo 639px; COLOR TEMP's ruler 60px in that slot, the photo 621px, the path TABS > LIGHT > WB > COLOR TEMP; crumb-strip lands back on the WB strip and crumb-tab on the bar at 641px. No page error and no sideways scroll (390px of 390px) in any state; on 1280x900 .dev-panels is painted and .dev-chips/.crumb are not.
This commit is contained in:
@@ -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<StripKey, 'wm'>): 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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 ? <span className="chip-dot" data-color={chip.color} style={{ background: chip.color }} /> : null}
|
||||
{chip.icon ? <span className="chip-icon" aria-hidden="true">{chip.icon}</span> : 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
|
||||
|
||||
Reference in New Issue
Block a user