lhumina_code/hero_whiteboard

Fork 0

Presentation: subtoolbar (and other floating editor UI) leak into presentation when open #120

New issue

Open

opened 2026-04-30 11:21:47 +00:00 by AhmedHanafy725 · 2 comments

AhmedHanafy725 commented

2026-04-30 11:21:47 +00:00

Member

Summary

Open the freehand drawing tool so its sub-menu (color / thickness picker) is visible, then start presentation. The sub-menu stays on top of the spotlight overlay during presentation.

Steps to reproduce

Pick the freehand drawing (or shape, sticky, connector) tool — the right-side sub-toolbar appears.
Without closing it, click Present.

Expected

The sub-toolbar is hidden during presentation, like the rest of the editor chrome.

Actual

The sub-toolbar stays visible and floats above the slide.

Root cause

crates/hero_whiteboard_ui/templates/web/board.html sets:

body.wb-presenting .wb-navbar,
body.wb-presenting .wb-toolbar,
body.wb-presenting .wb-minimap,
body.wb-presenting .wb-zoom,
body.wb-presenting #properties-panel { display: none !important; }

.wb-subtoolbar is missing from that list. Same gap exists for .wb-emoji-picker (emoji picker), .wb-context-menu (right-click menu), and #theme-panel (theme picker popup) — any of those left open when the user starts presenting will leak into the presentation overlay.

Fix

Extend the body.wb-presenting ... { display: none !important; } selector list to include .wb-subtoolbar, .wb-emoji-picker, .wb-context-menu, and #theme-panel. Pure CSS; no JS changes needed.

## Summary Open the freehand drawing tool so its sub-menu (color / thickness picker) is visible, then start presentation. The sub-menu stays on top of the spotlight overlay during presentation. ## Steps to reproduce 1. Pick the freehand drawing (or shape, sticky, connector) tool — the right-side sub-toolbar appears. 2. Without closing it, click Present. ## Expected The sub-toolbar is hidden during presentation, like the rest of the editor chrome. ## Actual The sub-toolbar stays visible and floats above the slide. ## Root cause `crates/hero_whiteboard_ui/templates/web/board.html` sets: ```css body.wb-presenting .wb-navbar, body.wb-presenting .wb-toolbar, body.wb-presenting .wb-minimap, body.wb-presenting .wb-zoom, body.wb-presenting #properties-panel { display: none !important; } ``` `.wb-subtoolbar` is missing from that list. Same gap exists for `.wb-emoji-picker` (emoji picker), `.wb-context-menu` (right-click menu), and `#theme-panel` (theme picker popup) — any of those left open when the user starts presenting will leak into the presentation overlay. ## Fix Extend the `body.wb-presenting ... { display: none !important; }` selector list to include `.wb-subtoolbar`, `.wb-emoji-picker`, `.wb-context-menu`, and `#theme-panel`. Pure CSS; no JS changes needed.

AhmedHanafy725 commented

2026-04-30 11:22:25 +00:00

Author

Member

Implementation Spec for Issue #120

Objective

Hide every piece of editor floating UI during presentation, including the freehand drawing sub-toolbar, emoji picker, context menu, and theme panel — none of which the existing body.wb-presenting rule covered.

Files to Modify

crates/hero_whiteboard_ui/templates/web/board.html — extend the body.wb-presenting … { display: none !important; } selector list.
crates/hero_whiteboard_ui/templates/web/board_view.html — viewer template has its own copy of the same rule. Same extension.

Implementation Plan

Step 1: Extend the hide list in both templates

Files: both templates above.

Replace:

body.wb-presenting .wb-navbar,
body.wb-presenting .wb-toolbar,
body.wb-presenting .wb-minimap,
body.wb-presenting .wb-zoom,
body.wb-presenting #properties-panel { display: none !important; }

with:

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 #theme-panel,
body.wb-presenting #properties-panel { display: none !important; }

(board_view.html doesn't render the toolbar/sub-toolbar/properties panel — but adding the selectors there is harmless and keeps the two rule sets in lockstep, so a future addition to either template is automatically covered.)

Dependencies: none.

Acceptance Criteria

Pick freehand drawing → sub-toolbar visible. Click Present → sub-toolbar hidden.
Open emoji picker → click Present → emoji picker hidden.
Right-click menu open → click Present → menu hidden.
Theme panel open → click Present → panel hidden.
Exit presentation → all the above re-appear in their last open state if the user opened them again (i.e. the hide is purely visual, not destructive).
No regression on the previously-hidden items (navbar/toolbar/minimap/zoom/properties).
cargo fmt, cargo clippy --workspace --all-targets -- -D warnings, cargo test --workspace --lib clean.

Notes

Why not also close them on startPresentation: the CSS hide is enough — the elements are still in the DOM with their state preserved, so exit returns the user to where they were. Forcing them closed would lose state and require teardown logic per element. CSS-only is simpler and reversible.
Pure CSS change in two templates. No JS, no Rust.

## Implementation Spec for Issue #120 ### Objective Hide every piece of editor floating UI during presentation, including the freehand drawing sub-toolbar, emoji picker, context menu, and theme panel — none of which the existing `body.wb-presenting` rule covered. ### Files to Modify - `crates/hero_whiteboard_ui/templates/web/board.html` — extend the `body.wb-presenting … { display: none !important; }` selector list. - `crates/hero_whiteboard_ui/templates/web/board_view.html` — viewer template has its own copy of the same rule. Same extension. ### Implementation Plan #### Step 1: Extend the hide list in both templates Files: both templates above. Replace: ```css body.wb-presenting .wb-navbar, body.wb-presenting .wb-toolbar, body.wb-presenting .wb-minimap, body.wb-presenting .wb-zoom, body.wb-presenting #properties-panel { display: none !important; } ``` with: ```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 #theme-panel, body.wb-presenting #properties-panel { display: none !important; } ``` (`board_view.html` doesn't render the toolbar/sub-toolbar/properties panel — but adding the selectors there is harmless and keeps the two rule sets in lockstep, so a future addition to either template is automatically covered.) Dependencies: none. ### Acceptance Criteria - [ ] Pick freehand drawing → sub-toolbar visible. Click Present → sub-toolbar hidden. - [ ] Open emoji picker → click Present → emoji picker hidden. - [ ] Right-click menu open → click Present → menu hidden. - [ ] Theme panel open → click Present → panel hidden. - [ ] Exit presentation → all the above re-appear in their last open state if the user opened them again (i.e. the hide is purely visual, not destructive). - [ ] No regression on the previously-hidden items (navbar/toolbar/minimap/zoom/properties). - [ ] `cargo fmt`, `cargo clippy --workspace --all-targets -- -D warnings`, `cargo test --workspace --lib` clean. ### Notes - **Why not also close them on `startPresentation`:** the CSS hide is enough — the elements are still in the DOM with their state preserved, so exit returns the user to where they were. Forcing them closed would lose state and require teardown logic per element. CSS-only is simpler and reversible. - **Pure CSS change** in two templates. No JS, no Rust.

AhmedHanafy725 commented

2026-04-30 11:36:02 +00:00

Author

Member

Implementation Summary

Pure CSS extension to the body.wb-presenting … { display: none !important; } rule in both templates.

`crates/hero_whiteboard_ui/templates/web/board.html` and `board_view.html`

Added four selectors to the existing list:

.wb-subtoolbar — fixes the reported bug (freehand drawing sub-menu leaking).
.wb-emoji-picker — same risk for the emoji picker.
.wb-context-menu — right-click menu would also leak.
#theme-panel — theme picker dropdown.

board_view.html also picked up .wb-toolbar and #properties-panel to keep the rule sets in lockstep across templates (they don't render those elements today, but a future addition is automatically covered).

Test Results

cargo fmt --all -- --check — clean
cargo clippy --workspace --all-targets -- -D warnings — clean
cargo test --workspace --lib — 0 failed
cargo check -p hero_whiteboard_ui — clean (Askama re-compiled both templates)

Manual smoke

Pick freehand drawing → sub-toolbar visible. Click Present → sub-toolbar hidden.
Open emoji picker → Present → hidden.
Right-click a shape → context menu open → Present → hidden.
Open theme panel → Present → hidden.
Exit presentation → all of the above re-appear if they were left open. The hide is purely visual; no DOM teardown.

Notes

CSS-only fix; no JS changes. The elements remain in the DOM with their state preserved, so the user returns to where they left off after exiting presentation.

## Implementation Summary Pure CSS extension to the `body.wb-presenting … { display: none !important; }` rule in both templates. ### `crates/hero_whiteboard_ui/templates/web/board.html` and `board_view.html` Added four selectors to the existing list: - `.wb-subtoolbar` — fixes the reported bug (freehand drawing sub-menu leaking). - `.wb-emoji-picker` — same risk for the emoji picker. - `.wb-context-menu` — right-click menu would also leak. - `#theme-panel` — theme picker dropdown. `board_view.html` also picked up `.wb-toolbar` and `#properties-panel` to keep the rule sets in lockstep across templates (they don't render those elements today, but a future addition is automatically covered). ### Test Results - `cargo fmt --all -- --check` — clean - `cargo clippy --workspace --all-targets -- -D warnings` — clean - `cargo test --workspace --lib` — 0 failed - `cargo check -p hero_whiteboard_ui` — clean (Askama re-compiled both templates) ### Manual smoke 1. Pick freehand drawing → sub-toolbar visible. Click Present → sub-toolbar hidden. 2. Open emoji picker → Present → hidden. 3. Right-click a shape → context menu open → Present → hidden. 4. Open theme panel → Present → hidden. 5. Exit presentation → all of the above re-appear if they were left open. The hide is purely visual; no DOM teardown. ### Notes - CSS-only fix; no JS changes. The elements remain in the DOM with their state preserved, so the user returns to where they left off after exiting presentation.