Skip to content

Commit 1a48142

Browse files
ToolboxAidToolboxAid
committed
Tighten Audio SFX Playground control layout and inline sweep units - PR_26144_004-tighten-audio-sfx-control-layout
1 parent 11de077 commit 1a48142

3 files changed

Lines changed: 103 additions & 6 deletions

File tree

‎docs/dev/reports/playwright_audio_sfx_layout_density.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Audio / SFX Playground V2 Layout Density Validation
2+
3+
PR: `PR_26144_004-tighten-audio-sfx-control-layout`
4+
5+
## Scope
6+
7+
- Updated only `tools/audio-sfx-playground-v2` plus required reports.
8+
- Added a scoped external stylesheet for Audio / SFX Playground V2 density overrides.
9+
- Kept template-v2 classes and styling patterns in place.
10+
- Marked Frequency, Duration, Attack, Release, Volume, and Sweep controls for compact range layout.
11+
- Kept Sweep value formatting as one text node, for example `875 cents`.
12+
- Did not modify `start_of_day` folders.
13+
14+
## Static Validation
15+
16+
PASS:
17+
18+
- HTML/CSS restriction check:
19+
- no `<style>` blocks
20+
- no inline event handlers
21+
- no script tags without `src`
22+
- linked stylesheets resolve
23+
- CSS braces are balanced
24+
- Audio / SFX Playground V2 JavaScript syntax check:
25+
- `node --check` over `tools/audio-sfx-playground-v2/js/**/*.js`
26+
- Whitespace validation:
27+
- `git diff --check -- tools/audio-sfx-playground-v2/index.html tools/audio-sfx-playground-v2/styles/audioSfxLayoutDensity.css`
28+
29+
## Playwright Impact
30+
31+
Playwright impacted: Yes.
32+
33+
Expected validation:
34+
35+
- Workspace V2 shows the Audio / SFX Playground V2 tile.
36+
- The tile launches Audio / SFX Playground V2.
37+
- Audio / SFX Playground V2 renders with no console errors on launch.
38+
- Frequency, Duration, Attack, Release, Volume, and Sweep controls render without overlap.
39+
- Sweep value appears inline with its unit label, for example `875 cents`.
40+
- Main controls fit without vertical scrolling on a normal desktop viewport.
41+
42+
Local command results:
43+
44+
- `npm run test:workspace-v2`
45+
- FAIL: PowerShell blocked `npm.ps1` because script execution is disabled on this system.
46+
- `npm.cmd run test:workspace-v2`
47+
- FAIL: package script started, but `playwright` is not installed or not available on PATH.
48+
49+
Because Playwright is unavailable in this local environment, browser launch validation could not be completed here.
50+
51+
## Full Samples Smoke Test
52+
53+
Skipped. This PR only adjusts one tool's layout density and does not broadly impact samples.

‎tools/audio-sfx-playground-v2/index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="stylesheet" href="../../src/engine/ui/hubCommon.css">
99
<link rel="stylesheet" href="../../src/engine/theme/accordionV2/accordionV2.css">
1010
<link rel="stylesheet" href="../_templates-v2/styles/toolStarter.css">
11+
<link rel="stylesheet" href="./styles/audioSfxLayoutDensity.css">
1112
<script type="module" src="./js/bootstrap.js"></script>
1213
</head>
1314
<body class="tools-platform-tool-page tools-platform-surface hub-page-tools" data-tool-id="audio-sfx-playground-v2">
@@ -76,32 +77,32 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
7677
<option value="sawtooth">Saw</option>
7778
</select>
7879
</label>
79-
<label class="tool-starter__field" for="frequencyInput">
80+
<label class="tool-starter__field" for="frequencyInput" data-density-control="frequency">
8081
<span>Frequency</span>
8182
<input id="frequencyInput" type="range" min="80" max="1800" step="1">
8283
<output id="frequencyValue" for="frequencyInput"></output>
8384
</label>
84-
<label class="tool-starter__field" for="durationInput">
85+
<label class="tool-starter__field" for="durationInput" data-density-control="duration">
8586
<span>Duration</span>
8687
<input id="durationInput" type="range" min="60" max="1400" step="10">
8788
<output id="durationValue" for="durationInput"></output>
8889
</label>
89-
<label class="tool-starter__field" for="attackInput">
90+
<label class="tool-starter__field" for="attackInput" data-density-control="attack">
9091
<span>Attack</span>
9192
<input id="attackInput" type="range" min="0" max="250" step="5">
9293
<output id="attackValue" for="attackInput"></output>
9394
</label>
94-
<label class="tool-starter__field" for="releaseInput">
95+
<label class="tool-starter__field" for="releaseInput" data-density-control="release">
9596
<span>Release</span>
9697
<input id="releaseInput" type="range" min="20" max="700" step="10">
9798
<output id="releaseValue" for="releaseInput"></output>
9899
</label>
99-
<label class="tool-starter__field" for="volumeInput">
100+
<label class="tool-starter__field" for="volumeInput" data-density-control="volume">
100101
<span>Volume</span>
101102
<input id="volumeInput" type="range" min="0" max="1" step="0.01">
102103
<output id="volumeValue" for="volumeInput"></output>
103104
</label>
104-
<label class="tool-starter__field" for="pitchSweepInput">
105+
<label class="tool-starter__field" for="pitchSweepInput" data-density-control="sweep">
105106
<span>Sweep</span>
106107
<input id="pitchSweepInput" type="range" min="-1200" max="1200" step="25">
107108
<output id="pitchSweepValue" for="pitchSweepInput"></output>

‎tools/audio-sfx-playground-v2/styles/audioSfxLayoutDensity.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
body[data-tool-id="audio-sfx-playground-v2"] .tool-starter__panel--left {
2+
gap: 10px;
3+
padding: 10px;
4+
}
5+
6+
body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent {
7+
gap: 7px;
8+
padding: 9px 10px 10px;
9+
}
10+
11+
body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__field {
12+
gap: 6px;
13+
}
14+
15+
body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__field select {
16+
min-height: 32px;
17+
padding-block: 5px;
18+
}
19+
20+
body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__field[data-density-control] {
21+
grid-template-columns: 74px minmax(92px, 1fr) minmax(64px, max-content);
22+
min-height: 28px;
23+
}
24+
25+
body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__field[data-density-control] input[type="range"] {
26+
height: 24px;
27+
padding-block: 0;
28+
}
29+
30+
body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__field[data-density-control] output {
31+
min-width: 64px;
32+
justify-self: end;
33+
text-align: right;
34+
white-space: nowrap;
35+
}
36+
37+
body[data-tool-id="audio-sfx-playground-v2"] #sfxShapeContent .tool-starter__toggle {
38+
min-height: 28px;
39+
}
40+
41+
body[data-tool-id="audio-sfx-playground-v2"] #sfxValidationMessage {
42+
line-height: 1.25;
43+
}

0 commit comments

Comments
 (0)