Added transitions for client only buttons

This commit is contained in:
Alexis
2025-04-25 15:38:37 +02:00
parent 2d2069cae6
commit ee29169f4f
2 changed files with 24 additions and 20 deletions

View File

@@ -11,16 +11,18 @@ const breakpoints = useBreakpoints(
<template> <template>
<ClientOnly> <ClientOnly>
<UiButton <Transition name="fade" appear>
:search-slash="breakpoints.lg.value" <UiButton
:size="breakpoints.lg.value ? 'default' : 'icon'" :search-slash="breakpoints.lg.value"
@click="revealAdvancedSearch()" :size="breakpoints.lg.value ? 'default' : 'icon'"
> @click="revealAdvancedSearch()"
<PhMagnifyingGlass size="20" weight="light" /> >
<PhMagnifyingGlass size="20" weight="light" />
<span class="max-lg:hidden"> <span class="max-lg:hidden">
{{ $t('entity.advancedSearch.title') }} {{ $t('entity.advancedSearch.title') }}
</span> </span>
</UiButton> </UiButton>
</Transition>
</ClientOnly> </ClientOnly>
</template> </template>

View File

@@ -24,17 +24,19 @@ const breakpoints = useBreakpoints(
<template> <template>
<ClientOnly> <ClientOnly>
<UiButton <Transition name="fade" appear>
class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl" <UiButton
:size="breakpoints.lg.value ? 'default' : 'icon'" class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
@click="toggleDialog" :size="breakpoints.lg.value ? 'default' : 'icon'"
> @click="toggleDialog"
<PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" /> >
<PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
<strong class="font-semibold max-lg:hidden"> <strong class="font-semibold max-lg:hidden">
{{ $t("entity.calendar.event.newEvent") }} {{ $t("entity.calendar.event.newEvent") }}
</strong> </strong>
</UiButton> </UiButton>
</Transition>
</ClientOnly> </ClientOnly>
<UiDialog v-model:open="isDialogOpen"> <UiDialog v-model:open="isDialogOpen">