Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added transitions for client only buttons

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

22
components/calendar/SearchCTA.vue
View File

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

22
components/calendar/dialog/QuickCreateEvent.vue
View File

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