Compare commits
2 Commits
c01fc79a3e
...
f41c4aab9c
| Author | SHA1 | Date | |
|---|---|---|---|
 Ilia Mashkov
|
f41c4aab9c | ||
|
Ilia Mashkov
|
d1eb83fa90 |
@@ -72,74 +72,76 @@ $effect(() => {
|
||||
|
||||
{#if !hidden}
|
||||
{#if responsive.isMobileOrTablet}
|
||||
<Popover.Root bind:open>
|
||||
<Popover.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button class={className} variant="primary" {...props}>
|
||||
{#snippet icon()}
|
||||
<Settings2Icon class="size-4" />
|
||||
{/snippet}
|
||||
</Button>
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
side="top"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
class={cn(
|
||||
'z-50 w-72',
|
||||
'bg-surface dark:bg-dark-card',
|
||||
'border border-subtle',
|
||||
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
|
||||
'rounded-none p-4',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
'data-[side=top]:slide-in-from-bottom-2',
|
||||
'data-[side=bottom]:slide-in-from-top-2',
|
||||
)}
|
||||
interactOutsideBehavior="close"
|
||||
escapeKeydownBehavior="close"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Settings2Icon size={12} class="text-swiss-red" />
|
||||
<span
|
||||
class="text-3xs font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
|
||||
>
|
||||
CONTROLS
|
||||
</span>
|
||||
</div>
|
||||
<Popover.Close>
|
||||
{#snippet child({ props })}
|
||||
<button
|
||||
{...props}
|
||||
class="inline-flex items-center justify-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
|
||||
aria-label="Close controls"
|
||||
>
|
||||
<XIcon class="size-3.5 text-neutral-500" />
|
||||
</button>
|
||||
<div class={className}>
|
||||
<Popover.Root bind:open>
|
||||
<Popover.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button variant="primary" {...props}>
|
||||
{#snippet icon()}
|
||||
<Settings2Icon class="size-4" />
|
||||
{/snippet}
|
||||
</Popover.Close>
|
||||
</div>
|
||||
</Button>
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
|
||||
<!-- Controls -->
|
||||
{#each typographySettingsStore.controls as control (control.id)}
|
||||
<ControlGroup label={control.controlLabel ?? ''}>
|
||||
<Slider
|
||||
bind:value={control.instance.value}
|
||||
min={control.instance.min}
|
||||
max={control.instance.max}
|
||||
step={control.instance.step}
|
||||
/>
|
||||
</ControlGroup>
|
||||
{/each}
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
side="top"
|
||||
align="end"
|
||||
sideOffset={8}
|
||||
class={cn(
|
||||
'z-50 w-72',
|
||||
'bg-surface dark:bg-dark-card',
|
||||
'border border-subtle',
|
||||
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.15)]',
|
||||
'rounded-none p-4',
|
||||
'data-[state=open]:animate-in data-[state=closed]:animate-out',
|
||||
'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
|
||||
'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
'data-[side=top]:slide-in-from-bottom-2',
|
||||
'data-[side=bottom]:slide-in-from-top-2',
|
||||
)}
|
||||
interactOutsideBehavior="close"
|
||||
escapeKeydownBehavior="close"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between mb-3 pb-3 border-b border-subtle">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Settings2Icon size={12} class="text-swiss-red" />
|
||||
<span
|
||||
class="text-3xs font-mono uppercase tracking-widest font-bold text-swiss-black dark:text-neutral-200"
|
||||
>
|
||||
CONTROLS
|
||||
</span>
|
||||
</div>
|
||||
<Popover.Close>
|
||||
{#snippet child({ props })}
|
||||
<button
|
||||
{...props}
|
||||
class="inline-flex items-center justify-center size-6 rounded-none hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
|
||||
aria-label="Close controls"
|
||||
>
|
||||
<XIcon class="size-3.5 text-neutral-500" />
|
||||
</button>
|
||||
{/snippet}
|
||||
</Popover.Close>
|
||||
</div>
|
||||
|
||||
<!-- Controls -->
|
||||
{#each typographySettingsStore.controls as control (control.id)}
|
||||
<ControlGroup label={control.controlLabel ?? ''}>
|
||||
<Slider
|
||||
bind:value={control.instance.value}
|
||||
min={control.instance.min}
|
||||
max={control.instance.max}
|
||||
step={control.instance.step}
|
||||
/>
|
||||
</ControlGroup>
|
||||
{/each}
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</Popover.Root>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class={cn('w-full md:w-auto', className)}
|
||||
|
||||
@@ -4,8 +4,18 @@
|
||||
Updates the global filterManager query to filter the font list.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { filterManager } from '$features/GetFonts';
|
||||
import { fontStore } from '$entities/Font';
|
||||
import {
|
||||
filterManager,
|
||||
mapManagerToParams,
|
||||
} from '$features/GetFonts';
|
||||
import { SearchBar } from '$shared/ui';
|
||||
import { untrack } from 'svelte';
|
||||
|
||||
$effect(() => {
|
||||
const params = mapManagerToParams(filterManager);
|
||||
untrack(() => fontStore.setParams(params));
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="p-6 border-b border-black/5">
|
||||
|
||||
Reference in New Issue
Block a user