mirror of
https://github.com/immich-app/immich.git
synced 2025-05-24 01:12:58 -04:00
chore: tailwindcss v4 and z-war clean up (#18358)
* chore: styling tweak * replace full-screen-modal, update docs * scrubber * fix: control app bar in memory viewer * face lift * pr feedback * clean up
This commit is contained in:
Alex
GitHub
parent
2431e04a09
commit
c8641d24f6
@ -75,11 +75,12 @@ npm run dev
|
|||||||
To see local changes to `@immich/ui` in Immich, do the following:
|
To see local changes to `@immich/ui` in Immich, do the following:
|
||||||
|
|
||||||
1. Install `@immich/ui` as a sibling to `immich/`, for example `/home/user/immich` and `/home/user/ui`
|
1. Install `@immich/ui` as a sibling to `immich/`, for example `/home/user/immich` and `/home/user/ui`
|
||||||
1. Build the `@immich/ui` project via `npm run build`
|
2. Build the `@immich/ui` project via `npm run build`
|
||||||
1. Uncomment the corresponding volume in web service of the `docker/docker-compose.dev.yaml` file (`../../ui:/usr/ui`)
|
3. Uncomment the corresponding volume in web service of the `docker/docker-compose.dev.yaml` file (`../../ui:/usr/ui`)
|
||||||
1. Uncomment the corresponding alias in the `web/vite.config.js` file (`'@immich/ui': path.resolve(\_\_dirname, '../../ui')`)
|
4. Uncomment the corresponding alias in the `web/vite.config.js` file (`'@immich/ui': path.resolve(\_\_dirname, '../../ui')`)
|
||||||
1. Start up the stack via `make dev`
|
5. Uncomment the import statement in `web/src/app.css` file `@import '/usr/ui/dist/theme/default.css';` and comment out `@import '@immich/ui/theme/default.css';`
|
||||||
1. After making changes in `@immich/ui`, rebuild it (`npm run build`)
|
6. Start up the stack via `make dev`
|
||||||
|
7. After making changes in `@immich/ui`, rebuild it (`npm run build`)
|
||||||
|
|
||||||
### Mobile app
|
### Mobile app
|
||||||
|
|
||||||
|
|||||||
24
web/package-lock.json
generated
24
web/package-lock.json
generated
@ -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.22.0",
|
"@immich/ui": "^0.22.1",
|
||||||
"@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",
|
||||||
@ -1341,15 +1341,15 @@
|
|||||||
"link": true
|
"link": true
|
||||||
},
|
},
|
||||||
"node_modules/@immich/ui": {
|
"node_modules/@immich/ui": {
|
||||||
"version": "0.22.0",
|
"version": "0.22.1",
|
||||||
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.0.tgz",
|
"resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.22.1.tgz",
|
||||||
"integrity": "sha512-bBx9hPy7/VECZPcEiBGty6Lu9jmD4vJf6VL2ud+LHLQcpZebv4FVFZzzVFf7ctBwooYJWTEfWZTPNgAo0rbQtQ==",
|
"integrity": "sha512-/QdqctBit+eX8QZgTL4PlgS7l6/NCGXeDjR6kQNLOVBPhbjkmtwqsvZ+RymYClcHAEhutXOKRhnlQU9mNLC/SA==",
|
||||||
"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",
|
||||||
"bits-ui": "^1.0.0-next.46",
|
"bits-ui": "^1.0.0-next.46",
|
||||||
"tailwind-merge": "^2.5.4",
|
"tailwind-merge": "^2.5.4",
|
||||||
"tailwind-variants": "^0.3.0"
|
"tailwind-variants": "^1.0.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"svelte": "^5.0.0"
|
"svelte": "^5.0.0"
|
||||||
@ -9479,12 +9479,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/tailwind-variants": {
|
"node_modules/tailwind-variants": {
|
||||||
"version": "0.3.1",
|
"version": "1.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-1.0.0.tgz",
|
||||||
"integrity": "sha512-krn67M3FpPwElg4FsZrOQd0U26o7UDH/QOkK8RNaiCCrr052f6YJPBUfNKnPo/s/xRzNPtv1Mldlxsg8Tb46BQ==",
|
"integrity": "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"tailwind-merge": "2.5.4"
|
"tailwind-merge": "3.0.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=16.x",
|
"node": ">=16.x",
|
||||||
@ -9495,9 +9495,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/tailwind-variants/node_modules/tailwind-merge": {
|
"node_modules/tailwind-variants/node_modules/tailwind-merge": {
|
||||||
"version": "2.5.4",
|
"version": "3.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
|
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.0.2.tgz",
|
||||||
"integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
|
"integrity": "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"funding": {
|
"funding": {
|
||||||
"type": "github",
|
"type": "github",
|
||||||
|
|||||||
@ -28,7 +28,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.22.0",
|
"@immich/ui": "^0.22.1",
|
||||||
"@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",
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
@import 'tailwindcss';
|
@import 'tailwindcss';
|
||||||
@import '@immich/ui/theme/default.css';
|
@import '@immich/ui/theme/default.css';
|
||||||
|
/* @import '/usr/ui/dist/theme/default.css'; */
|
||||||
|
|
||||||
@config '../tailwind.config.js';
|
@config '../tailwind.config.js';
|
||||||
|
|
||||||
|
|||||||
@ -30,7 +30,7 @@
|
|||||||
<div class="relative mx-auto font-mono text-2xl font-semibold">
|
<div class="relative mx-auto font-mono text-2xl font-semibold">
|
||||||
<span class="text-gray-400 dark:text-gray-600">{zeros()}</span><span>{value}</span>
|
<span class="text-gray-400 dark:text-gray-600">{zeros()}</span><span>{value}</span>
|
||||||
{#if unit}
|
{#if unit}
|
||||||
<Code color="muted" class="absolute -top-5 end-2 font-light">{unit}</Code>
|
<Code color="muted" class="absolute -top-5 end-1 font-light">{unit}</Code>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Icon from '$lib/components/elements/icon.svelte';
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
import FormatMessage from '$lib/components/i18n/format-message.svelte';
|
import FormatMessage from '$lib/components/i18n/format-message.svelte';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||||
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
|
import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
|
||||||
import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
|
import SettingTextarea from '$lib/components/shared-components/settings/setting-textarea.svelte';
|
||||||
import { handleError } from '$lib/utils/handle-error';
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
|
import { type SystemConfigDto, type SystemConfigTemplateEmailsDto, getNotificationTemplateAdmin } from '@immich/sdk';
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody } from '@immich/ui';
|
||||||
import { mdiEyeOutline } from '@mdi/js';
|
import { mdiEyeOutline } from '@mdi/js';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
@ -112,15 +111,17 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if htmlPreview}
|
{#if htmlPreview}
|
||||||
<FullScreenModal title={$t('admin.template_email_preview')} onClose={closePreviewModal} width="wide">
|
<Modal title={$t('admin.template_email_preview')} onClose={closePreviewModal} size="medium">
|
||||||
<div style="position:relative; width:100%; height:90vh; overflow: hidden">
|
<ModalBody>
|
||||||
<iframe
|
<div style="position:relative; width:100%; height:90vh; overflow: hidden">
|
||||||
title={$t('admin.template_email_preview')}
|
<iframe
|
||||||
srcdoc={htmlPreview}
|
title={$t('admin.template_email_preview')}
|
||||||
style="width: 100%; height: 100%; border: none; overflow:hidden; position: absolute; top: 0; left: 0;"
|
srcdoc={htmlPreview}
|
||||||
></iframe>
|
style="width: 100%; height: 100%; border: none; overflow:hidden; position: absolute; top: 0; left: 0;"
|
||||||
</div>
|
></iframe>
|
||||||
</FullScreenModal>
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
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 CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import type Map from '$lib/components/shared-components/map/map.svelte';
|
import type Map from '$lib/components/shared-components/map/map.svelte';
|
||||||
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
import Portal from '$lib/components/shared-components/portal/portal.svelte';
|
||||||
import { timeToLoadTheMap } from '$lib/constants';
|
import { timeToLoadTheMap } from '$lib/constants';
|
||||||
@ -11,7 +10,7 @@
|
|||||||
import { delay } from '$lib/utils/asset-utils';
|
import { delay } from '$lib/utils/asset-utils';
|
||||||
import { navigate } from '$lib/utils/navigation';
|
import { navigate } from '$lib/utils/navigation';
|
||||||
import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
|
import { getAlbumInfo, type AlbumResponseDto, type MapMarkerResponseDto } from '@immich/sdk';
|
||||||
import { LoadingSpinner } from '@immich/ui';
|
import { LoadingSpinner, Modal, ModalBody } from '@immich/ui';
|
||||||
import { mdiMapOutline } from '@mdi/js';
|
import { mdiMapOutline } from '@mdi/js';
|
||||||
import { onDestroy, onMount } from 'svelte';
|
import { onDestroy, onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
@ -112,31 +111,33 @@
|
|||||||
|
|
||||||
{#if albumMapViewManager.isInMapView}
|
{#if albumMapViewManager.isInMapView}
|
||||||
<div use:clickOutside={{ onOutclick: closeMap }}>
|
<div use:clickOutside={{ onOutclick: closeMap }}>
|
||||||
<FullScreenModal title={$t('map')} width="wide" onClose={closeMap}>
|
<Modal title={$t('map')} size="medium" onClose={closeMap}>
|
||||||
<div class="flex flex-col w-full h-full gap-2">
|
<ModalBody>
|
||||||
<div class="h-[500px] min-h-[300px] w-full">
|
<div class="flex flex-col w-full h-full gap-2 border border-gray-300 dark:border-light rounded-2xl">
|
||||||
{#await import('../shared-components/map/map.svelte')}
|
<div class="h-[500px] min-h-[300px] w-full">
|
||||||
{#await delay(timeToLoadTheMap) then}
|
{#await import('../shared-components/map/map.svelte')}
|
||||||
<!-- show the loading spinner only if loading the map takes too much time -->
|
{#await delay(timeToLoadTheMap) then}
|
||||||
<div class="flex items-center justify-center h-full w-full">
|
<!-- show the loading spinner only if loading the map takes too much time -->
|
||||||
<LoadingSpinner />
|
<div class="flex items-center justify-center h-full w-full">
|
||||||
</div>
|
<LoadingSpinner />
|
||||||
|
</div>
|
||||||
|
{/await}
|
||||||
|
{:then { default: Map }}
|
||||||
|
<Map
|
||||||
|
bind:this={mapElement}
|
||||||
|
center={undefined}
|
||||||
|
{zoom}
|
||||||
|
clickable={false}
|
||||||
|
bind:mapMarkers
|
||||||
|
onSelect={onViewAssets}
|
||||||
|
showSettings={false}
|
||||||
|
rounded
|
||||||
|
/>
|
||||||
{/await}
|
{/await}
|
||||||
{:then { default: Map }}
|
</div>
|
||||||
<Map
|
|
||||||
bind:this={mapElement}
|
|
||||||
center={undefined}
|
|
||||||
{zoom}
|
|
||||||
clickable={false}
|
|
||||||
bind:mapMarkers
|
|
||||||
onSelect={onViewAssets}
|
|
||||||
showSettings={false}
|
|
||||||
rounded
|
|
||||||
/>
|
|
||||||
{/await}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ModalBody>
|
||||||
</FullScreenModal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Portal target="body">
|
<Portal target="body">
|
||||||
|
|||||||
@ -2,7 +2,6 @@
|
|||||||
import Icon from '$lib/components/elements/icon.svelte';
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
||||||
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
|
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
|
||||||
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
|
import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
|
||||||
@ -16,6 +15,7 @@
|
|||||||
type AlbumResponseDto,
|
type AlbumResponseDto,
|
||||||
type UserResponseDto,
|
type UserResponseDto,
|
||||||
} from '@immich/sdk';
|
} from '@immich/sdk';
|
||||||
|
import { Modal, ModalBody } from '@immich/ui';
|
||||||
import { mdiArrowDownThin, mdiArrowUpThin, mdiDotsVertical, mdiPlus } from '@mdi/js';
|
import { mdiArrowDownThin, mdiArrowUpThin, mdiDotsVertical, mdiPlus } from '@mdi/js';
|
||||||
import { findKey } from 'lodash-es';
|
import { findKey } from 'lodash-es';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
@ -115,79 +115,81 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if !selectedRemoveUser}
|
{#if !selectedRemoveUser}
|
||||||
<FullScreenModal title={$t('options')} {onClose}>
|
<Modal title={$t('options')} {onClose} size="small">
|
||||||
<div class="items-center justify-center">
|
<ModalBody>
|
||||||
<div class="py-2">
|
<div class="items-center justify-center">
|
||||||
<h2 class="text-gray text-sm mb-2">{$t('settings').toUpperCase()}</h2>
|
<div class="py-2">
|
||||||
<div class="grid p-2 gap-y-2">
|
<h2 class="text-gray text-sm mb-2">{$t('settings').toUpperCase()}</h2>
|
||||||
{#if order}
|
<div class="grid p-2 gap-y-2">
|
||||||
<SettingDropdown
|
{#if order}
|
||||||
title={$t('display_order')}
|
<SettingDropdown
|
||||||
options={Object.values(options)}
|
title={$t('display_order')}
|
||||||
selectedOption={options[order]}
|
options={Object.values(options)}
|
||||||
onToggle={handleToggle}
|
selectedOption={options[order]}
|
||||||
|
onToggle={handleToggle}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<SettingSwitch
|
||||||
|
title={$t('comments_and_likes')}
|
||||||
|
subtitle={$t('let_others_respond')}
|
||||||
|
checked={album.isActivityEnabled}
|
||||||
|
onToggle={onToggleEnabledActivity}
|
||||||
/>
|
/>
|
||||||
{/if}
|
|
||||||
<SettingSwitch
|
|
||||||
title={$t('comments_and_likes')}
|
|
||||||
subtitle={$t('let_others_respond')}
|
|
||||||
checked={album.isActivityEnabled}
|
|
||||||
onToggle={onToggleEnabledActivity}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="py-2">
|
|
||||||
<div class="text-gray text-sm mb-3">{$t('people').toUpperCase()}</div>
|
|
||||||
<div class="p-2">
|
|
||||||
<button type="button" class="flex items-center gap-2" onclick={onShowSelectSharedUser}>
|
|
||||||
<div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
|
|
||||||
<div><Icon path={mdiPlus} size="25" /></div>
|
|
||||||
</div>
|
|
||||||
<div>{$t('invite_people')}</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="flex items-center gap-2 py-2 mt-2">
|
|
||||||
<div>
|
|
||||||
<UserAvatar {user} size="md" />
|
|
||||||
</div>
|
|
||||||
<div class="w-full">{user.name}</div>
|
|
||||||
<div>{$t('owner')}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="py-2">
|
||||||
|
<div class="text-gray text-sm mb-3">{$t('people').toUpperCase()}</div>
|
||||||
|
<div class="p-2">
|
||||||
|
<button type="button" class="flex items-center gap-2" onclick={onShowSelectSharedUser}>
|
||||||
|
<div class="rounded-full w-10 h-10 border border-gray-500 flex items-center justify-center">
|
||||||
|
<div><Icon path={mdiPlus} size="25" /></div>
|
||||||
|
</div>
|
||||||
|
<div>{$t('invite_people')}</div>
|
||||||
|
</button>
|
||||||
|
|
||||||
{#each album.albumUsers as { user, role } (user.id)}
|
<div class="flex items-center gap-2 py-2 mt-2">
|
||||||
<div class="flex items-center gap-2 py-2">
|
|
||||||
<div>
|
<div>
|
||||||
<UserAvatar {user} size="md" />
|
<UserAvatar {user} size="md" />
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full">{user.name}</div>
|
<div class="w-full">{user.name}</div>
|
||||||
{#if role === AlbumUserRole.Viewer}
|
<div>{$t('owner')}</div>
|
||||||
{$t('role_viewer')}
|
|
||||||
{:else}
|
|
||||||
{$t('role_editor')}
|
|
||||||
{/if}
|
|
||||||
{#if user.id !== album.ownerId}
|
|
||||||
<ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
|
|
||||||
{#if role === AlbumUserRole.Viewer}
|
|
||||||
<MenuOption
|
|
||||||
onClick={() => handleUpdateSharedUserRole(user, AlbumUserRole.Editor)}
|
|
||||||
text={$t('allow_edits')}
|
|
||||||
/>
|
|
||||||
{:else}
|
|
||||||
<MenuOption
|
|
||||||
onClick={() => handleUpdateSharedUserRole(user, AlbumUserRole.Viewer)}
|
|
||||||
text={$t('disallow_edits')}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
<!-- Allow deletion for non-owners -->
|
|
||||||
<MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
|
|
||||||
</ButtonContextMenu>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
|
||||||
|
{#each album.albumUsers as { user, role } (user.id)}
|
||||||
|
<div class="flex items-center gap-2 py-2">
|
||||||
|
<div>
|
||||||
|
<UserAvatar {user} size="md" />
|
||||||
|
</div>
|
||||||
|
<div class="w-full">{user.name}</div>
|
||||||
|
{#if role === AlbumUserRole.Viewer}
|
||||||
|
{$t('role_viewer')}
|
||||||
|
{:else}
|
||||||
|
{$t('role_editor')}
|
||||||
|
{/if}
|
||||||
|
{#if user.id !== album.ownerId}
|
||||||
|
<ButtonContextMenu icon={mdiDotsVertical} size="20" title={$t('options')}>
|
||||||
|
{#if role === AlbumUserRole.Viewer}
|
||||||
|
<MenuOption
|
||||||
|
onClick={() => handleUpdateSharedUserRole(user, AlbumUserRole.Editor)}
|
||||||
|
text={$t('allow_edits')}
|
||||||
|
/>
|
||||||
|
{:else}
|
||||||
|
<MenuOption
|
||||||
|
onClick={() => handleUpdateSharedUserRole(user, AlbumUserRole.Viewer)}
|
||||||
|
text={$t('disallow_edits')}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<!-- Allow deletion for non-owners -->
|
||||||
|
<MenuOption onClick={() => handleMenuRemove(user)} text={$t('remove')} />
|
||||||
|
</ButtonContextMenu>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ModalBody>
|
||||||
</FullScreenModal>
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if selectedRemoveUser}
|
{#if selectedRemoveUser}
|
||||||
|
|||||||
@ -40,7 +40,7 @@
|
|||||||
onblur={handleUpdateName}
|
onblur={handleUpdateName}
|
||||||
class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
|
class="w-[99%] mb-2 border-b-2 border-transparent text-2xl md:text-4xl lg:text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
|
||||||
? 'hover:border-gray-400'
|
? 'hover:border-gray-400'
|
||||||
: 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray"
|
: 'hover:border-transparent'} focus:border-b-2 focus:border-immich-primary focus:outline-none bg-light dark:focus:border-immich-dark-primary dark:focus:bg-immich-dark-gray placeholder:text-primary/90"
|
||||||
type="text"
|
type="text"
|
||||||
bind:value={newAlbumName}
|
bind:value={newAlbumName}
|
||||||
disabled={!isOwned}
|
disabled={!isOwned}
|
||||||
|
|||||||
@ -50,7 +50,7 @@
|
|||||||
{#each tags as tag (tag.id)}
|
{#each tags as tag (tag.id)}
|
||||||
<div class="flex group transition-all">
|
<div class="flex group transition-all">
|
||||||
<a
|
<a
|
||||||
class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary rounded-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
||||||
href={encodeURI(`${AppRoute.TAGS}/?path=${tag.value}`)}
|
href={encodeURI(`${AppRoute.TAGS}/?path=${tag.value}`)}
|
||||||
>
|
>
|
||||||
<p class="text-sm">
|
<p class="text-sm">
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
|
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import { handleError } from '$lib/utils/handle-error';
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
|
import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import { mdiRenameOutline } from '@mdi/js';
|
import { mdiRenameOutline } from '@mdi/js';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
@ -47,29 +46,33 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal icon={mdiRenameOutline} title={$t('edit_album')} width="wide" {onClose}>
|
<Modal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose}>
|
||||||
<form {onsubmit} autocomplete="off" id="edit-album-form">
|
<ModalBody>
|
||||||
<div class="flex items-center">
|
<form {onsubmit} autocomplete="off" id="edit-album-form">
|
||||||
<div class="hidden sm:flex">
|
<div class="flex items-center">
|
||||||
<AlbumCover {album} class="h-[200px] w-[200px] m-4 shadow-lg" />
|
<div class="hidden sm:flex">
|
||||||
</div>
|
<AlbumCover {album} class="h-[200px] w-[200px] m-4 shadow-lg" />
|
||||||
|
|
||||||
<div class="grow">
|
|
||||||
<div class="m-4 flex flex-col gap-2">
|
|
||||||
<label class="immich-form-label" for="name">{$t('name')}</label>
|
|
||||||
<input class="immich-form-input" id="name" type="text" bind:value={albumName} />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="m-4 flex flex-col gap-2">
|
<div class="grow">
|
||||||
<label class="immich-form-label" for="description">{$t('description')}</label>
|
<div class="m-4 flex flex-col gap-2">
|
||||||
<textarea class="immich-form-input" id="description" bind:value={description}></textarea>
|
<label class="immich-form-label" for="name">{$t('name')}</label>
|
||||||
|
<input class="immich-form-input" id="name" type="text" bind:value={albumName} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="m-4 flex flex-col gap-2">
|
||||||
|
<label class="immich-form-label" for="description">{$t('description')}</label>
|
||||||
|
<textarea class="immich-form-input" id="description" bind:value={description}></textarea>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<div class="flex gap-2 w-full">
|
||||||
|
<Button shape="round" color="secondary" fullWidth onclick={() => onCancel?.()}>{$t('cancel')}</Button>
|
||||||
|
<Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
{#snippet stickyBottom()}
|
|
||||||
<Button shape="round" color="secondary" fullWidth onclick={() => onCancel?.()}>{$t('cancel')}</Button>
|
|
||||||
<Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
|
|
||||||
{/snippet}
|
|
||||||
</FullScreenModal>
|
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import { mdiFolderRemove } from '@mdi/js';
|
import { mdiFolderRemove } from '@mdi/js';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
exclusionPattern: string;
|
exclusionPattern: string;
|
||||||
@ -42,37 +41,40 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal title={$t('add_exclusion_pattern')} icon={mdiFolderRemove} onClose={onCancel}>
|
<Modal size="small" title={$t('add_exclusion_pattern')} icon={mdiFolderRemove} onClose={onCancel}>
|
||||||
<form {onsubmit} autocomplete="off" id="add-exclusion-pattern-form">
|
<ModalBody>
|
||||||
<p class="py-5 text-sm">
|
<form {onsubmit} autocomplete="off" id="add-exclusion-pattern-form">
|
||||||
{$t('admin.exclusion_pattern_description')}
|
<p class="py-5 text-sm">
|
||||||
<br /><br />
|
{$t('admin.exclusion_pattern_description')}
|
||||||
{$t('admin.add_exclusion_pattern_description')}
|
<br /><br />
|
||||||
</p>
|
{$t('admin.add_exclusion_pattern_description')}
|
||||||
<div class="my-4 flex flex-col gap-2">
|
</p>
|
||||||
<label class="immich-form-label" for="exclusionPattern">{$t('pattern')}</label>
|
<div class="my-4 flex flex-col gap-2">
|
||||||
<input
|
<label class="immich-form-label" for="exclusionPattern">{$t('pattern')}</label>
|
||||||
class="immich-form-input"
|
<input
|
||||||
id="exclusionPattern"
|
class="immich-form-input"
|
||||||
name="exclusionPattern"
|
id="exclusionPattern"
|
||||||
type="text"
|
name="exclusionPattern"
|
||||||
bind:value={exclusionPattern}
|
type="text"
|
||||||
/>
|
bind:value={exclusionPattern}
|
||||||
</div>
|
/>
|
||||||
<div class="mt-8 flex w-full gap-4">
|
</div>
|
||||||
{#if isDuplicate}
|
<div class="mt-8 flex w-full gap-4">
|
||||||
<p class="text-red-500 text-sm">{$t('errors.exclusion_pattern_already_exists')}</p>
|
{#if isDuplicate}
|
||||||
|
<p class="text-red-500 text-sm">{$t('errors.exclusion_pattern_already_exists')}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<div class="flex gap-2 w-full">
|
||||||
|
<Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
|
||||||
|
{#if isEditing}
|
||||||
|
<Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
|
||||||
{/if}
|
{/if}
|
||||||
|
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form"
|
||||||
|
>{submitText}</Button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
{#snippet stickyBottom()}
|
|
||||||
<Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
|
|
||||||
{#if isEditing}
|
|
||||||
<Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
|
|
||||||
{/if}
|
|
||||||
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form"
|
|
||||||
>{submitText}</Button
|
|
||||||
>
|
|
||||||
{/snippet}
|
|
||||||
</FullScreenModal>
|
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
|
||||||
import { mdiFolderSync } from '@mdi/js';
|
import { mdiFolderSync } from '@mdi/js';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
@ -46,29 +45,33 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal {title} icon={mdiFolderSync} onClose={onCancel}>
|
<Modal {title} icon={mdiFolderSync} onClose={onCancel} size="small">
|
||||||
<form {onsubmit} autocomplete="off" id="library-import-path-form">
|
<ModalBody>
|
||||||
<p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
|
<form {onsubmit} autocomplete="off" id="library-import-path-form">
|
||||||
|
<p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
|
||||||
|
|
||||||
<div class="my-4 flex flex-col gap-2">
|
<div class="my-4 flex flex-col gap-2">
|
||||||
<label class="immich-form-label" for="path">{$t('path')}</label>
|
<label class="immich-form-label" for="path">{$t('path')}</label>
|
||||||
<input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
|
<input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mt-8 flex w-full gap-4">
|
<div class="mt-8 flex w-full gap-4">
|
||||||
{#if isDuplicate}
|
{#if isDuplicate}
|
||||||
<p class="text-red-500 text-sm">{$t('errors.import_path_already_exists')}</p>
|
<p class="text-red-500 text-sm">{$t('errors.import_path_already_exists')}</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<div class="flex gap-2 w-full">
|
||||||
|
<Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
|
||||||
|
{#if isEditing}
|
||||||
|
<Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
|
||||||
{/if}
|
{/if}
|
||||||
|
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"
|
||||||
|
>{submitText}</Button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
{#snippet stickyBottom()}
|
|
||||||
<Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
|
|
||||||
{#if isEditing}
|
|
||||||
<Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
|
|
||||||
{/if}
|
|
||||||
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"
|
|
||||||
>{submitText}</Button
|
|
||||||
>
|
|
||||||
{/snippet}
|
|
||||||
</FullScreenModal>
|
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import type { LibraryResponseDto } from '@immich/sdk';
|
import type { LibraryResponseDto } from '@immich/sdk';
|
||||||
import { Button, Field, Input } from '@immich/ui';
|
import { Button, Field, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import { mdiRenameOutline } from '@mdi/js';
|
import { mdiRenameOutline } from '@mdi/js';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
@ -21,15 +20,19 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<form {onsubmit} autocomplete="off">
|
<Modal icon={mdiRenameOutline} title={$t('rename')} onClose={onCancel} size="small">
|
||||||
<FullScreenModal icon={mdiRenameOutline} title={$t('rename')} onClose={onCancel}>
|
<ModalBody>
|
||||||
<Field label={$t('name')}>
|
<form {onsubmit} autocomplete="off" id="rename-library-form">
|
||||||
<Input bind:value={newName} />
|
<Field label={$t('name')}>
|
||||||
</Field>
|
<Input bind:value={newName} />
|
||||||
|
</Field>
|
||||||
|
</form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
{#snippet stickyBottom()}
|
<ModalFooter>
|
||||||
|
<div class="flex gap-2 w-full">
|
||||||
<Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
|
<Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
|
||||||
<Button shape="round" fullWidth type="submit">{$t('save')}</Button>
|
<Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
|
||||||
{/snippet}
|
</div>
|
||||||
</FullScreenModal>
|
</ModalFooter>
|
||||||
</form>
|
</Modal>
|
||||||
|
|||||||
@ -2,11 +2,10 @@
|
|||||||
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
|
import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
|
||||||
import { user } from '$lib/stores/user.store';
|
import { user } from '$lib/stores/user.store';
|
||||||
import { searchUsersAdmin } from '@immich/sdk';
|
import { searchUsersAdmin } from '@immich/sdk';
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import { mdiFolderSync } from '@mdi/js';
|
import { mdiFolderSync } from '@mdi/js';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
@ -30,15 +29,19 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={onCancel}>
|
<Modal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={onCancel} size="small">
|
||||||
<form {onsubmit} autocomplete="off" id="select-library-owner-form">
|
<ModalBody>
|
||||||
<p class="p-5 text-sm">{$t('admin.note_cannot_be_changed_later')}</p>
|
<form {onsubmit} autocomplete="off" id="select-library-owner-form">
|
||||||
|
<p class="p-5 text-sm">{$t('admin.note_cannot_be_changed_later')}</p>
|
||||||
|
|
||||||
<SettingSelect bind:value={ownerId} options={userOptions} name="user" />
|
<SettingSelect bind:value={ownerId} options={userOptions} name="user" />
|
||||||
</form>
|
</form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
{#snippet stickyBottom()}
|
<ModalFooter>
|
||||||
<Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
|
<div class="flex gap-2 w-full">
|
||||||
<Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
|
<Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
|
||||||
{/snippet}
|
<Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
|
||||||
</FullScreenModal>
|
</div>
|
||||||
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Icon from '$lib/components/elements/icon.svelte';
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
|
import { getAllTags, upsertTags, type TagResponseDto } from '@immich/sdk';
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import { mdiClose, mdiTag } from '@mdi/js';
|
import { mdiClose, mdiTag } from '@mdi/js';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import { SvelteSet } from 'svelte/reactivity';
|
import { SvelteSet } from 'svelte/reactivity';
|
||||||
import Combobox, { type ComboBoxOption } from '../shared-components/combobox.svelte';
|
import Combobox, { type ComboBoxOption } from '../shared-components/combobox.svelte';
|
||||||
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
onTag: (tagIds: string[]) => void;
|
onTag: (tagIds: string[]) => void;
|
||||||
@ -52,48 +51,52 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal title={$t('tag_assets')} icon={mdiTag} onClose={onCancel}>
|
<Modal size="small" title={$t('tag_assets')} icon={mdiTag} onClose={onCancel}>
|
||||||
<form {onsubmit} autocomplete="off" id="create-tag-form">
|
<ModalBody>
|
||||||
<div class="my-4 flex flex-col gap-2">
|
<form {onsubmit} autocomplete="off" id="create-tag-form">
|
||||||
<Combobox
|
<div class="my-4 flex flex-col gap-2">
|
||||||
onSelect={handleSelect}
|
<Combobox
|
||||||
label={$t('tag')}
|
onSelect={handleSelect}
|
||||||
{allowCreate}
|
label={$t('tag')}
|
||||||
defaultFirstOption
|
{allowCreate}
|
||||||
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
|
defaultFirstOption
|
||||||
placeholder={$t('search_tags')}
|
options={allTags.map((tag) => ({ id: tag.id, label: tag.value, value: tag.id }))}
|
||||||
/>
|
placeholder={$t('search_tags')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<section class="flex flex-wrap pt-2 gap-1">
|
||||||
|
{#each selectedIds as tagId (tagId)}
|
||||||
|
{@const tag = tagMap[tagId]}
|
||||||
|
{#if tag}
|
||||||
|
<div class="flex group transition-all">
|
||||||
|
<span
|
||||||
|
class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
||||||
|
>
|
||||||
|
<p class="text-sm">
|
||||||
|
{tag.value}
|
||||||
|
</p>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
||||||
|
title="Remove tag"
|
||||||
|
onclick={() => handleRemove(tagId)}
|
||||||
|
>
|
||||||
|
<Icon path={mdiClose} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</section>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<div class="flex w-full gap-2">
|
||||||
|
<Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
|
||||||
|
<Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
<section class="flex flex-wrap pt-2 gap-1">
|
|
||||||
{#each selectedIds as tagId (tagId)}
|
|
||||||
{@const tag = tagMap[tagId]}
|
|
||||||
{#if tag}
|
|
||||||
<div class="flex group transition-all">
|
|
||||||
<span
|
|
||||||
class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
|
||||||
>
|
|
||||||
<p class="text-sm">
|
|
||||||
{tag.value}
|
|
||||||
</p>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
|
|
||||||
title="Remove tag"
|
|
||||||
onclick={() => handleRemove(tagId)}
|
|
||||||
>
|
|
||||||
<Icon path={mdiClose} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{#snippet stickyBottom()}
|
|
||||||
<Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
|
|
||||||
<Button type="submit" shape="round" fullWidth form="create-tag-form" {disabled}>{$t('tag_assets')}</Button>
|
|
||||||
{/snippet}
|
|
||||||
</FullScreenModal>
|
|
||||||
|
|||||||
@ -314,8 +314,9 @@
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{#if assetInteraction.selectionActive}
|
{#if assetInteraction.selectionActive}
|
||||||
<div class="sticky top-0">
|
<div class="sticky top-0 z-1">
|
||||||
<AssetSelectControlBar
|
<AssetSelectControlBar
|
||||||
|
forceDark
|
||||||
assets={assetInteraction.selectedAssets}
|
assets={assetInteraction.selectedAssets}
|
||||||
clearSelect={() => cancelMultiselect(assetInteraction)}
|
clearSelect={() => cancelMultiselect(assetInteraction)}
|
||||||
>
|
>
|
||||||
@ -605,6 +606,7 @@
|
|||||||
</section>
|
</section>
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{#if current}
|
{#if current}
|
||||||
<!-- GALLERY VIEWER -->
|
<!-- GALLERY VIEWER -->
|
||||||
<section class="bg-immich-dark-gray p-4">
|
<section class="bg-immich-dark-gray p-4">
|
||||||
|
|||||||
@ -24,9 +24,10 @@
|
|||||||
clearSelect: () => void;
|
clearSelect: () => void;
|
||||||
ownerId?: string | undefined;
|
ownerId?: string | undefined;
|
||||||
children?: Snippet;
|
children?: Snippet;
|
||||||
|
forceDark?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
let { assets, clearSelect, ownerId = undefined, children }: Props = $props();
|
let { assets, clearSelect, ownerId = undefined, children, forceDark }: Props = $props();
|
||||||
|
|
||||||
setContext({
|
setContext({
|
||||||
getAssets: () => assets,
|
getAssets: () => assets,
|
||||||
@ -35,9 +36,11 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ControlAppBar onClose={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
|
<ControlAppBar onClose={clearSelect} {forceDark} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
|
||||||
{#snippet leading()}
|
{#snippet leading()}
|
||||||
<div class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
<div
|
||||||
|
class="font-medium {forceDark ? 'text-immich-dark-primary' : 'text-immich-primary dark:text-immich-dark-primary'}"
|
||||||
|
>
|
||||||
<p class="block sm:hidden">{assets.length}</p>
|
<p class="block sm:hidden">{assets.length}</p>
|
||||||
<p class="hidden sm:block">{$t('selected_count', { values: { count: assets.length } })}</p>
|
<p class="hidden sm:block">{$t('selected_count', { values: { count: assets.length } })}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -5,9 +5,9 @@
|
|||||||
AlbumModalRowType,
|
AlbumModalRowType,
|
||||||
isSelectableRowType,
|
isSelectableRowType,
|
||||||
} from '$lib/components/shared-components/album-selection/album-selection-utils';
|
} from '$lib/components/shared-components/album-selection/album-selection-utils';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import { albumViewSettings } from '$lib/stores/preferences.store';
|
import { albumViewSettings } from '$lib/stores/preferences.store';
|
||||||
import { type AlbumResponseDto, getAllAlbums } from '@immich/sdk';
|
import { type AlbumResponseDto, getAllAlbums } from '@immich/sdk';
|
||||||
|
import { Modal, ModalBody } from '@immich/ui';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import AlbumListItem from '../../asset-viewer/album-list-item.svelte';
|
import AlbumListItem from '../../asset-viewer/album-list-item.svelte';
|
||||||
@ -80,49 +80,51 @@
|
|||||||
const handleAlbumClick = (album: AlbumResponseDto) => () => onAlbumClick(album);
|
const handleAlbumClick = (album: AlbumResponseDto) => () => onAlbumClick(album);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose}>
|
<Modal title={shared ? $t('add_to_shared_album') : $t('add_to_album')} {onClose} size="small">
|
||||||
<div class="mb-2 flex max-h-[400px] flex-col">
|
<ModalBody>
|
||||||
{#if loading}
|
<div class="mb-2 flex max-h-[400px] flex-col">
|
||||||
<!-- eslint-disable-next-line svelte/require-each-key -->
|
{#if loading}
|
||||||
{#each { length: 3 } as _}
|
<!-- eslint-disable-next-line svelte/require-each-key -->
|
||||||
<div class="flex animate-pulse gap-4 px-6 py-2">
|
{#each { length: 3 } as _}
|
||||||
<div class="h-12 w-12 rounded-xl bg-slate-200"></div>
|
<div class="flex animate-pulse gap-4 px-6 py-2">
|
||||||
<div class="flex flex-col items-start justify-center gap-2">
|
<div class="h-12 w-12 rounded-xl bg-slate-200"></div>
|
||||||
<span class="h-4 w-36 animate-pulse bg-slate-200"></span>
|
<div class="flex flex-col items-start justify-center gap-2">
|
||||||
<div class="flex animate-pulse gap-1">
|
<span class="h-4 w-36 animate-pulse bg-slate-200"></span>
|
||||||
<span class="h-3 w-8 bg-slate-200"></span>
|
<div class="flex animate-pulse gap-1">
|
||||||
<span class="h-3 w-20 bg-slate-200"></span>
|
<span class="h-3 w-8 bg-slate-200"></span>
|
||||||
|
<span class="h-3 w-20 bg-slate-200"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{:else}
|
|
||||||
<input
|
|
||||||
class="border-b-4 border-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
|
|
||||||
placeholder={$t('search')}
|
|
||||||
{onkeydown}
|
|
||||||
bind:value={search}
|
|
||||||
use:initInput
|
|
||||||
/>
|
|
||||||
<div class="immich-scrollbar overflow-y-auto">
|
|
||||||
<!-- eslint-disable-next-line svelte/require-each-key -->
|
|
||||||
{#each albumModalRows as row}
|
|
||||||
{#if row.type === AlbumModalRowType.NEW_ALBUM}
|
|
||||||
<NewAlbumListItem selected={row.selected || false} {onNewAlbum} searchQuery={search} />
|
|
||||||
{:else if row.type === AlbumModalRowType.SECTION}
|
|
||||||
<p class="px-5 py-3 text-xs">{row.text}</p>
|
|
||||||
{:else if row.type === AlbumModalRowType.MESSAGE}
|
|
||||||
<p class="px-5 py-1 text-sm">{row.text}</p>
|
|
||||||
{:else if row.type === AlbumModalRowType.ALBUM_ITEM && row.album}
|
|
||||||
<AlbumListItem
|
|
||||||
album={row.album}
|
|
||||||
selected={row.selected || false}
|
|
||||||
searchQuery={search}
|
|
||||||
onAlbumClick={handleAlbumClick(row.album)}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
{:else}
|
||||||
{/if}
|
<input
|
||||||
</div>
|
class="border-b-4 border-immich-bg px-6 py-2 text-2xl focus:border-immich-primary dark:border-immich-dark-gray dark:focus:border-immich-dark-primary"
|
||||||
</FullScreenModal>
|
placeholder={$t('search')}
|
||||||
|
{onkeydown}
|
||||||
|
bind:value={search}
|
||||||
|
use:initInput
|
||||||
|
/>
|
||||||
|
<div class="immich-scrollbar overflow-y-auto">
|
||||||
|
<!-- eslint-disable-next-line svelte/require-each-key -->
|
||||||
|
{#each albumModalRows as row}
|
||||||
|
{#if row.type === AlbumModalRowType.NEW_ALBUM}
|
||||||
|
<NewAlbumListItem selected={row.selected || false} {onNewAlbum} searchQuery={search} />
|
||||||
|
{:else if row.type === AlbumModalRowType.SECTION}
|
||||||
|
<p class="px-5 py-3 text-xs">{row.text}</p>
|
||||||
|
{:else if row.type === AlbumModalRowType.MESSAGE}
|
||||||
|
<p class="px-5 py-1 text-sm">{row.text}</p>
|
||||||
|
{:else if row.type === AlbumModalRowType.ALBUM_ITEM && row.album}
|
||||||
|
<AlbumListItem
|
||||||
|
album={row.album}
|
||||||
|
selected={row.selected || false}
|
||||||
|
searchQuery={search}
|
||||||
|
onAlbumClick={handleAlbumClick(row.album)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
</Modal>
|
||||||
|
|||||||
@ -38,6 +38,10 @@
|
|||||||
buttonClass?: string | undefined;
|
buttonClass?: string | undefined;
|
||||||
hideContent?: boolean;
|
hideContent?: boolean;
|
||||||
children?: Snippet;
|
children?: Snippet;
|
||||||
|
offset?: {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
};
|
||||||
} & HTMLAttributes<HTMLDivElement>;
|
} & HTMLAttributes<HTMLDivElement>;
|
||||||
|
|
||||||
let {
|
let {
|
||||||
@ -51,6 +55,7 @@
|
|||||||
buttonClass = undefined,
|
buttonClass = undefined,
|
||||||
hideContent = false,
|
hideContent = false,
|
||||||
children,
|
children,
|
||||||
|
offset,
|
||||||
...restProps
|
...restProps
|
||||||
}: Props = $props();
|
}: Props = $props();
|
||||||
|
|
||||||
@ -186,13 +191,14 @@
|
|||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<ContextMenu
|
<ContextMenu
|
||||||
{...contextMenuPosition}
|
|
||||||
{direction}
|
{direction}
|
||||||
ariaActiveDescendant={$selectedIdStore}
|
ariaActiveDescendant={$selectedIdStore}
|
||||||
ariaLabelledBy={buttonId}
|
ariaLabelledBy={buttonId}
|
||||||
bind:menuElement={menuContainer}
|
bind:menuElement={menuContainer}
|
||||||
id={menuId}
|
id={menuId}
|
||||||
isVisible={isOpen}
|
isVisible={isOpen}
|
||||||
|
x={contextMenuPosition.x - (offset?.x ?? 0)}
|
||||||
|
y={contextMenuPosition.y + (offset?.y ?? 0)}
|
||||||
>
|
>
|
||||||
{@render children?.()}
|
{@render children?.()}
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
|
|||||||
@ -66,7 +66,7 @@
|
|||||||
let buttonClass = $derived(forceDark ? 'hover:text-immich-dark-gray' : undefined);
|
let buttonClass = $derived(forceDark ? 'hover:text-immich-dark-gray' : undefined);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent z-1">
|
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full bg-transparent">
|
||||||
<nav
|
<nav
|
||||||
id="asset-selection-app-bar"
|
id="asset-selection-app-bar"
|
||||||
class={[
|
class={[
|
||||||
@ -77,7 +77,7 @@
|
|||||||
appBarBorder,
|
appBarBorder,
|
||||||
'mx-2 my-2 place-items-center rounded-lg p-2 max-md:p-0 transition-all',
|
'mx-2 my-2 place-items-center rounded-lg p-2 max-md:p-0 transition-all',
|
||||||
tailwindClasses,
|
tailwindClasses,
|
||||||
forceDark ? 'bg-immich-dark-gray text-white' : 'bg-subtle dark:bg-immich-dark-gray',
|
forceDark ? 'bg-immich-dark-gray! text-white' : 'bg-subtle dark:bg-immich-dark-gray',
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg">
|
<div class="flex place-items-center sm:gap-6 justify-self-start dark:text-immich-dark-fg">
|
||||||
|
|||||||
@ -29,5 +29,5 @@
|
|||||||
{#if title}
|
{#if title}
|
||||||
<h2 class="text-xl font-medium my-4">{title}</h2>
|
<h2 class="text-xl font-medium my-4">{title}</h2>
|
||||||
{/if}
|
{/if}
|
||||||
<p class="text-immich-text-gray-500 dark:text-immich-dark-fg font-light">{text}</p>
|
<p class="text-immich-text-gray-500 dark:text-immich-dark-fg font-light text-center">{text}</p>
|
||||||
</svelte:element>
|
</svelte:element>
|
||||||
|
|||||||
@ -1,107 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { clickOutside } from '$lib/actions/click-outside';
|
|
||||||
import { focusTrap } from '$lib/actions/focus-trap';
|
|
||||||
import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
|
|
||||||
import { generateId } from '$lib/utils/generate-id';
|
|
||||||
import type { Snippet } from 'svelte';
|
|
||||||
import { fade } from 'svelte/transition';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
onClose: () => void;
|
|
||||||
title: string;
|
|
||||||
/**
|
|
||||||
* If true, the logo will be displayed next to the modal title.
|
|
||||||
*/
|
|
||||||
showLogo?: boolean;
|
|
||||||
/**
|
|
||||||
* Optional icon to display next to the modal title, if `showLogo` is false.
|
|
||||||
*/
|
|
||||||
icon?: string | undefined;
|
|
||||||
/**
|
|
||||||
* Sets the width of the modal.
|
|
||||||
*
|
|
||||||
* - `wide`: 48rem
|
|
||||||
* - `narrow`: 28rem
|
|
||||||
* - `auto`: fits the width of the modal content, up to a maximum of 32rem
|
|
||||||
*/
|
|
||||||
width?: 'extra-wide' | 'wide' | 'narrow' | 'auto';
|
|
||||||
stickyBottom?: Snippet;
|
|
||||||
children?: Snippet;
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
|
||||||
onClose,
|
|
||||||
title,
|
|
||||||
showLogo = false,
|
|
||||||
icon = undefined,
|
|
||||||
width = 'narrow',
|
|
||||||
stickyBottom,
|
|
||||||
children,
|
|
||||||
}: Props = $props();
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Unique identifier for the modal.
|
|
||||||
*/
|
|
||||||
let id: string = generateId();
|
|
||||||
|
|
||||||
let titleId = $derived(`${id}-title`);
|
|
||||||
let isStickyBottom = $derived(!!stickyBottom);
|
|
||||||
|
|
||||||
let modalWidth = $state<string>();
|
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
switch (width) {
|
|
||||||
case 'extra-wide': {
|
|
||||||
modalWidth = 'w-4xl';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'wide': {
|
|
||||||
modalWidth = 'w-3xl';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
case 'narrow': {
|
|
||||||
modalWidth = 'w-md';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
default: {
|
|
||||||
modalWidth = 'sm:max-w-4xl';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<section
|
|
||||||
role="presentation"
|
|
||||||
in:fade={{ duration: 100 }}
|
|
||||||
out:fade={{ duration: 100 }}
|
|
||||||
class="fixed start-0 top-0 flex h-dvh w-dvw place-content-center place-items-center bg-black/40"
|
|
||||||
onkeydown={(event) => {
|
|
||||||
event.stopPropagation();
|
|
||||||
}}
|
|
||||||
use:focusTrap
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="flex flex-col max-h-[min(95dvh,60rem)] max-w-[95vw] {modalWidth} overflow-hidden rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg pt-3 pb-4"
|
|
||||||
use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
|
|
||||||
tabindex="-1"
|
|
||||||
aria-modal="true"
|
|
||||||
aria-labelledby={titleId}
|
|
||||||
>
|
|
||||||
<div class="immich-scrollbar overflow-y-auto pt-1" class:pb-4={isStickyBottom}>
|
|
||||||
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
|
|
||||||
<div class="px-5 pt-0 mb-5">
|
|
||||||
{@render children?.()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{#if isStickyBottom}
|
|
||||||
<div
|
|
||||||
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky pt-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500"
|
|
||||||
>
|
|
||||||
{@render stickyBottom?.()}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -14,7 +14,7 @@
|
|||||||
<svg {viewBox} class={cssClass}>
|
<svg {viewBox} class={cssClass}>
|
||||||
<title>{$t('immich_logo')}</title>
|
<title>{$t('immich_logo')}</title>
|
||||||
{#if !noText}
|
{#if !noText}
|
||||||
<g class="st0 dark:fill-[#accbfa]">
|
<g class="st0 dark:fill-[#accbfa] fill-[#4251b0]">
|
||||||
<path
|
<path
|
||||||
d="M268.73,63.18c6.34,0,11.52,5.18,11.52,11.35c0,6.34-5.18,11.35-11.52,11.35s-11.69-5.01-11.69-11.35
|
d="M268.73,63.18c6.34,0,11.52,5.18,11.52,11.35c0,6.34-5.18,11.35-11.52,11.35s-11.69-5.01-11.69-11.35
|
||||||
C257.04,68.36,262.39,63.18,268.73,63.18z M258.88,122.45c0-3.01-0.67-7.85-0.67-10.68c0-6.01,4.67-10.68,10.52-10.68
|
C257.04,68.36,262.39,63.18,268.73,63.18z M258.88,122.45c0-3.01-0.67-7.85-0.67-10.68c0-6.01,4.67-10.68,10.52-10.68
|
||||||
@ -94,9 +94,6 @@
|
|||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.st0 {
|
|
||||||
fill: #4251b0;
|
|
||||||
}
|
|
||||||
.st1 {
|
.st1 {
|
||||||
fill: #fa2921;
|
fill: #fa2921;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -39,7 +39,7 @@
|
|||||||
in:fade={{ duration: 100 }}
|
in:fade={{ duration: 100 }}
|
||||||
out:fade={{ duration: 100 }}
|
out:fade={{ duration: 100 }}
|
||||||
id="notification-panel"
|
id="notification-panel"
|
||||||
class="absolute right-[25px] top-[70px] z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray text-light"
|
class="absolute right-[25px] top-[70px] z-1 w-[min(360px,100vw-50px)] rounded-3xl bg-gray-100 border border-gray-200 shadow-lg dark:border dark:border-light dark:bg-immich-dark-gray text-light px-2"
|
||||||
use:focusTrap
|
use:focusTrap
|
||||||
>
|
>
|
||||||
<Stack class="max-h-[500px]">
|
<Stack class="max-h-[500px]">
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import { user } from '$lib/stores/user.store';
|
import { user } from '$lib/stores/user.store';
|
||||||
import { handleError } from '$lib/utils/handle-error';
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
|
import { createProfileImage, type AssetResponseDto } from '@immich/sdk';
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import domtoimage from 'dom-to-image';
|
import domtoimage from 'dom-to-image';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
@ -89,16 +88,17 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal title={$t('set_profile_picture')} width="auto" {onClose}>
|
<Modal size="small" title={$t('set_profile_picture')} {onClose}>
|
||||||
<div class="flex place-items-center items-center justify-center">
|
<ModalBody>
|
||||||
<div
|
<div class="flex place-items-center items-center justify-center">
|
||||||
class="relative flex aspect-square w-[250px] overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
|
<div
|
||||||
>
|
class="relative flex aspect-square w-[250px] overflow-hidden rounded-full border-4 border-immich-primary bg-immich-dark-primary dark:border-immich-dark-primary dark:bg-immich-primary"
|
||||||
<PhotoViewer bind:element={imgElement} {asset} />
|
>
|
||||||
|
<PhotoViewer bind:element={imgElement} {asset} />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
{#snippet stickyBottom()}
|
|
||||||
<Button fullWidth shape="round" onclick={handleSetProfilePicture}>{$t('set_as_profile_picture')}</Button>
|
<Button fullWidth shape="round" onclick={handleSetProfilePicture}>{$t('set_as_profile_picture')}</Button>
|
||||||
{/snippet}
|
</ModalFooter>
|
||||||
</FullScreenModal>
|
</Modal>
|
||||||
|
|||||||
@ -464,7 +464,7 @@
|
|||||||
class={[
|
class={[
|
||||||
{ 'border-b-2': isDragging },
|
{ 'border-b-2': isDragging },
|
||||||
{ 'rounded-bl-md': !isDragging },
|
{ 'rounded-bl-md': !isDragging },
|
||||||
'bg-light truncate opacity-85 pointer-events-none absolute end-0 min-w-20 max-w-64 w-fit rounded-ss-md border-immich-primary py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg',
|
'bg-light truncate opacity-85 pointer-events-none absolute end-0 min-w-20 max-w-64 w-fit rounded-ss-md border-immich-primary py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg z-1',
|
||||||
]}
|
]}
|
||||||
style:top="{hoverY + 2}px"
|
style:top="{hoverY + 2}px"
|
||||||
>
|
>
|
||||||
@ -506,7 +506,7 @@
|
|||||||
{#if assetStore.scrolling && scrollHoverLabel && !isHover}
|
{#if assetStore.scrolling && scrollHoverLabel && !isHover}
|
||||||
<p
|
<p
|
||||||
transition:fade={{ duration: 200 }}
|
transition:fade={{ duration: 200 }}
|
||||||
class="truncate pointer-events-none absolute end-0 bottom-0 min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-subtle/70 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg"
|
class="truncate pointer-events-none absolute end-0 bottom-0 min-w-20 max-w-64 w-fit rounded-tl-md border-b-2 border-immich-primary bg-subtle/90 z-1 py-1 px-1 text-sm font-medium shadow-[0_0_8px_rgba(0,0,0,0.25)] dark:border-immich-dark-primary dark:text-immich-dark-fg"
|
||||||
>
|
>
|
||||||
{scrollHoverLabel}
|
{scrollHoverLabel}
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
@ -64,8 +64,8 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="border rounded-2xl my-4 px-6 py-4 transition-all {isOpen
|
class="border-2 rounded-2xl border-primary/20 my-4 px-6 py-4 transition-all {isOpen
|
||||||
? 'border-primary/40 dark:border-primary/50 shadow-md'
|
? 'border-primary/60 shadow-md'
|
||||||
: ''}"
|
: ''}"
|
||||||
bind:this={accordionElement}
|
bind:this={accordionElement}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -2,9 +2,8 @@
|
|||||||
import FormatMessage from '$lib/components/i18n/format-message.svelte';
|
import FormatMessage from '$lib/components/i18n/format-message.svelte';
|
||||||
import { websocketStore } from '$lib/stores/websocket';
|
import { websocketStore } from '$lib/stores/websocket';
|
||||||
import type { ServerVersionResponseDto } from '@immich/sdk';
|
import type { ServerVersionResponseDto } from '@immich/sdk';
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
import FullScreenModal from './full-screen-modal.svelte';
|
|
||||||
|
|
||||||
let showModal = $state(false);
|
let showModal = $state(false);
|
||||||
|
|
||||||
@ -39,33 +38,38 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if showModal}
|
{#if showModal}
|
||||||
<FullScreenModal title="🎉 {$t('new_version_available')}" onClose={() => (showModal = false)}>
|
<Modal size="small" title="🎉 {$t('new_version_available')}" onClose={() => (showModal = false)} icon={false}>
|
||||||
<div>
|
<ModalBody>
|
||||||
<FormatMessage key="version_announcement_message">
|
<div>
|
||||||
{#snippet children({ tag, message })}
|
<FormatMessage key="version_announcement_message">
|
||||||
{#if tag === 'link'}
|
{#snippet children({ tag, message })}
|
||||||
<span class="font-medium underline">
|
{#if tag === 'link'}
|
||||||
<a href="https://github.com/immich-app/immich/releases/latest" target="_blank" rel="noopener noreferrer">
|
<span class="font-medium underline">
|
||||||
{message}
|
<a
|
||||||
</a>
|
href="https://github.com/immich-app/immich/releases/latest"
|
||||||
</span>
|
target="_blank"
|
||||||
{:else if tag === 'code'}
|
rel="noopener noreferrer"
|
||||||
<code>{message}</code>
|
>
|
||||||
{/if}
|
{message}
|
||||||
{/snippet}
|
</a>
|
||||||
</FormatMessage>
|
</span>
|
||||||
</div>
|
{:else if tag === 'code'}
|
||||||
|
<code>{message}</code>
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
|
</FormatMessage>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
|
<div class="mt-4 font-medium">{$t('version_announcement_closing')}</div>
|
||||||
|
|
||||||
<div class="font-sm mt-8">
|
<div class="font-sm mt-8">
|
||||||
<code>{$t('server_version')}: {serverVersion}</code>
|
<code>{$t('server_version')}: {serverVersion}</code>
|
||||||
<br />
|
<br />
|
||||||
<code>{$t('latest_version')}: {releaseVersion}</code>
|
<code>{$t('latest_version')}: {releaseVersion}</code>
|
||||||
</div>
|
</div>
|
||||||
|
</ModalBody>
|
||||||
{#snippet stickyBottom()}
|
<ModalFooter>
|
||||||
<Button fullWidth shape="round" onclick={onAcknowledge}>{$t('acknowledge')}</Button>
|
<Button fullWidth shape="round" onclick={onAcknowledge}>{$t('acknowledge')}</Button>
|
||||||
{/snippet}
|
</ModalFooter>
|
||||||
</FullScreenModal>
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
|
import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
|
||||||
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
|
||||||
import { SettingInputFieldType } from '$lib/constants';
|
import { SettingInputFieldType } from '$lib/constants';
|
||||||
import { Button } from '@immich/ui';
|
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||||
import {
|
import {
|
||||||
mdiArrowDownThin,
|
mdiArrowDownThin,
|
||||||
mdiArrowUpThin,
|
mdiArrowUpThin,
|
||||||
@ -65,37 +64,40 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<FullScreenModal title={$t('slideshow_settings')} onClose={() => onClose()}>
|
<Modal size="small" title={$t('slideshow_settings')} onClose={() => onClose()}>
|
||||||
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
|
<ModalBody>
|
||||||
<SettingDropdown
|
<div class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary">
|
||||||
title={$t('direction')}
|
<SettingDropdown
|
||||||
options={Object.values(navigationOptions)}
|
title={$t('direction')}
|
||||||
selectedOption={navigationOptions[tempSlideshowNavigation]}
|
options={Object.values(navigationOptions)}
|
||||||
onToggle={(option) => {
|
selectedOption={navigationOptions[tempSlideshowNavigation]}
|
||||||
tempSlideshowNavigation = handleToggle(option, navigationOptions) || tempSlideshowNavigation;
|
onToggle={(option) => {
|
||||||
}}
|
tempSlideshowNavigation = handleToggle(option, navigationOptions) || tempSlideshowNavigation;
|
||||||
/>
|
}}
|
||||||
<SettingDropdown
|
/>
|
||||||
title={$t('look')}
|
<SettingDropdown
|
||||||
options={Object.values(lookOptions)}
|
title={$t('look')}
|
||||||
selectedOption={lookOptions[tempSlideshowLook]}
|
options={Object.values(lookOptions)}
|
||||||
onToggle={(option) => {
|
selectedOption={lookOptions[tempSlideshowLook]}
|
||||||
tempSlideshowLook = handleToggle(option, lookOptions) || tempSlideshowLook;
|
onToggle={(option) => {
|
||||||
}}
|
tempSlideshowLook = handleToggle(option, lookOptions) || tempSlideshowLook;
|
||||||
/>
|
}}
|
||||||
<SettingSwitch title={$t('show_progress_bar')} bind:checked={tempShowProgressBar} />
|
/>
|
||||||
<SettingSwitch title={$t('show_slideshow_transition')} bind:checked={tempSlideshowTransition} />
|
<SettingSwitch title={$t('show_progress_bar')} bind:checked={tempShowProgressBar} />
|
||||||
<SettingInputField
|
<SettingSwitch title={$t('show_slideshow_transition')} bind:checked={tempSlideshowTransition} />
|
||||||
inputType={SettingInputFieldType.NUMBER}
|
<SettingInputField
|
||||||
label={$t('duration')}
|
inputType={SettingInputFieldType.NUMBER}
|
||||||
description={$t('admin.slideshow_duration_description')}
|
label={$t('duration')}
|
||||||
min={1}
|
description={$t('admin.slideshow_duration_description')}
|
||||||
bind:value={tempSlideshowDelay}
|
min={1}
|
||||||
/>
|
bind:value={tempSlideshowDelay}
|
||||||
</div>
|
/>
|
||||||
|
</div>
|
||||||
{#snippet stickyBottom()}
|
</ModalBody>
|
||||||
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
|
<ModalFooter>
|
||||||
<Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button>
|
<div class="flex gap-2 w-full">
|
||||||
{/snippet}
|
<Button color="secondary" shape="round" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
|
||||||
</FullScreenModal>
|
<Button fullWidth color="primary" shape="round" onclick={applyChanges}>{$t('confirm')}</Button>
|
||||||
|
</div>
|
||||||
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
|
|||||||
@ -126,7 +126,7 @@
|
|||||||
maxlength="1"
|
maxlength="1"
|
||||||
bind:this={pinCodeInputElements[index]}
|
bind:this={pinCodeInputElements[index]}
|
||||||
id="pin-code-{index}"
|
id="pin-code-{index}"
|
||||||
class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 bg-transparent text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"
|
class="h-12 w-10 rounded-xl border-2 border-suble dark:border-gray-700 text-center text-lg font-medium focus:border-immich-primary focus:ring-primary dark:focus:border-primary font-mono bg-white dark:bg-light"
|
||||||
bind:value={pinValues[index]}
|
bind:value={pinValues[index]}
|
||||||
onkeydown={handleKeydown}
|
onkeydown={handleKeydown}
|
||||||
oninput={(event) => handleInput(event, index)}
|
oninput={(event) => handleInput(event, index)}
|
||||||
|
|||||||
@ -2,7 +2,6 @@
|
|||||||
import AlbumSharedLink from '$lib/components/album-page/album-shared-link.svelte';
|
import AlbumSharedLink from '$lib/components/album-page/album-shared-link.svelte';
|
||||||
import Dropdown from '$lib/components/elements/dropdown.svelte';
|
import Dropdown from '$lib/components/elements/dropdown.svelte';
|
||||||
import Icon from '$lib/components/elements/icon.svelte';
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import { AppRoute } from '$lib/constants';
|
import { AppRoute } from '$lib/constants';
|
||||||
import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
|
import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
|
||||||
import { makeSharedLinkUrl } from '$lib/utils';
|
import { makeSharedLinkUrl } from '$lib/utils';
|
||||||
@ -15,7 +14,7 @@
|
|||||||
type SharedLinkResponseDto,
|
type SharedLinkResponseDto,
|
||||||
type UserResponseDto,
|
type UserResponseDto,
|
||||||
} from '@immich/sdk';
|
} from '@immich/sdk';
|
||||||
import { Button, Link, Stack, Text } from '@immich/ui';
|
import { Button, Link, Modal, ModalBody, Stack, Text } from '@immich/ui';
|
||||||
import { mdiCheck, mdiEye, mdiLink, mdiPencil } from '@mdi/js';
|
import { mdiCheck, mdiEye, mdiLink, mdiPencil } from '@mdi/js';
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
@ -76,63 +75,22 @@
|
|||||||
{#if sharedLinkUrl}
|
{#if sharedLinkUrl}
|
||||||
<QrCodeModal title={$t('view_link')} onClose={() => (sharedLinkUrl = '')} value={sharedLinkUrl} />
|
<QrCodeModal title={$t('view_link')} onClose={() => (sharedLinkUrl = '')} value={sharedLinkUrl} />
|
||||||
{:else}
|
{:else}
|
||||||
<FullScreenModal title={$t('share')} showLogo {onClose}>
|
<Modal size="small" title={$t('share')} {onClose}>
|
||||||
{#if Object.keys(selectedUsers).length > 0}
|
<ModalBody>
|
||||||
<div class="mb-2 py-2 sticky">
|
{#if Object.keys(selectedUsers).length > 0}
|
||||||
<p class="text-xs font-medium">{$t('selected')}</p>
|
<div class="mb-2 py-2 sticky">
|
||||||
<div class="my-2">
|
<p class="text-xs font-medium">{$t('selected')}</p>
|
||||||
{#each Object.values(selectedUsers) as { user } (user.id)}
|
<div class="my-2">
|
||||||
{#key user.id}
|
{#each Object.values(selectedUsers) as { user } (user.id)}
|
||||||
<div class="flex place-items-center gap-4 p-4">
|
{#key user.id}
|
||||||
<div
|
<div class="flex place-items-center gap-4 p-4">
|
||||||
class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-dark-success text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-success"
|
<div
|
||||||
>
|
class="flex h-10 w-10 items-center justify-center rounded-full border bg-immich-dark-success text-3xl text-white dark:border-immich-dark-gray dark:bg-immich-dark-success"
|
||||||
<Icon path={mdiCheck} size={24} />
|
>
|
||||||
</div>
|
<Icon path={mdiCheck} size={24} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <UserAvatar {user} size="md" /> -->
|
<!-- <UserAvatar {user} size="md" /> -->
|
||||||
<div class="text-start grow">
|
|
||||||
<p class="text-immich-fg dark:text-immich-dark-fg">
|
|
||||||
{user.name}
|
|
||||||
</p>
|
|
||||||
<p class="text-xs">
|
|
||||||
{user.email}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Dropdown
|
|
||||||
title={$t('role')}
|
|
||||||
options={roleOptions}
|
|
||||||
render={({ title, icon }) => ({ title, icon })}
|
|
||||||
onSelect={({ value }) => handleChangeRole(user, value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/key}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if users.length + Object.keys(selectedUsers).length === 0}
|
|
||||||
<p class="p-5 text-sm">
|
|
||||||
{$t('album_share_no_users')}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="immich-scrollbar max-h-[500px] overflow-y-auto">
|
|
||||||
{#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
|
|
||||||
<Text>{$t('users')}</Text>
|
|
||||||
|
|
||||||
<div class="my-2">
|
|
||||||
{#each users as user (user.id)}
|
|
||||||
{#if !Object.keys(selectedUsers).includes(user.id)}
|
|
||||||
<div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={() => handleToggle(user)}
|
|
||||||
class="flex w-full place-items-center gap-4 p-4"
|
|
||||||
>
|
|
||||||
<UserAvatar {user} size="md" />
|
|
||||||
<div class="text-start grow">
|
<div class="text-start grow">
|
||||||
<p class="text-immich-fg dark:text-immich-dark-fg">
|
<p class="text-immich-fg dark:text-immich-dark-fg">
|
||||||
{user.name}
|
{user.name}
|
||||||
@ -141,53 +99,96 @@
|
|||||||
{user.email}
|
{user.email}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
|
||||||
</div>
|
<Dropdown
|
||||||
{/if}
|
title={$t('role')}
|
||||||
{/each}
|
options={roleOptions}
|
||||||
|
render={({ title, icon }) => ({ title, icon })}
|
||||||
|
onSelect={({ value }) => handleChangeRole(user, value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/key}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if users.length > 0}
|
{#if users.length + Object.keys(selectedUsers).length === 0}
|
||||||
<div class="py-3">
|
<p class="p-5 text-sm">
|
||||||
<Button
|
{$t('album_share_no_users')}
|
||||||
size="small"
|
</p>
|
||||||
fullWidth
|
{/if}
|
||||||
shape="round"
|
|
||||||
disabled={Object.keys(selectedUsers).length === 0}
|
<div class="immich-scrollbar max-h-[500px] overflow-y-auto">
|
||||||
onclick={() =>
|
{#if users.length > 0 && users.length !== Object.keys(selectedUsers).length}
|
||||||
onClose({
|
<Text>{$t('users')}</Text>
|
||||||
action: 'sharedUsers',
|
|
||||||
data: Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
|
<div class="my-2">
|
||||||
})}>{$t('add')}</Button
|
{#each users as user (user.id)}
|
||||||
>
|
{#if !Object.keys(selectedUsers).includes(user.id)}
|
||||||
|
<div class="flex place-items-center transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={() => handleToggle(user)}
|
||||||
|
class="flex w-full place-items-center gap-4 p-4"
|
||||||
|
>
|
||||||
|
<UserAvatar {user} size="md" />
|
||||||
|
<div class="text-start grow">
|
||||||
|
<p class="text-immich-fg dark:text-immich-dark-fg">
|
||||||
|
{user.name}
|
||||||
|
</p>
|
||||||
|
<p class="text-xs">
|
||||||
|
{user.email}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
|
|
||||||
<hr class="my-4" />
|
{#if users.length > 0}
|
||||||
|
<div class="py-3">
|
||||||
<Stack gap={6}>
|
<Button
|
||||||
{#if sharedLinks.length > 0}
|
size="small"
|
||||||
<div class="flex justify-between items-center">
|
fullWidth
|
||||||
<Text>{$t('shared_links')}</Text>
|
shape="round"
|
||||||
<Link href={AppRoute.SHARED_LINKS} class="text-sm">{$t('view_all')}</Link>
|
disabled={Object.keys(selectedUsers).length === 0}
|
||||||
|
onclick={() =>
|
||||||
|
onClose({
|
||||||
|
action: 'sharedUsers',
|
||||||
|
data: Object.values(selectedUsers).map(({ user, ...rest }) => ({ userId: user.id, ...rest })),
|
||||||
|
})}>{$t('add')}</Button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Stack gap={4}>
|
|
||||||
{#each sharedLinks as sharedLink (sharedLink.id)}
|
|
||||||
<AlbumSharedLink {album} {sharedLink} onViewQrCode={() => handleViewQrCode(sharedLink)} />
|
|
||||||
{/each}
|
|
||||||
</Stack>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<Button
|
<hr class="my-4" />
|
||||||
leadingIcon={mdiLink}
|
|
||||||
size="small"
|
<Stack gap={6}>
|
||||||
shape="round"
|
{#if sharedLinks.length > 0}
|
||||||
fullWidth
|
<div class="flex justify-between items-center">
|
||||||
onclick={() => onClose({ action: 'sharedLink' })}>{$t('create_link')}</Button
|
<Text>{$t('shared_links')}</Text>
|
||||||
>
|
<Link href={AppRoute.SHARED_LINKS} class="text-sm">{$t('view_all')}</Link>
|
||||||
</Stack>
|
</div>
|
||||||
</FullScreenModal>
|
|
||||||
|
<Stack gap={4}>
|
||||||
|
{#each sharedLinks as sharedLink (sharedLink.id)}
|
||||||
|
<AlbumSharedLink {album} {sharedLink} onViewQrCode={() => handleViewQrCode(sharedLink)} />
|
||||||
|
{/each}
|
||||||
|
</Stack>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
leadingIcon={mdiLink}
|
||||||
|
size="small"
|
||||||
|
shape="round"
|
||||||
|
fullWidth
|
||||||
|
onclick={() => onClose({ action: 'sharedLink' })}>{$t('create_link')}</Button
|
||||||
|
>
|
||||||
|
</Stack>
|
||||||
|
</ModalBody>
|
||||||
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -453,150 +453,6 @@
|
|||||||
|
|
||||||
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
|
<div class="flex overflow-hidden" use:scrollMemoryClearer={{ routeStartsWith: AppRoute.ALBUMS }}>
|
||||||
<div class="relative w-full shrink">
|
<div class="relative w-full shrink">
|
||||||
{#if assetInteraction.selectionActive}
|
|
||||||
<AssetSelectControlBar
|
|
||||||
assets={assetInteraction.selectedAssets}
|
|
||||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
|
||||||
>
|
|
||||||
<CreateSharedLink />
|
|
||||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
|
||||||
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
|
|
||||||
<AddToAlbum />
|
|
||||||
<AddToAlbum shared />
|
|
||||||
</ButtonContextMenu>
|
|
||||||
{#if assetInteraction.isAllUserOwned}
|
|
||||||
<FavoriteAction
|
|
||||||
removeFavorite={assetInteraction.isAllFavorite}
|
|
||||||
onFavorite={(ids, isFavorite) =>
|
|
||||||
assetStore.updateAssetOperation(ids, (asset) => {
|
|
||||||
asset.isFavorite = isFavorite;
|
|
||||||
return { remove: false };
|
|
||||||
})}
|
|
||||||
></FavoriteAction>
|
|
||||||
{/if}
|
|
||||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
|
||||||
<DownloadAction menuItem filename="{album.albumName}.zip" />
|
|
||||||
{#if assetInteraction.isAllUserOwned}
|
|
||||||
<ChangeDate menuItem />
|
|
||||||
<ChangeDescription menuItem />
|
|
||||||
<ChangeLocation menuItem />
|
|
||||||
{#if assetInteraction.selectedAssets.length === 1}
|
|
||||||
<MenuOption
|
|
||||||
text={$t('set_as_album_cover')}
|
|
||||||
icon={mdiImageOutline}
|
|
||||||
onClick={() => updateThumbnailUsingCurrentSelection()}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
|
||||||
<TagAction menuItem />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if isOwned || assetInteraction.isAllUserOwned}
|
|
||||||
<RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
|
|
||||||
{/if}
|
|
||||||
{#if assetInteraction.isAllUserOwned}
|
|
||||||
<DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
|
|
||||||
{/if}
|
|
||||||
</ButtonContextMenu>
|
|
||||||
</AssetSelectControlBar>
|
|
||||||
{:else}
|
|
||||||
{#if viewMode === AlbumPageViewMode.VIEW}
|
|
||||||
<ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(backUrl)}>
|
|
||||||
{#snippet trailing()}
|
|
||||||
{#if isEditor}
|
|
||||||
<CircleIconButton
|
|
||||||
title={$t('add_photos')}
|
|
||||||
onclick={async () => {
|
|
||||||
assetStore.suspendTransitions = true;
|
|
||||||
viewMode = AlbumPageViewMode.SELECT_ASSETS;
|
|
||||||
oldAt = { at: $gridScrollTarget?.at };
|
|
||||||
await navigate(
|
|
||||||
{ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: null } },
|
|
||||||
{ replaceState: true },
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
icon={mdiImagePlusOutline}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if isOwned}
|
|
||||||
<CircleIconButton title={$t('share')} onclick={handleShare} icon={mdiShareVariantOutline} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<AlbumMap {album} />
|
|
||||||
|
|
||||||
{#if album.assetCount > 0}
|
|
||||||
<CircleIconButton title={$t('slideshow')} onclick={handleStartSlideshow} icon={mdiPresentationPlay} />
|
|
||||||
<CircleIconButton title={$t('download')} onclick={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if isOwned}
|
|
||||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('album_options')}>
|
|
||||||
{#if album.assetCount > 0}
|
|
||||||
<MenuOption
|
|
||||||
icon={mdiImageOutline}
|
|
||||||
text={$t('select_album_cover')}
|
|
||||||
onClick={() => (viewMode = AlbumPageViewMode.SELECT_THUMBNAIL)}
|
|
||||||
/>
|
|
||||||
<MenuOption
|
|
||||||
icon={mdiCogOutline}
|
|
||||||
text={$t('options')}
|
|
||||||
onClick={() => (viewMode = AlbumPageViewMode.OPTIONS)}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} onClick={() => handleRemoveAlbum()} />
|
|
||||||
</ButtonContextMenu>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if isCreatingSharedAlbum && album.albumUsers.length === 0}
|
|
||||||
<Button size="small" disabled={album.assetCount === 0} onclick={handleShare}>
|
|
||||||
{$t('share')}
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
{/snippet}
|
|
||||||
</ControlAppBar>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if viewMode === AlbumPageViewMode.SELECT_ASSETS}
|
|
||||||
<ControlAppBar onClose={handleCloseSelectAssets}>
|
|
||||||
{#snippet leading()}
|
|
||||||
<p class="text-lg dark:text-immich-dark-fg">
|
|
||||||
{#if !timelineInteraction.selectionActive}
|
|
||||||
{$t('add_to_album')}
|
|
||||||
{:else}
|
|
||||||
{$t('selected_count', { values: { count: timelineInteraction.selectedAssets.length } })}
|
|
||||||
{/if}
|
|
||||||
</p>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet trailing()}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onclick={handleSelectFromComputer}
|
|
||||||
class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
|
|
||||||
>
|
|
||||||
{$t('select_from_computer')}
|
|
||||||
</button>
|
|
||||||
<Button size="small" disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}
|
|
||||||
>{$t('done')}</Button
|
|
||||||
>
|
|
||||||
{/snippet}
|
|
||||||
</ControlAppBar>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if viewMode === AlbumPageViewMode.SELECT_THUMBNAIL}
|
|
||||||
<ControlAppBar onClose={() => (viewMode = AlbumPageViewMode.VIEW)}>
|
|
||||||
{#snippet leading()}
|
|
||||||
{$t('select_album_cover')}
|
|
||||||
{/snippet}
|
|
||||||
</ControlAppBar>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<main class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
|
<main class="relative h-dvh overflow-hidden px-6 max-md:pt-(--navbar-height-md) pt-(--navbar-height)">
|
||||||
<AssetGrid
|
<AssetGrid
|
||||||
enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
|
enableRouting={viewMode === AlbumPageViewMode.SELECT_ASSETS ? false : true}
|
||||||
@ -685,7 +541,7 @@
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onclick={() => (viewMode = AlbumPageViewMode.SELECT_ASSETS)}
|
onclick={() => (viewMode = AlbumPageViewMode.SELECT_ASSETS)}
|
||||||
class="mt-5 bg-subtle flex w-full place-items-center gap-6 rounded-md border px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
|
class="mt-5 bg-subtle flex w-full place-items-center gap-6 rounded-2xl border px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 dark:hover:bg-gray-500/20 hover:text-immich-primary dark:border-none dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
|
||||||
>
|
>
|
||||||
<span class="text-text-immich-primary dark:text-immich-dark-primary"
|
<span class="text-text-immich-primary dark:text-immich-dark-primary"
|
||||||
><Icon path={mdiPlus} size="24" />
|
><Icon path={mdiPlus} size="24" />
|
||||||
@ -710,6 +566,150 @@
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
{#if assetInteraction.selectionActive}
|
||||||
|
<AssetSelectControlBar
|
||||||
|
assets={assetInteraction.selectedAssets}
|
||||||
|
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||||
|
>
|
||||||
|
<CreateSharedLink />
|
||||||
|
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||||
|
<ButtonContextMenu icon={mdiPlus} title={$t('add_to')}>
|
||||||
|
<AddToAlbum />
|
||||||
|
<AddToAlbum shared />
|
||||||
|
</ButtonContextMenu>
|
||||||
|
{#if assetInteraction.isAllUserOwned}
|
||||||
|
<FavoriteAction
|
||||||
|
removeFavorite={assetInteraction.isAllFavorite}
|
||||||
|
onFavorite={(ids, isFavorite) =>
|
||||||
|
assetStore.updateAssetOperation(ids, (asset) => {
|
||||||
|
asset.isFavorite = isFavorite;
|
||||||
|
return { remove: false };
|
||||||
|
})}
|
||||||
|
></FavoriteAction>
|
||||||
|
{/if}
|
||||||
|
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')} offset={{ x: 175, y: 25 }}>
|
||||||
|
<DownloadAction menuItem filename="{album.albumName}.zip" />
|
||||||
|
{#if assetInteraction.isAllUserOwned}
|
||||||
|
<ChangeDate menuItem />
|
||||||
|
<ChangeDescription menuItem />
|
||||||
|
<ChangeLocation menuItem />
|
||||||
|
{#if assetInteraction.selectedAssets.length === 1}
|
||||||
|
<MenuOption
|
||||||
|
text={$t('set_as_album_cover')}
|
||||||
|
icon={mdiImageOutline}
|
||||||
|
onClick={() => updateThumbnailUsingCurrentSelection()}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
<ArchiveAction menuItem unarchive={assetInteraction.isAllArchived} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if $preferences.tags.enabled && assetInteraction.isAllUserOwned}
|
||||||
|
<TagAction menuItem />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isOwned || assetInteraction.isAllUserOwned}
|
||||||
|
<RemoveFromAlbum menuItem bind:album onRemove={handleRemoveAssets} />
|
||||||
|
{/if}
|
||||||
|
{#if assetInteraction.isAllUserOwned}
|
||||||
|
<DeleteAssets menuItem onAssetDelete={handleRemoveAssets} />
|
||||||
|
{/if}
|
||||||
|
</ButtonContextMenu>
|
||||||
|
</AssetSelectControlBar>
|
||||||
|
{:else}
|
||||||
|
{#if viewMode === AlbumPageViewMode.VIEW}
|
||||||
|
<ControlAppBar showBackButton backIcon={mdiArrowLeft} onClose={() => goto(backUrl)}>
|
||||||
|
{#snippet trailing()}
|
||||||
|
{#if isEditor}
|
||||||
|
<CircleIconButton
|
||||||
|
title={$t('add_photos')}
|
||||||
|
onclick={async () => {
|
||||||
|
assetStore.suspendTransitions = true;
|
||||||
|
viewMode = AlbumPageViewMode.SELECT_ASSETS;
|
||||||
|
oldAt = { at: $gridScrollTarget?.at };
|
||||||
|
await navigate(
|
||||||
|
{ targetRoute: 'current', assetId: null, assetGridRouteSearchParams: { at: null } },
|
||||||
|
{ replaceState: true },
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
icon={mdiImagePlusOutline}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isOwned}
|
||||||
|
<CircleIconButton title={$t('share')} onclick={handleShare} icon={mdiShareVariantOutline} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<AlbumMap {album} />
|
||||||
|
|
||||||
|
{#if album.assetCount > 0}
|
||||||
|
<CircleIconButton title={$t('slideshow')} onclick={handleStartSlideshow} icon={mdiPresentationPlay} />
|
||||||
|
<CircleIconButton title={$t('download')} onclick={handleDownloadAlbum} icon={mdiFolderDownloadOutline} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isOwned}
|
||||||
|
<ButtonContextMenu icon={mdiDotsVertical} title={$t('album_options')} offset={{ x: 175, y: 25 }}>
|
||||||
|
{#if album.assetCount > 0}
|
||||||
|
<MenuOption
|
||||||
|
icon={mdiImageOutline}
|
||||||
|
text={$t('select_album_cover')}
|
||||||
|
onClick={() => (viewMode = AlbumPageViewMode.SELECT_THUMBNAIL)}
|
||||||
|
/>
|
||||||
|
<MenuOption
|
||||||
|
icon={mdiCogOutline}
|
||||||
|
text={$t('options')}
|
||||||
|
onClick={() => (viewMode = AlbumPageViewMode.OPTIONS)}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<MenuOption icon={mdiDeleteOutline} text={$t('delete_album')} onClick={() => handleRemoveAlbum()} />
|
||||||
|
</ButtonContextMenu>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if isCreatingSharedAlbum && album.albumUsers.length === 0}
|
||||||
|
<Button size="small" disabled={album.assetCount === 0} onclick={handleShare}>
|
||||||
|
{$t('share')}
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
|
</ControlAppBar>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if viewMode === AlbumPageViewMode.SELECT_ASSETS}
|
||||||
|
<ControlAppBar onClose={handleCloseSelectAssets}>
|
||||||
|
{#snippet leading()}
|
||||||
|
<p class="text-lg dark:text-immich-dark-fg">
|
||||||
|
{#if !timelineInteraction.selectionActive}
|
||||||
|
{$t('add_to_album')}
|
||||||
|
{:else}
|
||||||
|
{$t('selected_count', { values: { count: timelineInteraction.selectedAssets.length } })}
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{#snippet trailing()}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onclick={handleSelectFromComputer}
|
||||||
|
class="rounded-lg px-6 py-2 text-sm font-medium text-immich-primary transition-all hover:bg-immich-primary/10 dark:text-immich-dark-primary dark:hover:bg-immich-dark-primary/25"
|
||||||
|
>
|
||||||
|
{$t('select_from_computer')}
|
||||||
|
</button>
|
||||||
|
<Button size="small" disabled={!timelineInteraction.selectionActive} onclick={handleAddAssets}
|
||||||
|
>{$t('done')}</Button
|
||||||
|
>
|
||||||
|
{/snippet}
|
||||||
|
</ControlAppBar>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if viewMode === AlbumPageViewMode.SELECT_THUMBNAIL}
|
||||||
|
<ControlAppBar onClose={() => (viewMode = AlbumPageViewMode.VIEW)}>
|
||||||
|
{#snippet leading()}
|
||||||
|
{$t('select_album_cover')}
|
||||||
|
{/snippet}
|
||||||
|
</ControlAppBar>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{#if album.albumUsers.length > 0 && album && isShowActivity && $user && !$showAssetViewer}
|
{#if album.albumUsers.length > 0 && album && isShowActivity && $user && !$showAssetViewer}
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@ -40,6 +40,20 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||||
|
<AssetGrid
|
||||||
|
enableRouting={true}
|
||||||
|
{assetStore}
|
||||||
|
{assetInteraction}
|
||||||
|
removeAction={AssetAction.UNARCHIVE}
|
||||||
|
onEscape={handleEscape}
|
||||||
|
>
|
||||||
|
{#snippet empty()}
|
||||||
|
<EmptyPlaceholder text={$t('no_archived_assets_message')} />
|
||||||
|
{/snippet}
|
||||||
|
</AssetGrid>
|
||||||
|
</UserPageLayout>
|
||||||
|
|
||||||
{#if assetInteraction.selectionActive}
|
{#if assetInteraction.selectionActive}
|
||||||
<AssetSelectControlBar
|
<AssetSelectControlBar
|
||||||
assets={assetInteraction.selectedAssets}
|
assets={assetInteraction.selectedAssets}
|
||||||
@ -73,17 +87,3 @@
|
|||||||
</ButtonContextMenu>
|
</ButtonContextMenu>
|
||||||
</AssetSelectControlBar>
|
</AssetSelectControlBar>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
|
||||||
<AssetGrid
|
|
||||||
enableRouting={true}
|
|
||||||
{assetStore}
|
|
||||||
{assetInteraction}
|
|
||||||
removeAction={AssetAction.UNARCHIVE}
|
|
||||||
onEscape={handleEscape}
|
|
||||||
>
|
|
||||||
{#snippet empty()}
|
|
||||||
<EmptyPlaceholder text={$t('no_archived_assets_message')} />
|
|
||||||
{/snippet}
|
|
||||||
</AssetGrid>
|
|
||||||
</UserPageLayout>
|
|
||||||
|
|||||||
@ -44,6 +44,21 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||||
|
<AssetGrid
|
||||||
|
enableRouting={true}
|
||||||
|
withStacked={true}
|
||||||
|
{assetStore}
|
||||||
|
{assetInteraction}
|
||||||
|
removeAction={AssetAction.UNFAVORITE}
|
||||||
|
onEscape={handleEscape}
|
||||||
|
>
|
||||||
|
{#snippet empty()}
|
||||||
|
<EmptyPlaceholder text={$t('no_favorites_message')} />
|
||||||
|
{/snippet}
|
||||||
|
</AssetGrid>
|
||||||
|
</UserPageLayout>
|
||||||
|
|
||||||
<!-- Multiselection mode app bar -->
|
<!-- Multiselection mode app bar -->
|
||||||
{#if assetInteraction.selectionActive}
|
{#if assetInteraction.selectionActive}
|
||||||
<AssetSelectControlBar
|
<AssetSelectControlBar
|
||||||
@ -74,18 +89,3 @@
|
|||||||
</ButtonContextMenu>
|
</ButtonContextMenu>
|
||||||
</AssetSelectControlBar>
|
</AssetSelectControlBar>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
|
||||||
<AssetGrid
|
|
||||||
enableRouting={true}
|
|
||||||
withStacked={true}
|
|
||||||
{assetStore}
|
|
||||||
{assetInteraction}
|
|
||||||
removeAction={AssetAction.UNFAVORITE}
|
|
||||||
onEscape={handleEscape}
|
|
||||||
>
|
|
||||||
{#snippet empty()}
|
|
||||||
<EmptyPlaceholder text={$t('no_favorites_message')} />
|
|
||||||
{/snippet}
|
|
||||||
</AssetGrid>
|
|
||||||
</UserPageLayout>
|
|
||||||
|
|||||||
@ -90,6 +90,44 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<UserPageLayout title={data.meta.title}>
|
||||||
|
{#snippet sidebar()}
|
||||||
|
<Sidebar>
|
||||||
|
<SkipLink target={`#${headerId}`} text={$t('skip_to_folders')} breakpoint="md" />
|
||||||
|
<section>
|
||||||
|
<div class="text-xs ps-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
|
||||||
|
<div class="h-full">
|
||||||
|
<TreeItems
|
||||||
|
icons={{ default: mdiFolderOutline, active: mdiFolder }}
|
||||||
|
items={tree}
|
||||||
|
active={currentPath}
|
||||||
|
getLink={getLinkForPath}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</Sidebar>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
<Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} getLink={getLinkForPath} />
|
||||||
|
|
||||||
|
<section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
|
||||||
|
<TreeItemThumbnails items={currentTreeItems} icon={mdiFolder} onClick={handleNavigateToFolder} />
|
||||||
|
|
||||||
|
<!-- Assets -->
|
||||||
|
{#if data.pathAssets && data.pathAssets.length > 0}
|
||||||
|
<div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2">
|
||||||
|
<GalleryViewer
|
||||||
|
assets={data.pathAssets}
|
||||||
|
{assetInteraction}
|
||||||
|
{viewport}
|
||||||
|
showAssetName={true}
|
||||||
|
pageHeaderOffset={54}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</section>
|
||||||
|
</UserPageLayout>
|
||||||
|
|
||||||
{#if assetInteraction.selectionActive}
|
{#if assetInteraction.selectionActive}
|
||||||
<div class="fixed top-0 start-0 w-full">
|
<div class="fixed top-0 start-0 w-full">
|
||||||
<AssetSelectControlBar
|
<AssetSelectControlBar
|
||||||
@ -132,41 +170,3 @@
|
|||||||
</AssetSelectControlBar>
|
</AssetSelectControlBar>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<UserPageLayout title={data.meta.title}>
|
|
||||||
{#snippet sidebar()}
|
|
||||||
<Sidebar>
|
|
||||||
<SkipLink target={`#${headerId}`} text={$t('skip_to_folders')} breakpoint="md" />
|
|
||||||
<section>
|
|
||||||
<div class="text-xs ps-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
|
|
||||||
<div class="h-full">
|
|
||||||
<TreeItems
|
|
||||||
icons={{ default: mdiFolderOutline, active: mdiFolder }}
|
|
||||||
items={tree}
|
|
||||||
active={currentPath}
|
|
||||||
getLink={getLinkForPath}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</Sidebar>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<Breadcrumbs {pathSegments} icon={mdiFolderHome} title={$t('folders')} getLink={getLinkForPath} />
|
|
||||||
|
|
||||||
<section class="mt-2 h-[calc(100%-(--spacing(20)))] overflow-auto immich-scrollbar">
|
|
||||||
<TreeItemThumbnails items={currentTreeItems} icon={mdiFolder} onClick={handleNavigateToFolder} />
|
|
||||||
|
|
||||||
<!-- Assets -->
|
|
||||||
{#if data.pathAssets && data.pathAssets.length > 0}
|
|
||||||
<div bind:clientHeight={viewport.height} bind:clientWidth={viewport.width} class="mt-2">
|
|
||||||
<GalleryViewer
|
|
||||||
assets={data.pathAssets}
|
|
||||||
{assetInteraction}
|
|
||||||
{viewport}
|
|
||||||
showAssetName={true}
|
|
||||||
pageHeaderOffset={54}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</section>
|
|
||||||
</UserPageLayout>
|
|
||||||
|
|||||||
@ -51,26 +51,9 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Multi-selection mode app bar -->
|
|
||||||
{#if assetInteraction.selectionActive}
|
|
||||||
<AssetSelectControlBar
|
|
||||||
assets={assetInteraction.selectedAssets}
|
|
||||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
|
||||||
>
|
|
||||||
<SelectAllAssets withText {assetStore} {assetInteraction} />
|
|
||||||
<SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
|
|
||||||
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
|
||||||
<DownloadAction menuItem />
|
|
||||||
<ChangeDate menuItem />
|
|
||||||
<ChangeLocation menuItem />
|
|
||||||
<DeleteAssets menuItem force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
|
|
||||||
</ButtonContextMenu>
|
|
||||||
</AssetSelectControlBar>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||||
{#snippet buttons()}
|
{#snippet buttons()}
|
||||||
<Button size="small" variant="filled" color="warning" leadingIcon={mdiLockOutline} onclick={handleLock}>
|
<Button size="small" variant="ghost" color="primary" leadingIcon={mdiLockOutline} onclick={handleLock}>
|
||||||
{$t('lock')}
|
{$t('lock')}
|
||||||
</Button>
|
</Button>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
@ -87,3 +70,20 @@
|
|||||||
{/snippet}
|
{/snippet}
|
||||||
</AssetGrid>
|
</AssetGrid>
|
||||||
</UserPageLayout>
|
</UserPageLayout>
|
||||||
|
|
||||||
|
<!-- Multi-selection mode app bar -->
|
||||||
|
{#if assetInteraction.selectionActive}
|
||||||
|
<AssetSelectControlBar
|
||||||
|
assets={assetInteraction.selectedAssets}
|
||||||
|
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||||
|
>
|
||||||
|
<SelectAllAssets withText {assetStore} {assetInteraction} />
|
||||||
|
<SetVisibilityAction unlock onVisibilitySet={handleMoveOffLockedFolder} />
|
||||||
|
<ButtonContextMenu icon={mdiDotsVertical} title={$t('menu')}>
|
||||||
|
<DownloadAction menuItem />
|
||||||
|
<ChangeDate menuItem />
|
||||||
|
<ChangeLocation menuItem />
|
||||||
|
<DeleteAssets menuItem force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||||
|
</ButtonContextMenu>
|
||||||
|
</AssetSelectControlBar>
|
||||||
|
{/if}
|
||||||
|
|||||||
@ -43,6 +43,8 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main class="grid h-dvh pt-18">
|
<main class="grid h-dvh pt-18">
|
||||||
|
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape} />
|
||||||
|
|
||||||
{#if assetInteraction.selectionActive}
|
{#if assetInteraction.selectionActive}
|
||||||
<AssetSelectControlBar
|
<AssetSelectControlBar
|
||||||
assets={assetInteraction.selectedAssets}
|
assets={assetInteraction.selectedAssets}
|
||||||
@ -64,5 +66,4 @@
|
|||||||
{/snippet}
|
{/snippet}
|
||||||
</ControlAppBar>
|
</ControlAppBar>
|
||||||
{/if}
|
{/if}
|
||||||
<AssetGrid enableRouting={true} {assetStore} {assetInteraction} onEscape={handleEscape} />
|
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -421,11 +421,11 @@
|
|||||||
class="flex flex-col justify-center text-start px-4 text-immich-primary dark:text-immich-dark-primary"
|
class="flex flex-col justify-center text-start px-4 text-immich-primary dark:text-immich-dark-primary"
|
||||||
>
|
>
|
||||||
<p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p>
|
<p class="w-40 sm:w-72 font-medium truncate">{person.name || $t('add_a_name')}</p>
|
||||||
<p class="text-sm text-gray-500 dark:text-immich-gray">
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
{$t('assets_count', { values: { count: numberOfAssets } })}
|
{$t('assets_count', { values: { count: numberOfAssets } })}
|
||||||
</p>
|
</p>
|
||||||
{#if person.birthDate}
|
{#if person.birthDate}
|
||||||
<p class="text-sm text-gray-500 dark:text-immich-gray">
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
||||||
{$t('person_birthdate', {
|
{$t('person_birthdate', {
|
||||||
values: {
|
values: {
|
||||||
date: DateTime.fromISO(person.birthDate).toLocaleString(
|
date: DateTime.fromISO(person.birthDate).toLocaleString(
|
||||||
|
|||||||
@ -4,7 +4,6 @@
|
|||||||
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
|
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
|
||||||
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
|
import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
|
||||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
|
||||||
import {
|
import {
|
||||||
notificationController,
|
notificationController,
|
||||||
NotificationType,
|
NotificationType,
|
||||||
@ -20,7 +19,7 @@
|
|||||||
import { AssetStore } from '$lib/stores/assets-store.svelte';
|
import { AssetStore } from '$lib/stores/assets-store.svelte';
|
||||||
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
|
import { buildTree, normalizeTreePath } from '$lib/utils/tree-utils';
|
||||||
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
|
import { deleteTag, getAllTags, updateTag, upsertTags, type TagResponseDto } from '@immich/sdk';
|
||||||
import { Button, HStack, Text } from '@immich/ui';
|
import { Button, HStack, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
|
||||||
import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
|
import { mdiPencil, mdiPlus, mdiTag, mdiTagMultiple, mdiTrashCanOutline } from '@mdi/js';
|
||||||
import { onDestroy } from 'svelte';
|
import { onDestroy } from 'svelte';
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
@ -192,47 +191,55 @@
|
|||||||
</UserPageLayout>
|
</UserPageLayout>
|
||||||
|
|
||||||
{#if isNewOpen}
|
{#if isNewOpen}
|
||||||
<FullScreenModal title={$t('create_tag')} icon={mdiTag} onClose={handleCancel}>
|
<Modal size="small" title={$t('create_tag')} icon={mdiTag} onClose={handleCancel}>
|
||||||
<div class="text-immich-primary dark:text-immich-dark-primary">
|
<ModalBody>
|
||||||
<p class="text-sm dark:text-immich-dark-fg">
|
<div class="text-immich-primary dark:text-immich-dark-primary">
|
||||||
{$t('create_tag_description')}
|
<p class="text-sm dark:text-immich-dark-fg">
|
||||||
</p>
|
{$t('create_tag_description')}
|
||||||
</div>
|
</p>
|
||||||
|
|
||||||
<form {onsubmit} autocomplete="off" id="create-tag-form">
|
|
||||||
<div class="my-4 flex flex-col gap-2">
|
|
||||||
<SettingInputField
|
|
||||||
inputType={SettingInputFieldType.TEXT}
|
|
||||||
label={$t('tag').toUpperCase()}
|
|
||||||
bind:value={newTagValue}
|
|
||||||
required={true}
|
|
||||||
autofocus={true}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
|
|
||||||
{#snippet stickyBottom()}
|
<form {onsubmit} autocomplete="off" id="create-tag-form">
|
||||||
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
|
<div class="my-4 flex flex-col gap-2">
|
||||||
<Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
|
<SettingInputField
|
||||||
{/snippet}
|
inputType={SettingInputFieldType.TEXT}
|
||||||
</FullScreenModal>
|
label={$t('tag').toUpperCase()}
|
||||||
|
bind:value={newTagValue}
|
||||||
|
required={true}
|
||||||
|
autofocus={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
|
<ModalFooter>
|
||||||
|
<div class="flex w-full gap-2">
|
||||||
|
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
|
||||||
|
<Button type="submit" fullWidth shape="round" form="create-tag-form">{$t('create')}</Button>
|
||||||
|
</div>
|
||||||
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if isEditOpen}
|
{#if isEditOpen}
|
||||||
<FullScreenModal title={$t('edit_tag')} icon={mdiTag} onClose={handleCancel}>
|
<Modal title={$t('edit_tag')} icon={mdiTag} onClose={handleCancel}>
|
||||||
<form {onsubmit} autocomplete="off" id="edit-tag-form">
|
<ModalBody>
|
||||||
<div class="my-4 flex flex-col gap-2">
|
<form {onsubmit} autocomplete="off" id="edit-tag-form">
|
||||||
<SettingInputField
|
<div class="my-4 flex flex-col gap-2">
|
||||||
inputType={SettingInputFieldType.COLOR}
|
<SettingInputField
|
||||||
label={$t('color').toUpperCase()}
|
inputType={SettingInputFieldType.COLOR}
|
||||||
bind:value={newTagColor}
|
label={$t('color').toUpperCase()}
|
||||||
/>
|
bind:value={newTagColor}
|
||||||
</div>
|
/>
|
||||||
</form>
|
</div>
|
||||||
|
</form>
|
||||||
|
</ModalBody>
|
||||||
|
|
||||||
{#snippet stickyBottom()}
|
<ModalFooter>
|
||||||
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
|
<div class="flex w-full gap-2">
|
||||||
<Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
|
<Button color="secondary" fullWidth shape="round" onclick={() => handleCancel()}>{$t('cancel')}</Button>
|
||||||
{/snippet}
|
<Button type="submit" fullWidth shape="round" form="edit-tag-form">{$t('save')}</Button>
|
||||||
</FullScreenModal>
|
</div>
|
||||||
|
</ModalFooter>
|
||||||
|
</Modal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@ -90,17 +90,6 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if assetInteraction.selectionActive}
|
|
||||||
<AssetSelectControlBar
|
|
||||||
assets={assetInteraction.selectedAssets}
|
|
||||||
clearSelect={() => assetInteraction.clearMultiselect()}
|
|
||||||
>
|
|
||||||
<SelectAllAssets {assetStore} {assetInteraction} />
|
|
||||||
<DeleteAssets force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
|
|
||||||
<RestoreAssets onRestore={(assetIds) => assetStore.removeAssets(assetIds)} />
|
|
||||||
</AssetSelectControlBar>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#if $featureFlags.loaded && $featureFlags.trash}
|
{#if $featureFlags.loaded && $featureFlags.trash}
|
||||||
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
<UserPageLayout hideNavbar={assetInteraction.selectionActive} title={data.meta.title} scrollbar={false}>
|
||||||
{#snippet buttons()}
|
{#snippet buttons()}
|
||||||
@ -138,3 +127,14 @@
|
|||||||
</AssetGrid>
|
</AssetGrid>
|
||||||
</UserPageLayout>
|
</UserPageLayout>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
{#if assetInteraction.selectionActive}
|
||||||
|
<AssetSelectControlBar
|
||||||
|
assets={assetInteraction.selectedAssets}
|
||||||
|
clearSelect={() => assetInteraction.clearMultiselect()}
|
||||||
|
>
|
||||||
|
<SelectAllAssets {assetStore} {assetInteraction} />
|
||||||
|
<DeleteAssets force onAssetDelete={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||||
|
<RestoreAssets onRestore={(assetIds) => assetStore.removeAssets(assetIds)} />
|
||||||
|
</AssetSelectControlBar>
|
||||||
|
{/if}
|
||||||
|
|||||||
@ -249,47 +249,49 @@
|
|||||||
<div>
|
<div>
|
||||||
<Card color="secondary">
|
<Card color="secondary">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2 px-4 py-2 text-primary">
|
||||||
<Icon icon={mdiAccountOutline} size="1.5rem" />
|
<Icon icon={mdiAccountOutline} size="1.5rem" />
|
||||||
<CardTitle>{$t('profile')}</CardTitle>
|
<CardTitle>{$t('profile')}</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<Stack gap={2}>
|
<div class="px-4 pb-7">
|
||||||
<div>
|
<Stack gap={2}>
|
||||||
<Heading tag="h3" size="tiny">{$t('name')}</Heading>
|
<div>
|
||||||
<Text>{user.name}</Text>
|
<Heading tag="h3" size="tiny">{$t('name')}</Heading>
|
||||||
</div>
|
<Text>{user.name}</Text>
|
||||||
<div>
|
</div>
|
||||||
<Heading tag="h3" size="tiny">{$t('email')}</Heading>
|
<div>
|
||||||
<Text>{user.email}</Text>
|
<Heading tag="h3" size="tiny">{$t('email')}</Heading>
|
||||||
</div>
|
<Text>{user.email}</Text>
|
||||||
<div>
|
</div>
|
||||||
<Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
|
<div>
|
||||||
<Text>{user.createdAt}</Text>
|
<Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
|
||||||
</div>
|
<Text>{user.createdAt}</Text>
|
||||||
<div>
|
</div>
|
||||||
<Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
|
<div>
|
||||||
<Text>{user.updatedAt}</Text>
|
<Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
|
||||||
</div>
|
<Text>{user.updatedAt}</Text>
|
||||||
<div>
|
</div>
|
||||||
<Heading tag="h3" size="tiny">{$t('id')}</Heading>
|
<div>
|
||||||
<Code>{user.id}</Code>
|
<Heading tag="h3" size="tiny">{$t('id')}</Heading>
|
||||||
</div>
|
<Code>{user.id}</Code>
|
||||||
</Stack>
|
</div>
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
<Card color="secondary">
|
<Card color="secondary">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2 px-4 py-2 text-primary">
|
||||||
<Icon icon={mdiFeatureSearchOutline} size="1.5rem" />
|
<Icon icon={mdiFeatureSearchOutline} size="1.5rem" />
|
||||||
<CardTitle>{$t('features')}</CardTitle>
|
<CardTitle>{$t('features')}</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<div>
|
<div class="px-4 pb-4">
|
||||||
<Stack gap={2}>
|
<Stack gap={3}>
|
||||||
<Field readOnly label={$t('email_notifications')}>
|
<Field readOnly label={$t('email_notifications')}>
|
||||||
<Switch checked={userPreferences.emailNotifications.enabled} color="primary" />
|
<Switch checked={userPreferences.emailNotifications.enabled} color="primary" />
|
||||||
</Field>
|
</Field>
|
||||||
@ -320,13 +322,13 @@
|
|||||||
</Card>
|
</Card>
|
||||||
<Card color="secondary">
|
<Card color="secondary">
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div class="flex items-center gap-2">
|
<div class="flex items-center gap-2 px-4 py-2 text-primary">
|
||||||
<Icon icon={mdiChartPieOutline} size="1.5rem" />
|
<Icon icon={mdiChartPieOutline} size="1.5rem" />
|
||||||
<CardTitle>{$t('storage_quota')}</CardTitle>
|
<CardTitle>{$t('storage_quota')}</CardTitle>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<div>
|
<div class="px-4 pb-4">
|
||||||
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
{#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
|
||||||
<Text>
|
<Text>
|
||||||
{$t('storage_usage', {
|
{$t('storage_usage', {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user