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

21
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import { page } from '$app/state';
import { focusTrap } from '$lib/actions/focus-trap';
import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import AvatarEditModal from '$lib/modals/AvatarEditModal.svelte';
import { user } from '$lib/stores/user.store';
import { Button } from '@immich/ui';
import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
@ -53,7 +53,15 @@
</div>
<div class="flex flex-col gap-1">
<Button href={AppRoute.USER_SETTINGS} onclick={onClose} color="dark-gray" size="sm" shadow={false} border>
<Button
href={AppRoute.USER_SETTINGS}
onclick={onClose}
size="small"
color="secondary"
variant="ghost"
shape="round"
class="border dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 hover:bg-immich-primary/10 dark:text-white"
>
<div class="flex place-content-center place-items-center text-center gap-2 px-2">
<Icon path={mdiCog} size="18" ariaHidden />
{$t('account_settings')}
@ -63,11 +71,12 @@
<Button
href={AppRoute.ADMIN_USERS}
onclick={onClose}
color="dark-gray"
size="sm"
shadow={false}
border
shape="round"
variant="ghost"
size="small"
color="secondary"
aria-current={page.url.pathname.includes('/admin') ? 'page' : undefined}
class="border dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 hover:bg-immich-primary/10 dark:text-white"
>
<div class="flex place-content-center place-items-center text-center gap-2 px-2">
<Icon path={mdiWrench} size="18" ariaHidden />

10
web/src/lib/components/shared-components/profile-image-cropper.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts">
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error';
import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import domtoimage from 'dom-to-image';
import { onMount } from 'svelte';
import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
import Button from '../elements/buttons/button.svelte';
import { NotificationType, notificationController } from './notification/notification';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { t } from 'svelte-i18n';
import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
import { NotificationType, notificationController } from './notification/notification';
interface Props {
asset: AssetResponseDto;
@ -99,6 +99,6 @@
</div>
{#snippet stickyBottom()}
<Button fullwidth onclick={handleSetProfilePicture}>{$t('set_as_profile_picture')}</Button>
<Button fullWidth shape="round" onclick={handleSetProfilePicture}>{$t('set_as_profile_picture')}</Button>
{/snippet}
</FullScreenModal>

4
web/src/lib/components/shared-components/purchasing/individual-purchase-option-card.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { ImmichProduct } from '$lib/constants';
import { getLicenseLink as getProductLink } from '$lib/utils/license-utils';
import { Button } from '@immich/ui';
import { mdiAccount, mdiCheckCircleOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
</script>
@ -39,6 +39,6 @@
</div>
</div>
<Button href={getProductLink(ImmichProduct.Client)} fullwidth>{$t('purchase_button_select')}</Button>
<Button shape="round" href={getProductLink(ImmichProduct.Client)} fullWidth>{$t('purchase_button_select')}</Button>
</div>
</div>

4
web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
import { Button } from '@immich/ui';
import { mdiPartyPopper } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -29,6 +29,6 @@
</div>
<div class="mt-6 w-full">
<Button fullwidth onclick={onDone}>{$t('ok')}</Button>
<Button fullWidth shape="round" onclick={onDone}>{$t('ok')}</Button>
</div>
</div>

5
web/src/lib/components/shared-components/purchasing/purchase-content.svelte
View file

@ -1,10 +1,9 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { purchaseStore } from '$lib/stores/purchase.store';
import { handleError } from '$lib/utils/handle-error';
import { activateProduct, getActivationKey } from '$lib/utils/license-utils';
import { Heading } from '@immich/ui';
import { Button, Heading } from '@immich/ui';
import { t } from 'svelte-i18n';
import UserPurchaseOptionCard from './individual-purchase-option-card.svelte';
import ServerPurchaseOptionCard from './server-purchase-option-card.svelte';
@ -74,7 +73,7 @@
placeholder="IMCL-0KEY-0CAN-00BE-FOUD-FROM-YOUR-EMAIL-INBX"
disabled={isLoading}
/>
<Button type="submit" rounded="lg"
<Button type="submit"
>{#if isLoading}
<LoadingSpinner />
{:else}

4
web/src/lib/components/shared-components/purchasing/server-purchase-option-card.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { ImmichProduct } from '$lib/constants';
import { getLicenseLink } from '$lib/utils/license-utils';
import { Button } from '@immich/ui';
import { mdiCheckCircleOutline, mdiServer } from '@mdi/js';
import { t } from 'svelte-i18n';
</script>
@ -39,6 +39,6 @@
</div>
</div>
<Button href={getLicenseLink(ImmichProduct.Server)} fullwidth>{$t('purchase_button_select')}</Button>
<Button shape="round" href={getLicenseLink(ImmichProduct.Server)} fullWidth>{$t('purchase_button_select')}</Button>
</div>
</div>

17
web/src/lib/components/shared-components/search-bar/search-people-section.svelte
View file

@ -1,13 +1,12 @@
<script lang="ts">
import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
import Button from '$lib/components/elements/buttons/button.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import SingleGridRow from '$lib/components/shared-components/single-grid-row.svelte';
import { getPeopleThumbnailUrl } from '$lib/utils';
import { handleError } from '$lib/utils/handle-error';
import { getAllPeople, type PersonResponseDto } from '@immich/sdk';
import { Button } from '@immich/ui';
import { mdiArrowRight, mdiClose } from '@mdi/js';
import { t } from 'svelte-i18n';
import type { SvelteSet } from 'svelte/reactivity';
@ -92,18 +91,14 @@
{#if showAllPeople || people.length > peopleList.length}
<div class="flex justify-center mt-2">
<Button
shadow={false}
color="text-primary"
color="primary"
variant="ghost"
shape="round"
leadingIcon={showAllPeople ? mdiClose : mdiArrowRight}
class="flex gap-2 place-items-center"
onclick={() => (showAllPeople = !showAllPeople)}
>
{#if showAllPeople}
<span><Icon path={mdiClose} ariaHidden /></span>
{$t('collapse')}
{:else}
<span><Icon path={mdiArrowRight} ariaHidden /></span>
{$t('see_all_people')}
{/if}
{showAllPeople ? $t('collapse') : $t('see_all_people')}
</Button>
</div>
{/if}

8
web/src/lib/components/shared-components/version-announcement-box.svelte
View file

@ -1,10 +1,10 @@
<script lang="ts">
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import { websocketStore } from '$lib/stores/websocket';
import type { ServerVersionResponseDto } from '@immich/sdk';
import Button from '../elements/buttons/button.svelte';
import FullScreenModal from './full-screen-modal.svelte';
import { Button } from '@immich/ui';
import { t } from 'svelte-i18n';
import FormatMessage from '$lib/components/i18n/format-message.svelte';
import FullScreenModal from './full-screen-modal.svelte';
let showModal = $state(false);
@ -65,7 +65,7 @@
</div>
{#snippet stickyBottom()}
<Button fullwidth onclick={onAcknowledge}>{$t('acknowledge')}</Button>
<Button fullWidth shape="round" onclick={onAcknowledge}>{$t('acknowledge')}</Button>
{/snippet}
</FullScreenModal>
{/if}