mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
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
GitHub
parent
2d7a94ce23
commit
996ffed5eb
9 changed files with 51 additions and 46 deletions
|
|
@ -91,7 +91,7 @@
|
|||
|
||||
{#if $featureFlags.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>
|
||||
{/if}
|
||||
|
||||
|
|
@ -105,7 +105,7 @@
|
|||
</Field>
|
||||
|
||||
<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 label={$t('name')} required>
|
||||
|
|
|
|||
|
|
@ -29,19 +29,19 @@
|
|||
<FullScreenModal title={$t('map_settings')} {onClose}>
|
||||
<Stack gap={4}>
|
||||
<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 label={$t('only_favorites')}>
|
||||
<Switch bind:checked={settings.onlyFavorites} class="flex justify-between items-center text-sm" />
|
||||
<Switch bind:checked={settings.onlyFavorites} />
|
||||
</Field>
|
||||
<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 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 label={$t('include_shared_albums')}>
|
||||
<Switch bind:checked={settings.withSharedAlbums} class="flex justify-between items-center text-sm" />
|
||||
<Switch bind:checked={settings.withSharedAlbums} />
|
||||
</Field>
|
||||
|
||||
{#if customDateRange}
|
||||
|
|
|
|||
|
|
@ -503,12 +503,11 @@
|
|||
class:opacity-0={galleryInView}
|
||||
class:opacity-100={!galleryInView}
|
||||
>
|
||||
<div class="flex">
|
||||
<div class="flex items-center">
|
||||
<IconButton
|
||||
icon={isSaved ? mdiHeart : mdiHeartOutline}
|
||||
shape="round"
|
||||
variant="ghost"
|
||||
size="giant"
|
||||
color="secondary"
|
||||
aria-label={isSaved ? $t('unfavorite') : $t('favorite')}
|
||||
onclick={() => handleSaveMemory(current)}
|
||||
|
|
@ -524,9 +523,11 @@
|
|||
/> -->
|
||||
<ButtonContextMenu
|
||||
icon={mdiDotsVertical}
|
||||
padding="3"
|
||||
title={$t('menu')}
|
||||
onclick={() => handleAction('pause')}
|
||||
direction="left"
|
||||
size="20"
|
||||
align="bottom-right"
|
||||
class="text-white dark:text-white"
|
||||
>
|
||||
|
|
@ -548,7 +549,6 @@
|
|||
color="secondary"
|
||||
variant="ghost"
|
||||
shape="round"
|
||||
size="giant"
|
||||
class="text-white dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -186,7 +186,6 @@
|
|||
shape="round"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
size="large"
|
||||
icon={mdiKeyboard}
|
||||
title={$t('show_keyboard_shortcuts')}
|
||||
onclick={() => (isShowKeyboardShortcut = !isShowKeyboardShortcut)}
|
||||
|
|
|
|||
|
|
@ -222,7 +222,7 @@
|
|||
{#if !immichUser.deletedAt}
|
||||
<IconButton
|
||||
shape="round"
|
||||
size="large"
|
||||
size="small"
|
||||
icon={mdiPencilOutline}
|
||||
title={$t('edit_user')}
|
||||
onclick={() => editUserHandler(immichUser)}
|
||||
|
|
@ -231,7 +231,7 @@
|
|||
{#if immichUser.id !== $user.id}
|
||||
<IconButton
|
||||
shape="round"
|
||||
size="large"
|
||||
size="small"
|
||||
icon={mdiTrashCanOutline}
|
||||
title={$t('delete_user')}
|
||||
onclick={() => deleteUserHandler(immichUser)}
|
||||
|
|
@ -242,7 +242,7 @@
|
|||
{#if immichUser.deletedAt && immichUser.status === UserStatus.Deleted}
|
||||
<IconButton
|
||||
shape="round"
|
||||
size="large"
|
||||
size="small"
|
||||
icon={mdiDeleteRestore}
|
||||
title={$t('admin.user_restore_scheduled_removal', {
|
||||
values: { date: getDeleteDate(immichUser.deletedAt) },
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue