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>
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

View file

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