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

feature: Waveform Controls Restructuring
Deploy DeepDrftPublic / Build & Publish (push) Successful in 4m2s
Details
Deploy DeepDrftPublic / Deploy (push) Successful in 1m27s
Details

Browse Source
This commit is contained in:
daniel-c-harvey
2026-06-20 03:12:41 -04:00
parent 64e1f71e18
commit f5edcba7b2
3 changed files with 152 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor
+31 -14
View File
@@ -34,9 +34,16 @@
@if (Visible)
{
@* ── Row 1 — MODE (always visible). Toggles + collisions group left; color pinned right. ── *@
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
<MudGrid>
@* ── Row 1 — MODE (always visible). ── *@
<MudItem xs="3" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
<span class="wvc-section-label">MODE:</span>
</MudStack>
</MudItem>
<MudItem xs="9">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
<MudTooltip Text="Show the sound, or hide the ribbon.">
<div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
<MudIconButton Icon="@(ControlState.WaveformEnabled ? DDIcons.WaveformFilled : DDIcons.Waveform)"
@@ -58,14 +65,16 @@
Min="0" Max="1" Step="0.001"
Size="64"
Color="Color.Primary"/>
<MudIcon Icon="@Icons.Material.Filled.Compress" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
<MudIcon Icon="@Icons.Material.Filled.Compress"
Size="Size.Small"
Color="Color.Primary"
Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
</div>
</MudTooltip>
}
@* </div> *@
@* Color applies to the whole field regardless of which subsystems are on, so it is pinned
far-right of row 1 and never reflows when collisions hides (§3). *@
@if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
{
<MudTooltip Text="How fast the lamp drifts through its colors.">
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Color gradient rotation speed">
<RadialKnob Value="@ControlState.GradientRotationSpeed"
@@ -76,6 +85,7 @@
<MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
</div>
</MudTooltip>
}
<MudTooltip Text="Light the lamp — or let it go cold.">
<div class="wvc-toggle @(ControlState.LavaEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Lava field on or off">
@@ -86,16 +96,19 @@
aria-pressed="@ControlState.LavaEnabled"/>
</div>
</MudTooltip>
</MudStack>
</MudItem>
@* ── Row 2 — WAVE section (only when waveform on). Both controls are RadialKnobs (scroll reverted
from MudSlider per Phase 15 polish); width pinned far-right via wvc-row-wave space-between. ── *@
@* ── Row 2 — WAVE section (only when waveform on). ── *@
@if (ControlState.WaveformEnabled)
{
<div class="wvc-row wvc-row-section wvc-row-wave">
<MudItem xs="3" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
<span class="wvc-section-label">WAVE:</span>
</MudStack>
</MudItem>
<MudItem xs="9">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
<MudTooltip Text="How fast the sound rolls by.">
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
@@ -119,15 +132,18 @@
</div>
</MudTooltip>
</MudStack>
</div>
</MudItem>
}
@* ── Row 3 — LAVA section (only when lava on). ── *@
@if (ControlState.LavaEnabled)
{
<div class="wvc-row wvc-row-section">
<MudItem xs="3" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
<span class="wvc-section-label">LAVA:</span>
</MudStack>
</MudItem>
<MudItem xs="9" Class="d-flex align-center">
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
<MudTooltip Text="How heavy the wax feels — float, or sink.">
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
@@ -173,8 +189,9 @@
</div>
</MudTooltip>
</MudStack>
</div>
</MudItem>
}
</MudGrid>
}
</div>
DeepDrftPublic.Client/Controls/WaveformVisualizerControls.razor.css
+5
View File
@@ -38,3 +38,8 @@
color: var(--mud-palette-primary);
opacity: 0.78;
}
.wvc-row {
display: flex;
width: 100%;
}
DeepDrftPublic.Client/Pages/ArchiveView.razor.css
+1 -1
View File
@@ -9,7 +9,7 @@
flex-wrap: wrap;
align-items: center;
gap: 24px;
padding: 36px 0 20px 0;
padding: 12px 0 20px 0;
}
.archive-controls-search {