fix: remove Firefox icon border when using animate-spin (#1081)

zio/stable
Joaquín Sánchez 2023-01-13 17:00:32 +01:00 committed by GitHub
parent f76628d4ab
commit 1e5b648a71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 44 additions and 20 deletions

View File

@ -88,17 +88,19 @@ watch(file, (image, _, onCleanup) => {
w-full
h-full
>
<div absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary">
<div i-ri:upload-line />
</div>
<span absolute bg="black/50" text-white rounded-full text-xl w12 h12 flex justify-center items-center hover="bg-black/40 text-primary">
<span block i-ri:upload-line />
</span>
<div
<span
v-if="loading"
absolute inset-0
bg="black/30" text-white
flex justify-center items-center
>
<div class="i-ri:loader-4-line animate-spin animate-duration-[2.5s]" text-4xl />
</div>
<span class="animate-spin animate-duration-[2.5s] preserve-3d">
<span block i-ri:loader-4-line text-4xl />
</span>
</span>
</label>
</template>

View File

@ -66,7 +66,10 @@ const isLegacyAccount = computed(() => !currentUser.value?.vapidKey)
:disabled="busy || isLegacyAccount"
@click="$emit('subscribe')"
>
<span aria-hidden="true" :class="busy && animate ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:check-line'" />
<span v-if="busy && animate" aria-hidden="true" block animate-spin preserve-3d>
<span block i-ri:loader-2-fill aria-hidden="true" />
</span>
<span v-else aria-hidden="true" block i-ri:check-line />
<span>{{ $t('settings.notifications.push_notifications.warning.enable_desktop') }}</span>
</button>
<slot name="error" />

View File

@ -147,7 +147,10 @@ onActivated(() => (busy = false))
:class="busy || !saveEnabled ? 'border-transparent' : null"
:disabled="busy || !saveEnabled"
>
<span :class="busy && animateSave ? 'i-ri:loader-2-fill animate-spin' : 'i-ri:save-2-fill'" />
<span v-if="busy && animateSave" aria-hidden="true" block animate-spin preserve-3d>
<span block i-ri:loader-2-fill aria-hidden="true" />
</span>
<span v-else block aria-hidden="true" i-ri:save-2-fill />
{{ $t('settings.notifications.push_notifications.save_settings') }}
</button>
<button
@ -157,7 +160,7 @@ onActivated(() => (busy = false))
:disabled="busy || !saveEnabled"
@click="undoChanges"
>
<span aria-hidden="true" class="i-material-symbols:undo-rounded" />
<span aria-hidden="true" class="block i-material-symbols:undo-rounded" />
{{ $t('settings.notifications.push_notifications.undo_settings') }}
</button>
</div>
@ -169,7 +172,10 @@ onActivated(() => (busy = false))
:class="busy ? 'border-transparent' : null"
:disabled="busy"
>
<span aria-hidden="true" :class="busy && animateRemoveSubscription ? 'i-ri:loader-2-fill animate-spin' : 'i-material-symbols:cancel-rounded'" />
<span v-if="busy && animateRemoveSubscription" aria-hidden="true" block animate-spin preserve-3d>
<span block i-ri:loader-2-fill aria-hidden="true" />
</span>
<span v-else block aria-hidden="true" i-material-symbols:cancel-rounded />
{{ $t('settings.notifications.push_notifications.unsubscribe') }}
</button>
</form>

View File

@ -145,7 +145,9 @@ defineExpose({
</div>
<div v-if="isUploading" flex gap-1 items-center text-sm p1 text-primary>
<div i-ri:loader-2-fill animate-spin />
<div animate-spin preserve-3d>
<div i-ri:loader-2-fill />
</div>
{{ $t('state.uploading') }}
</div>
<div
@ -274,7 +276,9 @@ defineExpose({
aria-describedby="publish-tooltip"
@click="publish"
>
<div v-if="isSending" i-ri:loader-2-fill animate-spin />
<span v-if="isSending" block animate-spin preserve-3d>
<div block i-ri:loader-2-fill />
</span>
<span v-if="draft.editingStatus">{{ $t('action.save_changes') }}</span>
<span v-else-if="draft.params.inReplyToId">{{ $t('action.reply') }}</span>
<span v-else>{{ !isSending ? $t('action.publish') : $t('state.publishing') }}</span>

View File

@ -46,7 +46,9 @@ defineExpose({
<div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
<template v-if="isPending">
<div flex gap-1 items-center p2 animate-pulse>
<div i-ri:loader-2-line animate-spin />
<div animate-spin preserve-3d>
<div i-ri:loader-2-line />
</div>
<span>Fetching...</span>
</div>
</template>

View File

@ -46,7 +46,9 @@ defineExpose({
<div v-if="isPending || items.length" relative bg-base text-base shadow border="~ base rounded" text-sm py-2 overflow-x-hidden overflow-y-auto max-h-100>
<template v-if="isPending">
<div flex gap-1 items-center p2 animate-pulse>
<div i-ri:loader-2-line animate-spin />
<div animate-spin preserve-3d>
<div i-ri:loader-2-line />
</div>
<span>Fetching...</span>
</div>
</template>

View File

@ -208,7 +208,10 @@ onClickOutside($$(input), () => {
</span>
</div>
<button flex="~ row" gap-x-2 items-center btn-solid mt2 :disabled="!server || busy">
<span aria-hidden="true" inline-block :class="busy ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:login-circle-line'" class="rtl-flip" />
<span v-if="busy" aria-hidden="true" block animate animate-spin preserve-3d class="rtl-flip">
<span block i-ri:loader-2-fill aria-hidden="true" />
</span>
<span v-else aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
{{ $t('action.sign_in') }}
</button>
</form>

View File

@ -47,7 +47,9 @@ const reload = async () => {
{{ message }}
</div>
<button flex items-center gap-2 justify-center btn-solid text-center :disabled="state === 'reloading'">
<span v-if="state === 'reloading'" i-ri:loader-2-fill animate-spin inline-block />
<span v-if="state === 'reloading'" block animate-spin preserve-3d>
<span block i-ri:loader-2-fill />
</span>
{{ state === 'reloading' ? 'Reloading' : 'Reload' }}
</button>
</form>

View File

@ -172,10 +172,10 @@ onReactivated(refreshInfo)
flex gap-x-2 items-center
:disabled="submitting || !isCanSubmit"
>
<div
aria-hidden="true"
:class="submitting ? 'i-ri:loader-2-fill animate animate-spin' : 'i-ri:save-line'"
/>
<span v-if="submitting" aria-hidden="true" block animate-spin preserve-3d>
<span block i-ri:loader-2-fill aria-hidden="true" />
</span>
<span v-else aria-hidden="true" block i-ri:save-line />
{{ $t('action.save') }}
</button>
</div>