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

feat(FontComparer): add apperance animation for ComparisonSlider

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-22 15:37:49 +03:00
parent 272c2c2d22
commit ac979c816c
1 changed files with 9 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/features/DisplayFont/ui/FontComparer/FontComparer.svelte
View File

@@ -1,8 +1,9 @@
<script lang="ts"> <script lang="ts">
import { appliedFontsManager } from '$entities/Font'; import { appliedFontsManager } from '$entities/Font';
import { controlManager } from '$features/SetupFont'; import { controlManager } from '$features/SetupFont';
import { Input } from '$shared/shadcn/ui/input';
import { ComparisonSlider } from '$widgets/ComparisonSlider/ui'; import { ComparisonSlider } from '$widgets/ComparisonSlider/ui';
import { cubicOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { displayedFontsStore } from '../../model'; import { displayedFontsStore } from '../../model';
import PairSelector from '../PairSelector/PairSelector.svelte'; import PairSelector from '../PairSelector/PairSelector.svelte';
@@ -20,16 +21,17 @@ $effect(() => {
{#if hasAnyPairs} {#if hasAnyPairs}
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div class="flex flex-row gap-4"> <div class="flex flex-row gap-4">
<Input bind:value={displayedText} />
<PairSelector /> <PairSelector />
</div> </div>
{#if fontA && fontB} {#if fontA && fontB}
<ComparisonSlider <div in:fly={{ y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }}>
fontA={fontA} <ComparisonSlider
fontB={fontB} fontA={fontA}
bind:text={displayedText} fontB={fontB}
/> bind:text={displayedText}
/>
</div>
{/if} {/if}
</div> </div>
{/if} {/if}