feat(web): сворачивание блока «Кривая» в инструменте «Свет»
Заголовок «Кривая» стал кнопкой со стрелкой: график с гистограммой и точками сворачивается и разворачивается, кнопки выбора канала остаются видны всегда, чтобы канал можно было переключить и в свёрнутом виде.
This commit is contained in:
@@ -30,6 +30,7 @@
|
|||||||
let busy = $state(false);
|
let busy = $state(false);
|
||||||
let error = $state('');
|
let error = $state('');
|
||||||
let collapsed = $state(false);
|
let collapsed = $state(false);
|
||||||
|
let curveCollapsed = $state(false);
|
||||||
let channel = $state<CurveChannel>('rgb');
|
let channel = $state<CurveChannel>('rgb');
|
||||||
|
|
||||||
const saved = $derived(readEditParams(photo));
|
const saved = $derived(readEditParams(photo));
|
||||||
@@ -401,7 +402,19 @@
|
|||||||
|
|
||||||
<div class="border-border border-t pt-3">
|
<div class="border-border border-t pt-3">
|
||||||
<div class="flex items-center justify-between gap-2">
|
<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">
|
<div class="flex items-center gap-1.5">
|
||||||
{#each CURVE_CHANNELS as ch (ch)}
|
{#each CURVE_CHANNELS as ch (ch)}
|
||||||
<button
|
<button
|
||||||
@@ -420,6 +433,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{#if !curveCollapsed}
|
||||||
|
<div id="light-curve">
|
||||||
<svg
|
<svg
|
||||||
class="border-border mt-2 block aspect-square w-full touch-none rounded border"
|
class="border-border mt-2 block aspect-square w-full touch-none rounded border"
|
||||||
viewBox="0 0 100 100"
|
viewBox="0 0 100 100"
|
||||||
@@ -483,6 +498,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
{#if busy}
|
{#if busy}
|
||||||
<p class="text-text-subtle text-xs">Сохраняем на сервере…</p>
|
<p class="text-text-subtle text-xs">Сохраняем на сервере…</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user