mirror of
https://github.com/immich-app/immich.git
synced 2025-01-01 08:31:59 +00:00
feat(web, a11y): focus management for modals and popups (#8298)
* feat(web, a11y): focus management for modals and popups * feat: hide asset options dropdown on escape key
This commit is contained in:
Ben Basten
GitHub
parent
9fe80c25eb
commit
e1c2135850
12 changed files with 459 additions and 359 deletions
|
|
@ -182,7 +182,12 @@
|
|||
{#if !asset.isReadOnly || !asset.isExternal}
|
||||
<CircleIconButton isOpacity={true} icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
|
||||
{/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" />
|
||||
{#if isShowAssetOptions}
|
||||
<ContextMenu {...contextMenuPosition} direction="left">
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@
|
|||
import SlideshowBar from './slideshow-bar.svelte';
|
||||
import VideoViewer from './video-viewer.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 asset: AssetResponseDto;
|
||||
|
|
@ -514,239 +515,255 @@
|
|||
|
||||
<svelte:document bind:fullscreenElement />
|
||||
|
||||
<section
|
||||
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}
|
||||
<div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
|
||||
<AssetViewerNavBar
|
||||
{asset}
|
||||
isMotionPhotoPlaying={shouldPlayMotionPhoto}
|
||||
showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
|
||||
showZoomButton={asset.type === AssetTypeEnum.Image}
|
||||
showMotionPlayButton={!!asset.livePhotoVideoId}
|
||||
showDownloadButton={shouldShowDownloadButton}
|
||||
showDetailButton={shouldShowDetailButton}
|
||||
showSlideshow={!!assetStore}
|
||||
hasStackChildren={$stackAssetsStore.length > 0}
|
||||
showShareButton={shouldShowShareModal}
|
||||
on:back={closeViewer}
|
||||
on:showDetail={showDetailInfoHandler}
|
||||
on:download={() => downloadFile(asset)}
|
||||
on:delete={() => trashOrDelete()}
|
||||
on:favorite={toggleFavorite}
|
||||
on:addToAlbum={() => openAlbumPicker(false)}
|
||||
on:addToSharedAlbum={() => openAlbumPicker(true)}
|
||||
on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
|
||||
on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
|
||||
on:toggleArchive={toggleArchive}
|
||||
on:asProfileImage={() => (isShowProfileImageCrop = true)}
|
||||
on:runJob={({ detail: job }) => handleRunJob(job)}
|
||||
on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
|
||||
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)}
|
||||
<FocusTrap>
|
||||
<section
|
||||
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}
|
||||
<div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
|
||||
<AssetViewerNavBar
|
||||
{asset}
|
||||
isMotionPhotoPlaying={shouldPlayMotionPhoto}
|
||||
showCopyButton={canCopyImagesToClipboard && asset.type === AssetTypeEnum.Image}
|
||||
showZoomButton={asset.type === AssetTypeEnum.Image}
|
||||
showMotionPlayButton={!!asset.livePhotoVideoId}
|
||||
showDownloadButton={shouldShowDownloadButton}
|
||||
showDetailButton={shouldShowDetailButton}
|
||||
showSlideshow={!!assetStore}
|
||||
hasStackChildren={$stackAssetsStore.length > 0}
|
||||
showShareButton={shouldShowShareModal}
|
||||
on:back={closeViewer}
|
||||
on:showDetail={showDetailInfoHandler}
|
||||
on:download={() => downloadFile(asset)}
|
||||
on:delete={() => trashOrDelete()}
|
||||
on:favorite={toggleFavorite}
|
||||
on:addToAlbum={() => openAlbumPicker(false)}
|
||||
on:addToSharedAlbum={() => openAlbumPicker(true)}
|
||||
on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
|
||||
on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
|
||||
on:toggleArchive={toggleArchive}
|
||||
on:asProfileImage={() => (isShowProfileImageCrop = true)}
|
||||
on:runJob={({ detail: job }) => handleRunJob(job)}
|
||||
on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
|
||||
on:unstack={handleUnstack}
|
||||
on:showShareModal={() => (isShowShareModal = true)}
|
||||
/>
|
||||
</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>
|
||||
{#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}
|
||||
</div>
|
||||
|
||||
{#if $slideshowState === SlideshowState.None && showNavigation}
|
||||
<div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
|
||||
<NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
|
||||
<Icon path={mdiChevronRight} size="36" ariaHidden />
|
||||
</NavigationArea>
|
||||
<!-- 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>
|
||||
{/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>
|
||||
{/if}
|
||||
|
||||
{#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
|
||||
{#if $slideshowState === SlideshowState.None && showNavigation}
|
||||
<div class="z-[1001] col-span-1 col-start-4 row-span-1 row-start-2 mb-[60px] justify-self-end">
|
||||
<NavigationArea onClick={(e) => navigateAsset('next', e)} label="View next asset">
|
||||
<Icon path={mdiChevronRight} size="36" ariaHidden />
|
||||
</NavigationArea>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#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}
|
||||
currentAlbum={album}
|
||||
albums={appearsInAlbums}
|
||||
on:close={() => ($isShowDetail = false)}
|
||||
on:closeViewer={handleCloseViewer}
|
||||
on:close={() => (isShowProfileImageCrop = false)}
|
||||
on:escape={() => (isShowProfileImageCrop = false)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/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)}
|
||||
{#if isShowShareModal}
|
||||
<CreateSharedLinkModal
|
||||
assetIds={[asset.id]}
|
||||
on:close={() => (isShowShareModal = false)}
|
||||
on:escape={() => (isShowShareModal = false)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#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>
|
||||
{/if}
|
||||
</section>
|
||||
</FocusTrap>
|
||||
|
||||
<style>
|
||||
#immich-asset-viewer {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
import { createEventDispatcher } from 'svelte';
|
||||
import Button from '../elements/buttons/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 canResetPassword = true;
|
||||
|
|
@ -90,76 +91,78 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
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>
|
||||
|
||||
<FocusTrap>
|
||||
<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" />
|
||||
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1>
|
||||
</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 class="absolute top-0 right-0 px-2 py-2 h-fit">
|
||||
<CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
|
||||
</div>
|
||||
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">Name</label>
|
||||
<input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
|
||||
<div
|
||||
class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
|
||||
>
|
||||
<Icon path={mdiAccountEditOutline} size="4em" />
|
||||
<h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Edit user</h1>
|
||||
</div>
|
||||
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="flex items-center gap-2 immich-form-label" for="quotaSize"
|
||||
>Quota Size (GiB) {#if quotaSizeWarning}
|
||||
<p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
|
||||
{/if}</label
|
||||
>
|
||||
<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>
|
||||
<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 class="m-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="storage-label">Storage Label</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="storage-label"
|
||||
name="storage-label"
|
||||
type="text"
|
||||
bind:value={user.storageLabel}
|
||||
/>
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">Name</label>
|
||||
<input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Note: To apply the Storage Label to previously uploaded assets, run the
|
||||
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
|
||||
Storage Migration Job</a
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="flex items-center gap-2 immich-form-label" for="quotaSize"
|
||||
>Quota Size (GiB) {#if quotaSizeWarning}
|
||||
<p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
|
||||
{/if}</label
|
||||
>
|
||||
</p>
|
||||
</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>
|
||||
|
||||
{#if error}
|
||||
<p class="ml-4 text-sm text-red-400">{error}</p>
|
||||
{/if}
|
||||
<div class="m-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="storage-label">Storage Label</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="storage-label"
|
||||
name="storage-label"
|
||||
type="text"
|
||||
bind:value={user.storageLabel}
|
||||
/>
|
||||
|
||||
{#if success}
|
||||
<p class="ml-4 text-sm text-immich-primary">{success}</p>
|
||||
{/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
|
||||
>
|
||||
<p>
|
||||
Note: To apply the Storage Label to previously uploaded assets, run the
|
||||
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
|
||||
Storage Migration Job</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if error}
|
||||
<p class="ml-4 text-sm text-red-400">{error}</p>
|
||||
{/if}
|
||||
<Button type="submit" fullwidth>Confirm</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{#if success}
|
||||
<p class="ml-4 text-sm text-immich-primary">{success}</p>
|
||||
{/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}
|
||||
<ConfirmDialogue
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<BaseModal on:close={() => dispatch('close')}>
|
||||
<BaseModal on:close on:escape>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="flex place-items-center gap-2">
|
||||
<p class="font-medium">
|
||||
|
|
|
|||
|
|
@ -6,13 +6,13 @@
|
|||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import { mdiClose } from '@mdi/js';
|
||||
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
escape: void;
|
||||
close: void;
|
||||
}>();
|
||||
export let zIndex = 9999;
|
||||
export let ignoreClickOutside = false;
|
||||
|
||||
onMount(() => {
|
||||
if (browser) {
|
||||
|
|
@ -34,36 +34,40 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<FocusTrap>
|
||||
<div
|
||||
use:clickOutside
|
||||
on:outclick={() => !ignoreClickOutside && dispatch('close')}
|
||||
on:escape={() => 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"
|
||||
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 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>
|
||||
<slot name="title">
|
||||
<p>Modal Title</p>
|
||||
</slot>
|
||||
<slot />
|
||||
</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>
|
||||
<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>
|
||||
</FocusTrap>
|
||||
|
|
|
|||
|
|
@ -185,7 +185,8 @@
|
|||
},
|
||||
{
|
||||
shortcut: { key: 'Escape' },
|
||||
onShortcut: () => {
|
||||
onShortcut: (event) => {
|
||||
event.stopPropagation();
|
||||
closeDropdown();
|
||||
},
|
||||
},
|
||||
|
|
|
|||
62
web/src/lib/components/shared-components/focus-trap.svelte
Normal file
62
web/src/lib/components/shared-components/focus-trap.svelte
Normal 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>
|
||||
|
|
@ -1,16 +1,19 @@
|
|||
<script lang="ts">
|
||||
import { clickOutside } from '../../utils/click-outside';
|
||||
import { fade } from 'svelte/transition';
|
||||
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
|
||||
|
||||
export let onClose: (() => void) | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<section
|
||||
in:fade={{ duration: 100 }}
|
||||
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>
|
||||
</section>
|
||||
<FocusTrap>
|
||||
<section
|
||||
in:fade={{ duration: 100 }}
|
||||
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 }} tabindex="-1">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</FocusTrap>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
import { notificationController, NotificationType } from '../notification/notification';
|
||||
import UserAvatar from '../user-avatar.svelte';
|
||||
import AvatarSelector from './avatar-selector.svelte';
|
||||
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
|
||||
|
||||
let isShowSelectAvatar = false;
|
||||
|
||||
|
|
@ -46,19 +47,20 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<FocusTrap>
|
||||
<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">
|
||||
{#key $user}
|
||||
<UserAvatar user={$user} size="xl" />
|
||||
|
||||
<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"
|
||||
>
|
||||
<div class="relative">
|
||||
{#key $user}
|
||||
<UserAvatar user={$user} size="xl" />
|
||||
{/key}
|
||||
<div
|
||||
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} />
|
||||
</button>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
{$user.name}
|
||||
</p>
|
||||
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
|
||||
{$user.name}
|
||||
</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>
|
||||
|
||||
<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 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>
|
||||
|
||||
<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>
|
||||
</FocusTrap>
|
||||
{#if isShowSelectAvatar}
|
||||
<AvatarSelector
|
||||
user={$user}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@
|
|||
};
|
||||
</script>
|
||||
|
||||
<BaseModal on:close>
|
||||
<BaseModal on:close on:escape>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="flex place-items-center gap-2">
|
||||
<p class="font-medium">Set profile picture</p>
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
|
|||
};
|
||||
|
||||
document.addEventListener('click', handleClick, true);
|
||||
document.addEventListener('keydown', handleKey, true);
|
||||
node.addEventListener('keydown', handleKey, false);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener('click', handleClick, true);
|
||||
document.removeEventListener('keydown', handleKey, true);
|
||||
node.removeEventListener('keydown', handleKey, false);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ export type ShortcutOptions<T = HTMLElement> = {
|
|||
shortcut: Shortcut;
|
||||
ignoreInputFields?: boolean;
|
||||
onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
|
||||
preventDefault?: boolean;
|
||||
};
|
||||
|
||||
export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
|
||||
|
|
@ -53,13 +54,15 @@ export const shortcuts = <T extends HTMLElement>(
|
|||
function onKeydown(event: KeyboardEvent) {
|
||||
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) {
|
||||
continue;
|
||||
}
|
||||
|
||||
if (matchesShortcut(event, shortcut)) {
|
||||
event.preventDefault();
|
||||
if (preventDefault) {
|
||||
event.preventDefault();
|
||||
}
|
||||
onShortcut(event as KeyboardEvent & { currentTarget: T });
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue