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 1

refactor: replace link-button component with immich-ui buttons (#15374)

Browse source 
* refactor: replace link-button component with immich-ui buttons

* minor styling tweak

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen 2025-01-16 11:03:04 -05:00 • committed by GitHub
parent 378bd3c993
commit 3a2bf91889
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 385 additions and 383 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,21 +1,20 @@
<script lang="ts">
import Button from '$lib/components/elements/buttons/button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import Icon from '$lib/components/elements/icon.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';
import { locale } from '$lib/stores/preferences.store';
import { serverConfig } from '$lib/stores/server-config.store';
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 { mdiContentCopy, mdiLink } from '@mdi/js';
import { DateTime, Duration } from 'luxon';
import { t } from 'svelte-i18n';
import { NotificationType, notificationController } from '../notification/notification';
import SettingInputField from '../settings/setting-input-field.svelte';
import SettingSwitch from '../settings/setting-switch.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { t } from 'svelte-i18n';
import { locale } from '$lib/stores/preferences.store';
import { DateTime, Duration } from 'luxon';
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
import { SettingInputFieldType } from '$lib/constants';
interface Props {
onClose: () => void;
@ -243,14 +242,18 @@
<Button size="sm" fullwidth onclick={handleCreateSharedLink}>{$t('create_link')}</Button>
{/if}
{:else}
<div class="flex w-full gap-2">
<input class="immich-form-input w-full" bind:value={sharedLink} disabled />
<LinkButton onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}>
<div class="flex place-items-center gap-2 text-sm">
<Icon path={mdiContentCopy} ariaLabel={$t('copy_link_to_clipboard')} size="18" />
</div>
</LinkButton>
</div>
<HStack class="w-full">
<Input bind:value={sharedLink} disabled class="flex flex-row" />
<IconButton
variant="ghost"
shape="round"
color="secondary"
size="giant"
icon={mdiContentCopy}
onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}
aria-label={$t('copy_link_to_clipboard')}
/>
</HStack>
{/if}
{/snippet}
</FullScreenModal>

24
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -2,25 +2,25 @@
import { page } from '$app/state';
import { clickOutside } from '$lib/actions/click-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import { AppRoute } from '$lib/constants';
import { featureFlags } from '$lib/stores/server-config.store';
import { user } from '$lib/stores/user.store';
import { userInteraction } from '$lib/stores/user.svelte';
import { handleLogout } from '$lib/utils/auth';
import { getAboutInfo, logout, type ServerAboutResponseDto } from '@immich/sdk';
import { Button, IconButton } from '@immich/ui';
import { mdiHelpCircleOutline, mdiMagnify, mdiTrayArrowUp } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import { AppRoute } from '$lib/constants';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
import ThemeButton from '../theme-button.svelte';
import UserAvatar from '../user-avatar.svelte';
import AccountInfoPanel from './account-info-panel.svelte';
import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
import { onMount } from 'svelte';
interface Props {
showUploadButton?: boolean;
@ -87,22 +87,24 @@
onEscape: () => (shouldShowHelpPanel = false),
}}
>
<CircleIconButton
id="support-feedback-button"
<IconButton
shape="round"
color="secondary"
variant="ghost"
size="large"
title={$t('support_and_feedback')}
icon={mdiHelpCircleOutline}
onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
padding="1"
/>
</div>
{#if !page.url.pathname.includes('/admin') && showUploadButton}
<LinkButton onclick={onUploadClick} class="hidden lg:block">
<Button onclick={onUploadClick} class="hidden lg:block" variant="ghost" color="secondary">
<div class="flex gap-2">
<Icon path={mdiTrayArrowUp} size="1.5em" />
<span>{$t('upload')}</span>
</div>
</LinkButton>
</Button>
<CircleIconButton
onclick={onUploadClick}
title={$t('upload')}