c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-04 02:46:47 +01:00
Code Releases Activity

feat(web, a11y): focus management for modals and popups (#8298)

Browse source 
* feat(web, a11y): focus management for modals and popups

* feat: hide asset options dropdown on escape key
This commit is contained in:
Ben Basten 2024-03-27 20:55:27 +00:00 committed by GitHub
parent 9fe80c25eb
commit e1c2135850
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 459 additions and 359 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View file

@ -182,7 +182,12 @@
{#if !asset.isReadOnly || !asset.isExternal} {#if !asset.isReadOnly || !asset.isExternal}
<CircleIconButton isOpacity={true} icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title="Delete" /> <CircleIconButton isOpacity={true} icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
{/if} {/if}
<div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}> <div
use:clickOutside={{
onOutclick: () => (isShowAssetOptions = false),
onEscape: () => (isShowAssetOptions = false),
}}
>
<CircleIconButton isOpacity={true} icon={mdiDotsVertical} on:click={showOptionsMenu} title="More" /> <CircleIconButton isOpacity={true} icon={mdiDotsVertical} on:click={showOptionsMenu} title="More" />
{#if isShowAssetOptions} {#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition} direction="left"> <ContextMenu {...contextMenuPosition} direction="left">

457
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -50,6 +50,7 @@
import SlideshowBar from './slideshow-bar.svelte'; import SlideshowBar from './slideshow-bar.svelte';
import VideoViewer from './video-viewer.svelte'; import VideoViewer from './video-viewer.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte'; import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
export let assetStore: AssetStore | null = null; export let assetStore: AssetStore | null = null;
export let asset: AssetResponseDto; export let asset: AssetResponseDto;
@ -514,239 +515,255 @@
<svelte:document bind:fullscreenElement /> <svelte:document bind:fullscreenElement />
<section <FocusTrap>
id="immich-asset-viewer" <section
class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black" id="immich-asset-viewer"
> class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
<!-- Top navigation bar --> >
{#if $slideshowState === SlideshowState.None} <!-- Top navigation bar -->
<div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform"> {#if $slideshowState === SlideshowState.None}
<AssetViewerNavBar <div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
{asset} <AssetViewerNavBar
isMotionPhotoPlaying={shouldPlayMotionPhoto} {asset}
showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image} isMotionPhotoPlaying={shouldPlayMotionPhoto}
showZoomButton={asset.type === AssetTypeEnum.Image} showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
showMotionPlayButton={!!asset.livePhotoVideoId} showZoomButton={asset.type === AssetTypeEnum.Image}
showDownloadButton={shouldShowDownloadButton} showMotionPlayButton={!!asset.livePhotoVideoId}
showDetailButton={shouldShowDetailButton} showDownloadButton={shouldShowDownloadButton}
showSlideshow={!!assetStore} showDetailButton={shouldShowDetailButton}
hasStackChildren={$stackAssetsStore.length > 0} showSlideshow={!!assetStore}
showShareButton={shouldShowShareModal} hasStackChildren={$stackAssetsStore.length > 0}
on:back={closeViewer} showShareButton={shouldShowShareModal}
on:showDetail={showDetailInfoHandler} on:back={closeViewer}
on:download={() => downloadFile(asset)} on:showDetail={showDetailInfoHandler}
on:delete={() => trashOrDelete()} on:download={() => downloadFile(asset)}
on:favorite={toggleFavorite} on:delete={() => trashOrDelete()}
on:addToAlbum={() => openAlbumPicker(false)} on:favorite={toggleFavorite}
on:addToSharedAlbum={() => openAlbumPicker(true)} on:addToAlbum={() => openAlbumPicker(false)}
on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)} on:addToSharedAlbum={() => openAlbumPicker(true)}
on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)} on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
on:toggleArchive={toggleArchive} on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
on:asProfileImage={() => (isShowProfileImageCrop = true)} on:toggleArchive={toggleArchive}
on:runJob={({ detail: job }) => handleRunJob(job)} on:asProfileImage={() => (isShowProfileImageCrop = true)}
on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)} on:runJob={({ detail: job }) => handleRunJob(job)}
on:unstack={handleUnstack} on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
on:showShareModal={() => (isShowShareModal = true)} on:unstack={handleUnstack}
/> on:showShareModal={() => (isShowShareModal = true)}
</div>
{/if}
{#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
<NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
<Icon path={mdiChevronLeft} size="36" ariaHidden />
</NavigationArea>
</div>
{/if}
<!-- Asset Viewer -->
<div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}>
{#if $slideshowState != SlideshowState.None}
<div class="z-[1000] absolute w-full flex">
<SlideshowBar
{isFullScreen}
onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
onPrevious={() => navigateAsset('previous')}
onNext={() => navigateAsset('next')}
onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
/> />
</div> </div>
{/if} {/if}
{#if previewStackedAsset} {#if $slideshowState === SlideshowState.None && showNavigation}
{#key previewStackedAsset.id} <div class="z-[1001] column-span-1 col-start-1 row-span-1 row-start-2 mb-[60px] justify-self-start">
{#if previewStackedAsset.type === AssetTypeEnum.Image} <NavigationArea onClick={(e) => navigateAsset('previous', e)} label="View previous asset">
<PhotoViewer asset={previewStackedAsset} {preloadAssets} on:close={closeViewer} haveFadeTransition={false} /> <Icon path={mdiChevronLeft} size="36" ariaHidden />
{:else} </NavigationArea>
<VideoViewer
assetId={previewStackedAsset.id}
on:close={closeViewer}
on:onVideoEnded={handleVideoEnded}
on:onVideoStarted={handleVideoStarted}
/>
{/if}
{/key}
{:else}
{#key asset.id}
{#if !asset.resized}
<div class="flex h-full w-full justify-center">
<div
class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
>
<Icon path={mdiImageBrokenVariant} size="25%" />
</div>
</div>
{:else if asset.type === AssetTypeEnum.Image}
{#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
<VideoViewer
assetId={asset.livePhotoVideoId}
on:close={closeViewer}
on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
/>
{:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
.toLowerCase()
.endsWith('.insp'))}
<PanoramaViewer {asset} />
{:else}
<PhotoViewer {asset} {preloadAssets} on:close={closeViewer} />
{/if}
{:else}
<VideoViewer
assetId={asset.id}
on:close={closeViewer}
on:onVideoEnded={handleVideoEnded}
on:onVideoStarted={handleVideoStarted}
/>
{/if}
{#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
<div class="z-[9999] absolute bottom-0 right-0 mb-6 mr-6 justify-self-end">
<ActivityStatus
disabled={!album?.isActivityEnabled}
{isLiked}
{numberOfComments}
{isShowActivity}
on:favorite={handleFavorite}
on:openActivityTab={handleOpenActivity}
/>
</div>
{/if}
{/key}
{/if}
{#if $stackAssetsStore.length > 0 && withStacked}
<div
id="stack-slideshow"
class="z-[1005] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 mb-1 overflow-x-auto horizontal-scrollbar"
>
<div class="relative w-full whitespace-nowrap transition-all">
{#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
<div
class="{stackedAsset.id == asset.id
? '-translate-y-[1px]'
: '-translate-y-0'} inline-block px-1 transition-transform"
>
<Thumbnail
class="{stackedAsset.id == asset.id
? 'bg-transparent border-2 border-white'
: 'bg-gray-700/40'} inline-block hover:bg-transparent"
asset={stackedAsset}
onClick={() => {
asset = stackedAsset;
preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
}}
on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
readonly
thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
showStackedIcon={false}
/>
{#if stackedAsset.id == asset.id}
<div class="w-full flex place-items-center place-content-center">
<div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
</div>
{/if}
</div>
{/each}
</div>
</div> </div>
{/if} {/if}
</div>
{#if $slideshowState === SlideshowState.None && showNavigation} <!-- Asset Viewer -->
<div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end"> <div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}>
<NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset"> {#if $slideshowState != SlideshowState.None}
<Icon path={mdiChevronRight} size="36" ariaHidden /> <div class="z-[1000] absolute w-full flex">
</NavigationArea> <SlideshowBar
{isFullScreen}
onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
onPrevious={() => navigateAsset('previous')}
onNext={() => navigateAsset('next')}
onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
/>
</div>
{/if}
{#if previewStackedAsset}
{#key previewStackedAsset.id}
{#if previewStackedAsset.type === AssetTypeEnum.Image}
<PhotoViewer
asset={previewStackedAsset}
{preloadAssets}
on:close={closeViewer}
haveFadeTransition={false}
/>
{:else}
<VideoViewer
assetId={previewStackedAsset.id}
on:close={closeViewer}
on:onVideoEnded={handleVideoEnded}
on:onVideoStarted={handleVideoStarted}
/>
{/if}
{/key}
{:else}
{#key asset.id}
{#if !asset.resized}
<div class="flex h-full w-full justify-center">
<div
class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
>
<Icon path={mdiImageBrokenVariant} size="25%" />
</div>
</div>
{:else if asset.type === AssetTypeEnum.Image}
{#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
<VideoViewer
assetId={asset.livePhotoVideoId}
on:close={closeViewer}
on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
/>
{:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
.toLowerCase()
.endsWith('.insp'))}
<PanoramaViewer {asset} />
{:else}
<PhotoViewer {asset} {preloadAssets} on:close={closeViewer} />
{/if}
{:else}
<VideoViewer
assetId={asset.id}
on:close={closeViewer}
on:onVideoEnded={handleVideoEnded}
on:onVideoStarted={handleVideoStarted}
/>
{/if}
{#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
<div class="z-[9999] absolute bottom-0 right-0 mb-6 mr-6 justify-self-end">
<ActivityStatus
disabled={!album?.isActivityEnabled}
{isLiked}
{numberOfComments}
{isShowActivity}
on:favorite={handleFavorite}
on:openActivityTab={handleOpenActivity}
/>
</div>
{/if}
{/key}
{/if}
{#if $stackAssetsStore.length > 0 && withStacked}
<div
id="stack-slideshow"
class="z-[1005] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 mb-1 overflow-x-auto horizontal-scrollbar"
>
<div class="relative w-full whitespace-nowrap transition-all">
{#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
<div
class="{stackedAsset.id == asset.id
? '-translate-y-[1px]'
: '-translate-y-0'} inline-block px-1 transition-transform"
>
<Thumbnail
class="{stackedAsset.id == asset.id
? 'bg-transparent border-2 border-white'
: 'bg-gray-700/40'} inline-block hover:bg-transparent"
asset={stackedAsset}
onClick={() => {
asset = stackedAsset;
preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
}}
on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
readonly
thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
showStackedIcon={false}
/>
{#if stackedAsset.id == asset.id}
<div class="w-full flex place-items-center place-content-center">
<div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
</div>
{/if}
</div>
{/each}
</div>
</div>
{/if}
</div> </div>
{/if}
{#if $slideshowState === SlideshowState.None && $isShowDetail} {#if $slideshowState === SlideshowState.None && showNavigation}
<div <div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
transition:fly={{ duration: 150 }} <NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
id="detail-panel" <Icon path={mdiChevronRight} size="36" ariaHidden />
class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg" </NavigationArea>
translate="yes" </div>
> {/if}
<DetailPanel
{#if $slideshowState === SlideshowState.None && $isShowDetail}
<div
transition:fly={{ duration: 150 }}
id="detail-panel"
class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
translate="yes"
>
<DetailPanel
{asset}
currentAlbum={album}
albums={appearsInAlbums}
on:close={() => ($isShowDetail = false)}
on:closeViewer={handleCloseViewer}
/>
</div>
{/if}
{#if isShared && album && isShowActivity && $user}
<div
transition:fly={{ duration: 150 }}
id="activity-panel"
class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
translate="yes"
>
<ActivityViewer
user={$user}
disabled={!album.isActivityEnabled}
assetType={asset.type}
albumOwnerId={album.ownerId}
albumId={album.id}
assetId={asset.id}
{isLiked}
bind:reactions
on:addComment={handleAddComment}
on:deleteComment={handleRemoveComment}
on:deleteLike={() => (isLiked = null)}
on:close={() => (isShowActivity = false)}
/>
</div>
{/if}
{#if isShowAlbumPicker}
<AlbumSelectionModal
shared={addToSharedAlbum}
on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
on:album={({ detail }) => handleAddToAlbum(detail)}
on:close={() => (isShowAlbumPicker = false)}
on:escape={() => (isShowAlbumPicker = false)}
/>
{/if}
{#if isShowDeleteConfirmation}
<DeleteAssetDialog
size={1}
on:cancel={() => (isShowDeleteConfirmation = false)}
on:escape={() => (isShowDeleteConfirmation = false)}
on:confirm={() => deleteAsset()}
/>
{/if}
{#if isShowProfileImageCrop}
<ProfileImageCropper
{asset} {asset}
currentAlbum={album} on:close={() => (isShowProfileImageCrop = false)}
albums={appearsInAlbums} on:escape={() => (isShowProfileImageCrop = false)}
on:close={() => ($isShowDetail = false)}
on:closeViewer={handleCloseViewer}
/> />
</div> {/if}
{/if}
{#if isShared && album && isShowActivity && $user} {#if isShowShareModal}
<div <CreateSharedLinkModal
transition:fly={{ duration: 150 }} assetIds={[asset.id]}
id="activity-panel" on:close={() => (isShowShareModal = false)}
class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg" on:escape={() => (isShowShareModal = false)}
translate="yes"
>
<ActivityViewer
user={$user}
disabled={!album.isActivityEnabled}
assetType={asset.type}
albumOwnerId={album.ownerId}
albumId={album.id}
assetId={asset.id}
{isLiked}
bind:reactions
on:addComment={handleAddComment}
on:deleteComment={handleRemoveComment}
on:deleteLike={() => (isLiked = null)}
on:close={() => (isShowActivity = false)}
/> />
</div> {/if}
{/if} </section>
</FocusTrap>
{#if isShowAlbumPicker}
<AlbumSelectionModal
shared={addToSharedAlbum}
on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
on:album={({ detail }) => handleAddToAlbum(detail)}
on:close={() => (isShowAlbumPicker = false)}
/>
{/if}
{#if isShowDeleteConfirmation}
<DeleteAssetDialog
size={1}
on:cancel={() => (isShowDeleteConfirmation = false)}
on:escape={() => (isShowDeleteConfirmation = false)}
on:confirm={() => deleteAsset()}
/>
{/if}
{#if isShowProfileImageCrop}
<ProfileImageCropper {asset} on:close={() => (isShowProfileImageCrop = false)} />
{/if}
{#if isShowShareModal}
<CreateSharedLinkModal assetIds={[asset.id]} on:close={() => (isShowShareModal = false)} />
{/if}
</section>
<style> <style>
#immich-asset-viewer { #immich-asset-viewer {

119
web/src/lib/components/forms/edit-user-form.svelte
View file

@ -10,6 +10,7 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import Button from '../elements/buttons/button.svelte'; import Button from '../elements/buttons/button.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
export let user: UserResponseDto; export let user: UserResponseDto;
export let canResetPassword = true; export let canResetPassword = true;
@ -90,76 +91,78 @@
} }
</script> </script>
<div <FocusTrap>
class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
>
<div class="absolute top-0 right-0 px-2 py-2 h-fit">
<CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
</div>
<div <div
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary" class="relative max-h-screen w-[500px] max-w-[95vw] overflow-y-auto rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
> >
<Icon path={mdiAccountEditOutline} size="4em" /> <div class="absolute top-0 right-0 px-2 py-2 h-fit">
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1> <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
</div>
<form on:submit|preventDefault={editUser} autocomplete="off">
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="email">Email</label>
<input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
</div> </div>
<div class="m-4 flex flex-col gap-2"> <div
<label class="immich-form-label" for="name">Name</label> class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
<input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} /> >
<Icon path={mdiAccountEditOutline} size="4em" />
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1>
</div> </div>
<div class="m-4 flex flex-col gap-2"> <form on:submit|preventDefault={editUser} autocomplete="off">
<label class="flex items-center gap-2 immich-form-label" for="quotaSize" <div class="m-4 flex flex-col gap-2">
>Quota Size (GiB) {#if quotaSizeWarning} <label class="immich-form-label" for="email">Email</label>
<p class="text-red-400 text-sm">You set a quota higher than the disk size</p> <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
{/if}</label </div>
>
<input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
<p>Note: Enter 0 for unlimited quota</p>
</div>
<div class="m-4 flex flex-col gap-2"> <div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="storage-label">Storage Label</label> <label class="immich-form-label" for="name">Name</label>
<input <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
class="immich-form-input" </div>
id="storage-label"
name="storage-label"
type="text"
bind:value={user.storageLabel}
/>
<p> <div class="m-4 flex flex-col gap-2">
Note: To apply the Storage Label to previously uploaded assets, run the <label class="flex items-center gap-2 immich-form-label" for="quotaSize"
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary"> >Quota Size (GiB) {#if quotaSizeWarning}
Storage Migration Job</a <p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
{/if}</label
> >
</p> <input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
</div> <p>Note: Enter 0 for unlimited quota</p>
</div>
{#if error} <div class="m-4 flex flex-col gap-2">
<p class="ml-4 text-sm text-red-400">{error}</p> <label class="immich-form-label" for="storage-label">Storage Label</label>
{/if} <input
class="immich-form-input"
id="storage-label"
name="storage-label"
type="text"
bind:value={user.storageLabel}
/>
{#if success} <p>
<p class="ml-4 text-sm text-immich-primary">{success}</p> Note: To apply the Storage Label to previously uploaded assets, run the
{/if} <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
<div class="mt-8 flex w-full gap-4 px-4"> Storage Migration Job</a
{#if canResetPassword} >
<Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)} </p>
>Reset password</Button </div>
>
{#if error}
<p class="ml-4 text-sm text-red-400">{error}</p>
{/if} {/if}
<Button type="submit" fullwidth>Confirm</Button>
</div> {#if success}
</form> <p class="ml-4 text-sm text-immich-primary">{success}</p>
</div> {/if}
<div class="mt-8 flex w-full gap-4 px-4">
{#if canResetPassword}
<Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)}
>Reset password</Button
>
{/if}
<Button type="submit" fullwidth>Confirm</Button>
</div>
</form>
</div>
</FocusTrap>
{#if isShowResetPasswordConfirmation} {#if isShowResetPasswordConfirmation}
<ConfirmDialogue <ConfirmDialogue

2
web/src/lib/components/shared-components/album-selection-modal.svelte
View file

@ -45,7 +45,7 @@
}; };
</script> </script>
<BaseModal on:close={() => dispatch('close')}> <BaseModal on:close on:escape>
<svelte:fragment slot="title"> <svelte:fragment slot="title">
<span class="flex place-items-center gap-2"> <span class="flex place-items-center gap-2">
<p class="font-medium"> <p class="font-medium">

58
web/src/lib/components/shared-components/base-modal.svelte
View file

@ -6,13 +6,13 @@
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { clickOutside } from '$lib/utils/click-outside'; import { clickOutside } from '$lib/utils/click-outside';
import { mdiClose } from '@mdi/js'; import { mdiClose } from '@mdi/js';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
escape: void; escape: void;
close: void; close: void;
}>(); }>();
export let zIndex = 9999; export let zIndex = 9999;
export let ignoreClickOutside = false;
onMount(() => { onMount(() => {
if (browser) { if (browser) {
@ -34,36 +34,40 @@
}); });
</script> </script>
<div <FocusTrap>
id="immich-modal"
style:z-index={zIndex}
transition:fade={{ duration: 100, easing: quintOut }}
class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
>
<div <div
use:clickOutside id="immich-modal"
on:outclick={() => !ignoreClickOutside && dispatch('close')} style:z-index={zIndex}
on:escape={() => dispatch('escape')} transition:fade={{ duration: 100, easing: quintOut }}
class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar" class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
> >
<div class="flex place-items-center justify-between px-5 py-3"> <div
use:clickOutside={{
onOutclick: () => dispatch('close'),
onEscape: () => dispatch('escape'),
}}
class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
tabindex="-1"
>
<div class="flex place-items-center justify-between px-5 py-3">
<div>
<slot name="title">
<p>Modal Title</p>
</slot>
</div>
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
</div>
<div> <div>
<slot name="title"> <slot />
<p>Modal Title</p>
</slot>
</div> </div>
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} /> {#if $$slots['sticky-bottom']}
<div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
<slot name="sticky-bottom" />
</div>
{/if}
</div> </div>
<div>
<slot />
</div>
{#if $$slots['sticky-bottom']}
<div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
<slot name="sticky-bottom" />
</div>
{/if}
</div> </div>
</div> </FocusTrap>

3
web/src/lib/components/shared-components/combobox.svelte
View file

@ -185,7 +185,8 @@
}, },
{ {
shortcut: { key: 'Escape' }, shortcut: { key: 'Escape' },
onShortcut: () => { onShortcut: (event) => {
event.stopPropagation();
closeDropdown(); closeDropdown();
}, },
}, },

62
web/src/lib/components/shared-components/focus-trap.svelte Normal file
View file

@ -0,0 +1,62 @@
<script lang="ts">
import { shortcuts } from '$lib/utils/shortcut';
import { onMount, onDestroy } from 'svelte';
let container: HTMLElement;
let triggerElement: HTMLElement;
onMount(() => {
triggerElement = document.activeElement as HTMLElement;
const focusableElements = getFocusableElements();
focusableElements[0]?.focus();
});
onDestroy(() => {
triggerElement?.focus();
});
const getFocusableElements = () => {
return Array.from(
container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
) as HTMLElement[];
};
const trapFocus = (direction: 'forward' | 'backward', event: KeyboardEvent) => {
const focusableElements = getFocusableElements();
const elementCount = focusableElements.length;
const firstElement = focusableElements[0];
const lastElement = focusableElements.at(elementCount - 1);
if (document.activeElement === lastElement && direction === 'forward') {
event.preventDefault();
firstElement?.focus();
} else if (document.activeElement === firstElement && direction === 'backward') {
event.preventDefault();
lastElement?.focus();
}
};
</script>
<div
bind:this={container}
use:shortcuts={[
{
ignoreInputFields: false,
shortcut: { key: 'Tab' },
onShortcut: (event) => {
trapFocus('forward', event);
},
preventDefault: false,
},
{
ignoreInputFields: false,
shortcut: { key: 'Tab', shift: true },
onShortcut: (event) => {
trapFocus('backward', event);
},
preventDefault: false,
},
]}
>
<slot />
</div>

21
web/src/lib/components/shared-components/full-screen-modal.svelte
View file

@ -1,16 +1,19 @@
<script lang="ts"> <script lang="ts">
import { clickOutside } from '../../utils/click-outside'; import { clickOutside } from '../../utils/click-outside';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
export let onClose: (() => void) | undefined = undefined; export let onClose: (() => void) | undefined = undefined;
</script> </script>
<section <FocusTrap>
in:fade={{ duration: 100 }} <section
out:fade={{ duration: 100 }} in:fade={{ duration: 100 }}
class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40" out:fade={{ duration: 100 }}
> class="fixed left-0 top-0 z-[9990] flex h-screen w-screen place-content-center place-items-center bg-black/40"
<div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}> >
<slot /> <div class="z-[9999]" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} tabindex="-1">
</div> <slot />
</section> </div>
</section>
</FocusTrap>

76
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -11,6 +11,7 @@
import { notificationController, NotificationType } from '../notification/notification'; import { notificationController, NotificationType } from '../notification/notification';
import UserAvatar from '../user-avatar.svelte'; import UserAvatar from '../user-avatar.svelte';
import AvatarSelector from './avatar-selector.svelte'; import AvatarSelector from './avatar-selector.svelte';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
let isShowSelectAvatar = false; let isShowSelectAvatar = false;
@ -46,19 +47,20 @@
}; };
</script> </script>
<div <FocusTrap>
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<div <div
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10" in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<div class="relative"> <div
{#key $user} class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
<UserAvatar user={$user} size="xl" /> >
<div class="relative">
{#key $user}
<UserAvatar user={$user} size="xl" />
{/key}
<div <div
class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary" class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6 border dark:border-immich-dark-primary bg-immich-primary"
> >
@ -69,35 +71,35 @@
<Icon path={mdiPencil} /> <Icon path={mdiPencil} />
</button> </button>
</div> </div>
{/key} </div>
</div> <div>
<div> <p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary"> {$user.name}
{$user.name} </p>
</p> <p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p> </div>
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex place-content-center place-items-center gap-2 px-2">
<Icon path={mdiCog} size="18" />
Account Settings
</div>
</Button>
</a>
</div> </div>
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}> <div class="mb-4 flex flex-col">
<Button color="dark-gray" size="sm" shadow={false} border> <button
<div class="flex place-content-center place-items-center gap-2 px-2"> class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
<Icon path={mdiCog} size="18" /> on:click={() => dispatch('logout')}
Account Settings >
</div> <Icon path={mdiLogout} size={24} />
</Button> Sign Out</button
</a> >
</div>
</div> </div>
</FocusTrap>
<div class="mb-4 flex flex-col">
<button
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
on:click={() => dispatch('logout')}
>
<Icon path={mdiLogout} size={24} />
Sign Out</button
>
</div>
</div>
{#if isShowSelectAvatar} {#if isShowSelectAvatar}
<AvatarSelector <AvatarSelector
user={$user} user={$user}

2
web/src/lib/components/shared-components/profile-image-cropper.svelte
View file

@ -71,7 +71,7 @@
}; };
</script> </script>
<BaseModal on:close> <BaseModal on:close on:escape>
<svelte:fragment slot="title"> <svelte:fragment slot="title">
<span class="flex place-items-center gap-2"> <span class="flex place-items-center gap-2">
<p class="font-medium">Set profile picture</p> <p class="font-medium">Set profile picture</p>

4
web/src/lib/utils/click-outside.ts
View file

@ -43,12 +43,12 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
}; };
document.addEventListener('click', handleClick, true); document.addEventListener('click', handleClick, true);
document.addEventListener('keydown', handleKey, true); node.addEventListener('keydown', handleKey, false);
return { return {
destroy() { destroy() {
document.removeEventListener('click', handleClick, true); document.removeEventListener('click', handleClick, true);
document.removeEventListener('keydown', handleKey, true); node.removeEventListener('keydown', handleKey, false);
}, },
}; };
} }

7
web/src/lib/utils/shortcut.ts
View file

@ -12,6 +12,7 @@ export type ShortcutOptions<T = HTMLElement> = {
shortcut: Shortcut; shortcut: Shortcut;
ignoreInputFields?: boolean; ignoreInputFields?: boolean;
onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown; onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
preventDefault?: boolean;
}; };
export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => { export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
@ -53,13 +54,15 @@ export const shortcuts = <T extends HTMLElement>(
function onKeydown(event: KeyboardEvent) { function onKeydown(event: KeyboardEvent) {
const ignoreShortcut = shouldIgnoreShortcut(event); const ignoreShortcut = shouldIgnoreShortcut(event);
for (const { shortcut, onShortcut, ignoreInputFields = true } of options) { for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
if (ignoreInputFields && ignoreShortcut) { if (ignoreInputFields && ignoreShortcut) {
continue; continue;
} }
if (matchesShortcut(event, shortcut)) { if (matchesShortcut(event, shortcut)) {
event.preventDefault(); if (preventDefault) {
event.preventDefault();
}
onShortcut(event as KeyboardEvent & { currentTarget: T }); onShortcut(event as KeyboardEvent & { currentTarget: T });
return; return;
} }