chore: add crossfade to tab selector

This commit is contained in:
2025-08-05 22:06:40 +02:00
parent ada83b32dc
commit 9b816e1e5c

View File

@@ -53,7 +53,7 @@
releaseStreamToReadable, releaseStreamToReadable,
urlIsValidImage, urlIsValidImage,
} from '@/utils'; } from '@/utils';
import { fade, scale } from 'svelte/transition'; import { crossfade, fade, scale } from 'svelte/transition';
import { Checkbox } from '@/components/ui/checkbox'; import { Checkbox } from '@/components/ui/checkbox';
import Label from '@/components/ui/label/label.svelte'; import Label from '@/components/ui/label/label.svelte';
import { import {
@@ -111,7 +111,17 @@
import { EZPPActionStatus } from '@/types'; import { EZPPActionStatus } from '@/types';
import * as presence from '@/presence'; import * as presence from '@/presence';
const tabs = [
{ name: 'Home', key: 'home' },
{
name: 'Settings',
key: 'settings',
},
];
let selectedTab = $state('home'); let selectedTab = $state('home');
let [tab_send, tab_receive] = crossfade({
duration: $reduceAnimations ? 0 : 400,
});
let progress = $state(-1); let progress = $state(-1);
let launchInfo = $state(''); let launchInfo = $state('');
let launchError = $state<Error | undefined>(undefined); let launchError = $state<Error | undefined>(undefined);
@@ -889,7 +899,7 @@
<div <div
class="flex flex-row flex-nowrap h-11 gap-1 w-full bg-theme-800/50 border border-theme-800/90 rounded-lg p-[4px]" class="flex flex-row flex-nowrap h-11 gap-1 w-full bg-theme-800/50 border border-theme-800/90 rounded-lg p-[4px]"
> >
<button <!-- <button
class="w-full flex justify-center items-center font-semibold text-sm rounded-lg {selectedTab === class="w-full flex justify-center items-center font-semibold text-sm rounded-lg {selectedTab ===
'home' 'home'
? 'bg-white/70 border border-white/60 text-theme-950' ? 'bg-white/70 border border-white/60 text-theme-950'
@@ -906,7 +916,24 @@
onclick={() => (selectedTab = 'settings')} onclick={() => (selectedTab = 'settings')}
> >
Settings Settings
</button> </button> -->
{#each tabs as tab (tab.key)}
<button
class="inline-block relative py-2 px-2 disabled:opacity-25 transition-opacity w-full text-center"
onclick={() => selectedTab = tab.key}
>
<div class="flex flex-row items-center justify-center gap-1 text-xs md:text-sm font-semibold w-full text-center">
<div>{tab.name}</div>
</div>
{#if selectedTab === tab.key}
<div
in:tab_receive={{ key: 'tab' }}
out:tab_send={{ key: 'tab' }}
class="absolute left-0 bottom-0 w-full h-full rounded-lg bg-white/10 border border-white/10"
></div>
{/if}
</button>
{/each}
</div> </div>
{#if selectedTab === 'home'} {#if selectedTab === 'home'}
<div <div