Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/PickerItem: add support for gifs in picker

Browse source
This commit is contained in:
wukko 2024-07-26 21:34:18 +06:00
parent e0bc0553ca
commit 7427788efd
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 7 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/i18n/en/a11y/dialog.json
View file

@ -1,4 +1,5 @@
{ {
"picker.item.photo": "photo thumbnail", "picker.item.photo": "photo thumbnail",
"picker.item.video": "video thumbnail" "picker.item.video": "video thumbnail",
"picker.item.gif": "gif thumbnail"
} }

5
web/src/components/dialog/PickerItem.svelte
View file

@ -8,6 +8,7 @@
import IconMovie from "@tabler/icons-svelte/IconMovie.svelte"; import IconMovie from "@tabler/icons-svelte/IconMovie.svelte";
import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte"; import IconPhoto from "@tabler/icons-svelte/IconPhoto.svelte";
import IconGif from "@tabler/icons-svelte/IconGif.svelte";
export let item: DialogPickerItem; export let item: DialogPickerItem;
export let number: number; export let number: number;
@ -21,6 +22,8 @@
<div class="picker-type"> <div class="picker-type">
{#if itemType === "video"} {#if itemType === "video"}
<IconMovie /> <IconMovie />
{:else if itemType === "gif"}
<IconGif />
{:else} {:else}
<IconPhoto /> <IconPhoto />
{/if} {/if}
@ -31,7 +34,7 @@
src={item.thumb ?? item.url} src={item.thumb ?? item.url}
class:loading={!imageLoaded} class:loading={!imageLoaded}
class:video-thumbnail={itemType === "video"} class:video-thumbnail={["video", "gif"].includes(itemType)}
on:load={() => imageLoaded = true} on:load={() => imageLoaded = true}
alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}" alt="{$t(`a11y.dialog.picker.item.${itemType}`)} {number}"

2
web/src/lib/types/dialog.ts
View file

@ -10,7 +10,7 @@ export type DialogButton = {
export type SmallDialogIcons = "warn-red"; export type SmallDialogIcons = "warn-red";
export type DialogPickerItem = { export type DialogPickerItem = {
type?: 'photo' | 'video', type?: 'photo' | 'video' | 'gif',
url: string, url: string,
thumb?: string, thumb?: string,
} }