Feature - Delete asset on the web (#436)

* Added selection mechanism to photos page

* Added control app bar

* Refactor AlbumAppBar into ControlAppBar

* Added addtional micro interactions when in multi selection mode

* Implemented delete selected asset and rerender
This commit is contained in:
Alex 2022-08-08 22:06:11 -05:00 committed by GitHub
parent 3058c894b1
commit bf04d9eb39
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 147 additions and 17 deletions

View file

@ -12,7 +12,6 @@
import ImmichThumbnail from '../shared-components/immich-thumbnail.svelte';
import AssetSelection from './asset-selection.svelte';
import _ from 'lodash-es';
import AlbumAppBar from './album-app-bar.svelte';
import UserSelectionModal from './user-selection-modal.svelte';
import ShareInfoModal from './share-info-modal.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
@ -22,6 +21,7 @@
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import ThumbnailSelection from './thumbnail-selection.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
export let album: AlbumResponseDto;
@ -272,7 +272,7 @@
<section class="bg-immich-bg">
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<AlbumAppBar
<ControlAppBar
on:close-button-click={clearMultiSelectAssetAssetHandler}
backIcon={Close}
tailwindClasses={'bg-white shadow-md'}
@ -289,12 +289,12 @@
/>
{/if}
</svelte:fragment>
</AlbumAppBar>
</ControlAppBar>
{/if}
<!-- Default app bar -->
{#if !isMultiSelectionMode}
<AlbumAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
<ControlAppBar on:close-button-click={() => goto(backUrl)} backIcon={ArrowLeft}>
<svelte:fragment slot="trailing">
{#if album.assets.length > 0}
<CircleIconButton
@ -329,7 +329,7 @@
>
{/if}
</svelte:fragment>
</AlbumAppBar>
</ControlAppBar>
{/if}
<section class="m-auto my-[160px] w-[60%]">