self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

feat(web): go back on the onboarding (#6171)

Browse Source 
* feat: go back on the onboarding

* fix: state

* rename variable
This commit is contained in:
martin 2024-01-04 18:20:19 +01:00 committed by GitHub
parent ba4a20a181
commit 4f6f79a392
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/lib/components/onboarding-page/onboarding-theme.svelte
View File

@ -28,7 +28,10 @@
<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"
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'}"
on:click={toggleLightTheme}
>
<div
@ -39,7 +42,9 @@
</div>
</button>
<button
class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl border border-transparent"
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'}"
on:click={toggleDarkTheme}
>
<div

27
web/src/routes/auth/onboarding/+page.svelte
View File

@ -5,21 +5,38 @@
import { api } from '@api';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import { page } from '$app/stores';
let index = 0;
let onboardingSteps = [OnboardingHello, OnboardingTheme, OnboadingStorageTemplate];
interface OnboardingStep {
name: string;
component: typeof OnboardingHello | typeof OnboardingTheme | typeof OnboadingStorageTemplate;
}
let onboardingSteps: OnboardingStep[] = [
{ name: 'hello', component: OnboardingHello },
{ name: 'theme', component: OnboardingTheme },
{ name: 'storage', component: OnboadingStorageTemplate },
];
$: {
const stepState = $page.url.searchParams.get('step');
const tempIndex = onboardingSteps.findIndex((step) => step.name === stepState);
index = tempIndex >= 0 ? tempIndex : 0;
}
const handleDoneClicked = async () => {
index++;
if (index >= onboardingSteps.length) {
if (index >= onboardingSteps.length - 1) {
await api.serverInfoApi.setAdminOnboarding();
goto(AppRoute.PHOTOS);
} else {
index++;
goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`);
}
};
</script>
<section id="onboarding-page" class="min-w-screen flex min-h-screen place-content-center place-items-center p-4">
<svelte:component this={onboardingSteps[index]} on:done={handleDoneClicked} />
<svelte:component this={onboardingSteps[index].component} on:done={handleDoneClicked} />
</section>