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

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

Browse source
This commit is contained in:
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
Download patch file Download diff file Expand all files Collapse all files

5
components/notification/NotificationEnablePushNotification.client.vue
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" />

12
components/notification/NotificationPreferences.client.vue
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>