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

feat: responsive connection section

Browse Source
This commit is contained in:
LucasDLTG
2026-07-24 22:25:50 +02:00
parent 62d3b22fea
commit a157b5f198
10 changed files with 245 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/styles/App.css → src/App.css
View File

2
src/App.tsx
View File

@ -1,7 +1,7 @@
import { invoke } from '@tauri-apps/api/core'; import { invoke } from '@tauri-apps/api/core';
import { useState } from 'react'; import { useState } from 'react';
import './styles/App.css'; import './App.css';
import { DSP, DSPStatus, AppPage } from './types/types'; import { DSP, DSPStatus, AppPage } from './types/types';
import TopBar from './components/Topbar/Topbar'; import TopBar from './components/Topbar/Topbar';
import DSPPage from './pages/DspPage/DspPage'; import DSPPage from './pages/DspPage/DspPage';

4
src/components/Led/Led.tsx
View File

@ -5,10 +5,12 @@ type LedProps = {
className?: string; className?: string;
}; };
export function Led({ status = 'disconnected', className = '' }: LedProps) { function Led({ status = 'disconnected', className = '' }: LedProps) {
return ( return (
<span className={['led', className].filter(Boolean).join(' ')}> <span className={['led', className].filter(Boolean).join(' ')}>
<span className={`led-dot led-dot--${status}`} /> <span className={`led-dot led-dot--${status}`} />
</span> </span>
); );
} }
export default Led;

109
src/components/dsp408/ConnectionSection/ConnectionSection.css
View File

@ -1,64 +1,107 @@
/* .connection-panel-frame { .connection-section {
width: 33.333%;
height: 33.333%;
box-sizing: border-box;
}
.panel {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; justify-content: center;
box-sizing: border-box; align-items: center;
overflow: hidden;
position: relative;
} }
.panel-type { .connection-panel {
width: 340px;
display: flex;
flex-direction: column;
}
.connection-panel__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
min-width: 0;
}
.connection-panel__header-text {
flex: 1;
min-width: 0;
}
.connection-panel__title {
margin: 0;
font-size: var(--font-lg);
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.connection-panel__type {
margin-top: var(--space-1); margin-top: var(--space-1);
font-size: 12px;
font-size: var(--font-sm);
color: var(--text-muted); color: var(--text-muted);
font-family: var(--font-mono); font-family: var(--font-mono);
letter-spacing: 0.03em; letter-spacing: 0.03em;
} }
.panel-header { .connection-panel__specs {
margin: var(--space-5) 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.connection-panel__spec {
display: flex; display: flex;
align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 12px; align-items: center;
min-width: 0; gap: var(--space-3);
} }
.panel-header-text { .connection-panel__spec dt {
min-width: 0; color: var(--text-muted);
flex: 1 1 auto; font-size: var(--font-sm);
} }
.panel-title { .connection-panel__spec dd {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin: 0; margin: 0;
font-size: 18px; color: var(--text-primary);
font-weight: var(--font-weight-semibold);
} }
.mono { .connection-panel__mono {
font-family: var(--font-mono);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.specs { .connection-panel__actions {
margin-top: auto;
display: flex;
justify-content: flex-end;
}
.connection-panel__status {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0; flex-shrink: 0;
} }
.connection-section { .connection-panel__led {
position: absolute; height: 14px;
inset: 0; aspect-ratio: 1 / 1;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
} */ justify-content: center;
flex: 0 0 auto;
}

51
src/components/dsp408/ConnectionSection/ConnectionSection.tsx
View File

@ -1,14 +1,10 @@
// ConnectionPanel.tsx
import { DSP } from '../../../types/types'; import { DSP } from '../../../types/types';
import Button from '../../Button/Button'; import Button from '../../Button/Button';
import Card from '../../Card/Card';
import Led from '../../Led/Led';
import './ConnectionSection.css'; import './ConnectionSection.css';
const DESIGN_WIDTH = 340;
const DESIGN_HEIGHT = 280;
const BTN_W = 100;
const BTN_H = 40;
function ConnectionPanel({ function ConnectionPanel({
dsp, dsp,
onConnect, onConnect,
@ -27,47 +23,47 @@ function ConnectionPanel({
return ( return (
<div className="connection-section"> <div className="connection-section">
<div <Card className="connection-panel">
className="connection-panel-frame" <div className="connection-panel__header">
style={{ '--panel-w': DESIGN_WIDTH, '--panel-h': DESIGN_HEIGHT } as React.CSSProperties} <div className="connection-panel__header-text">
> <h1 className="connection-panel__title" title={dsp.name}>
<div className="card panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
<div className="panel-header">
<div className="panel-header-text">
<h1 className="panel-title" title={dsp.name}>
{dsp.name} {dsp.name}
</h1> </h1>
<div className="panel-type">{dsp.type}</div>
<div className="connection-panel__type">{dsp.type}</div>
</div> </div>
<div className="status-block"> <div className="connection-panel__status">
<span className={`led led--lg led--${dsp.status}`} /> <span className="connection-panel__led">
<Led status={dsp.status} />
</span>
<span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span> <span className={`status-label status-label--${dsp.status}`}>{statusLabel}</span>
</div> </div>
</div> </div>
<dl className="specs"> <dl className="connection-panel__specs">
<div className="spec"> <div className="connection-panel__spec">
<dt>IP address</dt> <dt>IP address</dt>
<dd className="mono" title={dsp.ip}> <dd className="connection-panel__mono" title={dsp.ip}>
{dsp.ip} {dsp.ip}
</dd> </dd>
</div> </div>
<div className="spec"> <div className="connection-panel__spec">
<dt>Port</dt> <dt>Port</dt>
<dd className="mono">{dsp.port}</dd> <dd className="connection-panel__mono">{dsp.port}</dd>
</div> </div>
<div className="spec"> <div className="connection-panel__spec">
<dt>Device ID</dt> <dt>Device ID</dt>
<dd className="mono" title={dsp.deviceId || undefined}> <dd className="connection-panel__mono" title={dsp.deviceId || undefined}>
{dsp.deviceId || '—'} {dsp.deviceId || '—'}
</dd> </dd>
</div> </div>
</dl> </dl>
<div className="panel-actions"> <div className="connection-panel__actions">
{dsp.status === 'connected' ? ( {dsp.status === 'connected' ? (
<Button variant="outline" onClick={onDisconnect}> <Button variant="outline" onClick={onDisconnect}>
Disconnect Disconnect
@ -78,8 +74,7 @@ function ConnectionPanel({
</Button> </Button>
)} )}
</div> </div>
</div> </Card>
</div>
</div> </div>
); );
} }

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

@ -1,4 +1,4 @@
import VerticalSlider from '../../Slider/VerticalSlider'; import VerticalSlider from '../Slider/VerticalSlider';
import { invoke } from '@tauri-apps/api/core'; import { invoke } from '@tauri-apps/api/core';
import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State'; import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
import { DSP } from '../../../types/types'; import { DSP } from '../../../types/types';
@ -93,7 +93,6 @@ function GainPanel({
return ( return (
<div className="gain-panel-frame"> <div className="gain-panel-frame">
<AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
<div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}> <div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
<div className="gain-panel__title">{title}</div> <div className="gain-panel__title">{title}</div>
@ -119,7 +118,6 @@ function GainPanel({
{inverted ? 'Inverted' : 'Invert'} {inverted ? 'Inverted' : 'Invert'}
</Button> </Button>
</div> </div>
</AutoScale>
</div> </div>
); );
} }

54
src/components/Slider/VerticalSlider.css → src/components/dsp408/Slider/VerticalSlider.css
View File

@ -1,9 +1,19 @@
.gauge-container { .gauge-viewport {
width: 70px; container-type: inline-size;
height: 260px; container-name: gauge;
padding-top: 20px; width: 100%;
padding-bottom: 10px; aspect-ratio: 70 / 260;
box-sizing: border-box;
}
.gauge-container {
width: 100%;
height: 100%;
padding-top: 28.571cqw; /* 20px */
padding-bottom: 14.286cqw; /* 10px */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -17,21 +27,23 @@
.gauge-track { .gauge-track {
position: relative; position: relative;
width: 70px; width: 100%;
height: 210px; height: 300cqw; /* 210px */
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-bottom: 8px; margin-bottom: 11.429cqw; /* 8px */
box-sizing: border-box;
} }
.slider { .slider {
position: relative; position: relative;
width: 24px; width: 34.286cqw; /* 24px */
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
@ -48,7 +60,7 @@
transform: translateX(-50%); transform: translateX(-50%);
width: 2px; width: 2.857cqw; /* 2px */
height: 100%; height: 100%;
@ -62,7 +74,7 @@
left: 50%; left: 50%;
width: 18px; width: 25.714cqw; /* 18px */
aspect-ratio: 1; aspect-ratio: 1;
@ -94,9 +106,9 @@
} }
.ticks span { .ticks span {
width: 10px; width: 14.286cqw; /* 10px */
height: 2px; height: 2.857cqw; /* 2px */
background: var(--border-hairline); background: var(--border-hairline);
@ -104,22 +116,22 @@
} }
.left { .left {
left: 8px; left: 11.429cqw; /* 8px */
} }
.right { .right {
right: 8px; right: 11.429cqw; /* 8px */
} }
.value { .value {
width: 100%; width: 100%;
margin-top: 4px; margin-top: 5.714cqw; /* 4px */
padding-top: 2px; padding-top: 2.857cqw; /* 2px */
padding-bottom: 2px; padding-bottom: 2.857cqw; /* 2px */
padding-right: 4px; padding-right: 5.714cqw; /* 4px */
padding-left: 4px; padding-left: 5.714cqw; /* 4px */
box-sizing: border-box; box-sizing: border-box;
@ -134,7 +146,7 @@
color: var(--accent-brand); color: var(--accent-brand);
font-size: 16px; font-size: 22.857cqw;
font-family: var(--font-ui); font-family: var(--font-ui);

18
src/components/Slider/VerticalSlider.tsx → src/components/dsp408/Slider/VerticalSlider.tsx
View File

@ -2,7 +2,10 @@ import { useMemo, useRef, useState, useEffect } from 'react';
import './VerticalSlider.css'; import './VerticalSlider.css';
// Design size 260*70 // Design size 260*70 (height*width) — kept as the reference ratio.
// All CSS dimensions are expressed in container-query width units (cqw)
// relative to this DESIGN_WIDTH, so the whole component scales together
// and preserves this aspect ratio at any rendered size.
const DESIGN_WIDTH = 70; const DESIGN_WIDTH = 70;
@ -79,6 +82,9 @@ export default function VerticalSlider({
return Math.max(minStr.length, maxStr.length) + unit.length; return Math.max(minStr.length, maxStr.length) + unit.length;
}, [min, max, decimals, unit]); }, [min, max, decimals, unit]);
// Computed in "design pixels" (i.e. assuming the component is rendered at
// DESIGN_WIDTH px wide), then converted below to cqw so it scales with
// the actual rendered size instead of staying a fixed pixel value.
const valueFontSize = useMemo(() => { const valueFontSize = useMemo(() => {
const availableWidth = DESIGN_WIDTH - 8; const availableWidth = DESIGN_WIDTH - 8;
const AVG_CHAR_WIDTH_RATIO = 0.6; const AVG_CHAR_WIDTH_RATIO = 0.6;
@ -86,6 +92,10 @@ export default function VerticalSlider({
return Math.min(16, Math.max(8, sizeByWidth)); return Math.min(16, Math.max(8, sizeByWidth));
}, [maxChars]); }, [maxChars]);
// Convert the "design px" font size into cqw units relative to the
// component's own width, so it scales proportionally with everything else.
const valueFontSizeCqw = useMemo(() => (valueFontSize / DESIGN_WIDTH) * 100, [valueFontSize]);
function normalizeValue(input: number) { function normalizeValue(input: number) {
const clamped = Math.min(max, Math.max(min, input)); const clamped = Math.min(max, Math.max(min, input));
const snapped = Math.round(clamped / currentStep) * currentStep; const snapped = Math.round(clamped / currentStep) * currentStep;
@ -192,7 +202,8 @@ export default function VerticalSlider({
const percent = (value - min) / (max - min); const percent = (value - min) / (max - min);
return ( return (
<div className={['gauge-container', className].filter(Boolean).join(' ')} style={style}> <div className={['gauge-viewport', className].filter(Boolean).join(' ')} style={style}>
<div className="gauge-container">
<div className="gauge-track"> <div className="gauge-track">
<div className="ticks left"> <div className="ticks left">
{Array.from({ length: 15 }).map((_, i) => ( {Array.from({ length: 15 }).map((_, i) => (
@ -222,7 +233,7 @@ export default function VerticalSlider({
</div> </div>
</div> </div>
<div className="value" style={{ fontSize: `${valueFontSize}px` }}> <div className="value" style={{ fontSize: `${valueFontSizeCqw}cqw` }}>
<input <input
ref={inputRef} ref={inputRef}
type="text" type="text"
@ -243,5 +254,6 @@ export default function VerticalSlider({
<span className="value-unit">{unit}</span> <span className="value-unit">{unit}</span>
</div> </div>
</div> </div>
</div>
); );
} }

2
src/components/topbar/Topbar.tsx
View File

@ -3,7 +3,7 @@ import { DSP, AppPage } from '../../types/types';
import AnimatedLogo from '../../assets/icons/AnimatedLogo'; import AnimatedLogo from '../../assets/icons/AnimatedLogo';
import { PlusIcon } from '../../assets/icons/PlusIcon'; import { PlusIcon } from '../../assets/icons/PlusIcon';
import { CrownIcon } from '../../assets/icons/CrownIcon'; import { CrownIcon } from '../../assets/icons/CrownIcon';
import { Led } from '../Led/Led'; import Led from '../Led/Led';
import { CloseIcon } from '../../assets/icons/CloseIcon'; import { CloseIcon } from '../../assets/icons/CloseIcon';
import './Topbar.css'; import './Topbar.css';

0
src/styles/variables.css → src/variables.css
View File