sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

* 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>
pull/6231/head
martin 2024-01-06 21:01:24 +07: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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/lib/assets/svg-paths.ts
Unescape Escape View File

@ -0,0 +1,6 @@
export const moonPath = 'M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z';
export const sunPath =
'M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z';
export const moonViewBox = '0 0 20 20';
export const sunViewBox = '0 0 20 20';

29
web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte
Unescape Escape View File

@ -19,7 +19,7 @@
import Button from '$lib/components/elements/buttons/button.svelte'; import Button from '$lib/components/elements/buttons/button.svelte';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import { mdiCheck } from '@mdi/js'; import { mdiArrowLeft, mdiCheck } from '@mdi/js';
export let storageConfig: SystemConfigStorageTemplateDto; export let storageConfig: SystemConfigStorageTemplateDto;
export let disabled = false; export let disabled = false;
@ -30,7 +30,10 @@
let templateOptions: SystemConfigTemplateStorageOptionDto; let templateOptions: SystemConfigTemplateStorageOptionDto;
let selectedPreset = ''; let selectedPreset = '';
const dispatch = createEventDispatcher<{ save: void }>(); const dispatch = createEventDispatcher<{
save: void;
previous: void;
}>();
const handleReset = (detail: ResetOptions) => { const handleReset = (detail: ResetOptions) => {
if (detail.default) { if (detail.default) {
@ -283,13 +286,21 @@
{/if} {/if}
{#if minified} {#if minified}
<div class="flex w-full place-content-end"> <div class="flex pt-4">
<Button on:click={saveSetting}> <div class="w-full flex place-content-start">
<span class="flex place-content-center place-items-center gap-2"> <Button class="flex gap-2 place-content-center" on:click={() => dispatch('previous')}>
Done <Icon path={mdiArrowLeft} size="18" />
<Icon path={mdiCheck} size="18" /> <p>Theme</p>
</span> </Button>
</Button> </div>
<div class="flex w-full place-content-end">
<Button on:click={saveSetting}>
<span class="flex place-content-center place-items-center gap-2">
Done
<Icon path={mdiCheck} size="18" />
</span>
</Button>
</div>
</div> </div>
{:else} {:else}
<SettingButtonsRow <SettingButtonsRow

2
web/src/lib/components/elements/icon.svelte
Unescape Escape View File

@ -20,7 +20,7 @@
width={size} width={size}
height={size} height={size}
{viewBox} {viewBox}
class="{className} {flipped && '-scale-x-100'}" class="{className} {flipped ? '-scale-x-100' : ''}"
{role} {role}
aria-label={ariaLabel} aria-label={ariaLabel}
aria-hidden={ariaHidden} aria-hidden={ariaHidden}

2
web/src/lib/components/onboarding-page/onboarding-storage-template.svelte
Unescape Escape View File

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

29
web/src/lib/components/onboarding-page/onboarding-theme.svelte
Unescape Escape View File

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

14
web/src/lib/components/shared-components/theme-button.svelte
Unescape Escape View File

@ -1,7 +1,9 @@
<script lang="ts"> <script lang="ts">
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { moonPath, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import { colorTheme } from '$lib/stores/preferences.store'; import { colorTheme } from '$lib/stores/preferences.store';
import IconButton from '../elements/buttons/icon-button.svelte'; import IconButton from '../elements/buttons/icon-button.svelte';
import Icon from '../elements/icon.svelte';
const toggleTheme = () => { const toggleTheme = () => {
$colorTheme = $colorTheme === 'dark' ? 'light' : 'dark'; $colorTheme = $colorTheme === 'dark' ? 'light' : 'dark';
@ -20,16 +22,8 @@
<IconButton on:click={toggleTheme} title="Toggle theme"> <IconButton on:click={toggleTheme} title="Toggle theme">
{#if $colorTheme === 'light'} {#if $colorTheme === 'light'}
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <Icon path={moonPath} viewBox={sunViewBox} class="h-6 w-6" />
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
>
{:else} {:else}
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" <Icon path={sunPath} viewBox={sunViewBox} class="h-6 w-6" />
><path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd"
clip-rule="evenodd"
/></svg
>
{/if} {/if}
</IconButton> </IconButton>

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

@ -14,7 +14,7 @@
component: typeof OnboardingHello | typeof OnboardingTheme | typeof OnboadingStorageTemplate; component: typeof OnboardingHello | typeof OnboardingTheme | typeof OnboadingStorageTemplate;
} }
let onboardingSteps: OnboardingStep[] = [ const onboardingSteps: OnboardingStep[] = [
{ name: 'hello', component: OnboardingHello }, { name: 'hello', component: OnboardingHello },
{ name: 'theme', component: OnboardingTheme }, { name: 'theme', component: OnboardingTheme },
{ name: 'storage', component: OnboadingStorageTemplate }, { name: 'storage', component: OnboadingStorageTemplate },
@ -35,8 +35,29 @@
goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`); goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`);
} }
}; };
const handlePrevious = () => {
if (index >= 1) {
index--;
goto(`${AppRoute.AUTH_ONBOARDING}?step=${onboardingSteps[index].name}`);
}
};
</script> </script>
<section id="onboarding-page" class="min-w-screen flex min-h-screen place-content-center place-items-center p-4"> <section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
<svelte:component this={onboardingSteps[index].component} on:done={handleDoneClicked} /> <div class="flex flex-col w-full">
<div class="w-full bg-gray-300 dark:bg-gray-600 rounded-md h-2">
<div
class="progress-bar bg-immich-primary dark:bg-immich-dark-primary h-2 rounded-md transition-all duration-200 ease-out"
style="width: {(index / (onboardingSteps.length - 1)) * 100}%"
></div>
</div>
<div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
<svelte:component
this={onboardingSteps[index].component}
on:done={handleDoneClicked}
on:previous={handlePrevious}
/>
</div>
</div>
</section> </section>