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

refactor: buttons (#18317)

Browse source 
* refactor: buttons

* fix: woopsie

---------

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
This commit is contained in:
Jason Rasmussen 2025-05-15 18:31:33 -04:00 • committed by GitHub
parent c1150fe7e3
commit 86d64f3483
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 148 additions and 279 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/lib/components/onboarding-page/onboarding-hello.svelte
View file

@ -1,11 +1,10 @@
<script lang="ts">
import OnboardingCard from './onboarding-card.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import { mdiArrowRight } from '@mdi/js';
import Icon from '$lib/components/elements/icon.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { user } from '$lib/stores/user.store';
import { Button } from '@immich/ui';
import { mdiArrowRight } from '@mdi/js';
import { t } from 'svelte-i18n';
import OnboardingCard from './onboarding-card.svelte';
interface Props {
onDone: () => void;
@ -22,9 +21,8 @@
<p class="text-3xl pb-6 font-light">{$t('onboarding_welcome_description')}</p>
<div class="w-full flex place-content-end">
<Button class="flex gap-2 place-content-center" onclick={() => onDone()}>
<Button shape="round" trailingIcon={mdiArrowRight} class="flex gap-2 place-content-center" onclick={onDone}>
<p>{$t('theme')}</p>
<Icon path={mdiArrowRight} size="18" />
</Button>
</div>
</OnboardingCard>

20
web/src/lib/components/onboarding-page/onboarding-privacy.svelte
View file

@ -1,14 +1,13 @@
<script lang="ts">
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { user } from '$lib/stores/user.store';
import { getConfig, type SystemConfigDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiArrowLeft, mdiArrowRight, mdiIncognito } from '@mdi/js';
import { onMount } from 'svelte';
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import OnboardingCard from './onboarding-card.svelte';
import { t } from 'svelte-i18n';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import OnboardingCard from './onboarding-card.svelte';
interface Props {
onDone: () => void;
@ -45,13 +44,19 @@
/>
<div class="flex pt-4">
<div class="w-full flex place-content-start">
<Button class="flex gap-2 place-content-center" onclick={() => onPrevious()}>
<Icon path={mdiArrowLeft} size="18" />
<Button
shape="round"
leadingIcon={mdiArrowLeft}
class="flex gap-2 place-content-center"
onclick={() => onPrevious()}
>
<p>{$t('theme')}</p>
</Button>
</div>
<div class="flex w-full place-content-end">
<Button
shape="round"
trailingIcon={mdiArrowRight}
onclick={() => {
adminSettingsComponent?.handleSave({ map: config?.map, newVersionCheck: config?.newVersionCheck });
onDone();
@ -59,7 +64,6 @@
>
<span class="flex place-content-center place-items-center gap-2">
{$t('admin.storage_template_settings')}
<Icon path={mdiArrowRight} size="18" />
</span>
</Button>
</div>

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

@ -1,16 +1,15 @@
<script lang="ts">
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { getConfig, type SystemConfigDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiArrowLeft, mdiCheck, mdiHarddisk } from '@mdi/js';
import { onMount } from 'svelte';
import AdminSettings from '$lib/components/admin-page/settings/admin-settings.svelte';
import StorageTemplateSettings from '$lib/components/admin-page/settings/storage-template/storage-template-settings.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import OnboardingCard from './onboarding-card.svelte';
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import OnboardingCard from './onboarding-card.svelte';
interface Props {
onDone: () => void;
@ -52,13 +51,19 @@
>
<div class="flex pt-4">
<div class="w-full flex place-content-start">
<Button class="flex gap-2 place-content-center" onclick={() => onPrevious()}>
<Icon path={mdiArrowLeft} size="18" />
<Button
shape="round"
leadingIcon={mdiArrowLeft}
class="flex gap-2 place-content-center"
onclick={() => onPrevious()}
>
<p>{$t('privacy')}</p>
</Button>
</div>
<div class="flex w-full place-content-end">
<Button
shape="round"
trailingIcon={mdiCheck}
onclick={() => {
adminSettingsComponent?.handleSave({ storageTemplate: config?.storageTemplate });
onDone();
@ -66,7 +71,6 @@
>
<span class="flex place-content-center place-items-center gap-2">
{$t('done')}
<Icon path={mdiCheck} size="18" />
</span>
</Button>
</div>

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

@ -1,9 +1,9 @@
<script lang="ts">
import { moonPath, moonViewBox, sunPath, sunViewBox } from '$lib/assets/svg-paths';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { Theme } from '$lib/constants';
import { themeManager } from '$lib/managers/theme-manager.svelte';
import { Button } from '@immich/ui';
import { mdiArrowRight, mdiThemeLightDark } from '@mdi/js';
import { t } from 'svelte-i18n';
import OnboardingCard from './onboarding-card.svelte';
@ -23,7 +23,7 @@
<div class="flex gap-4 mb-6">
<button
type="button"
class="light w-1/2 aspect-square bg-light rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
class="w-1/2 aspect-square bg-light dark:bg-dark rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
onclick={() => themeManager.setTheme(Theme.LIGHT)}
>
<div
@ -49,9 +49,13 @@
<div class="flex">
<div class="w-full flex place-content-end">
<Button class="flex gap-2 place-content-center" onclick={() => onDone()}>
<Button
trailingIcon={mdiArrowRight}
shape="round"
class="flex gap-2 place-content-center"
onclick={() => onDone()}
>
<p>{$t('privacy')}</p>
<Icon path={mdiArrowRight} size="18" />
</Button>
</div>
</div>