Whiteboard: floating selection toolbar stays visible during presentation #189

New issue

Open

opened 2026-05-14 11:36:27 +00:00 by AhmedHanafy725 · 2 comments

AhmedHanafy725 commented

2026-05-14 11:36:27 +00:00

Member

Problem

When the floating selection toolbar is open (something is selected on the board) and the user clicks Play to enter presentation mode, the toolbar remains visible over the slide. Same goes for the comment popover if a comment was open. The presentation overlay hides everything else (.wb-navbar, .wb-toolbar, .wb-subtoolbar, .wb-minimap, .wb-zoom, .wb-emoji-picker, .wb-context-menu, #theme-panel, #properties-panel) but missed .wb-sel-toolbar and any other DOM overlay added after the presentation feature originally landed.

Location of the hide-list: crates/hero_whiteboard_admin/templates/web/board.html:11-19.
Location of the toolbar class: crates/hero_whiteboard_admin/static/web/js/whiteboard/selection_toolbar.js:49 → el.className = "wb-sel-toolbar".

Approach

Two-pronged:

Add .wb-sel-toolbar (and the comment popover .comment-popover) to the existing body.wb-presenting … { display: none !important; } CSS rule in templates/web/board.html.
Belt-and-suspenders: WhiteboardFrames.startPresentation should call WhiteboardSelectionToolbar.hide() (and WhiteboardComments.hidePopover() if present) so the JS state is also reset, not just visually hidden. Without this, leaving presentation reveals a stale toolbar that may not reflect the current selection.

Acceptance

Selection toolbar visible → press Play → toolbar disappears in the slide.
Exit presentation → if the previous selection is still active, the toolbar can re-show normally; if the selection was cleared by the presentation flow, no stale toolbar lingers.
Comment popover open → press Play → popover disappears.
No regression to normal toolbar / popover behaviour outside presentation.

## Problem When the floating selection toolbar is open (something is selected on the board) and the user clicks Play to enter presentation mode, the toolbar remains visible over the slide. Same goes for the comment popover if a comment was open. The presentation overlay hides everything else (`.wb-navbar`, `.wb-toolbar`, `.wb-subtoolbar`, `.wb-minimap`, `.wb-zoom`, `.wb-emoji-picker`, `.wb-context-menu`, `#theme-panel`, `#properties-panel`) but missed `.wb-sel-toolbar` and any other DOM overlay added after the presentation feature originally landed. Location of the hide-list: `crates/hero_whiteboard_admin/templates/web/board.html:11-19`. Location of the toolbar class: `crates/hero_whiteboard_admin/static/web/js/whiteboard/selection_toolbar.js:49` → `el.className = "wb-sel-toolbar"`. ## Approach Two-pronged: 1. Add `.wb-sel-toolbar` (and the comment popover `.comment-popover`) to the existing `body.wb-presenting … { display: none !important; }` CSS rule in `templates/web/board.html`. 2. Belt-and-suspenders: `WhiteboardFrames.startPresentation` should call `WhiteboardSelectionToolbar.hide()` (and `WhiteboardComments.hidePopover()` if present) so the JS state is also reset, not just visually hidden. Without this, leaving presentation reveals a stale toolbar that may not reflect the current selection. ## Acceptance - [ ] Selection toolbar visible → press Play → toolbar disappears in the slide. - [ ] Exit presentation → if the previous selection is still active, the toolbar can re-show normally; if the selection was cleared by the presentation flow, no stale toolbar lingers. - [ ] Comment popover open → press Play → popover disappears. - [ ] No regression to normal toolbar / popover behaviour outside presentation.

AhmedHanafy725 commented

2026-05-14 11:37:11 +00:00

Author

Member

Implementation Spec for Issue #189

Files to Modify

templates/web/board.html
static/web/js/whiteboard/frames.js

Plan

Step 1: Extend the presentation hide-list

File: templates/web/board.html:11-19

Add .wb-sel-toolbar and .comment-popover to the existing body.wb-presenting … { display: none !important; } rule. After the edit the block reads:

body.wb-presenting .wb-navbar,
body.wb-presenting .wb-toolbar,
body.wb-presenting .wb-subtoolbar,
body.wb-presenting .wb-minimap,
body.wb-presenting .wb-zoom,
body.wb-presenting .wb-emoji-picker,
body.wb-presenting .wb-context-menu,
body.wb-presenting .wb-sel-toolbar,
body.wb-presenting .comment-popover,
body.wb-presenting #theme-panel,
body.wb-presenting #properties-panel { display: none !important; }

Step 2: Reset JS state when entering presentation

File: static/web/js/whiteboard/frames.js — inside startPresentation (~line 130), right after document.body.classList.add('wb-presenting'):

if (typeof WhiteboardSelectionToolbar !== 'undefined' && WhiteboardSelectionToolbar.hide) {
    WhiteboardSelectionToolbar.hide();
}
if (typeof WhiteboardComments !== 'undefined' && WhiteboardComments.hidePopover) {
    WhiteboardComments.hidePopover();
}

This ensures the JS sees a hidden state, so when the user exits presentation and clicks a new object, the toolbar shows fresh rather than re-revealing whatever was selected pre-presentation.

Acceptance Criteria

Floating selection toolbar open → press Play → toolbar gone in the slide.
Comment popover open → press Play → popover gone.
Exit presentation → no stale overlay re-appears unless the user selects something again.
No regression to normal toolbar / popover lifecycle outside presentation.

Notes

Both hide calls are guarded (typeof … !== 'undefined' && …) so a missing module never throws.
The CSS rule alone would hide the elements visually, but the JS state reset prevents the popover container from holding stale content (the popover container is a singleton in the DOM).

## Implementation Spec for Issue #189 ### Files to Modify - `templates/web/board.html` - `static/web/js/whiteboard/frames.js` ### Plan #### Step 1: Extend the presentation hide-list File: `templates/web/board.html:11-19` Add `.wb-sel-toolbar` and `.comment-popover` to the existing `body.wb-presenting … { display: none !important; }` rule. After the edit the block reads: ```css body.wb-presenting .wb-navbar, body.wb-presenting .wb-toolbar, body.wb-presenting .wb-subtoolbar, body.wb-presenting .wb-minimap, body.wb-presenting .wb-zoom, body.wb-presenting .wb-emoji-picker, body.wb-presenting .wb-context-menu, body.wb-presenting .wb-sel-toolbar, body.wb-presenting .comment-popover, body.wb-presenting #theme-panel, body.wb-presenting #properties-panel { display: none !important; } ``` #### Step 2: Reset JS state when entering presentation File: `static/web/js/whiteboard/frames.js` — inside `startPresentation` (~line 130), right after `document.body.classList.add('wb-presenting')`: ```js if (typeof WhiteboardSelectionToolbar !== 'undefined' && WhiteboardSelectionToolbar.hide) { WhiteboardSelectionToolbar.hide(); } if (typeof WhiteboardComments !== 'undefined' && WhiteboardComments.hidePopover) { WhiteboardComments.hidePopover(); } ``` This ensures the JS sees a hidden state, so when the user exits presentation and clicks a new object, the toolbar shows fresh rather than re-revealing whatever was selected pre-presentation. ### Acceptance Criteria - [ ] Floating selection toolbar open → press Play → toolbar gone in the slide. - [ ] Comment popover open → press Play → popover gone. - [ ] Exit presentation → no stale overlay re-appears unless the user selects something again. - [ ] No regression to normal toolbar / popover lifecycle outside presentation. ### Notes - Both hide calls are guarded (`typeof … !== 'undefined' && …`) so a missing module never throws. - The CSS rule alone would hide the elements visually, but the JS state reset prevents the popover container from holding stale content (the popover container is a singleton in the DOM).

AhmedHanafy725 commented

2026-05-14 11:38:42 +00:00

Author

Member

Test Results + Final Summary

Changes

templates/web/board.html — added .wb-sel-toolbar and .comment-popover to the body.wb-presenting … { display: none !important; } rule.
static/web/js/whiteboard/frames.js — startPresentation now calls WhiteboardSelectionToolbar.hide() and WhiteboardComments.hidePopover() (both guarded) right after adding the wb-presenting class.

Behaviour after fix

Pressing Play with the floating selection toolbar or a comment popover open immediately removes them from the slide.
Exiting presentation leaves no stale overlay; the toolbar reappears only if the user re-selects something.
Outside presentation, the toolbar / popover lifecycle is unchanged.

Gates

node -c frames.js — JS syntax OK
cargo fmt --check — pass
cargo clippy --workspace --all-targets -- -D warnings — pass

Manual verification still required

Rebuild + restart hero_whiteboard_admin. Select an object → click Play → confirm the toolbar is hidden in the slide. Open a comment popover → click Play → confirm the popover is hidden.

## Test Results + Final Summary ### Changes - `templates/web/board.html` — added `.wb-sel-toolbar` and `.comment-popover` to the `body.wb-presenting … { display: none !important; }` rule. - `static/web/js/whiteboard/frames.js` — `startPresentation` now calls `WhiteboardSelectionToolbar.hide()` and `WhiteboardComments.hidePopover()` (both guarded) right after adding the `wb-presenting` class. ### Behaviour after fix - Pressing Play with the floating selection toolbar or a comment popover open immediately removes them from the slide. - Exiting presentation leaves no stale overlay; the toolbar reappears only if the user re-selects something. - Outside presentation, the toolbar / popover lifecycle is unchanged. ### Gates - `node -c frames.js` — JS syntax OK - `cargo fmt --check` — pass - `cargo clippy --workspace --all-targets -- -D warnings` — pass ### Manual verification still required Rebuild + restart `hero_whiteboard_admin`. Select an object → click Play → confirm the toolbar is hidden in the slide. Open a comment popover → click Play → confirm the popover is hidden.