rouggy/OpsLog
0
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 74 Wiki Activity

up seafile

Browse Source
This commit is contained in:
rouggy
2026-06-13 10:14:23 +02:00
parent 3cb2e466d8
commit ff53831be4
8 changed files with 230 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/qsl/StylePresetPicker.tsx
+42 -6
View File
@@ -7,7 +7,7 @@ import { Input } from '@/components/ui/input';
import {
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
} from '@/components/ui/select';
import type { QSLPresetInfo, StyleParams } from './qslTypes';
import type { QSLPresetInfo, StyleParams, FxParams } from './qslTypes';
interface Props {
presets: QSLPresetInfo[];
@@ -48,6 +48,13 @@ export function StylePresetPicker({ presets, preset, params, onChange }: Props)
const has = (k: string) => info?.params.includes(k) ?? false;
const set = (patch: Partial<StyleParams>) => onChange(preset, { ...params, ...patch });
// gel_* presets are rendered by the canvas FX, not the SVG stack: show the FX
// knobs instead of the old shine/halo/shadow/outline rows.
const isFx = preset.startsWith('gel_');
const fxWestern = preset.includes('grunge');
const fx: FxParams = params.fx ?? {};
const setFx = (patch: Partial<FxParams>) => set({ fx: { ...fx, ...patch } });
return (
<div className="space-y-2">
<Select
@@ -90,25 +97,25 @@ export function StylePresetPicker({ presets, preset, params, onChange }: Props)
</div>
</div>
)}
{has('outline_color') && (
{!isFx && has('outline_color') && (
<ColorRow label="Outline" value={params.outline_color ?? '#2a3f5c'}
onChange={(v) => set({ outline_color: v })} />
)}
{has('outline_width') && (
{!isFx && has('outline_width') && (
<SliderRow label="Outline width" value={params.outline_width ?? 9} min={0} max={24} step={1}
onChange={(v) => set({ outline_width: v })} />
)}
{has('shine') && (
{!isFx && has('shine') && (
<SliderRow label="Gloss" value={params.shine?.coverage ?? 0.5} min={0.2} max={0.8} step={0.05}
onChange={(v) => set({ shine: { coverage: v, opacity: params.shine?.opacity ?? 0.95 } })} />
)}
{has('halo') && (
{!isFx && has('halo') && (
<SliderRow label="Halo" value={params.halo?.opacity ?? 0.4} min={0} max={1} step={0.05}
onChange={(v) => set({
halo: { color: params.halo?.color ?? '#cdd9e4', blur: params.halo?.blur ?? 6, opacity: v },
})} />
)}
{has('shadow') && (
{!isFx && has('shadow') && (
<SliderRow label="Shadow" value={params.shadow?.opacity ?? 0.5} min={0} max={1} step={0.05}
onChange={(v) => set({
shadow: {
@@ -117,6 +124,35 @@ export function StylePresetPicker({ presets, preset, params, onChange }: Props)
},
})} />
)}
{isFx && !fxWestern && (
<>
<SliderRow label="Plump" value={fx.plump ?? 0.03} min={0} max={0.06} step={0.005}
onChange={(v) => setFx({ plump: v })} />
<SliderRow label="Gloss" value={fx.gloss ?? 0.85} min={0} max={1} step={0.05}
onChange={(v) => setFx({ gloss: v })} />
<SliderRow label="Gloss height" value={fx.gloss_h ?? 0.45} min={0.2} max={0.8} step={0.05}
onChange={(v) => setFx({ gloss_h: v })} />
<SliderRow label="Inner shadow" value={fx.inner_b ?? 0.7} min={0} max={1} step={0.05}
onChange={(v) => setFx({ inner_b: v })} />
<SliderRow label="Dark edge" value={fx.edge ?? 0.5} min={0} max={1} step={0.05}
onChange={(v) => setFx({ edge: v })} />
<SliderRow label="Silver rim" value={fx.outerw ?? 0.45} min={0} max={1} step={0.05}
onChange={(v) => setFx({ outerw: v })} />
</>
)}
{isFx && fxWestern && (
<>
<SliderRow label="3D depth" value={fx.depth ?? 12} min={0} max={40} step={1}
onChange={(v) => setFx({ depth: v })} />
<SliderRow label="Slant" value={fx.slant ?? 0.08} min={-0.4} max={0.4} step={0.02}
onChange={(v) => setFx({ slant: v })} />
<SliderRow label="Grunge" value={fx.grunge ?? 0.8} min={0} max={1} step={0.05}
onChange={(v) => setFx({ grunge: v })} />
<SliderRow label="Top light" value={fx.bevel ?? 0.45} min={0} max={1} step={0.05}
onChange={(v) => setFx({ bevel: v })} />
</>
)}
</div>
);
}