qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2024-09-20 11:16:19 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨 Improved by showing more tags

Browse Source
This commit is contained in:
pheralb 2024-08-22 17:46:16 +01:00
parent 70eb475ff3
commit 54be2d0241
1 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/svgCard.svelte
View File

@ -12,7 +12,8 @@
Baseline, Baseline,
Sparkles, Sparkles,
EllipsisIcon, EllipsisIcon,
TagIcon TagIcon,
XIcon
} from 'lucide-svelte'; } from 'lucide-svelte';
// Components & styles: // Components & styles:
@ -48,6 +49,7 @@
// Max Categories: // Max Categories:
let maxVisibleCategories = 1; let maxVisibleCategories = 1;
let moreTagsOptions = false;
// Global Images Styles: // Global Images Styles:
const globalImageStyles = 'mb-4 mt-2 h-10 select-none'; const globalImageStyles = 'mb-4 mt-2 h-10 select-none';
@ -104,9 +106,16 @@
{/each} {/each}
{#if svgInfo.category.length > maxVisibleCategories} {#if svgInfo.category.length > maxVisibleCategories}
<Popover.Root> <Popover.Root
open={moreTagsOptions}
onOpenChange={(isOpen) => (moreTagsOptions = isOpen)}
>
<Popover.Trigger class={badgeStyles} title="More Tags"> <Popover.Trigger class={badgeStyles} title="More Tags">
<EllipsisIcon size={15} strokeWidth={1.5} /> {#if moreTagsOptions}
<XIcon size={15} strokeWidth={1.5} />
{:else}
<EllipsisIcon size={15} strokeWidth={1.5} />
{/if}
</Popover.Trigger> </Popover.Trigger>
<Popover.Content class="flex flex-col space-y-2"> <Popover.Content class="flex flex-col space-y-2">
<p class="font-medium">More tags:</p> <p class="font-medium">More tags:</p>