feat(web): сворачивание блока «Кривая» в инструменте «Свет»
Заголовок «Кривая» стал кнопкой со стрелкой: график с гистограммой и точками сворачивается и разворачивается, кнопки выбора канала остаются видны всегда, чтобы канал можно было переключить и в свёрнутом виде.
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user