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

Phase 10 reframe R4: seven-knob inline visualizer controls, always-on lava loop, filled lava-lamp icon

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-16 17:17:14 -04:00
parent fe28573b68
commit 41ac7a5a93
9 changed files with 518 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Pages/MixDetail.razor
+23 -30
View File
@@ -48,31 +48,25 @@ else
BackLabel="All mixes"
ShowMeta="@(hasGenre || hasDate)">
<TopRightAction>
@* Lava-lamp button top-right, across from the back link. Toggles a popover holding the
four visualizer knobs (spec §7c/§7d). The controls themselves are unchanged — they
mutate the shared MixVisualizerControlState; the backdrop bridge pushes the uniforms.
The popover only progressively-discloses them off the always-visible row. *@
<MudTooltip Text="Visualizer settings">
<MudIconButton Icon="@DDIcons.LavaLamp"
Size="Size.Large"
Color="Color.Secondary"
Disabled="@(!RendererInfo.IsInteractive)"
OnClick="@ToggleSettings"
aria-label="Visualizer settings" />
</MudTooltip>
@* Lava-lamp button top-right, across from the back link. Toggles the INLINE seven-knob
control bar that animates open/closed in place below it (lava reframe §7b) — not a
popover or drawer. The icon swaps to its FILLED variant while the bar is expanded
(§7f / Part B). The controls bar mutates the shared MixVisualizerControlState; the
backdrop bridge pushes the dials. A knob drag does not collapse the bar — the toggle
only flips on this button's click, never on a drag landing in the bar. *@
<div class="mix-visualizer-controls-anchor">
<MudTooltip Text="Visualizer settings">
<MudIconButton Icon="@(_controlsExpanded ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
Size="Size.Large"
Color="Color.Secondary"
Disabled="@(!RendererInfo.IsInteractive)"
OnClick="@ToggleSettings"
aria-label="Visualizer settings"
aria-expanded="@_controlsExpanded" />
</MudTooltip>
@* Outside-click close via MudOverlay (the SharePopover idiom). A knob drag never lands
on this overlay — the knob's own global capture overlay is a child of the popover
content above it — so dragging a knob does not dismiss the popover. *@
<MudOverlay Visible="@_settingsOpen" OnClick="@CloseSettings" AutoClose="true" />
<MudPopover Open="@_settingsOpen"
Fixed="false"
AnchorOrigin="Origin.BottomRight"
TransformOrigin="Origin.TopRight"
Class="mix-visualizer-popover">
<MixVisualizerControls />
</MudPopover>
<MixVisualizerControls Expanded="@_controlsExpanded" />
</div>
</TopRightAction>
<Hero>
<div class="mix-detail-cover">
@@ -114,11 +108,10 @@ else
@code {
protected override string PersistKey => "mix-detail";
// Lava-lamp settings popover open state. Pure presentation over MixVisualizerControlState — the
// popover discloses the four knobs; toggling it touches no control value or bridge push.
private bool _settingsOpen;
// Lava-lamp inline knob-bar expanded state. Pure presentation over MixVisualizerControlState — the
// bar discloses the seven knobs and animates open/closed; toggling it touches no control value or
// bridge push. The lava-lamp button's filled/outline glyph is driven off this same flag.
private bool _controlsExpanded;
private void ToggleSettings() => _settingsOpen = !_settingsOpen;
private void CloseSettings() => _settingsOpen = false;
private void ToggleSettings() => _controlsExpanded = !_controlsExpanded;
}
DeepDrftPublic.Client/Pages/MixDetail.razor.css
+22
View File
@@ -4,6 +4,28 @@
z-index: 1;
}
/* The lava-lamp toggle + its inline knob-bar. The anchor stacks the button over the bar and lets the
bar grow downward/leftward in place when expanded, without shoving the masthead. The bar itself is
absolutely positioned under the button (top-right of the detail body), so its open/close animation
reads as the controls growing out from the icon rather than reflowing the page (lava reframe §7b). */
.mix-visualizer-controls-anchor {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
}
/* MixVisualizerControls renders the .mix-visualizer-controls-bar as its single root. It is a child
Razor component, so its scope attribute is not stamped here — reach the bar with ::deep to position
it as a floating-but-inline element anchored to the toggle's bottom-right. */
.mix-visualizer-controls-anchor ::deep .mix-visualizer-controls-bar {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
z-index: 3;
transform-origin: top right;
}
/* Medium square cover — deliberately smaller than the 360px cut cover so the
waveform backdrop keeps room. The placeholder/art MudPaper fills this frame. */
.mix-detail-cover {