feat(web): сворачивание блока «Кривая» в инструменте «Свет»

Заголовок «Кривая» стал кнопкой со стрелкой: график с гистограммой и точками
сворачивается и разворачивается, кнопки выбора канала остаются видны всегда,
чтобы канал можно было переключить и в свёрнутом виде.
This commit is contained in:
iu
2026-10-21 20:00:30 +03:00
parent 48ed0bb775
commit 332f35b553
@@ -30,6 +30,7 @@
let busy = $state(false);
let error = $state('');
let collapsed = $state(false);
let curveCollapsed = $state(false);
let channel = $state<CurveChannel>('rgb');
const saved = $derived(readEditParams(photo));
@@ -401,7 +402,19 @@
<div class="border-border border-t pt-3">
<div class="flex items-center justify-between gap-2">
<span class="text-text text-xs font-semibold">Кривая</span>
<button
type="button"
class="text-text hover:text-primary flex items-center gap-1 text-xs font-semibold"
aria-expanded={!curveCollapsed}
aria-controls="light-curve"
onclick={() => (curveCollapsed = !curveCollapsed)}
>
<Icon
name="expand_more"
class="size-4 transition-transform {curveCollapsed ? '-rotate-90' : ''}"
/>
Кривая
</button>
<div class="flex items-center gap-1.5">
{#each CURVE_CHANNELS as ch (ch)}
<button
@@ -420,6 +433,8 @@
</div>
</div>
{#if !curveCollapsed}
<div id="light-curve">
<svg
class="border-border mt-2 block aspect-square w-full touch-none rounded border"
viewBox="0 0 100 100"
@@ -483,6 +498,8 @@
</button>
</div>
</div>
{/if}
</div>
{#if busy}
<p class="text-text-subtle text-xs">Сохраняем на сервере…</p>