zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: update design of square avatar (#808)

zio/stable
wheat 2023-01-05 17:21:31 -05:00 committed by GitHub
parent 6bb9fd9553
commit a35884c0a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app.vue
View File

@ -12,4 +12,13 @@ const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:
<NuxtPage /> <NuxtPage />
</NuxtLayout> </NuxtLayout>
<AriaAnnouncer /> <AriaAnnouncer />
<!-- Avatar Mask -->
<svg absolute op0 width="0" height="0">
<defs>
<clipPath id="avatar-mask" clipPathUnits="objectBoundingBox">
<path d="M 0,0.5 C 0,0 0,0 0.5,0 S 1,0 1,0.5 1,1 0.5,1 0,1 0,0.5" />
</clipPath>
</defs>
</svg>
</template> </template>

3
components/account/AccountAvatar.vue
View File

@ -18,7 +18,8 @@ const error = $ref(false)
:src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar" :src="error ? 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' : account.avatar"
:alt="$t('account.avatar_description', [account.username])" :alt="$t('account.avatar_description', [account.username])"
loading="lazy" loading="lazy"
:class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' rounded-3' : ' rounded-full')" :class="(loaded ? 'bg-base' : 'bg-gray:10') + (square ? ' ' : ' rounded-full')"
:style="{ 'clip-path': square ? `url(#avatar-mask)` : 'none' }"
v-bind="$attrs" v-bind="$attrs"
@load="loaded = true" @load="loaded = true"
@error="error = true" @error="error = true"