diff --git a/src/components/ChoiceSelect/ChoiceSelect.css b/src/components/ChoiceSelect/ChoiceSelect.css index 8a81f62..0e934ff 100644 --- a/src/components/ChoiceSelect/ChoiceSelect.css +++ b/src/components/ChoiceSelect/ChoiceSelect.css @@ -47,6 +47,8 @@ bottom: 0; width: 4cqh; + padding-top: 3%; + padding-bottom: 3%; display: flex; align-items: center; diff --git a/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx b/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx index 5e90ca2..6767d3b 100644 --- a/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx +++ b/src/features/dsp408/components/DSP408Panel/DSP408Panel.tsx @@ -11,7 +11,7 @@ import LoadingOverlay from '../../../../components/LoadingOverlay/LoadingOverlay import { InputChannel, OutputChannel } from '../../types'; import MatrixSection from '../Matrixsection/Matrixsection'; import GeqSection from '../GeqSection/GeqSection'; -import InputSection from '../InputSection/InputSection'; +import ChannelSection from '../InputSection/ChannelSection'; import { DSP408Api } from '../../dsp408'; import { DSP408 } from '../../../../types'; import { SidebarId } from '../../constants'; @@ -134,54 +134,6 @@ function DSP408Panel({ dsp, api }: { dsp: DSP408; api: DSP408Api }) { case 'delay': return ; - case 'ina': - return ( - - ); - - case 'inb': - return ( - - ); - - case 'inc': - return ( - - ); - - case 'ind': - return ( - - ); - case 'matrix': return ( ; + case 'ina': + return ( + + ); + + case 'inb': + return ( + + ); + + case 'inc': + return ( + + ); + + case 'ind': + return ( + + ); + + case 'out1': + return ( + + ); + default: return null; } diff --git a/src/features/dsp408/components/InputSection/InputSection.css b/src/features/dsp408/components/InputSection/ChannelSection.css similarity index 92% rename from src/features/dsp408/components/InputSection/InputSection.css rename to src/features/dsp408/components/InputSection/ChannelSection.css index 599d58e..3948725 100644 --- a/src/features/dsp408/components/InputSection/InputSection.css +++ b/src/features/dsp408/components/InputSection/ChannelSection.css @@ -1,5 +1,5 @@ /* InputSection.css */ -.input-graph-section { +.channel-graph-section { flex: 0 0 calc(100% - var(--dsp-control-heigth)); min-height: 0; @@ -15,7 +15,7 @@ -webkit-user-select: none; } -.input-graph-panel { +.channel-graph-panel { position: relative; flex: 1 1 auto; min-width: 0; @@ -28,7 +28,7 @@ border-radius: var(--radius-md); } -.input-bypass-overlay { +.channel-bypass-overlay { position: absolute; inset: 0; display: flex; @@ -38,7 +38,7 @@ z-index: 2; } -.input-bypass-overlay span { +.channel-bypass-overlay span { font-size: 8cqh; font-weight: 800; letter-spacing: 0.15em; @@ -49,7 +49,7 @@ user-select: none; } -.input-graph__title { +.channel-graph__title { flex: 0 0 auto; text-align: center; @@ -60,7 +60,7 @@ font-weight: var(--font-weight-semibold); } -.input-graph-panel > .container { +.channel-graph-panel > .container { flex: 1; min-height: 0; } @@ -68,7 +68,7 @@ /* Bottom control bar — same pattern as .compressor-section: absolute, bottom-anchored, panels flow in a row and scroll horizontally instead of squeezing into a fixed max-width. */ -.input-control-section { +.channel-control-section { container-type: size; position: absolute; left: 0; @@ -93,7 +93,7 @@ -webkit-user-select: none; } -.input-control-panel { +.channel-control-panel { display: grid; grid-auto-flow: column; height: 100%; @@ -106,7 +106,7 @@ } /* Peq Sliders */ -.input-panel { +.channel-panel { position: relative; height: 100%; @@ -124,7 +124,7 @@ background: var(--bg-void); } -.input-panel__title { +.channel-panel__title { flex: 0 0 auto; width: 100%; text-align: center; @@ -140,7 +140,7 @@ text-overflow: ellipsis; } -.input-panel__grid { +.channel-panel__grid { flex: 1 1 auto; min-height: 0; @@ -154,7 +154,7 @@ box-sizing: border-box; } -.input-panel__cell { +.channel-panel__cell { display: flex; flex-direction: column; align-items: center; @@ -164,7 +164,7 @@ gap: 1cqh; } -.input-panel__cell-label { +.channel-panel__cell-label { flex: 0 0 auto; font-family: var(--font-ui); font-size: 3.2cqh; @@ -337,14 +337,14 @@ font-size: 4cqh; } -.input-graph-panel__magnitude-wrap { +.channel-graph-panel__magnitude-wrap { flex: 1 1 0; min-height: 0; min-width: 0; position: relative; } -.input-graph__title-row { +.channel-graph__title-row { flex: 0 0 auto; display: flex; align-items: center; @@ -352,11 +352,11 @@ padding: 1cqh 1.5cqh; } -.input-graph__title-row .input-graph__title { +.channel-graph__title-row .channel-graph__title { padding: 0; /* was on the standalone title element; row now owns spacing */ } -.input-graph-view-toggle { +.channel-graph-view-toggle { display: flex; gap: 0.4cqh; border: var(--border-width) solid var(--border-hairline); @@ -365,7 +365,7 @@ background: var(--bg-void); } -.input-graph-view-toggle__btn { +.channel-graph-view-toggle__btn { font-family: var(--font-ui); font-size: 2cqh; padding: 0.6cqh 1.2cqh; @@ -376,7 +376,7 @@ cursor: pointer; } -.input-graph-view-toggle__btn.active { +.channel-graph-view-toggle__btn.active { background: var(--accent-brand); color: var(--bg-void); } diff --git a/src/features/dsp408/components/InputSection/InputSection.tsx b/src/features/dsp408/components/InputSection/ChannelSection.tsx similarity index 89% rename from src/features/dsp408/components/InputSection/InputSection.tsx rename to src/features/dsp408/components/InputSection/ChannelSection.tsx index 36c1d3d..f6936a6 100644 --- a/src/features/dsp408/components/InputSection/InputSection.tsx +++ b/src/features/dsp408/components/InputSection/ChannelSection.tsx @@ -1,4 +1,4 @@ -// InputSection.tsx +// ChannelSection.tsx import VerticalSlider, { makeLogStep, makeLogQuantize, @@ -12,12 +12,12 @@ import { PEQ_Q_RANGES, PEAK_Q_VALUES, } from '../../constants'; -import { InputChannel, Channel, PEQBand, PEQFilter, PEQ, Crossover } from '../../types'; +import { Channel, PEQBand, PEQFilter, PEQ, Crossover } from '../../types'; import { DSP408 as DSP } from '../../../../types'; import { CrossoverFilter } from '../../types'; import { LinearGraph, LinearGraphHandle } from '../../../../components/LinearGraph/LinearGraph'; import { useRef, useState } from 'react'; -import './InputSection.css'; +import './ChannelSection.css'; import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup'; import Button from '../../../../components/Button/Button'; import { @@ -50,12 +50,12 @@ function GraphViewToggle({ ]; return ( -
+
{options.map((opt) => (