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

feat(Labels): change the styles of the component

Browse Source
This commit is contained in:
Ilia Mashkov
2026-01-31 11:48:58 +03:00
parent b1ce734f19
commit c246f70fe9
1 changed files with 70 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Labels.svelte
View File

@@ -6,6 +6,7 @@
import {
FontVirtualList,
type UnifiedFont,
unifiedFontStore,
} from '$entities/Font';
import FontApplicator from '$entities/Font/ui/FontApplicator/FontApplicator.svelte';
import { displayedFontsStore } from '$features/DisplayFont';
@@ -35,19 +36,18 @@ interface Props<T> {
let { fontA, fontB, sliderPos }: Props<T> = $props();
const fontList = $derived(
displayedFontsStore.fonts.filter(font => font.name !== fontA.name && font.name !== fontB.name),
// displayedFontsStore.fonts.filter(font => font.name !== fontA.name && font.name !== fontB.name),
unifiedFontStore.fonts,
);
function selectFontA(fontId: string) {
const newFontA = displayedFontsStore.getById(fontId);
if (!newFontA) return;
displayedFontsStore.fontA = newFontA;
function selectFontA(font: UnifiedFont) {
if (!font) return;
displayedFontsStore.fontA = font;
}
function selectFontB(fontId: string) {
const newFontB = displayedFontsStore.getById(fontId);
if (!newFontB) return;
displayedFontsStore.fontB = newFontB;
function selectFontB(font: UnifiedFont) {
if (!font) return;
displayedFontsStore.fontB = font;
}
</script>
@@ -55,58 +55,84 @@ function selectFontB(fontId: string) {
name: string,
id: string,
fonts: UnifiedFont[],
handleChange: (value: string) => void,
selectFont: (font: UnifiedFont) => void,
align: 'start' | 'end',
)}
<div
class="z-50 pointer-events-auto **:bg-transparent"
onpointerdown={(e => e.stopPropagation())}
>
<SelectRoot type="single" onValueChange={handleChange}>
<div class="z-50 pointer-events-auto" onpointerdown={(e => e.stopPropagation())}>
<SelectRoot type="single" disabled={!fontList.length}>
<SelectTrigger
class={cn(buttonVariants({ variant: 'ghost' }), 'border-none, hover:bg-indigo-100')}
disabled={!fontList.length}
class={cn(
'w-44 sm:w-52 h-9 border border-gray-300/40 bg-white/60 backdrop-blur-sm',
'px-3 rounded-lg transition-all flex items-center justify-between gap-2',
'font-mono text-[11px] tracking-tight font-medium text-gray-900',
'hover:bg-white/80 hover:border-gray-400/60 hover:shadow-sm',
)}
>
<FontApplicator name={name} id={id}>
{name}
</FontApplicator>
<div class="text-left flex-1 min-w-0">
<FontApplicator name={name} id={id}>
{name}
</FontApplicator>
</div>
</SelectTrigger>
<SelectContent
class="h-60 bg-transparent **:bg-transparent backdrop-blur-0 data-[state=open]:backdrop-blur-lg transition-[backdrop-filter] duration-200"
scrollYThreshold={100}
class={cn(
'bg-white/95 backdrop-blur-xl border border-gray-300/50 shadow-xl',
'w-52 max-h-[280px] overflow-hidden rounded-lg',
)}
side="top"
align={align}
sideOffset={8}
size="small"
>
<FontVirtualList items={fonts}>
{#snippet children({ item: font })}
<SelectItem value={font.id} class="data-[highlighted]:bg-indigo-100">
<FontApplicator name={font.name} id={font.id}>
{font.name}
</FontApplicator>
</SelectItem>
{/snippet}
</FontVirtualList>
<div class="p-1.5">
<FontVirtualList items={fonts}>
{#snippet children({ item: font })}
{@const handleClick = () => selectFont(font)}
<SelectItem
value={font.id}
class="data-[highlighted]:bg-gray-100 font-mono text-[11px] px-3 py-2.5 rounded-md cursor-pointer transition-colors"
onclick={handleClick}
>
<FontApplicator name={font.name} id={font.id}>
{font.name}
</FontApplicator>
</SelectItem>
{/snippet}
</FontVirtualList>
</div>
</SelectContent>
</SelectRoot>
</div>
{/snippet}
<div class="absolute bottom-6 inset-x-6 sm:inset-x-6 flex justify-between items-end pointer-events-none z-20">
<div class="absolute bottom-8 inset-x-6 sm:inset-x-12 flex justify-between items-end pointer-events-none z-20">
<div
class="flex flex-col gap-0.5 transition-opacity duration-300 items-start"
style:opacity={sliderPos < 15 ? 0 : 1}
class="flex flex-col gap-2 transition-all duration-500 items-start"
style:opacity={sliderPos < 20 ? 0 : 1}
style:transform="translateY({sliderPos < 20 ? '8px' : '0px'})"
>
<span class="text-[0.5rem] font-mono uppercase tracking-widest text-indigo-400">
Baseline
</span>
{@render fontSelector(fontB.name, fontB.id, fontList, selectFontB)}
<div class="flex items-center gap-2.5 px-1">
<div class="w-1.5 h-1.5 rounded-full bg-indigo-500 shadow-[0_0_6px_rgba(99,102,241,0.6)]"></div>
<div class="w-px h-2.5 bg-gray-300/60"></div>
<span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
ch_01
</span>
</div>
{@render fontSelector(fontB.name, fontB.id, fontList, selectFontB, 'start')}
</div>
<div
class="flex flex-col items-end text-right gap-1 transition-opacity duration-300"
style:opacity={sliderPos > 85 ? 0 : 1}
class="flex flex-col items-end text-right gap-2 transition-all duration-500"
style:opacity={sliderPos > 80 ? 0 : 1}
style:transform="translateY({sliderPos > 80 ? '8px' : '0px'})"
>
<span class="text-[0.5rem] font-mono uppercase tracking-widest text-slate-400">
Comparison
</span>
{@render fontSelector(fontA.name, fontA.id, fontList, selectFontA)}
<div class="flex items-center gap-2.5 px-1">
<span class="font-mono text-[9px] uppercase tracking-[0.2em] text-gray-500 font-medium">
ch_02
</span>
<div class="w-px h-2.5 bg-gray-300/60"></div>
<div class="w-1.5 h-1.5 rounded-full bg-gray-900 shadow-[0_0_6px_rgba(0,0,0,0.4)]"></div>
</div>
{@render fontSelector(fontA.name, fontA.id, fontList, selectFontA, 'end')}
</div>
</div>