feature: Waveform Controls Restructuring
This commit is contained in:
daniel-c-harvey
@@ -34,147 +34,164 @@
|
|||||||
|
|
||||||
@if (Visible)
|
@if (Visible)
|
||||||
{
|
{
|
||||||
@* ── Row 1 — MODE (always visible). Toggles + collisions group left; color pinned right. ── *@
|
<MudGrid>
|
||||||
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
|
@* ── 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>
|
||||||
|
|
||||||
<MudTooltip Text="Show the sound, or hide the ribbon.">
|
<MudItem xs="9">
|
||||||
<div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
|
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
|
||||||
<MudIconButton Icon="@(ControlState.WaveformEnabled ? DDIcons.WaveformFilled : DDIcons.Waveform)"
|
<MudTooltip Text="Show the sound, or hide the ribbon.">
|
||||||
Color="Color.Primary"
|
<div class="wvc-toggle @(ControlState.WaveformEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Waveform ribbon on or off">
|
||||||
OnClick="@ToggleWaveform"
|
<MudIconButton Icon="@(ControlState.WaveformEnabled ? DDIcons.WaveformFilled : DDIcons.Waveform)"
|
||||||
aria-label="Waveform ribbon on or off"
|
Color="Color.Primary"
|
||||||
aria-pressed="@ControlState.WaveformEnabled"/>
|
OnClick="@ToggleWaveform"
|
||||||
</div>
|
aria-label="Waveform ribbon on or off"
|
||||||
</MudTooltip>
|
aria-pressed="@ControlState.WaveformEnabled"/>
|
||||||
|
</div>
|
||||||
|
</MudTooltip>
|
||||||
|
|
||||||
@* Collisions are the interaction BETWEEN the two subsystems — meaningless with only one
|
@* Collisions are the interaction BETWEEN the two subsystems — meaningless with only one
|
||||||
present, so visible only when BOTH are on (§3 truth table). *@
|
present, so visible only when BOTH are on (§3 truth table). *@
|
||||||
@if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
|
@if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
|
||||||
{
|
{
|
||||||
<MudTooltip Text="How hard the blobs body-check the beat.">
|
<MudTooltip Text="How hard the blobs body-check the beat.">
|
||||||
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Collision strength">
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Collision strength">
|
||||||
<RadialKnob Value="@ControlState.CollisionStrength"
|
<RadialKnob Value="@ControlState.CollisionStrength"
|
||||||
ValueChanged="@OnCollisionStrengthChanged"
|
ValueChanged="@OnCollisionStrengthChanged"
|
||||||
Min="0" Max="1" Step="0.001"
|
Min="0" Max="1" Step="0.001"
|
||||||
Size="64"
|
Size="64"
|
||||||
Color="Color.Primary"/>
|
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"
|
||||||
</div>
|
Size="Size.Small"
|
||||||
</MudTooltip>
|
Color="Color.Primary"
|
||||||
}
|
Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
@* </div> *@
|
</div>
|
||||||
|
</MudTooltip>
|
||||||
|
}
|
||||||
|
|
||||||
@* Color applies to the whole field regardless of which subsystems are on, so it is pinned
|
@if (ControlState.LavaEnabled && ControlState.WaveformEnabled)
|
||||||
far-right of row 1 and never reflows when collisions hides (§3). *@
|
{
|
||||||
<MudTooltip Text="How fast the lamp drifts through its colors.">
|
<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">
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Color gradient rotation speed">
|
||||||
<RadialKnob Value="@ControlState.GradientRotationSpeed"
|
<RadialKnob Value="@ControlState.GradientRotationSpeed"
|
||||||
ValueChanged="@OnGradientRotationSpeedChanged"
|
ValueChanged="@OnGradientRotationSpeedChanged"
|
||||||
Min="0" Max="1" Step="0.001"
|
Min="0" Max="1" Step="0.001"
|
||||||
Size="64"
|
Size="64"
|
||||||
Color="Color.Primary"/>
|
Color="Color.Primary"/>
|
||||||
<MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
<MudIcon Icon="@Icons.Material.Filled.Palette" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
</div>
|
</div>
|
||||||
</MudTooltip>
|
</MudTooltip>
|
||||||
|
}
|
||||||
|
|
||||||
<MudTooltip Text="Light the lamp — or let it go cold.">
|
<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">
|
<div class="wvc-toggle @(ControlState.LavaEnabled ? "wvc-toggle-on" : "wvc-toggle-off")" role="group" aria-label="Lava field on or off">
|
||||||
<MudIconButton Icon="@(ControlState.LavaEnabled ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
|
<MudIconButton Icon="@(ControlState.LavaEnabled ? DDIcons.LavaLampFilled : DDIcons.LavaLamp)"
|
||||||
Color="Color.Primary"
|
Color="Color.Primary"
|
||||||
OnClick="@ToggleLava"
|
OnClick="@ToggleLava"
|
||||||
aria-label="Lava field on or off"
|
aria-label="Lava field on or off"
|
||||||
aria-pressed="@ControlState.LavaEnabled"/>
|
aria-pressed="@ControlState.LavaEnabled"/>
|
||||||
</div>
|
|
||||||
</MudTooltip>
|
|
||||||
|
|
||||||
</MudStack>
|
|
||||||
|
|
||||||
@* ── 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. ── *@
|
|
||||||
@if (ControlState.WaveformEnabled)
|
|
||||||
{
|
|
||||||
<div class="wvc-row wvc-row-section wvc-row-wave">
|
|
||||||
<span class="wvc-section-label">WAVE:</span>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
<RadialKnob Value="@ControlState.ScrollSpeed"
|
|
||||||
ValueChanged="@OnScrollSpeedChanged"
|
|
||||||
Min="0" Max="1" Step="0.001"
|
|
||||||
Size="64"
|
|
||||||
Color="Color.Primary" />
|
|
||||||
<MudIcon Icon="@Icons.Material.Filled.Speed" Size="Size.Small" Color="Color.Surface" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
|
|
||||||
</div>
|
|
||||||
</MudTooltip>
|
|
||||||
|
|
||||||
<MudTooltip Text="How wide the ribbon spreads across the lamp.">
|
|
||||||
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform width">
|
|
||||||
<RadialKnob Value="@ControlState.WaveformWidth"
|
|
||||||
ValueChanged="@OnWaveformWidthChanged"
|
|
||||||
Min="0" Max="1" Step="0.001"
|
|
||||||
Size="64"
|
|
||||||
Color="Color.Primary" />
|
|
||||||
<MudIcon Icon="@Icons.Material.Filled.SettingsEthernet" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
|
|
||||||
</div>
|
</div>
|
||||||
</MudTooltip>
|
</MudTooltip>
|
||||||
</MudStack>
|
</MudStack>
|
||||||
</div>
|
</MudItem>
|
||||||
}
|
|
||||||
|
@* ── Row 2 — WAVE section (only when waveform on). ── *@
|
||||||
@* ── Row 3 — LAVA section (only when lava on). ── *@
|
@if (ControlState.WaveformEnabled)
|
||||||
@if (ControlState.LavaEnabled)
|
{
|
||||||
{
|
<MudItem xs="3" Class="d-flex align-center">
|
||||||
<div class="wvc-row wvc-row-section">
|
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.FlexStart">
|
||||||
<span class="wvc-section-label">LAVA:</span>
|
<span class="wvc-section-label">WAVE:</span>
|
||||||
|
</MudStack>
|
||||||
|
</MudItem>
|
||||||
|
|
||||||
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
|
<MudItem xs="9">
|
||||||
<MudTooltip Text="How heavy the wax feels — float, or sink.">
|
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
|
||||||
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
|
<MudTooltip Text="How fast the sound rolls by.">
|
||||||
<RadialKnob Value="@ControlState.LavaGravity"
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform scroll speed">
|
||||||
ValueChanged="@OnLavaGravityChanged"
|
<RadialKnob Value="@ControlState.ScrollSpeed"
|
||||||
Min="0" Max="1" Step="0.001"
|
ValueChanged="@OnScrollSpeedChanged"
|
||||||
Size="64"
|
Min="0" Max="1" Step="0.001"
|
||||||
Color="Color.Primary" />
|
Size="64"
|
||||||
<MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
|
Color="Color.Primary"/>
|
||||||
</div>
|
<MudIcon Icon="@Icons.Material.Filled.Speed" Size="Size.Small" Color="Color.Surface" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
</MudTooltip>
|
</div>
|
||||||
|
</MudTooltip>
|
||||||
|
|
||||||
<MudTooltip Text="Crank the burner. More heat, more rolling boil.">
|
<MudTooltip Text="How wide the ribbon spreads across the lamp.">
|
||||||
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava heat">
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform width">
|
||||||
<RadialKnob Value="@ControlState.LavaHeat"
|
<RadialKnob Value="@ControlState.WaveformWidth"
|
||||||
ValueChanged="@OnLavaHeatChanged"
|
ValueChanged="@OnWaveformWidthChanged"
|
||||||
Min="0" Max="1" Step="0.001"
|
Min="0" Max="1" Step="0.001"
|
||||||
Size="64"
|
Size="64"
|
||||||
Color="Color.Primary" />
|
Color="Color.Primary"/>
|
||||||
<MudIcon Icon="@Icons.Material.Filled.LocalFireDepartment" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
|
<MudIcon Icon="@Icons.Material.Filled.SettingsEthernet" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
</div>
|
</div>
|
||||||
</MudTooltip>
|
</MudTooltip>
|
||||||
|
</MudStack>
|
||||||
|
</MudItem>
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (ControlState.LavaEnabled)
|
||||||
|
{
|
||||||
|
<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>
|
||||||
|
|
||||||
<MudTooltip Text="How much goo is in the lamp.">
|
<MudItem xs="9" Class="d-flex align-center">
|
||||||
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
|
<MudStack Row AlignItems="AlignItems.Center" Justify="Justify.Center" Class="mx-auto" Spacing="4">
|
||||||
<RadialKnob Value="@ControlState.FluidAmount"
|
<MudTooltip Text="How heavy the wax feels — float, or sink.">
|
||||||
ValueChanged="@OnFluidAmountChanged"
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava gravity">
|
||||||
Min="0" Max="1" Step="0.001"
|
<RadialKnob Value="@ControlState.LavaGravity"
|
||||||
Size="64"
|
ValueChanged="@OnLavaGravityChanged"
|
||||||
Color="Color.Primary" />
|
Min="0" Max="1" Step="0.001"
|
||||||
<MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
|
Size="64"
|
||||||
</div>
|
Color="Color.Primary"/>
|
||||||
</MudTooltip>
|
<MudIcon Icon="@Icons.Material.Filled.ArrowDownward" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
|
</div>
|
||||||
|
</MudTooltip>
|
||||||
|
|
||||||
<MudTooltip Text="Runny and gooey, or tight little globes.">
|
<MudTooltip Text="Crank the burner. More heat, more rolling boil.">
|
||||||
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid viscosity">
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Lava heat">
|
||||||
<RadialKnob Value="@ControlState.FluidViscosity"
|
<RadialKnob Value="@ControlState.LavaHeat"
|
||||||
ValueChanged="@OnFluidViscosityChanged"
|
ValueChanged="@OnLavaHeatChanged"
|
||||||
Min="0" Max="1" Step="0.001"
|
Min="0" Max="1" Step="0.001"
|
||||||
Size="64"
|
Size="64"
|
||||||
Color="Color.Primary" />
|
Color="Color.Primary"/>
|
||||||
<MudIcon Icon="@Icons.Material.Filled.Opacity" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon" />
|
<MudIcon Icon="@Icons.Material.Filled.LocalFireDepartment" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
</div>
|
</div>
|
||||||
</MudTooltip>
|
</MudTooltip>
|
||||||
</MudStack>
|
|
||||||
</div>
|
<MudTooltip Text="How much goo is in the lamp.">
|
||||||
}
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid amount">
|
||||||
|
<RadialKnob Value="@ControlState.FluidAmount"
|
||||||
|
ValueChanged="@OnFluidAmountChanged"
|
||||||
|
Min="0" Max="1" Step="0.001"
|
||||||
|
Size="64"
|
||||||
|
Color="Color.Primary"/>
|
||||||
|
<MudIcon Icon="@Icons.Material.Filled.BubbleChart" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
|
</div>
|
||||||
|
</MudTooltip>
|
||||||
|
|
||||||
|
<MudTooltip Text="Runny and gooey, or tight little globes.">
|
||||||
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Fluid viscosity">
|
||||||
|
<RadialKnob Value="@ControlState.FluidViscosity"
|
||||||
|
ValueChanged="@OnFluidViscosityChanged"
|
||||||
|
Min="0" Max="1" Step="0.001"
|
||||||
|
Size="64"
|
||||||
|
Color="Color.Primary"/>
|
||||||
|
<MudIcon Icon="@Icons.Material.Filled.Opacity" Size="Size.Small" Class="waveform-visualizer-control-icon mix-visualizer-control-icon"/>
|
||||||
|
</div>
|
||||||
|
</MudTooltip>
|
||||||
|
</MudStack>
|
||||||
|
</MudItem>
|
||||||
|
}
|
||||||
|
</MudGrid>
|
||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -38,3 +38,8 @@
|
|||||||
color: var(--mud-palette-primary);
|
color: var(--mud-palette-primary);
|
||||||
opacity: 0.78;
|
opacity: 0.78;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wvc-row {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding: 36px 0 20px 0;
|
padding: 12px 0 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.archive-controls-search {
|
.archive-controls-search {
|
||||||
|
|||||||
Reference in New Issue
Block a user