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): onboarding (#6066)

Browse source 
* feat(web): onboarding

* feat: openapi

* feat: modulization

* feat: page advancing

* Animation

* Add storage templaete settings

* sql

* more style

* Theme

* information and styling

* hide/show table

* Styling

* Update user property

* fix test

* fix test:

* fix e2e

* test

* Update web/src/lib/components/onboarding-page/onboarding-hello.svelte

Co-authored-by: bo0tzz <git@bo0tzz.me>

* naming

* use System Metadata

* better return type

* onboarding using server metadata

* revert previous changes in user entity

* sql

* test web

* fix test server

* server/web test

* more test

* consolidate color theme change logic

* consolidate save button to storage template

* merge main

* fix web

---------

Co-authored-by: bo0tzz <git@bo0tzz.me>
This commit is contained in:
Alex 2024-01-03 23:28:32 -06:00 • committed by GitHub
parent f8d64be13c
commit 18f59f78e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
35 changed files with 698 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,60 @@
<script lang="ts">
import { mdiArrowRight, mdiWhiteBalanceSunny, mdiMoonWaningCrescent } 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';
const dispatch = createEventDispatcher<{
done: void;
}>();
const toggleLightTheme = () => {
$colorTheme = 'light';
};
const toggleDarkTheme = () => {
$colorTheme = 'dark';
};
</script>
<OnboardingCard>
<p class="text-xl text-immich-primary dark:text-immich-dark-primary">COLOR THEME</p>
<div>
<p class="pb-6 font-light">Choose a color theme for your instance. You can change this later in your settings.</p>
</div>
<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"
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" />
<p class="font-semibold text-4xl">LIGHT</p>
</div>
</button>
<button
class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl 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" />
<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>
</OnboardingCard>