glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(TypographyMenu): rewrite from hidden class to if based rendering

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-27 18:39:09 +03:00
parent 80feda41a3
commit f0aa89097e
1 changed files with 42 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/features/SetupFont/ui/TypographyMenu.svelte
View File

@@ -10,6 +10,7 @@ import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { ComboControl } from '$shared/ui';
import Settings2Icon from '@lucide/svelte/icons/settings-2';
import { getContext } from 'svelte';
import { cubicOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import {
MULTIPLIER_L,
@@ -47,47 +48,48 @@ $effect(() => {
}
});
</script>
<div
class={cn('w-full md:w-auto', hidden && 'hidden', className)}
in:fly={{ y: 100, duration: 400 }}
>
{#if !hidden}
<div
class={cn(
'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
'bg-[#f3f0e9]/95 dark:bg-[#121212]/95 backdrop-blur-xl',
'border border-black/5 dark:border-white/10',
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
'rounded-none ring-1 ring-black/5 dark:ring-white/5',
responsive?.isMobile && 'overflow-x-auto',
)}
class={cn('w-full md:w-auto', className)}
transition:fly={{ y: 100, duration: 200, easing: cubicOut }}
>
<!-- Header: icon + label -->
<div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-[#1a1a1a] dark:text-[#e5e5e5] shrink-0">
<Settings2Icon
size={responsive?.isMobile ? 12 : 14}
class="text-[#ff3b30]"
/>
<span
class="text-[0.5625rem] md:text-[0.625rem] font-mono uppercase tracking-widest font-bold hidden sm:inline whitespace-nowrap"
>
GLOBAL_CONTROLS
</span>
<div
class={cn(
'flex items-center gap-1 md:gap-2 p-1.5 md:p-2',
'bg-[#f3f0e9]/95 dark:bg-[#121212]/95 backdrop-blur-xl',
'border border-black/5 dark:border-white/10',
'shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)]',
'rounded-none ring-1 ring-black/5 dark:ring-white/5',
responsive?.isMobile && 'overflow-x-auto',
)}
>
<!-- Header: icon + label -->
<div class="px-2 md:px-3 flex items-center gap-1.5 md:gap-2 border-r border-black/5 dark:border-white/10 mr-1 text-[#1a1a1a] dark:text-[#e5e5e5] shrink-0">
<Settings2Icon
size={responsive?.isMobile ? 12 : 14}
class="text-[#ff3b30]"
/>
<span
class="text-[0.5625rem] md:text-[0.625rem] font-mono uppercase tracking-widest font-bold hidden sm:inline whitespace-nowrap"
>
GLOBAL_CONTROLS
</span>
</div>
<!-- Controls with dividers between each -->
{#each controlManager.controls as control, i (control.id)}
{#if i > 0}
<div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
{/if}
<ComboControl
control={control.instance}
label={control.controlLabel}
increaseLabel={control.increaseLabel}
decreaseLabel={control.decreaseLabel}
controlLabel={control.controlLabel}
/>
{/each}
</div>
<!-- Controls with dividers between each -->
{#each controlManager.controls as control, i (control.id)}
{#if i > 0}
<div class="w-px h-6 md:h-8 bg-black/5 dark:bg-white/10 mx-0.5 md:mx-1 shrink-0"></div>
{/if}
<ComboControl
control={control.instance}
label={control.controlLabel}
increaseLabel={control.increaseLabel}
decreaseLabel={control.decreaseLabel}
controlLabel={control.controlLabel}
/>
{/each}
</div>
</div>
{/if}