kglt/fyne-on
1
0
Fork 0
Code Pull requests 1 Activity Actions 6

refactor: code from profile avatar image reduced motion setting issue (#3069)

Browse source 
Co-authored-by: null <null>
This commit is contained in:
Andrew Crescencio 2024-11-30 22:59:42 -03:00 • committed by GitHub
parent e1b8d5cb33
commit b4cb027a8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/account/AccountAvatar.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
const { account, square } = defineProps<{ const props = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
square?: boolean square?: boolean
}>() }>()
@ -11,22 +11,22 @@ const error = ref(false)
const preferredMotion = usePreferredReducedMotion() const preferredMotion = usePreferredReducedMotion()
const accountAvatarSrc = computed(() => { const accountAvatarSrc = computed(() => {
return preferredMotion.value === 'reduce' ? account.avatarStatic : account.avatar return preferredMotion.value === 'reduce' ? (props.account?.avatarStatic ?? props.account.avatar) : props.account.avatar
}) })
</script> </script>
<template> <template>
<img <img
:key="account.avatar" :key="props.account.avatar"
width="400" width="400"
height="400" height="400"
select-none select-none
:src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc" :src="(error || !loaded) ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : accountAvatarSrc"
:alt="$t('account.avatar_description', [account.username])" :alt="$t('account.avatar_description', [props.account.username])"
loading="lazy" loading="lazy"
class="account-avatar" class="account-avatar"
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')" :class="(loaded ? 'bg-base' : 'bg-gray:10') + (props.square ? ' ' : ' rounded-full')"
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }" :style="{ 'clip-path': props.square ? `url(#avatar-mask)` : 'none' }"
v-bind="$attrs" v-bind="$attrs"
@load="loaded = true" @load="loaded = true"
@error="error = true" @error="error = true"