sascha
/
immich
mirror of https://github.com/immich-app/immich.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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>
pull/16838/head
Jason Rasmussen 2025-03-12 17:25:27 +07: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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/package-lock.json generated
Unescape Escape View File

@ -11,7 +11,7 @@
"dependencies": { "dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8", "@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk", "@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.17.0", "@immich/ui": "^0.17.3",
"@mapbox/mapbox-gl-rtl-text": "0.2.3", "@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47", "@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5", "@photo-sphere-viewer/core": "^5.11.5",
@ -87,7 +87,7 @@
"@oazapfts/runtime": "^1.0.2" "@oazapfts/runtime": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.13.5", "@types/node": "^22.13.9",
"typescript": "^5.3.3" "typescript": "^5.3.3"
} }
}, },
@ -1322,9 +1322,9 @@
"link": true "link": true
}, },
"node_modules/@immich/ui": { "node_modules/@immich/ui": {
"version": "0.17.1", "version": "0.17.3",
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.17.1.tgz", "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.17.3.tgz",
"integrity": "sha512-VB8a4t09paza6QoUnGtOsFG/XcjBfRqSiPsG2eUKRIavlpBYuNB5INZXV/207EfWX9TVnQND7ZitdTi39bZDvg==", "integrity": "sha512-oZ8lJCa/bC+HQYxi4Qi7syW4jWpyyGM4Mue55cvXCECj+292Mu4aOC6oDt7617vMPF7kPblE2A7CpGqJxy5T8g==",
"license": "GNU Affero General Public License version 3", "license": "GNU Affero General Public License version 3",
"dependencies": { "dependencies": {
"@mdi/js": "^7.4.47", "@mdi/js": "^7.4.47",

2
web/package.json
Unescape Escape View File

@ -68,7 +68,7 @@
"dependencies": { "dependencies": {
"@formatjs/icu-messageformat-parser": "^2.9.8", "@formatjs/icu-messageformat-parser": "^2.9.8",
"@immich/sdk": "file:../open-api/typescript-sdk", "@immich/sdk": "file:../open-api/typescript-sdk",
"@immich/ui": "^0.17.0", "@immich/ui": "^0.17.3",
"@mapbox/mapbox-gl-rtl-text": "0.2.3", "@mapbox/mapbox-gl-rtl-text": "0.2.3",
"@mdi/js": "^7.4.47", "@mdi/js": "^7.4.47",
"@photo-sphere-viewer/core": "^5.11.5", "@photo-sphere-viewer/core": "^5.11.5",

4
web/src/lib/components/forms/create-user-form.svelte
Unescape Escape View File

@ -91,7 +91,7 @@
{#if $featureFlags.email} {#if $featureFlags.email}
<Field label={$t('admin.send_welcome_email')}> <Field label={$t('admin.send_welcome_email')}>
<Switch id="send-welcome-email" bind:checked={notify} class="flex justify-between text-sm" /> <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
</Field> </Field>
{/if} {/if}
@ -105,7 +105,7 @@
</Field> </Field>
<Field label={$t('admin.require_password_change_on_login')}> <Field label={$t('admin.require_password_change_on_login')}>
<Switch id="require-password-change" bind:checked={shouldChangePassword} class="flex justify-between text-sm" /> <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm" />
</Field> </Field>
<Field label={$t('name')} required> <Field label={$t('name')} required>

10
web/src/lib/components/map-page/map-settings-modal.svelte
Unescape Escape View File

@ -29,19 +29,19 @@
<FullScreenModal title={$t('map_settings')} {onClose}> <FullScreenModal title={$t('map_settings')} {onClose}>
<Stack gap={4}> <Stack gap={4}>
<Field label={$t('allow_dark_mode')}> <Field label={$t('allow_dark_mode')}>
<Switch bind:checked={settings.allowDarkMode} class="flex justify-between items-center text-sm" /> <Switch bind:checked={settings.allowDarkMode} />
</Field> </Field>
<Field label={$t('only_favorites')}> <Field label={$t('only_favorites')}>
<Switch bind:checked={settings.onlyFavorites} class="flex justify-between items-center text-sm" /> <Switch bind:checked={settings.onlyFavorites} />
</Field> </Field>
<Field label={$t('include_archived')}> <Field label={$t('include_archived')}>
<Switch bind:checked={settings.includeArchived} class="flex justify-between items-center text-sm" /> <Switch bind:checked={settings.includeArchived} />
</Field> </Field>
<Field label={$t('include_shared_partner_assets')}> <Field label={$t('include_shared_partner_assets')}>
<Switch bind:checked={settings.withPartners} class="flex justify-between items-center text-sm" /> <Switch bind:checked={settings.withPartners} />
</Field> </Field>
<Field label={$t('include_shared_albums')}> <Field label={$t('include_shared_albums')}>
<Switch bind:checked={settings.withSharedAlbums} class="flex justify-between items-center text-sm" /> <Switch bind:checked={settings.withSharedAlbums} />
</Field> </Field>
{#if customDateRange} {#if customDateRange}

6
web/src/lib/components/memory-page/memory-viewer.svelte
Unescape Escape View File

@ -503,12 +503,11 @@
class:opacity-0={galleryInView} class:opacity-0={galleryInView}
class:opacity-100={!galleryInView} class:opacity-100={!galleryInView}
> >
<div class="flex"> <div class="flex items-center">
<IconButton <IconButton
icon={isSaved ? mdiHeart : mdiHeartOutline} icon={isSaved ? mdiHeart : mdiHeartOutline}
shape="round" shape="round"
variant="ghost" variant="ghost"
size="giant"
color="secondary" color="secondary"
aria-label={isSaved ? $t('unfavorite') : $t('favorite')} aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
onclick={() => handleSaveMemory(current)} onclick={() => handleSaveMemory(current)}
@ -524,9 +523,11 @@
/> --> /> -->
<ButtonContextMenu <ButtonContextMenu
icon={mdiDotsVertical} icon={mdiDotsVertical}
padding="3"
title={$t('menu')} title={$t('menu')}
onclick={() => handleAction('pause')} onclick={() => handleAction('pause')}
direction="left" direction="left"
size="20"
align="bottom-right" align="bottom-right"
class="text-white dark:text-white" class="text-white dark:text-white"
> >
@ -548,7 +549,6 @@
color="secondary" color="secondary"
variant="ghost" variant="ghost"
shape="round" shape="round"
size="giant"
class="text-white dark:text-white" class="text-white dark:text-white"
/> />
</div> </div>

3
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
Unescape Escape View File

@ -256,14 +256,13 @@
<QRCode value={sharedLink} width={modalWidth} /> <QRCode value={sharedLink} width={modalWidth} />
</div> </div>
</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" /> <Input bind:value={sharedLink} disabled class="flex flex-row" />
<div> <div>
<IconButton <IconButton
variant="ghost" variant="ghost"
shape="round" shape="round"
color="secondary" color="secondary"
size="large"
icon={mdiContentCopy} icon={mdiContentCopy}
onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')} onclick={() => (sharedLink ? copyToClipboard(sharedLink) : '')}
aria-label={$t('copy_link_to_clipboard')} aria-label={$t('copy_link_to_clipboard')}

55
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
Unescape Escape View File

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

1
web/src/routes/(user)/utilities/duplicates/[[photos=photos]]/[[assetId=id]]/+page.svelte
Unescape Escape View File

@ -186,7 +186,6 @@
shape="round" shape="round"
variant="ghost" variant="ghost"
color="secondary" color="secondary"
size="large"
icon={mdiKeyboard} icon={mdiKeyboard}
title={$t('show_keyboard_shortcuts')} title={$t('show_keyboard_shortcuts')}
onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)} onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}

6
web/src/routes/admin/user-management/+page.svelte
Unescape Escape View File

@ -222,7 +222,7 @@
{#if !immichUser.deletedAt} {#if !immichUser.deletedAt}
<IconButton <IconButton
shape="round" shape="round"
size="large" size="small"
icon={mdiPencilOutline} icon={mdiPencilOutline}
title={$t('edit_user')} title={$t('edit_user')}
onclick={() => editUserHandler(immichUser)} onclick={() => editUserHandler(immichUser)}
@ -231,7 +231,7 @@
{#if immichUser.id !== $user.id} {#if immichUser.id !== $user.id}
<IconButton <IconButton
shape="round" shape="round"
size="large" size="small"
icon={mdiTrashCanOutline} icon={mdiTrashCanOutline}
title={$t('delete_user')} title={$t('delete_user')}
onclick={() => deleteUserHandler(immichUser)} onclick={() => deleteUserHandler(immichUser)}
@ -242,7 +242,7 @@
{#if immichUser.deletedAt && immichUser.status === UserStatus.Deleted} {#if immichUser.deletedAt && immichUser.status === UserStatus.Deleted}
<IconButton <IconButton
shape="round" shape="round"
size="large" size="small"
icon={mdiDeleteRestore} icon={mdiDeleteRestore}
title={$t('admin.user_restore_scheduled_removal', { title={$t('admin.user_restore_scheduled_removal', {
values: { date: getDeleteDate(immichUser.deletedAt) }, values: { date: getDeleteDate(immichUser.deletedAt) },