chore(FontComparer): delete unused code
This commit is contained in:
@@ -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}
|
|
||||||
@@ -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} />
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
Reference in New Issue
Block a user