helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): previous button for on-boarding steps (#6178)

Browse source 
* feat: previous on the onboarding

* fix: storage full screen

* feat: transition

* use svelte files for svg

* fix: use icon component

* fix: additional check

* styling'

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
martin 2024-01-06 21:01:24 +01:00 • committed by GitHub
parent 8c784defa0
commit 2cc5149d0b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 71 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
View file

@ -8,6 +8,7 @@
const dispatch = createEventDispatcher<{
done: void;
previous: void;
}>();
let configs: SystemConfigDto | null = null;
@ -32,6 +33,7 @@
disabled={$featureFlags.configFile}
storageConfig={configs.storageTemplate}
on:save={() => dispatch('done')}
on:previous={() => dispatch('previous')}
/>
{/if}
</OnboardingCard>

29
web/src/lib/components/onboarding-page/onboarding-theme.svelte
View file

@ -1,13 +1,15 @@
<script lang="ts">
import { mdiArrowRight, mdiWhiteBalanceSunny, mdiMoonWaningCrescent } from '@mdi/js';
import { mdiArrowRight } from '@mdi/js';
import Button from '../elements/buttons/button.svelte';
import Icon from '../elements/icon.svelte';
import OnboardingCard from './onboarding-card.svelte';
import { createEventDispatcher } from 'svelte';
import { colorTheme } from '$lib/stores/preferences.store';
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
const dispatch = createEventDispatcher<{
done: void;
previous: void;
}>();
const toggleLightTheme = () => {
@ -28,38 +30,35 @@
<div class="flex gap-4 mb-6">
<button
class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl {$colorTheme ==
'light'
? 'border-[3px] border-immich-dark-primary/80 border-immich-primary'
: 'border border-transparent'}"
class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
on:click={toggleLightTheme}
>
<div
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
>
<Icon path={mdiWhiteBalanceSunny} size="96" />
<Icon path={sunPath} viewBox={sunViewBox} size="96" />
<p class="font-semibold text-4xl">LIGHT</p>
</div>
</button>
<button
class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl {$colorTheme == 'dark'
? 'border-[3px] border-immich-dark-primary/80 border-immich-primary'
: 'border border-transparent'}"
class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl dark:border-[3px] dark:border-immich-dark-primary/80 dark:border-immich-dark-primary border border-transparent"
on:click={toggleDarkTheme}
>
<div
class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"
>
<Icon path={mdiMoonWaningCrescent} size="96" />
<Icon path={moonPath} viewBox={moonViewBox} size="96" />
<p class="font-semibold text-4xl">DARK</p>
</div>
</button>
</div>
<div class="w-full flex place-content-end">
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
<p>Storage Template</p>
<Icon path={mdiArrowRight} size="18" />
</Button>
<div class="flex">
<div class="w-full flex place-content-end">
<Button class="flex gap-2 place-content-center" on:click={() => dispatch('done')}>
<p>Storage Template</p>
<Icon path={mdiArrowRight} size="18" />
</Button>
</div>
</div>
</OnboardingCard>