fix: immich ui toggles and switches (#16834)

* fix: immich ui toggles and switches

* Update web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

Co-authored-by: Alex <alex.tran1502@gmail.com>

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Jason Rasmussen 2025-03-12 17:25:27 -04:00 committed by GitHub
parent 2d7a94ce23
commit 996ffed5eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 51 additions and 46 deletions

View file

@ -256,14 +256,13 @@
<QRCode value={sharedLink} width={modalWidth} />
</div>
</div>
<HStack class="w-full p-3">
<HStack class="w-full pt-3" gap={1}>
<Input bind:value={sharedLink} disabled class="flex flex-row" />
<div>
<IconButton
variant="ghost"
shape="round"
color="secondary"
size="large"
icon={mdiContentCopy}
onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}
aria-label={$t('copy_link_to_clipboard')}

View file

@ -1,7 +1,6 @@
<script lang="ts">
import { page } from '$app/state';
import { clickOutside } from '$lib/actions/click-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
import ImmichLogo from '$lib/components/shared-components/immich-logo.svelte';
@ -68,14 +67,40 @@
<section class="flex place-items-center justify-end gap-1 md:gap-2 w-full sm:w-auto">
{#if $featureFlags.search}
<CircleIconButton
<IconButton
color="secondary"
shape="round"
variant="ghost"
size="large"
icon={mdiMagnify}
href={AppRoute.SEARCH}
id="search-button"
class="sm:hidden"
title={$t('go_to_search')}
icon={mdiMagnify}
padding="2"
onclick={() => {}}
aria-label={$t('go_to_search')}
/>
{/if}
{#if !page.url.pathname.includes('/admin') && showUploadButton}
<Button
leadingIcon={mdiTrayArrowUp}
onclick={onUploadClick}
class="hidden lg:flex"
variant="ghost"
size="medium"
color="secondary"
>{$t('upload')}
</Button>
<IconButton
color="secondary"
shape="round"
variant="ghost"
size="large"
onclick={onUploadClick}
title={$t('upload')}
aria-label={$t('upload')}
icon={mdiTrayArrowUp}
class="lg:hidden"
/>
{/if}
@ -90,7 +115,7 @@
shape="round"
color="secondary"
variant="ghost"
size="giant"
size="large"
title={$t('support_and_feedback')}
icon={mdiHelpCircleOutline}
onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
@ -98,24 +123,6 @@
/>
</div>
{#if !page.url.pathname.includes('/admin') && showUploadButton}
<Button
leadingIcon={mdiTrayArrowUp}
onclick={onUploadClick}
class="hidden lg:flex"
variant="ghost"
color="secondary"
>{$t('upload')}
</Button>
<CircleIconButton
onclick={onUploadClick}
title={$t('upload')}
icon={mdiTrayArrowUp}
class="lg:hidden"
padding="2"
/>
{/if}
<div
use:clickOutside={{
onOutclick: () => (shouldShowAccountInfoPanel = false),