versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ⚡ Ditch nuxt-icon in favour of iconify's native WebComponent

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-11 23:04:00 -10:00
parent e622c1625f
commit 52c1f1c57f
No known key found for this signature in database
20 changed files with 146 additions and 136 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/social-elements/notes/attachment.vue
View file

@ -21,11 +21,11 @@
@click="lightbox = false">
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
<a @click.stop :href="attachment.url" target="_blank" download class="ml-auto">
<Icon name="tabler:download" class="w-6 h-6" />
<iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
<span class="sr-only">Close</span>
</a>
<button @click.stop="lightbox = false" class="">
<Icon name="tabler:x" class="w-6 h-6" />
<button @click.stop="lightbox = false">
<iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" />
<span class="sr-only">Close</span>
</button>
</div>

6
components/social-elements/notes/header.vue
View file

@ -48,11 +48,13 @@
}}</span>
<span @click="copyAccount" v-if="!hasCopied"
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
<Icon name="tabler:clipboard" class="h-4 w-4 text-gray-200" aria-hidden="true" />
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
aria-hidden="true" />
Click to copy
</span>
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
<Icon name="tabler:check" class="h-4 w-4 text-green-500" aria-hidden="true" />
<iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
aria-hidden="true" />
Copied!
</span>
</Skeleton>

23
components/social-elements/notes/note-content.vue
View file

@ -1,21 +1,18 @@
<template>
<div v-if="!collapsed">
<div class="mt-6 block relative">
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
type="content">
<div v-if="content"
:class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
v-html="content">
</div>
</Skeleton>
</div>
<div v-if="!collapsed" class="mt-6">
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
type="content">
<div v-if="content"
:class="['prose block relative prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
v-html="content">
</div>
</Skeleton>
<div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
:attachment="attachment" />
</div>
<div v-if="isQuote && note?.reblog" class="mt-4">
<LazySocialElementsNotesNote :note="note?.reblog" :small="true" />
</div>
<LazySocialElementsNotesNote v-if="isQuote && note?.reblog" :note="note?.reblog" :small="true"
class="mt-4 !rounded" />
</div>
<div v-else
class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">

29
components/social-elements/notes/note.vue
View file

@ -6,7 +6,7 @@
</div>
<div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
<Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<Icon name="tabler:repeat" class="size-6" aria-hidden="true" />
<iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
<AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
class="size-6 rounded shrink-0 ring-1 ring-white/10" />
<span><strong v-html="reblogDisplayName"></strong> reblogged</span>
@ -20,33 +20,34 @@
<div v-if="showInteractions"
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
<button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
<Icon name="tabler:arrow-back-up"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
</button>
<button class="group" :disabled="!isSignedIn">
<Icon name="tabler:heart" v-if="!note?.favourited"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
<Icon name="tabler:heart-filled" v-else
class="h-5 w-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note?.favourited"
class="size-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
class="size-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
</button>
<button class="group" :disabled="!isSignedIn">
<Icon name="tabler:repeat" v-if="!note?.reblogged"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
<Icon name="tabler:repeat-off" v-else
class="h-5 w-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note?.reblogged"
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat-off" v-else
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
</button>
<button class="group" @click="note && useEvent('note:quote', note)" :disabled="!isSignedIn">
<Icon name="tabler:quote" class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600"
aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
</button>
<DropdownsAdaptiveDropdown>
<template #button>
<HeadlessMenuButton>
<Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots"
class="size-5 text-gray-200" aria-hidden="true" />
<span class="sr-only">Open menu</span>
</HeadlessMenuButton>
</template>

2
components/social-elements/notes/reply-header.vue
View file

@ -2,7 +2,7 @@
<NuxtLink :href="`/@${account?.acct}`"
class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1">
<Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<Icon name="tabler:arrow-back-up" class="size-6" aria-hidden="true" />
<iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
<span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all">
Replying to
<AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"

2
components/social-elements/notifications/notif.vue
View file

@ -3,7 +3,7 @@
<div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
<Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
width-unit="%">
<Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
<AvatarsCentered v-if="notification?.account?.avatar" :src="notification?.account.avatar"
:alt="`${notification?.account.acct}'s avatar'`"
class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />

8
components/social-elements/users/Account.vue
View file

@ -31,8 +31,8 @@
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
{{ account?.display_name }}
<Icon v-if="account?.locked" name="tabler:lock"
class="w-5 h-5 mb-0.5 text-gray-400 cursor-pointer"
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
class="text-gray-400 cursor-pointer align-text-top"
title="This account manually approves its followers" />
</Skeleton>
</h2>
@ -51,12 +51,12 @@
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="flex items-center space-x-1">
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
<Icon name="tabler:calendar" class="w-5 h-5 text-gray-400" />
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Created {{ formattedJoin }}</span>
</Skeleton>
</div>
<div v-if="account?.bot" class="flex items-center space-x-1">
<Icon name="tabler:robot" class="w-5 h-5 text-gray-400" />
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Bot</span>
</div>
</div>