gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: add svg icons for waveforms in Tone Generator

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-03-04 06:19:58 +00:00
parent 15a6a143ee
commit ba6514add2
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/tools/ToneGenerator.vue
View File

@@ -8,10 +8,10 @@ const waveform = ref('sine')
const isPlaying = ref(false) const isPlaying = ref(false)
const waveforms = [ const waveforms = [
{ value: 'sine', label: 'Sine' }, { value: 'sine', label: 'Sine', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12c3.5-8 5.5-8 9 0 3.5 8 5.5 8 9 0"/></svg>' },
{ value: 'square', label: 'Square' }, { value: 'square', label: 'Square', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15h6V9h6v6h6"/></svg>' },
{ value: 'sawtooth', label: 'Sawtooth' }, { value: 'sawtooth', label: 'Sawtooth', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 15l8-8v8l8-8v8"/></svg>' },
{ value: 'triangle', label: 'Triangle' } { value: 'triangle', label: 'Triangle', icon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12l4-6 8 12 6-8"/></svg>' }
] ]
let audioContext = null let audioContext = null
@@ -169,7 +169,10 @@ onUnmounted(() => {
@click="waveform = wf.value" @click="waveform = wf.value"
v-ripple v-ripple
> >
{{ wf.label }} <div class="wf-btn-content">
<span class="wf-label">{{ wf.label }}</span>
<span class="wf-icon" v-html="wf.icon"></span>
</div>
</button> </button>
</div> </div>
</div> </div>
@@ -386,6 +389,25 @@ onUnmounted(() => {
cursor: pointer; cursor: pointer;
font-weight: bold; font-weight: bold;
transition: all 0.2s; transition: all 0.2s;
flex: 1; /* make buttons take even space by default on desktop too */
}
.wf-btn-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.wf-label {
flex: 1;
text-align: left;
}
.wf-icon {
display: flex;
opacity: 0.6;
transition: opacity 0.2s;
} }
.wf-btn:hover { .wf-btn:hover {
@@ -399,6 +421,10 @@ onUnmounted(() => {
box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.2); box-shadow: 0 0 10px rgba(var(--primary-accent-rgb), 0.2);
} }
.wf-btn.active .wf-icon {
opacity: 1;
}
.action-section { .action-section {
display: flex; display: flex;
justify-content: center; justify-content: center;