LucasDLTG/dsp-thomann-interface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fully responsive gain tab

Browse Source
This commit is contained in:
LucasDLTG
2026-07-23 00:39:54 +02:00
parent 4dc557a255
commit 2c35ab923d
12 changed files with 324 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/components/dsp408/GainSection/GainSection.tsx
View File

@ -1,4 +1,3 @@
import VerticalStack from '../../VerticalStack/VerticalStack';
import VerticalSlider from '../../Slider/VerticalSlider';
import { invoke } from '@tauri-apps/api/core';
import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
@ -6,8 +5,12 @@ import { DSP } from '../../../types/types';
import { NotificationType } from '../../../types/types';
import { useState } from 'react';
import Button from '../../Button/Button';
import AutoScale from '../../AutoScale/AutoScale';
import './GainSection.css';
const DESIGN_WIDTH = 90;
const DESIGN_HEIGHT = 380;
function GainPanel({
dsp,
notify,
@ -89,32 +92,43 @@ function GainPanel({
};
return (
<VerticalStack title={title}>
<VerticalSlider
min={-60}
max={12}
step={0.5}
switchStepValue={-10}
switchStep={0.1}
unit=" dB"
onChange={setGain}
/>
{/* <Button
variant="toggle"
className={muted ? "active-danger" : ""}
onClick={toggleMute}
>
{muted ? "Muted" : "Mute"}
</Button>
<div
className="gain-panel-frame"
style={
{
'--panel-w': DESIGN_WIDTH,
'--panel-h': DESIGN_HEIGHT,
} as React.CSSProperties
}
>
<AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
<div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
<div className="gain-panel__title">{title}</div>
<Button
variant="toggle"
className={inverted ? "active-warning" : ""}
onClick={toggleInverse}
>
{inverted ? "Inverted" : "Invert"}
</Button> */}
</VerticalStack>
<VerticalSlider
min={-60}
max={12}
step={0.5}
switchStepValue={-10}
switchStep={0.1}
unit=" dB"
onChange={setGain}
/>
<Button variant="toggle" className={muted ? 'active-danger' : ''} onClick={toggleMute}>
{muted ? 'Muted' : 'Mute'}
</Button>
<Button
variant="toggle"
className={inverted ? 'active-warning' : ''}
onClick={toggleInverse}
>
{inverted ? 'Inverted' : 'Invert'}
</Button>
</div>
</AutoScale>
</div>
);
}
@ -131,14 +145,14 @@ function GainSection({
{ channel: { Input: InputChannel.InC }, title: 'In C' },
{ channel: { Input: InputChannel.InD }, title: 'In D' },
{ channel: { Output: OutputChannel.Out1 }, title: "Out 1" },
{ channel: { Output: OutputChannel.Out2 }, title: "Out 2" },
{ channel: { Output: OutputChannel.Out3 }, title: "Out 3" },
{ channel: { Output: OutputChannel.Out4 }, title: "Out 4" },
{ channel: { Output: OutputChannel.Out5 }, title: "Out 5" },
{ channel: { Output: OutputChannel.Out6 }, title: "Out 6" },
{ channel: { Output: OutputChannel.Out7 }, title: "Out 7" },
{ channel: { Output: OutputChannel.Out8 }, title: "Out 8" },
{ channel: { Output: OutputChannel.Out1 }, title: 'Out 1' },
{ channel: { Output: OutputChannel.Out2 }, title: 'Out 2' },
{ channel: { Output: OutputChannel.Out3 }, title: 'Out 3' },
{ channel: { Output: OutputChannel.Out4 }, title: 'Out 4' },
{ channel: { Output: OutputChannel.Out5 }, title: 'Out 5' },
{ channel: { Output: OutputChannel.Out6 }, title: 'Out 6' },
{ channel: { Output: OutputChannel.Out7 }, title: 'Out 7' },
{ channel: { Output: OutputChannel.Out8 }, title: 'Out 8' },
];
return (