fix(p15): remediate four green-minor review findings
Tokenize scrim navy RGB triple (--deepdrft-scrim-rgb); LAVA row now flex-start so knobs group left; WAVE row keeps space-between for right-pinned width knob; remove inert margin-left:auto/wvc-row-right; correct stale seven->ten count in OnControlStateChanged comment.
This commit is contained in:
@@ -280,10 +280,11 @@ public partial class WaveformVisualizer : ComponentBase, IAsyncDisposable
|
|||||||
await PushThemeIfChangedAsync();
|
await PushThemeIfChangedAsync();
|
||||||
}
|
}
|
||||||
|
|
||||||
// The controls bar mutated a knob on the shared state and raised Changed. Push all seven control
|
// The controls bar mutated a knob on the shared state and raised Changed. Push all ten control
|
||||||
// values (cheap scalar interop). Each control now drives its own dedicated dial in the JS handle
|
// values (cheap scalar interop): the eight continuous dials plus the two subsystem enables. Each
|
||||||
// (lava reframe Wave R4) — scroll speed → visible-time-span, plus the six lava/colour dials; see
|
// dial drives its own dedicated uniform in the JS handle (lava reframe Wave R4) — scroll speed →
|
||||||
// PushControlsAsync. The bridge stays the sole owner of the JS module handle.
|
// visible-time-span, plus the six lava/colour dials; see PushControlsAsync. The bridge stays the
|
||||||
|
// sole owner of the JS module handle.
|
||||||
private void OnControlStateChanged() => InvokeAsync(async () =>
|
private void OnControlStateChanged() => InvokeAsync(async () =>
|
||||||
{
|
{
|
||||||
await PushControlsAsync();
|
await PushControlsAsync();
|
||||||
|
|||||||
@@ -82,7 +82,7 @@
|
|||||||
@* Color applies to the whole field regardless of which subsystems are on, so it is pinned
|
@* 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). *@
|
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 wvc-row-right" 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"
|
||||||
@@ -148,7 +148,7 @@
|
|||||||
@* ── Row 3 — WAVE section (only when waveform on). Scroll is a SLIDER (§8); width pinned right. ── *@
|
@* ── Row 3 — WAVE section (only when waveform on). Scroll is a SLIDER (§8); width pinned right. ── *@
|
||||||
@if (ControlState.WaveformEnabled)
|
@if (ControlState.WaveformEnabled)
|
||||||
{
|
{
|
||||||
<div class="wvc-row wvc-row-section">
|
<div class="wvc-row wvc-row-section wvc-row-wave">
|
||||||
<span class="wvc-section-label">WAVE:</span>
|
<span class="wvc-section-label">WAVE:</span>
|
||||||
|
|
||||||
<MudTooltip Text="How fast the sound rolls by.">
|
<MudTooltip Text="How fast the sound rolls by.">
|
||||||
@@ -163,7 +163,7 @@
|
|||||||
</MudTooltip>
|
</MudTooltip>
|
||||||
|
|
||||||
<MudTooltip Text="How wide the ribbon spreads across the lamp.">
|
<MudTooltip Text="How wide the ribbon spreads across the lamp.">
|
||||||
<div class="waveform-visualizer-control mix-visualizer-control wvc-row-right" role="group" aria-label="Waveform width">
|
<div class="waveform-visualizer-control mix-visualizer-control" role="group" aria-label="Waveform width">
|
||||||
<RadialKnob Value="@ControlState.WaveformWidth"
|
<RadialKnob Value="@ControlState.WaveformWidth"
|
||||||
ValueChanged="@OnWaveformWidthChanged"
|
ValueChanged="@OnWaveformWidthChanged"
|
||||||
Min="0" Max="1" Step="0.001"
|
Min="0" Max="1" Step="0.001"
|
||||||
|
|||||||
@@ -422,8 +422,9 @@ h2, h3, h4, h5, h6,
|
|||||||
--mud-palette-text-primary: var(--deepdrft-white); /* knob value label — light */
|
--mud-palette-text-primary: var(--deepdrft-white); /* knob value label — light */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Row layout (§3). Each row is a horizontal band; row 1 + row 3 space-between so the right-pinned
|
/* ── Row layout (§3). Each row is a horizontal band. Row 1 (MODE) and row 3 (WAVE) use
|
||||||
control (color / width) hugs the right edge and never reflows when an inner control hides. ── */
|
space-between so the right-pinned control (color / width) hugs the far edge. Row 2 (LAVA) uses
|
||||||
|
flex-start so its label + four knobs group left rather than spreading edge-to-edge. ── */
|
||||||
.waveform-visualizer-control-panel .wvc-row {
|
.waveform-visualizer-control-panel .wvc-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@@ -431,9 +432,20 @@ h2, h3, h4, h5, h6,
|
|||||||
gap: 0.85rem 1rem;
|
gap: 0.85rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.waveform-visualizer-control-panel .wvc-row-mode,
|
/* Row 1 (MODE): two direct flex children — the left toggle group and the color knob tooltip wrapper.
|
||||||
|
space-between pins the color knob to the far right and keeps it there when collisions hides. */
|
||||||
|
.waveform-visualizer-control-panel .wvc-row-mode {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Row 2 (LAVA): label + four knobs group left — no right-pinned control. */
|
||||||
.waveform-visualizer-control-panel .wvc-row-section {
|
.waveform-visualizer-control-panel .wvc-row-section {
|
||||||
/* space-between pushes the right-pinned control to the far edge; the left group holds the rest. */
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Row 3 (WAVE): label + scroll-slider + width-knob tooltip wrappers are direct flex children.
|
||||||
|
space-between pins the width knob to the far right while the label + slider sit left. */
|
||||||
|
.waveform-visualizer-control-panel .wvc-row-wave {
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -446,11 +458,6 @@ h2, h3, h4, h5, h6,
|
|||||||
gap: 0.85rem 1rem;
|
gap: 0.85rem 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The right-pinned control (color in row 1, width in row 3) — sits as the space-between right sibling. */
|
|
||||||
.waveform-visualizer-control-panel .wvc-row-right {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── Section label "LAVA:" / "WAVE:" (§3, §5). NowPlayingCard .np-label TYPOGRAPHY (mono, uppercase,
|
/* ── Section label "LAVA:" / "WAVE:" (§3, §5). NowPlayingCard .np-label TYPOGRAPHY (mono, uppercase,
|
||||||
tracked), recoloured LIGHT — labels are static, so light by the colour principle (§5, §10.3). ── */
|
tracked), recoloured LIGHT — labels are static, so light by the colour principle (§5, §10.3). ── */
|
||||||
.waveform-visualizer-control-panel .wvc-section-label {
|
.waveform-visualizer-control-panel .wvc-section-label {
|
||||||
@@ -506,7 +513,7 @@ h2, h3, h4, h5, h6,
|
|||||||
attribute). The doubled .mud-overlay-scrim.mud-overlay-dark selector (0,2,0) outranks MudBlazor's own
|
attribute). The doubled .mud-overlay-scrim.mud-overlay-dark selector (0,2,0) outranks MudBlazor's own
|
||||||
.mud-overlay-dark (0,1,0), so the tint wins regardless of stylesheet load order. ── */
|
.mud-overlay-dark (0,1,0), so the tint wins regardless of stylesheet load order. ── */
|
||||||
.waveform-visualizer-control-overlay .mud-overlay-scrim.mud-overlay-dark {
|
.waveform-visualizer-control-overlay .mud-overlay-scrim.mud-overlay-dark {
|
||||||
background-color: rgba(13, 27, 42, var(--deepdrft-modal-scrim-alpha));
|
background-color: rgba(var(--deepdrft-scrim-rgb), var(--deepdrft-modal-scrim-alpha));
|
||||||
}
|
}
|
||||||
|
|
||||||
.waveform-visualizer-control-overlay .mud-overlay-content {
|
.waveform-visualizer-control-overlay .mud-overlay-content {
|
||||||
|
|||||||
@@ -20,6 +20,10 @@
|
|||||||
/* Thin light-on-dark border, NowPlayingCard spirit (Phase 15 §5). One token instead of scattering
|
/* Thin light-on-dark border, NowPlayingCard spirit (Phase 15 §5). One token instead of scattering
|
||||||
the rgba(250,250,248,0.12) literal NowPlayingCard uses inline. */
|
the rgba(250,250,248,0.12) literal NowPlayingCard uses inline. */
|
||||||
--deepdrft-border-light: rgba(250, 250, 248, 0.12);
|
--deepdrft-border-light: rgba(250, 250, 248, 0.12);
|
||||||
|
/* Modal scrim base colour (RGB triple for use in rgba()) — panel dark-ground (#0D1B2A).
|
||||||
|
Deliberately NOT --deepdrft-navy (#112338); tokenised here so the scrim rule in
|
||||||
|
deepdrft-styles.css has no hardcoded literals. Change here once. */
|
||||||
|
--deepdrft-scrim-rgb: 13, 27, 42;
|
||||||
/* Modal scrim opacity — the SINGLE point of truth for the visualizer-controls overlay tint
|
/* Modal scrim opacity — the SINGLE point of truth for the visualizer-controls overlay tint
|
||||||
(Phase 15 §4/§10.5). Mild so the panel reads as modal without a blackout. Change here once. */
|
(Phase 15 §4/§10.5). Mild so the panel reads as modal without a blackout. Change here once. */
|
||||||
--deepdrft-modal-scrim-alpha: 0.3;
|
--deepdrft-modal-scrim-alpha: 0.3;
|
||||||
|
|||||||
Reference in New Issue
Block a user