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

feature/comparison-slider #19

Merged
ilia merged 129 commits from feature/comparison-slider into main 2026-02-02 09:23:46 +00:00
Conversation 0 Commits 129 Files Changed 106 -103
4 changed files with 0 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 2eddb656a9 - Show all commits

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

@@ -1,37 +0,0 @@
<script lang="ts">
import { appliedFontsManager } from '$entities/Font';
import { controlManager } from '$features/SetupFont';
import { ComparisonSlider } from '$widgets/ComparisonSlider/ui';
import { cubicOut } from 'svelte/easing';
import { fly } from 'svelte/transition';
import { displayedFontsStore } from '../../model';
import PairSelector from '../PairSelector/PairSelector.svelte';
let displayedText = $state('The quick brown fox jumps over the lazy dog...');
const [fontA, fontB] = $derived(displayedFontsStore.selectedPair);
const hasAnyPairs = $derived(displayedFontsStore.fonts.length > 0);
$effect(() => {
appliedFontsManager.touch(
displayedFontsStore.fonts.map(font => ({ slug: font.id, weight: controlManager.weight })),
);
});
</script>
{#if hasAnyPairs}
<div class="flex flex-col gap-4">
<div class="flex flex-row gap-4">
<PairSelector />
</div>
{#if fontA && fontB}
<div in:fly={{ y: 0, x: -50, duration: 300, easing: cubicOut, opacity: 0.2 }}>
<ComparisonSlider
fontA={fontA}
fontB={fontB}
bind:text={displayedText}
/>
</div>
{/if}
</div>
{/if}

3
src/features/DisplayFont/ui/FontDisplay/FontDisplay.svelte
View File

@@ -4,12 +4,9 @@
--> -->
<script lang="ts"> <script lang="ts">
import { displayedFontsStore } from '../../model'; import { displayedFontsStore } from '../../model';
import FontComparer from '../FontComparer/FontComparer.svelte';
import FontSampler from '../FontSampler/FontSampler.svelte'; import FontSampler from '../FontSampler/FontSampler.svelte';
</script> </script>
<FontComparer />
<div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]"> <div class="grid gap-2 grid-cols-[repeat(auto-fit,minmax(500px,1fr))]">
{#each displayedFontsStore.fonts as font (font.id)} {#each displayedFontsStore.fonts as font (font.id)}
<FontSampler font={font} bind:text={displayedFontsStore.text} /> <FontSampler font={font} bind:text={displayedFontsStore.text} />

29
src/features/DisplayFont/ui/FontPair/FontPair.svelte
View File

@@ -1,29 +0,0 @@
<script lang="ts">
import {
FontApplicator,
type UnifiedFont,
} from '$entities/Font';
interface Props {
pair: [UnifiedFont, UnifiedFont];
selectedPair: Partial<[UnifiedFont, UnifiedFont]>;
}
let { pair, selectedPair = $bindable() }: Props = $props();
const [font1, font2] = $derived(pair);
function handleClick() {
selectedPair = pair;
}
</script>
<div class="flex flex-row justify-between w-full" onclick={handleClick}>
<FontApplicator id={font1.id} name={font1.name}>
{font1.name}
</FontApplicator>
vs
<FontApplicator id={font2.id} name={font2.name}>
{font2.name}
</FontApplicator>
</div>

34
src/features/DisplayFont/ui/PairSelector/PairSelector.svelte
View File

@@ -1,34 +0,0 @@
<script lang="ts">
import { FontVirtualList } from '$entities/Font';
import { buttonVariants } from '$shared/shadcn/ui/button';
import {
Content as PopoverContent,
Root as PopoverRoot,
Trigger as PopoverTrigger,
} from '$shared/shadcn/ui/popover';
import { displayedFontsStore } from '../../model';
import FontPair from '../FontPair/FontPair.svelte';
let open = $state(false);
const triggerContent = $derived.by(() => {
const [beforeFont, afterFont] = displayedFontsStore.selectedPair ?? [];
if (!beforeFont || !afterFont) return 'Select a pair';
return `${beforeFont.name} vs ${afterFont.name}`;
});
const triggerDisabled = $derived(displayedFontsStore.pairs.length === 0);
</script>
<PopoverRoot bind:open>
<PopoverTrigger class={buttonVariants({ variant: 'outline' })} disabled={triggerDisabled}>
{triggerContent}
</PopoverTrigger>
<PopoverContent>
<FontVirtualList items={displayedFontsStore.pairs}>
{#snippet children({ item: pair })}
<FontPair {pair} bind:selectedPair={displayedFontsStore.selectedPair} />
{/snippet}
</FontVirtualList>
</PopoverContent>
</PopoverRoot>