feat: add gain responsive
This commit is contained in:
@ -8,8 +8,8 @@
|
||||
"build": "tsc && vite build",
|
||||
"preview": "vite preview",
|
||||
"tauri": "tauri",
|
||||
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx}\"",
|
||||
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx}\""
|
||||
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css}\"",
|
||||
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css}\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^2",
|
||||
|
||||
@ -172,3 +172,35 @@ pub async fn set_channel_gain(
|
||||
Ok(r)
|
||||
})
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub async fn set_mute(
|
||||
state: State<'_, AppState>,
|
||||
id: u64,
|
||||
channel: dsp_thomann::dsp408::types::Channel,
|
||||
muted: bool,
|
||||
) -> Result<bool, String> {
|
||||
state.with_device_mut(id, |device| {
|
||||
let r = device.dsp
|
||||
.set_mute(channel, muted)
|
||||
.map_err(|e| e.to_string())?;
|
||||
|
||||
Ok(r)
|
||||
})
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub async fn set_channel_inverse_gain(
|
||||
state: State<'_, AppState>,
|
||||
id: u64,
|
||||
channel: dsp_thomann::dsp408::types::Channel,
|
||||
inverted: bool,
|
||||
) -> Result<bool, String> {
|
||||
state.with_device_mut(id, |device| {
|
||||
let r = device.dsp
|
||||
.set_channel_inverse_gain(channel, inverted)
|
||||
.map_err(|e| e.to_string())?;
|
||||
|
||||
Ok(r)
|
||||
})
|
||||
}
|
||||
@ -15,6 +15,8 @@ pub fn run() {
|
||||
commands::disconnect_dsp408,
|
||||
commands::get_dsp_state,
|
||||
commands::set_channel_gain,
|
||||
commands::set_mute,
|
||||
commands::set_channel_inverse_gain
|
||||
]
|
||||
)
|
||||
.run(tauri::generate_context!())
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
|
||||
import { useState } from 'react';
|
||||
import '../../styles/App.css';
|
||||
import { DSP, DSPStatus, AppPage } from '../../types/types';
|
||||
import TopBar from '../topbar/Topbar';
|
||||
import DSPPage from '../dsp408/DspPage';
|
||||
import AddDSPForm from './AddDspPage';
|
||||
import { useNotifications } from '../../hooks/useNotifications';
|
||||
import Notifications from '../Notifications';
|
||||
import { DSPState } from '../../types/dsp408State';
|
||||
import CreditsPage from './CreditsPage';
|
||||
import HomePage from './HomePage';
|
||||
import './styles/App.css';
|
||||
import { DSP, DSPStatus, AppPage } from './types/types';
|
||||
import TopBar from './components/topbar/Topbar';
|
||||
import DSPPage from './pages/DspPage';
|
||||
import AddDSPForm from './pages/AddDspPage';
|
||||
import { useNotifications } from './hooks/useNotifications';
|
||||
import Notifications from './components/Notifications/Notifications';
|
||||
import { DSPState } from './types/dsp408State';
|
||||
import CreditsPage from './pages/CreditsPage';
|
||||
import HomePage from './pages/HomePage';
|
||||
|
||||
function App() {
|
||||
const [dsps, setDsps] = useState<DSP[]>([]);
|
||||
@ -126,7 +126,11 @@ function App() {
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<Notifications notifications={notifications} onRemove={removeNotification} onHover={hoverNotification}/>
|
||||
<Notifications
|
||||
notifications={notifications}
|
||||
onRemove={removeNotification}
|
||||
onHover={hoverNotification}
|
||||
/>
|
||||
|
||||
<TopBar
|
||||
dsps={dsps}
|
||||
80
src/components/Button/Button.css
Normal file
80
src/components/Button/Button.css
Normal file
@ -0,0 +1,80 @@
|
||||
.btn {
|
||||
width: auto;
|
||||
height: 36px;
|
||||
padding: 0 var(--space-4);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
border-color var(--dur-base) var(--ease-standard),
|
||||
opacity var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Primary */
|
||||
.btn-primary {
|
||||
background: var(--accent-brand);
|
||||
color: #0d0f12;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #6f9bf2;
|
||||
}
|
||||
|
||||
/* Ghost */
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: var(--border-hairline);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Toggle */
|
||||
.btn-toggle {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
margin: 8px auto;
|
||||
padding: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
/* same as ghost */
|
||||
background: transparent;
|
||||
border-color: var(--border-hairline);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-toggle:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Active states only */
|
||||
.btn-toggle.active-warning {
|
||||
background: var(--accent-connecting);
|
||||
border-color: var(--accent-connecting);
|
||||
color: var(--bg-void);
|
||||
}
|
||||
|
||||
.btn-toggle.active-danger {
|
||||
background: var(--accent-down);
|
||||
border-color: var(--accent-down);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
32
src/components/Button/Button.tsx
Normal file
32
src/components/Button/Button.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import './Button.css';
|
||||
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
||||
|
||||
type ButtonVariant = 'primary' | 'ghost' | 'toggle' | 'outline';
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: ButtonVariant;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function Button({
|
||||
variant = 'primary',
|
||||
children,
|
||||
className = '',
|
||||
disabled,
|
||||
onClick,
|
||||
type = 'button',
|
||||
...props
|
||||
}: ButtonProps) {
|
||||
return (
|
||||
<button
|
||||
type={type}
|
||||
className={`btn btn-${variant} ${className}`}
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
103
src/components/Notifications/Notifications.css
Normal file
103
src/components/Notifications/Notifications.css
Normal file
@ -0,0 +1,103 @@
|
||||
.notifications {
|
||||
position: fixed;
|
||||
right: var(--space-5);
|
||||
bottom: var(--space-5);
|
||||
z-index: 9999;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
|
||||
width: 320px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
|
||||
padding: 10px var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
animation: notification-in var(--dur-slow) var(--ease-out) forwards;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.notification-out {
|
||||
animation: notification-out var(--dur-slow) var(--ease-in) forwards;
|
||||
}
|
||||
|
||||
.notification-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: background var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.notification-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
background: #b42318;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
background: #15803d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.warning {
|
||||
background: #ca8a04;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes notification-in {
|
||||
from {
|
||||
transform: translateX(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notification-out {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import type { Notification } from '../types/types';
|
||||
import type { Notification } from '../../types/types';
|
||||
import './Notifications.css';
|
||||
|
||||
type Props = {
|
||||
notifications: Notification[];
|
||||
@ -6,11 +7,7 @@ type Props = {
|
||||
onHover: (id: number, hovering: boolean) => void;
|
||||
};
|
||||
|
||||
export default function Notifications({
|
||||
notifications,
|
||||
onRemove,
|
||||
onHover,
|
||||
}: Props) {
|
||||
export default function Notifications({ notifications, onRemove, onHover }: Props) {
|
||||
return (
|
||||
<div className="notifications">
|
||||
{notifications.map((n) => (
|
||||
@ -17,7 +17,6 @@
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Icon ---------- */
|
||||
|
||||
.sidebar-icon {
|
||||
@ -43,7 +42,6 @@
|
||||
fill: none;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Item ---------- */
|
||||
|
||||
.sidebar-item {
|
||||
@ -71,7 +69,6 @@
|
||||
border-color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-item {
|
||||
width: calc(100% - var(--space-4));
|
||||
gap: var(--sidebar-item-gap);
|
||||
@ -81,7 +78,6 @@
|
||||
padding-left: var(--sidebar-item-padding);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Item States ---------- */
|
||||
|
||||
.sidebar-item:hover {
|
||||
@ -89,13 +85,11 @@
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-item--active {
|
||||
border-color: var(--accent-brand);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Sidebar ---------- */
|
||||
|
||||
.sidebar-rail {
|
||||
@ -118,16 +112,13 @@
|
||||
|
||||
overflow: visible;
|
||||
|
||||
transition:
|
||||
width var(--dur-base) var(--ease-standard);
|
||||
transition: width var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded {
|
||||
width: var(--sidebar-width-expanded);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- App name ---------- */
|
||||
|
||||
.sidebar-app-name {
|
||||
@ -162,7 +153,6 @@
|
||||
transition-delay: var(--dur-fast);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Scroll ---------- */
|
||||
|
||||
.sidebar-scroll {
|
||||
@ -179,12 +169,10 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-scroll {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Toggle ---------- */
|
||||
|
||||
.sidebar-toggle {
|
||||
@ -220,12 +208,10 @@
|
||||
z-index: 32;
|
||||
}
|
||||
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle {
|
||||
left: calc(var(--sidebar-width-expanded) - var(--sidebar-toggle-size) - var(--space-3));
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle:hover {
|
||||
background: var(--bg-raised);
|
||||
|
||||
@ -234,35 +220,32 @@
|
||||
border-color: var(--accent-brand);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle:active {
|
||||
transform: scale(.92);
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle:active {
|
||||
transform: scale(.92);
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
|
||||
.sidebar-toggle-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
transition:
|
||||
transform var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
transition: transform var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
.sidebar-rail--expanded .sidebar-toggle-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
/* ---------- Content ---------- */
|
||||
|
||||
.stage--with-sidebar {
|
||||
margin-left: var(--sidebar-width-collapsed);
|
||||
transition: margin-left var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
transition:
|
||||
margin-left var(--dur-base) var(--ease-standard);
|
||||
.app-root--sidebar-expanded .stage--with-sidebar {
|
||||
margin-left: var(--sidebar-width-expanded);
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import './Sidebar.css';
|
||||
import { ChevronLeftIcon } from '../../../assets/icons/ChevronLeftIcon';
|
||||
import { ChevronLeftIcon } from '../../assets/icons/ChevronLeftIcon';
|
||||
|
||||
export type SidebarItem = {
|
||||
id: string;
|
||||
@ -13,21 +13,23 @@ export default function Sidebar({
|
||||
activeId,
|
||||
onSelect,
|
||||
appName,
|
||||
expanded,
|
||||
onToggle,
|
||||
}: {
|
||||
items: SidebarItem[];
|
||||
activeId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
appName: string;
|
||||
expanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className={`sidebar-rail ${expanded ? 'sidebar-rail--expanded' : ''}`}>
|
||||
<span className="sidebar-app-name">{appName}</span>
|
||||
|
||||
<button
|
||||
className="sidebar-toggle"
|
||||
onClick={() => setExpanded((prev) => !prev)}
|
||||
onClick={onToggle}
|
||||
aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
|
||||
aria-expanded={expanded}
|
||||
>
|
||||
186
src/components/Slider/VerticalSlider.css
Normal file
186
src/components/Slider/VerticalSlider.css
Normal file
@ -0,0 +1,186 @@
|
||||
.gauge-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gauge-container {
|
||||
width: 70px;
|
||||
height: 260px;
|
||||
|
||||
padding-top: 20px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
transform-origin: top center;
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gauge-track {
|
||||
position: relative;
|
||||
|
||||
width: 70px;
|
||||
height: 210px;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
top: 0;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: 2px;
|
||||
|
||||
height: 100%;
|
||||
|
||||
background: var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
|
||||
width: 18px;
|
||||
|
||||
aspect-ratio: 1;
|
||||
|
||||
transform: translate(-50%, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--bg-panel);
|
||||
|
||||
border: var(--border-width-active) solid var(--accent-brand);
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ticks span {
|
||||
width: 10px;
|
||||
|
||||
height: 2px;
|
||||
|
||||
background: var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
|
||||
margin-top: 4px;
|
||||
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
padding-right: 4px;
|
||||
padding-left: 4px;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.25em;
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
color: var(--accent-brand);
|
||||
|
||||
font-size: 16px;
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.value input {
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
|
||||
height: 1.4em;
|
||||
|
||||
text-align: center;
|
||||
|
||||
background: transparent;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.value input,
|
||||
.value-unit {
|
||||
font-size: inherit;
|
||||
|
||||
line-height: 1;
|
||||
|
||||
font-family: inherit;
|
||||
|
||||
color: inherit;
|
||||
}
|
||||
267
src/components/Slider/VerticalSlider.tsx
Normal file
267
src/components/Slider/VerticalSlider.tsx
Normal file
@ -0,0 +1,267 @@
|
||||
import { useMemo, useRef, useState, useEffect } from 'react';
|
||||
|
||||
import './VerticalSlider.css';
|
||||
|
||||
type VerticalSliderProps = {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
|
||||
switchStepValue?: number;
|
||||
switchStep?: number;
|
||||
|
||||
value?: number;
|
||||
onChange?: (value: number) => void;
|
||||
|
||||
unit?: string;
|
||||
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
const DESIGN_WIDTH = 70;
|
||||
const DESIGN_HEIGHT = 260;
|
||||
|
||||
function getDecimals(n: number) {
|
||||
const s = n.toString();
|
||||
const i = s.indexOf('.');
|
||||
return i === -1 ? 0 : s.length - i - 1;
|
||||
}
|
||||
|
||||
export default function VerticalSlider({
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
switchStepValue,
|
||||
switchStep,
|
||||
value: controlledValue,
|
||||
onChange,
|
||||
unit = '',
|
||||
className,
|
||||
style,
|
||||
}: VerticalSliderProps) {
|
||||
const [internalValue, setInternalValue] = useState(min);
|
||||
const value = controlledValue ?? internalValue;
|
||||
|
||||
const [editingText, setEditingText] = useState<string | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const lastValue = useRef(value);
|
||||
const keyboardValue = useRef<number | null>(null);
|
||||
const [displayValue, setDisplayValue] = useState(value);
|
||||
const dragValue = useRef(value);
|
||||
const rafRef = useRef<number | null>(null);
|
||||
const dragging = useRef(false);
|
||||
const thumbRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// --- NEW: auto-fit scale ---
|
||||
const outerRef = useRef<HTMLDivElement>(null);
|
||||
const [scale, setScale] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
const el = outerRef.current;
|
||||
if (!el) return;
|
||||
|
||||
const ro = new ResizeObserver((entries) => {
|
||||
const { width, height } = entries[0].contentRect;
|
||||
if (width === 0 || height === 0) return;
|
||||
|
||||
const s = Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT);
|
||||
setScale(s > 0 ? s : 1);
|
||||
});
|
||||
|
||||
ro.observe(el);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
// ---------------------------
|
||||
|
||||
useEffect(() => {
|
||||
setDisplayValue(value);
|
||||
dragValue.current = value;
|
||||
}, [value]);
|
||||
|
||||
const currentStep =
|
||||
switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
|
||||
? switchStep
|
||||
: step;
|
||||
|
||||
const decimals = useMemo(
|
||||
() => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
|
||||
[step, switchStep]
|
||||
);
|
||||
|
||||
const maxChars = useMemo(() => {
|
||||
const minStr = min.toFixed(decimals);
|
||||
const maxStr = max.toFixed(decimals);
|
||||
return Math.max(minStr.length, maxStr.length) + unit.length;
|
||||
}, [min, max, decimals, unit]);
|
||||
|
||||
const valueFontSize = useMemo(() => {
|
||||
const availableWidth = DESIGN_WIDTH - 8;
|
||||
const AVG_CHAR_WIDTH_RATIO = 0.6;
|
||||
const sizeByWidth = availableWidth / (maxChars * AVG_CHAR_WIDTH_RATIO);
|
||||
return Math.min(16, Math.max(8, sizeByWidth));
|
||||
}, [maxChars]);
|
||||
|
||||
function normalizeValue(input: number) {
|
||||
const clamped = Math.min(max, Math.max(min, input));
|
||||
const snapped = Math.round(clamped / currentStep) * currentStep;
|
||||
return Number(snapped.toFixed(6));
|
||||
}
|
||||
|
||||
function updateValue(v: number) {
|
||||
const next = normalizeValue(v);
|
||||
dragValue.current = next;
|
||||
lastValue.current = next;
|
||||
|
||||
if (thumbRef.current) {
|
||||
const percent = (next - min) / (max - min);
|
||||
thumbRef.current.style.bottom = `${percent * 100}%`;
|
||||
}
|
||||
|
||||
if (rafRef.current === null) {
|
||||
rafRef.current = requestAnimationFrame(() => {
|
||||
setDisplayValue(dragValue.current);
|
||||
rafRef.current = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;
|
||||
e.preventDefault();
|
||||
|
||||
let next = value;
|
||||
if (e.key === 'ArrowUp' || e.key === 'ArrowRight') next += currentStep;
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') next -= currentStep;
|
||||
|
||||
updateValue(next);
|
||||
keyboardValue.current = normalizeValue(next);
|
||||
}
|
||||
|
||||
function handleKeyUp() {
|
||||
if (keyboardValue.current !== null) {
|
||||
onChange?.(keyboardValue.current);
|
||||
keyboardValue.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
function valueFromPointer(clientY: number) {
|
||||
if (!sliderRef.current) return;
|
||||
const rect = sliderRef.current.getBoundingClientRect();
|
||||
const percent = 1 - (clientY - rect.top) / rect.height;
|
||||
const raw = min + percent * (max - min);
|
||||
updateValue(raw);
|
||||
}
|
||||
|
||||
function startDrag(e: React.PointerEvent<HTMLDivElement>) {
|
||||
const target = e.currentTarget;
|
||||
dragging.current = true;
|
||||
target.setPointerCapture(e.pointerId);
|
||||
valueFromPointer(e.clientY);
|
||||
}
|
||||
|
||||
function handlePointerMove(e: React.PointerEvent<HTMLDivElement>) {
|
||||
if (!dragging.current) return;
|
||||
valueFromPointer(e.clientY);
|
||||
}
|
||||
|
||||
function endDrag(e: React.PointerEvent<HTMLDivElement>) {
|
||||
dragging.current = false;
|
||||
const finalValue = dragValue.current;
|
||||
|
||||
if (controlledValue === undefined) setInternalValue(finalValue);
|
||||
setDisplayValue(finalValue);
|
||||
onChange?.(finalValue);
|
||||
|
||||
if (e.currentTarget.hasPointerCapture(e.pointerId)) {
|
||||
e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
}
|
||||
}
|
||||
|
||||
function commitEditing() {
|
||||
if (editingText !== null && editingText !== '' && editingText !== '-') {
|
||||
const parsed = Number(editingText);
|
||||
if (!Number.isNaN(parsed)) updateValue(parsed);
|
||||
}
|
||||
setEditingText(null);
|
||||
}
|
||||
|
||||
const percent = (value - min) / (max - min);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={outerRef}
|
||||
className="gauge-wrapper"
|
||||
style={{ width: '100%', height: '100%', ...style }}
|
||||
>
|
||||
<div
|
||||
className="gauge-scale-box"
|
||||
style={{
|
||||
position: 'relative',
|
||||
width: DESIGN_WIDTH * scale,
|
||||
height: DESIGN_HEIGHT * scale,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={['gauge-container', className].filter(Boolean).join(' ')}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: DESIGN_WIDTH,
|
||||
height: DESIGN_HEIGHT,
|
||||
transform: `scale(${scale})`,
|
||||
transformOrigin: 'top left',
|
||||
}}
|
||||
>
|
||||
<div className="gauge-track">
|
||||
<div className="ticks left">
|
||||
{Array.from({ length: 15 }).map((_, i) => <span key={i} />)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="slider"
|
||||
ref={sliderRef}
|
||||
tabIndex={0}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onPointerDown={startDrag}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={endDrag}
|
||||
onPointerCancel={endDrag}
|
||||
>
|
||||
<div className="track" />
|
||||
<div ref={thumbRef} className="thumb" style={{ bottom: `${percent * 100}%` }} />
|
||||
</div>
|
||||
|
||||
<div className="ticks right">
|
||||
{Array.from({ length: 15 }).map((_, i) => <span key={i} />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="value" style={{ fontSize: `${valueFontSize}px` }}>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={editingText ?? displayValue.toFixed(decimals)}
|
||||
style={{ width: '100%' }}
|
||||
onFocus={() => setEditingText(value.toFixed(decimals))}
|
||||
onChange={(e) => setEditingText(e.target.value)}
|
||||
onBlur={commitEditing}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') inputRef.current?.blur();
|
||||
if (e.key === 'Escape') {
|
||||
setEditingText(null);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="value-unit">{unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
82
src/components/VerticalStack/VerticalStack.css
Normal file
82
src/components/VerticalStack/VerticalStack.css
Normal file
@ -0,0 +1,82 @@
|
||||
.vertical-stack {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
/* header */
|
||||
|
||||
.vertical-stack__title {
|
||||
flex: 0 0 auto;
|
||||
|
||||
padding: var(--space-1);
|
||||
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
color: var(--text-primary);
|
||||
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* area containing components */
|
||||
|
||||
.vertical-stack__content {
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* each component slot */
|
||||
|
||||
.vertical-stack__item {
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
The child keeps its natural dimensions.
|
||||
Only horizontal scaling happens.
|
||||
*/
|
||||
|
||||
.vertical-stack__scale {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
transform-origin: center;
|
||||
}
|
||||
27
src/components/VerticalStack/VerticalStack.tsx
Normal file
27
src/components/VerticalStack/VerticalStack.tsx
Normal file
@ -0,0 +1,27 @@
|
||||
// VerticalStack.tsx
|
||||
import React from 'react';
|
||||
import './VerticalStack.css';
|
||||
|
||||
type VerticalStackProps = {
|
||||
title: string;
|
||||
titleFontSize?: number;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function VerticalStack({ title, children }: VerticalStackProps) {
|
||||
return (
|
||||
<div className="vertical-stack">
|
||||
<div className="vertical-stack__title">
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="vertical-stack__content">
|
||||
{React.Children.map(children, (child, index) => (
|
||||
<div className="vertical-stack__item" key={index}>
|
||||
{child}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,56 +0,0 @@
|
||||
import VerticalStack from './VerticalStack/VerticalStack';
|
||||
import VerticalSlider from './Slider.tsx/VerticalSlider';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { InputChannel, Channel } from '../../types/dsp408State';
|
||||
import { DSP } from '../../types/types';
|
||||
import { NotificationType } from '../../types/types';
|
||||
|
||||
function GainPanel({
|
||||
dsp,
|
||||
notify,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const setGain = async (value: number) => {
|
||||
const channel: Channel = {
|
||||
Input: InputChannel.InA,
|
||||
};
|
||||
|
||||
try {
|
||||
const success = await invoke<boolean>('set_channel_gain', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
db: value,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to set input gain', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<VerticalStack title="In A" titleFontSize={18}>
|
||||
<VerticalSlider
|
||||
min={-60}
|
||||
max={12}
|
||||
step={1}
|
||||
switchStepValue={-10}
|
||||
switchStep={0.1}
|
||||
unit=" dB"
|
||||
onChange={setGain}
|
||||
/>
|
||||
|
||||
<button className="btn btn-ghost">Reset</button>
|
||||
|
||||
<button className="btn btn-primary">Apply</button>
|
||||
</VerticalStack>
|
||||
);
|
||||
}
|
||||
|
||||
export default GainPanel;
|
||||
67
src/components/dsp408/GainSection/GainSection.css
Normal file
67
src/components/dsp408/GainSection/GainSection.css
Normal file
@ -0,0 +1,67 @@
|
||||
:root {
|
||||
--gain-section-height: 40vh; /* your fixed % of screen height */
|
||||
}
|
||||
|
||||
.gain-section {
|
||||
position: fixed;
|
||||
left: var(--sidebar-width-collapsed);
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
height: var(--gain-section-height);
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 0 var(--space-4);
|
||||
|
||||
background: var(--bg-void);
|
||||
|
||||
transition: left var(--dur-base) var(--ease-standard);
|
||||
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
/* keep it clear of the sidebar when expanded, without lifting React state */
|
||||
.app-root:has(.sidebar-rail--expanded) .gain-section {
|
||||
left: var(--sidebar-width-expanded);
|
||||
}
|
||||
.gain-panels {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: safe center;
|
||||
gap: var(--space-4);
|
||||
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border-hairline) transparent;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.gain-panels > * {
|
||||
height: 100%;
|
||||
aspect-ratio: 90 / 340; /* your panel's design ratio (title+slider+buttons) — tune */
|
||||
flex: 0 0 auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.gain-panels::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
.gain-panels::-webkit-scrollbar-thumb {
|
||||
background: var(--border-hairline);
|
||||
border-radius: var(--radius-pill);
|
||||
}
|
||||
.gain-panels::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
155
src/components/dsp408/GainSection/GainSection.tsx
Normal file
155
src/components/dsp408/GainSection/GainSection.tsx
Normal file
@ -0,0 +1,155 @@
|
||||
import VerticalStack from '../../VerticalStack/VerticalStack';
|
||||
import VerticalSlider from '../../Slider/VerticalSlider';
|
||||
import { invoke } from '@tauri-apps/api/core';
|
||||
import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
|
||||
import { DSP } from '../../../types/types';
|
||||
import { NotificationType } from '../../../types/types';
|
||||
import { useState } from 'react';
|
||||
import Button from '../../Button/Button';
|
||||
import './GainSection.css';
|
||||
|
||||
function GainPanel({
|
||||
dsp,
|
||||
notify,
|
||||
channel,
|
||||
title,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
channel: Channel;
|
||||
title: string;
|
||||
}) {
|
||||
const setGain = async (value: number) => {
|
||||
try {
|
||||
const success = await invoke<boolean>('set_channel_gain', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
db: value,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A gain set to ${value} dB`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to set input gain', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Gain update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
const setMute = async (muted: boolean) => {
|
||||
try {
|
||||
const success = await invoke<boolean>('set_mute', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
muted,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A ${muted ? 'muted' : 'unmuted'}`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to change mute state', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Mute update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
const setInverse = async (inverted: boolean) => {
|
||||
try {
|
||||
const success = await invoke<boolean>('set_channel_inverse_gain', {
|
||||
id: dsp.id,
|
||||
channel,
|
||||
inverted,
|
||||
});
|
||||
|
||||
if (success) {
|
||||
notify(`Input A phase ${inverted ? 'inverted' : 'normal'}`, 'success', dsp.name);
|
||||
} else {
|
||||
notify('Failed to change phase', 'error', dsp.name);
|
||||
}
|
||||
} catch (err) {
|
||||
notify(`Phase update failed: ${String(err)}`, 'error', dsp.name);
|
||||
}
|
||||
};
|
||||
|
||||
const [muted, setMuted] = useState(false);
|
||||
const [inverted, setInverted] = useState(false);
|
||||
|
||||
const toggleMute = async () => {
|
||||
const next = !muted;
|
||||
setMuted(next);
|
||||
await setMute(next);
|
||||
};
|
||||
|
||||
const toggleInverse = async () => {
|
||||
const next = !inverted;
|
||||
setInverted(next);
|
||||
await setInverse(next);
|
||||
};
|
||||
|
||||
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>
|
||||
|
||||
<Button
|
||||
variant="toggle"
|
||||
className={inverted ? "active-warning" : ""}
|
||||
onClick={toggleInverse}
|
||||
>
|
||||
{inverted ? "Inverted" : "Invert"}
|
||||
</Button> */}
|
||||
</VerticalStack>
|
||||
);
|
||||
}
|
||||
|
||||
function GainSection({
|
||||
dsp,
|
||||
notify,
|
||||
}: {
|
||||
dsp: DSP;
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const channels: { channel: Channel; title: string }[] = [
|
||||
{ channel: { Input: InputChannel.InA }, title: 'In A' },
|
||||
{ channel: { Input: InputChannel.InB }, title: 'In B' },
|
||||
{ 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" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="gain-section">
|
||||
<div className="gain-panels">
|
||||
{channels.map(({ channel, title }) => (
|
||||
<GainPanel key={title} dsp={dsp} notify={notify} channel={channel} title={title} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GainSection;
|
||||
@ -1,164 +0,0 @@
|
||||
.gauge-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
width: 4.375rem;
|
||||
|
||||
padding-top: var(--space-3);
|
||||
margin: var(--space-3);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
.gauge-track {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
width: 100%;
|
||||
height: 13.125rem;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
|
||||
width: 34.3%;
|
||||
height: 100%;
|
||||
|
||||
cursor: pointer;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.track {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
top: 0;
|
||||
|
||||
transform: translateX(-50%);
|
||||
|
||||
width: 2.86cqw;
|
||||
height: 100%;
|
||||
|
||||
background: var(--border-hairline);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.thumb {
|
||||
position: absolute;
|
||||
|
||||
left: 50%;
|
||||
|
||||
width: 75%;
|
||||
aspect-ratio: 1;
|
||||
|
||||
transform: translate(-50%, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--bg-panel);
|
||||
|
||||
border: var(--border-width-active) solid var(--accent-brand);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
transition:
|
||||
transform var(--transition-fast) var(--ease-standard),
|
||||
box-shadow var(--transition-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.ticks {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ticks span {
|
||||
width: 14.3cqw;
|
||||
height: 2.86cqw;
|
||||
|
||||
background: var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 11.4%;
|
||||
}
|
||||
|
||||
.right {
|
||||
right: 11.4%;
|
||||
}
|
||||
|
||||
.value {
|
||||
margin-top: var(--space-2);
|
||||
|
||||
width: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
padding: var(--space-2);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
color: var(--accent-brand);
|
||||
|
||||
font-size: var(--value-font-size, 16px);
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
gap: 0.25em;
|
||||
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
.value input,
|
||||
.value-unit {
|
||||
font-size: inherit;
|
||||
line-height: 1;
|
||||
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.value input {
|
||||
height: 1.4em;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
text-align: center;
|
||||
|
||||
flex: 0 1 auto;
|
||||
|
||||
background: transparent;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-sm);
|
||||
|
||||
appearance: none;
|
||||
}
|
||||
@ -1,264 +0,0 @@
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
import './VerticalSlider.css';
|
||||
|
||||
type VerticalSliderProps = {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
|
||||
switchStepValue?: number;
|
||||
switchStep?: number;
|
||||
|
||||
value?: number;
|
||||
onChange?: (value: number) => void;
|
||||
|
||||
unit?: string;
|
||||
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
|
||||
function getDecimals(n: number) {
|
||||
const s = n.toString();
|
||||
const i = s.indexOf('.');
|
||||
return i === -1 ? 0 : s.length - i - 1;
|
||||
}
|
||||
|
||||
// Measures whatever box the consumer actually rendered — no more
|
||||
// assuming the gauge is always 70px wide.
|
||||
function useElementSize<T extends HTMLElement>() {
|
||||
const ref = useRef<T>(null);
|
||||
const [size, setSize] = useState({ width: 0, height: 0 });
|
||||
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
const { width, height } = entries[0].contentRect;
|
||||
setSize({ width, height });
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
|
||||
const rect = el.getBoundingClientRect();
|
||||
setSize({ width: rect.width, height: rect.height });
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
|
||||
return [ref, size] as const;
|
||||
}
|
||||
|
||||
export default function VerticalSlider({
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
switchStepValue,
|
||||
switchStep,
|
||||
value: controlledValue,
|
||||
onChange,
|
||||
unit = '',
|
||||
className,
|
||||
style,
|
||||
}: VerticalSliderProps) {
|
||||
const [internalValue, setInternalValue] = useState(min);
|
||||
const value = controlledValue ?? internalValue;
|
||||
|
||||
const [editingText, setEditingText] = useState<string | null>(null);
|
||||
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [containerRef, containerSize] = useElementSize<HTMLDivElement>();
|
||||
const sliderRef = useRef<HTMLDivElement>(null);
|
||||
const isDragging = useRef(false);
|
||||
const lastValue = useRef(value);
|
||||
const keyboardValue = useRef<number | null>(null);
|
||||
|
||||
const currentStep =
|
||||
switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue
|
||||
? switchStep
|
||||
: step;
|
||||
|
||||
const decimals = useMemo(
|
||||
() => Math.max(getDecimals(step), switchStep !== undefined ? getDecimals(switchStep) : 0),
|
||||
[step, switchStep]
|
||||
);
|
||||
|
||||
const charWidth = useMemo(
|
||||
() => Math.max(min.toFixed(decimals).length, max.toFixed(decimals).length) + 1,
|
||||
[min, max, decimals]
|
||||
);
|
||||
|
||||
// Same formula as before, just driven by a real measurement
|
||||
// instead of a hardcoded container width.
|
||||
const fontSize = useMemo(() => {
|
||||
if (!containerSize.width) return 18;
|
||||
|
||||
const chars = charWidth + unit.length + 1;
|
||||
|
||||
const available = containerSize.width * 0.9;
|
||||
|
||||
return Math.max(12, Math.min(22, available / chars));
|
||||
}, [containerSize.width, charWidth, unit.length]);
|
||||
|
||||
function normalizeValue(input: number) {
|
||||
const clamped = Math.min(max, Math.max(min, input));
|
||||
const snapped = Math.round(clamped / currentStep) * currentStep;
|
||||
return Number(snapped.toFixed(6));
|
||||
}
|
||||
|
||||
function updateValue(v: number) {
|
||||
const next = normalizeValue(v);
|
||||
|
||||
if (controlledValue === undefined) {
|
||||
setInternalValue(next);
|
||||
}
|
||||
|
||||
lastValue.current = next;
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (
|
||||
e.key !== 'ArrowUp' &&
|
||||
e.key !== 'ArrowDown' &&
|
||||
e.key !== 'ArrowLeft' &&
|
||||
e.key !== 'ArrowRight'
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
let next = value;
|
||||
|
||||
if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
|
||||
next += currentStep;
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
|
||||
next -= currentStep;
|
||||
}
|
||||
|
||||
updateValue(next);
|
||||
|
||||
keyboardValue.current = normalizeValue(next);
|
||||
}
|
||||
|
||||
function handleKeyUp(_e: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (keyboardValue.current !== null) {
|
||||
onChange?.(keyboardValue.current);
|
||||
keyboardValue.current = null;
|
||||
}
|
||||
}
|
||||
|
||||
function valueFromPointer(clientY: number) {
|
||||
if (!sliderRef.current) return;
|
||||
|
||||
const rect = sliderRef.current.getBoundingClientRect();
|
||||
const trackHeight = rect.height; // measured, not a constant
|
||||
|
||||
let offset = clientY - rect.top;
|
||||
offset = Math.max(0, Math.min(trackHeight, offset));
|
||||
|
||||
const percent = 1 - offset / trackHeight;
|
||||
const raw = min + percent * (max - min);
|
||||
|
||||
updateValue(raw);
|
||||
}
|
||||
|
||||
function startDrag(e: React.PointerEvent<HTMLDivElement>) {
|
||||
isDragging.current = true;
|
||||
|
||||
valueFromPointer(e.clientY);
|
||||
|
||||
const move = (ev: PointerEvent) => {
|
||||
valueFromPointer(ev.clientY);
|
||||
};
|
||||
|
||||
const up = () => {
|
||||
isDragging.current = false;
|
||||
|
||||
onChange?.(lastValue.current);
|
||||
|
||||
window.removeEventListener('pointermove', move);
|
||||
window.removeEventListener('pointerup', up);
|
||||
};
|
||||
|
||||
window.addEventListener('pointermove', move);
|
||||
window.addEventListener('pointerup', up);
|
||||
}
|
||||
|
||||
function commitEditing() {
|
||||
if (editingText !== null && editingText !== '' && editingText !== '-') {
|
||||
const parsed = Number(editingText);
|
||||
if (!Number.isNaN(parsed)) updateValue(parsed);
|
||||
}
|
||||
setEditingText(null);
|
||||
}
|
||||
|
||||
const percent = (value - min) / (max - min);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={['gauge-container', className].filter(Boolean).join(' ')}
|
||||
style={style}
|
||||
ref={containerRef}
|
||||
>
|
||||
<div className="gauge-track">
|
||||
<div className="ticks left">
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<span key={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="slider"
|
||||
ref={sliderRef}
|
||||
tabIndex={0}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onPointerDown={startDrag}
|
||||
>
|
||||
<div className="track" />
|
||||
<div className="thumb" style={{ bottom: `${percent * 100}%` }} />
|
||||
</div>
|
||||
|
||||
<div className="ticks right">
|
||||
{Array.from({ length: 15 }).map((_, i) => (
|
||||
<span key={i} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="value"
|
||||
style={{ '--value-font-size': `${fontSize}px` } as React.CSSProperties}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
inputMode="decimal"
|
||||
value={editingText ?? value.toFixed(decimals)}
|
||||
style={{
|
||||
width: `${charWidth}ch`,
|
||||
}}
|
||||
onFocus={() => setEditingText(value.toFixed(decimals))}
|
||||
onChange={(e) => setEditingText(e.target.value)}
|
||||
onBlur={commitEditing}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
setEditingText(null);
|
||||
inputRef.current?.blur();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span className="value-unit">{unit}</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,91 +0,0 @@
|
||||
.vertical-stack {
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border: 1px solid var(--border-hairline);
|
||||
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* header */
|
||||
|
||||
.vertical-stack__title {
|
||||
|
||||
flex: 0 0 auto;
|
||||
|
||||
padding: var(--space-2);
|
||||
|
||||
text-align: center;
|
||||
|
||||
font-family: var(--font-ui);
|
||||
|
||||
font-weight: 600;
|
||||
|
||||
color: var(--text-primary);
|
||||
|
||||
border-bottom: 1px solid var(--border-hairline);
|
||||
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* area containing components */
|
||||
|
||||
.vertical-stack__content {
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* each component slot */
|
||||
|
||||
.vertical-stack__item {
|
||||
|
||||
flex: 1;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
The child keeps its natural dimensions.
|
||||
Only horizontal scaling happens.
|
||||
*/
|
||||
|
||||
.vertical-stack__scale {
|
||||
|
||||
display: flex;
|
||||
|
||||
justify-content: center;
|
||||
|
||||
align-items: center;
|
||||
|
||||
transform-origin: center;
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
import React, { useLayoutEffect, useRef, useState } from 'react';
|
||||
|
||||
import './VerticalStack.css';
|
||||
|
||||
type VerticalStackProps = {
|
||||
title: string;
|
||||
titleFontSize?: number;
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function VerticalStack({ title, titleFontSize = 16, children }: VerticalStackProps) {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const itemRefs = useRef<HTMLDivElement[]>([]);
|
||||
|
||||
const [scales, setScales] = useState<number[]>([]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
function updateScale() {
|
||||
if (!containerRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const availableWidth = containerRef.current.clientWidth;
|
||||
|
||||
const newScales = itemRefs.current.map((item) => {
|
||||
const child = item.firstElementChild as HTMLElement;
|
||||
|
||||
if (!child) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
const width = child.scrollWidth;
|
||||
|
||||
return Math.min(1, availableWidth / width);
|
||||
});
|
||||
|
||||
setScales(newScales);
|
||||
}
|
||||
|
||||
updateScale();
|
||||
|
||||
const observer = new ResizeObserver(updateScale);
|
||||
|
||||
if (containerRef.current) {
|
||||
observer.observe(containerRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [children]);
|
||||
|
||||
return (
|
||||
<div className="vertical-stack" ref={containerRef}>
|
||||
<div
|
||||
className="vertical-stack__title"
|
||||
style={{
|
||||
fontSize: titleFontSize,
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
<div className="vertical-stack__content">
|
||||
{React.Children.map(children, (child, index) => (
|
||||
<div
|
||||
className="vertical-stack__item"
|
||||
ref={(el) => {
|
||||
if (el) {
|
||||
itemRefs.current[index] = el;
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="vertical-stack__scale"
|
||||
style={{
|
||||
transform: `scaleX(${scales[index] ?? 1})`,
|
||||
}}
|
||||
>
|
||||
{child}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -35,9 +35,7 @@ export function useNotifications() {
|
||||
);
|
||||
|
||||
const removeNotification = useCallback((id: number) => {
|
||||
setNotifications((prev) =>
|
||||
prev.map((n) => (n.id === id ? { ...n, removing: true } : n))
|
||||
);
|
||||
setNotifications((prev) => prev.map((n) => (n.id === id ? { ...n, removing: true } : n)));
|
||||
|
||||
setTimeout(() => {
|
||||
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './components/app/App';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<React.StrictMode>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { DSP, DSP_TYPES } from '../../types/types';
|
||||
import { DSP, DSP_TYPES } from '../types/types';
|
||||
import Button from '../components/Button/Button';
|
||||
|
||||
function AddDSPForm({
|
||||
onCancel,
|
||||
@ -107,12 +108,13 @@ function AddDSPForm({
|
||||
</div>
|
||||
|
||||
<div className="form-actions">
|
||||
<button className="btn btn-ghost" onClick={onCancel}>
|
||||
<Button variant="ghost" onClick={onCancel}>
|
||||
Cancel
|
||||
</button>
|
||||
<button className="btn btn-primary" onClick={submit} disabled={!canSubmit}>
|
||||
</Button>
|
||||
|
||||
<Button variant="primary" onClick={submit} disabled={!canSubmit}>
|
||||
Add DSP
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1,10 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import { DSP } from '../../types/types';
|
||||
import Sidebar from './Sidebar/Sidebar';
|
||||
import { InfoIcon, SlidersIcon } from '../../assets/icons/AudioIcons';
|
||||
import ConnectionPanel from './ConnectionPanel';
|
||||
import GainPanel from './GainPanel';
|
||||
import { NotificationType } from '../../types/types';
|
||||
import { DSP } from '../types/types';
|
||||
import Sidebar from '../components/Sidebar/Sidebar';
|
||||
import { InfoIcon, SlidersIcon } from '../assets/icons/AudioIcons';
|
||||
import ConnectionPanel from '../components/dsp408/ConnectionPanel';
|
||||
import GainSection from '../components/dsp408/GainSection/GainSection';
|
||||
import { NotificationType } from '../types/types';
|
||||
|
||||
function DSPPage({
|
||||
dsp,
|
||||
@ -18,6 +18,7 @@ function DSPPage({
|
||||
notify: (message: string, type?: NotificationType, dspName?: string) => void;
|
||||
}) {
|
||||
const [activeSidebar, setActiveSidebar] = useState('overview');
|
||||
const [sidebarExpanded, setSidebarExpanded] = useState(false);
|
||||
|
||||
const sidebarItems = [
|
||||
{
|
||||
@ -38,7 +39,7 @@ function DSPPage({
|
||||
return <ConnectionPanel dsp={dsp} onConnect={onConnect} onDisconnect={onDisconnect} />;
|
||||
|
||||
case 'gain':
|
||||
return <GainPanel dsp={dsp} notify={notify} />;
|
||||
return <GainSection dsp={dsp} notify={notify} />;
|
||||
|
||||
default:
|
||||
return null;
|
||||
@ -46,12 +47,18 @@ function DSPPage({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="dsp-layout">
|
||||
<div
|
||||
className={`dsp-layout app-root ${
|
||||
sidebarExpanded ? 'app-root--sidebar-expanded' : ''
|
||||
}`}
|
||||
>
|
||||
<Sidebar
|
||||
items={sidebarItems}
|
||||
activeId={activeSidebar}
|
||||
onSelect={setActiveSidebar}
|
||||
appName={dsp.name}
|
||||
expanded={sidebarExpanded}
|
||||
onToggle={() => setSidebarExpanded((v) => !v)}
|
||||
/>
|
||||
|
||||
<div className="dsp-content">{renderTab()}</div>
|
||||
@ -1,3 +1,5 @@
|
||||
import Button from '../components/Button/Button';
|
||||
|
||||
function HomePage({
|
||||
dspCount,
|
||||
connectedCount,
|
||||
@ -26,9 +28,9 @@ function HomePage({
|
||||
</dl>
|
||||
|
||||
<div className="panel-actions">
|
||||
<button className="btn btn-primary" onClick={onAddDSP}>
|
||||
<Button variant="primary" onClick={onAddDSP}>
|
||||
Add a DSP
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1,4 +1,4 @@
|
||||
@import "./variables.css";
|
||||
@import './variables.css';
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@ -8,7 +8,7 @@
|
||||
input,
|
||||
select,
|
||||
textarea,
|
||||
[contenteditable="true"] {
|
||||
[contenteditable='true'] {
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
@ -135,7 +135,8 @@ button:focus-visible,
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background var(--dur-base) var(--ease-standard),
|
||||
transition:
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
border-color var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard);
|
||||
width: 160px;
|
||||
@ -189,7 +190,8 @@ button:focus-visible,
|
||||
line-height: 1;
|
||||
color: var(--text-muted);
|
||||
border-radius: 4px;
|
||||
transition: background var(--dur-fast) var(--ease-standard),
|
||||
transition:
|
||||
background var(--dur-fast) var(--ease-standard),
|
||||
color var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
@ -212,7 +214,8 @@ button:focus-visible,
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background var(--dur-base) var(--ease-standard),
|
||||
transition:
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
@ -251,7 +254,8 @@ button:focus-visible,
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: background var(--dur-base) var(--ease-standard),
|
||||
transition:
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
border-color var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
@ -302,8 +306,13 @@ button:focus-visible,
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Stage / main area ---------- */
|
||||
@ -383,9 +392,15 @@ button:focus-visible,
|
||||
transition: color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
.status-label--connected { color: var(--accent-live); }
|
||||
.status-label--connecting { color: var(--accent-connecting); }
|
||||
.status-label--disconnected { color: var(--text-muted); }
|
||||
.status-label--connected {
|
||||
color: var(--accent-live);
|
||||
}
|
||||
.status-label--connecting {
|
||||
color: var(--accent-connecting);
|
||||
}
|
||||
.status-label--disconnected {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.specs {
|
||||
display: flex;
|
||||
@ -487,163 +502,6 @@ button:focus-visible,
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
|
||||
.btn {
|
||||
height: 36px;
|
||||
padding: 0 var(--space-4);
|
||||
border-radius: var(--radius-sm);
|
||||
font-family: var(--font-ui);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
transition: background var(--dur-base) var(--ease-standard),
|
||||
border-color var(--dur-base) var(--ease-standard),
|
||||
opacity var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--accent-brand);
|
||||
color: #0d0f12;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #6f9bf2;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border-color: var(--accent-down);
|
||||
color: var(--accent-down);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: rgba(255, 92, 92, 0.1);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
border-color: var(--border-hairline);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ---------- Notifications ---------- */
|
||||
|
||||
.notifications {
|
||||
position: fixed;
|
||||
right: var(--space-5);
|
||||
bottom: var(--space-5);
|
||||
z-index: 9999;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
|
||||
width: 320px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notification {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
|
||||
padding: 10px var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
|
||||
font-size: 14px;
|
||||
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
animation: notification-in var(--dur-slow) var(--ease-out) forwards;
|
||||
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.notification-out {
|
||||
animation: notification-out var(--dur-slow) var(--ease-in) forwards;
|
||||
}
|
||||
|
||||
.notification-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
line-height: 1;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
transition: background var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.notification-close:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
background: #b42318;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
background: #15803d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification.warning {
|
||||
background: #ca8a04;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes notification-in {
|
||||
from {
|
||||
transform: translateX(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes notification-out {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- DSP detail: side rail + content ---------- */
|
||||
|
||||
.dsp-detail {
|
||||
@ -679,7 +537,8 @@ button:focus-visible,
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background var(--dur-base) var(--ease-standard),
|
||||
transition:
|
||||
background var(--dur-base) var(--ease-standard),
|
||||
color var(--dur-base) var(--ease-standard),
|
||||
border-color var(--dur-base) var(--ease-standard);
|
||||
}
|
||||
@ -708,12 +567,6 @@ button:focus-visible,
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* ---------- Add to your :root ---------- */
|
||||
:root {
|
||||
--header-height: 48px; /* matches .topbar's existing height */
|
||||
--sidebar-width: 48px; /* matches the old icon rail's w-12 */
|
||||
}
|
||||
|
||||
/* ---------- Layout wrapper below the topbar ---------- */
|
||||
/* .app is already: display:flex; flex-direction:column; height:100vh;
|
||||
this row just needs to fill the remaining space */
|
||||
@ -722,4 +575,3 @@ button:focus-visible,
|
||||
display: flex;
|
||||
min-height: 0; /* lets .stage's own overflow-y:auto do the scrolling */
|
||||
}
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
|
||||
:root {
|
||||
--header-height: 48px; /* matches .topbar's existing height */
|
||||
@ -18,8 +18,8 @@
|
||||
--accent-connecting: #f5a623;
|
||||
|
||||
/* ---------- Type ---------- */
|
||||
--font-ui: "Inter", -apple-system, "Segoe UI", sans-serif;
|
||||
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
|
||||
--font-ui: 'Inter', -apple-system, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
||||
|
||||
/* ---------- Motion ---------- */
|
||||
--dur-fast: 100ms;
|
||||
@ -61,4 +61,4 @@
|
||||
--sidebar-item-padding: 8px;
|
||||
|
||||
--sidebar-toggle-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user