daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

feat(visualizer): popover-hosted control panel (Phase 12.E)

Browse Source 
Build WaveformVisualizerControlPopover pairing the lava-lamp trigger with the eight-knob WaveformVisualizerControls panel; style to the NowPlaying Hero look from tokens. Panel chrome scoped to the popover mount via a PanelChrome flag; Mix's inline mount unchanged.
This commit is contained in:
daniel-c-harvey
2026-06-17 11:12:27 -04:00
parent ec3989c354
commit 7aeced6a8d
4 changed files with 178 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css
+16 -12
View File
@@ -1,13 +1,16 @@
/* The eight-knob band. Phase 10 §4: the host ALWAYS renders this component and the component @if-gates
the knobs on its Visible parameter. So the container is permanent and reserves its height whether or
not the knobs are present — content below the bar never pops on toggle. No collapse machinery, no
transitions, no glass surface. A plain transparent horizontal flex row of the eight knobs that wraps
to a second line only if the band is genuinely too narrow.
/* SCOPED fallback for the LEGACY inline mount only (Mix's TopRowCenter bar). The popover-hosted panel's
chrome lives in the GLOBAL deepdrft-styles.css (.waveform-visualizer-control-panel*) because MudPopover
portals its content out of this component's DOM subtree, where Blazor CSS isolation cannot reach. These
scoped rules apply only when the panel is mounted inline (not portaled) — i.e. Mix's existing bar.
min-height reserves one knob-row's worth of space (knob Size=64 + icon caption + gaps + margins) so
the empty (hidden) state occupies the same vertical box the populated single-row state does. On very
narrow viewports a populated band may wrap to a second row and exceed this floor — the no-pop
guarantee is exact for the common single-row (desktop) layout. */
Phase 10 §4: the inline host ALWAYS renders this component and the component @if-gates the knobs on its
Visible parameter. So the container is permanent and reserves its height whether or not the knobs are
present — content below the bar never pops on toggle. A plain transparent horizontal flex row of the
eight knobs that wraps to a second line only if the band is genuinely too narrow.
min-height reserves one knob-row's worth of space (knob Size=64 + icon caption + gaps + margins) so the
empty (hidden) state occupies the same vertical box the populated single-row state does. The
popover-panel rule in the global sheet overrides this min-height (a popover does not reserve height). */
.mix-visualizer-controls-bar {
display: flex;
flex-wrap: wrap;
@@ -19,7 +22,7 @@
}
/* One control: a RadialKnob with its Material icon caption underneath. RadialKnob has no icon slot, so
the icon rides adjacent (§7d). Center the pair so the seven read as a tidy bar. */
the icon rides adjacent (§7d). Center the pair so the eight read as a tidy bar. */
.mix-visualizer-control {
display: flex;
flex-direction: column;
@@ -28,8 +31,9 @@
}
/* The caption icon is a MudIcon (a Razor component), so Blazor CSS isolation does not stamp the scope
attribute onto its element — reach it with ::deep. Tinted to the secondary accent and the
overlay-label opacity so it matches the session-hero NowPlaying captions (§7e). */
attribute onto its element — reach it with ::deep. Tinted to the primary accent and the overlay-label
opacity so it matches the session-hero NowPlaying captions (§7e). The portaled popover panel tints the
same icons via the global sheet instead. */
.mix-visualizer-control ::deep .mix-visualizer-control-icon {
color: var(--mud-palette-primary);
opacity: 0.78;