Mixed-value indicator on the multi-edit toolbar #210

New issue

Closed

opened 2026-05-21 11:06:42 +00:00 by AhmedHanafy725 · 1 comment

AhmedHanafy725 commented

2026-05-21 11:06:42 +00:00

Owner

Delivered in commit 62373e9.

Summary

When several items of the same type are selected and edited together via the floating selection toolbar, the toolbar previously gave no signal when the selected items disagreed on a given property. A user could not tell whether all selected stickies shared one color or held a mix. This change adds a visual "mixed values" hint to each property control whose targets are not uniform.

Behavior

A toolbar control whose selected targets disagree on its property is rendered with a dashed outline (CSS class wb-pt-mixed, outline: 1px dashed var(--wb-text-muted)).
The control's tooltip is suffixed to read "Mixed values — change applies to all".
Click handlers are unchanged — applying a value still writes the new value to every selected item.
A single-target (or single-item) selection is always treated as uniform, so no indicator shows.

Scope

Applied to every property control across the sticky, text, shape, and drawing renderers:

Sticky: color, font size, text color, alignment
Text: font family, font size, fill color, alignment
Shape: stroke color, fill color, stroke width, text color, font size, alignment
Drawing: stroke color, stroke width

Implementation

selection_toolbar.js: new _isUniform(getter) helper compares the property value across all multi-edit targets; _markMixed(el, getter) wraps each control to add the wb-pt-mixed class and tooltip when values differ.
whiteboard.css: new .wb-pt-mixed rule for the dashed-outline hint.

Files

crates/hero_whiteboard_admin/static/web/js/whiteboard/selection_toolbar.js
crates/hero_whiteboard_admin/static/web/css/whiteboard.css

## Mixed-value indicator on the multi-edit toolbar Delivered in commit `62373e9`. ### Summary When several items of the same type are selected and edited together via the floating selection toolbar, the toolbar previously gave no signal when the selected items disagreed on a given property. A user could not tell whether all selected stickies shared one color or held a mix. This change adds a visual "mixed values" hint to each property control whose targets are not uniform. ### Behavior - A toolbar control whose selected targets disagree on its property is rendered with a dashed outline (CSS class `wb-pt-mixed`, `outline: 1px dashed var(--wb-text-muted)`). - The control's tooltip is suffixed to read "Mixed values — change applies to all". - Click handlers are **unchanged** — applying a value still writes the new value to every selected item. - A single-target (or single-item) selection is always treated as uniform, so no indicator shows. ### Scope Applied to every property control across the sticky, text, shape, and drawing renderers: - Sticky: color, font size, text color, alignment - Text: font family, font size, fill color, alignment - Shape: stroke color, fill color, stroke width, text color, font size, alignment - Drawing: stroke color, stroke width ### Implementation - `selection_toolbar.js`: new `_isUniform(getter)` helper compares the property value across all multi-edit targets; `_markMixed(el, getter)` wraps each control to add the `wb-pt-mixed` class and tooltip when values differ. - `whiteboard.css`: new `.wb-pt-mixed` rule for the dashed-outline hint. ### Files - `crates/hero_whiteboard_admin/static/web/js/whiteboard/selection_toolbar.js` - `crates/hero_whiteboard_admin/static/web/css/whiteboard.css`

AhmedHanafy725 self-assigned this

2026-05-21 11:13:22 +00:00

AhmedHanafy725 commented

2026-05-21 11:14:18 +00:00

Author

Owner

Done — shipped in commit `62373e9`

feat(whiteboard): mixed-value indicator on the multi-edit toolbar

What changed

selection_toolbar.js — added two helpers:
- _isUniform(getter) — reads the property off every multi-edit target (falling back from _targetNodes to _lastTargets) and returns false when they disagree; single-target selections are always uniform.
- _markMixed(el, getter) — wraps a toolbar control: when its targets aren't uniform it adds the wb-pt-mixed class and appends a "(mixed)" / "Mixed values — change applies to all" tooltip.
- Wrapped every property control on the sticky, text, shape, and drawing renderers with _markMixed(...), passing a getter that reads the live Konva value (e.g. n.findOne('.bg').fill(), n._mdFontSize, l.strokeWidth()).
whiteboard.css — added .wb-pt-mixed { outline: 1px dashed var(--wb-text-muted); outline-offset: 2px; border-radius: 6px; }.

Behavior notes

Visual hint only — click handlers are untouched, so changing a control still applies the new value to all selected items.
No indicator appears for single-item selections.

Diff stat

 .../static/web/css/whiteboard.css                  |  5 ++
 .../static/web/js/whiteboard/selection_toolbar.js  | 93 ++++++++++++++--------
 2 files changed, 66 insertions(+), 32 deletions(-)

## Done — shipped in commit `62373e9` `feat(whiteboard): mixed-value indicator on the multi-edit toolbar` ### What changed - **`selection_toolbar.js`** — added two helpers: - `_isUniform(getter)` — reads the property off every multi-edit target (falling back from `_targetNodes` to `_lastTargets`) and returns `false` when they disagree; single-target selections are always uniform. - `_markMixed(el, getter)` — wraps a toolbar control: when its targets aren't uniform it adds the `wb-pt-mixed` class and appends a "(mixed)" / "Mixed values — change applies to all" tooltip. - Wrapped every property control on the sticky, text, shape, and drawing renderers with `_markMixed(...)`, passing a getter that reads the live Konva value (e.g. `n.findOne('.bg').fill()`, `n._mdFontSize`, `l.strokeWidth()`). - **`whiteboard.css`** — added `.wb-pt-mixed { outline: 1px dashed var(--wb-text-muted); outline-offset: 2px; border-radius: 6px; }`. ### Behavior notes - Visual hint only — click handlers are untouched, so changing a control still applies the new value to **all** selected items. - No indicator appears for single-item selections. ### Diff stat ``` .../static/web/css/whiteboard.css | 5 ++ .../static/web/js/whiteboard/selection_toolbar.js | 93 ++++++++++++++-------- 2 files changed, 66 insertions(+), 32 deletions(-) ```

AhmedHanafy725 closed this issue

2026-05-28 07:38:54 +00:00