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: use more immich ui buttons (#16840)

Browse source
This commit is contained in:
Jason Rasmussen 2025-03-14 09:38:06 -04:00 • committed by GitHub
parent 8ad95b368b
commit 9a4495eb5b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 113 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import { SettingInputFieldType } from '$lib/constants';
@ -8,7 +7,7 @@
import { copyToClipboard, makeSharedLinkUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { SharedLinkType, createSharedLink, updateSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
import { HStack, IconButton, Input } from '@immich/ui';
import { Button, HStack, IconButton, Input } from '@immich/ui';
import { mdiContentCopy, mdiLink } from '@mdi/js';
import { DateTime, Duration } from 'luxon';
import { t } from 'svelte-i18n';
@ -242,9 +241,9 @@
{#snippet stickyBottom()}
{#if editingLink}
<Button size="sm" fullwidth onclick={handleEditLink}>{$t('confirm')}</Button>
<Button fullWidth onclick={handleEditLink}>{$t('confirm')}</Button>
{:else}
<Button size="sm" fullwidth onclick={handleCreateSharedLink}>{$t('create_link')}</Button>
<Button fullWidth onclick={handleCreateSharedLink}>{$t('create_link')}</Button>
{/if}
{/snippet}
</FullScreenModal>

10
web/src/lib/components/shared-components/settings/setting-buttons-row.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import type { ResetOptions } from '$lib/utils/dipatch';
import { Button } from '@immich/ui';
import { t } from 'svelte-i18n';
interface Props {
@ -26,8 +26,10 @@
{/if}
</div>
<div class="right">
<Button {disabled} size="sm" color="gray" onclick={() => onReset({ default: false })}>{$t('reset')}</Button>
<Button type="submit" {disabled} size="sm" onclick={() => onSave()}>{$t('save')}</Button>
<div class="flex gap-1">
<Button shape="round" {disabled} size="small" color="secondary" onclick={() => onReset({ default: false })}
>{$t('reset')}</Button
>
<Button shape="round" type="submit" {disabled} size="small" onclick={() => onSave()}>{$t('save')}</Button>
</div>
</div>

45
web/src/lib/components/shared-components/side-bar/purchase-info.svelte
View file

@ -1,22 +1,22 @@
<script lang="ts">
import Icon from '$lib/components/elements/icon.svelte';
import { mdiClose, mdiInformationOutline } from '@mdi/js';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import LicenseModal from '$lib/components/shared-components/purchasing/purchase-modal.svelte';
import { purchaseStore } from '$lib/stores/purchase.store';
import { t } from 'svelte-i18n';
import { goto } from '$app/navigation';
import { AppRoute } from '$lib/constants';
import { getAccountAge } from '$lib/utils/auth';
import { fade } from 'svelte/transition';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import { updateMyPreferences } from '@immich/sdk';
import { handleError } from '$lib/utils/handle-error';
import { preferences } from '$lib/stores/user.store';
import { getButtonVisibility } from '$lib/utils/purchase-utils';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import LicenseModal from '$lib/components/shared-components/purchasing/purchase-modal.svelte';
import SupporterBadge from '$lib/components/shared-components/side-bar/supporter-badge.svelte';
import { AppRoute } from '$lib/constants';
import { purchaseStore } from '$lib/stores/purchase.store';
import { preferences } from '$lib/stores/user.store';
import { getAccountAge } from '$lib/utils/auth';
import { handleError } from '$lib/utils/handle-error';
import { getButtonVisibility } from '$lib/utils/purchase-utils';
import { updateMyPreferences } from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiClose, mdiInformationOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
let showMessage = $state(false);
let isOpen = $state(false);
@ -160,12 +160,21 @@
</p>
</div>
<Button class="mt-2" fullwidth onclick={openPurchaseModal}>{$t('purchase_button_buy_immich')}</Button>
<Button shape="round" class="mt-2" fullWidth onclick={openPurchaseModal}
>{$t('purchase_button_buy_immich')}</Button
>
<div class="mt-3 flex gap-4">
<Button size="sm" fullwidth shadow={false} color="transparent-gray" onclick={() => hideButton(true)}>
<Button shape="round" size="small" fullWidth color="secondary" variant="ghost" onclick={() => hideButton(true)}>
{$t('purchase_button_never_show_again')}
</Button>
<Button size="sm" fullwidth shadow={false} color="transparent-gray" onclick={() => hideButton(false)}>
<Button
shape="round"
size="small"
fullWidth
color="secondary"
variant="ghost"
onclick={() => hideButton(false)}
>
{$t('purchase_button_reminder')}
</Button>
</div>