Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(web): improve feedback for favorite and archive actions #7232

Merged
merged 1 commit into from
Feb 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';

export let onArchive: OnArchive | undefined = undefined;
export let onArchive: OnArchive;

export let menuItem = false;
export let unarchive = false;
Expand Down Expand Up @@ -39,7 +39,7 @@
asset.isArchived = isArchived;
}

onArchive?.(ids, isArchived);
onArchive(ids, isArchived);

notificationController.show({
message: `${isArchived ? 'Archived' : 'Unarchived'} ${ids.length}`,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';

export let onFavorite: OnFavorite | undefined = undefined;
export let onFavorite: OnFavorite;

export let menuItem = false;
export let removeFavorite: boolean;
Expand Down Expand Up @@ -40,7 +40,7 @@
asset.isFavorite = isFavorite;
}

onFavorite?.(ids, isFavorite);
onFavorite(ids, isFavorite);

notificationController.show({
message: isFavorite ? `Added ${ids.length} to favorites` : `Removed ${ids.length} from favorites`,
Expand Down
2 changes: 2 additions & 0 deletions web/src/lib/components/photos-page/asset-date-group.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
export let viewport: Viewport;
export let singleSelect = false;
export let withStacked = false;
export let showArchiveIcon = false;

export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore;
Expand Down Expand Up @@ -170,6 +171,7 @@
>
<Thumbnail
showStackedIcon={withStacked}
{showArchiveIcon}
{asset}
{groupIndex}
on:click={() => assetClickHandler(asset, groupAssets, groupTitle)}
Expand Down
2 changes: 2 additions & 0 deletions web/src/lib/components/photos-page/asset-grid.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
export let assetInteractionStore: AssetInteractionStore;
export let removeAction: AssetAction | null = null;
export let withStacked = false;
export let showArchiveIcon = false;
export let isShared = false;
export let album: AlbumResponseDto | null = null;
export let isShowDeleteConfirmation = false;
Expand Down Expand Up @@ -425,6 +426,7 @@
{#if intersecting}
<AssetDateGroup
{withStacked}
{showArchiveIcon}
{assetStore}
{assetInteractionStore}
{isSelectionMode}
Expand Down
4 changes: 4 additions & 0 deletions web/src/lib/stores/assets.store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,10 @@ export class AssetStore {
return nextBucket.assets[0]?.id || null;
}

triggerUpdate() {
this.emit(false);
}

private emit(recalculate: boolean) {
if (recalculate) {
this.assets = this.buckets.flatMap(({ assets }) => assets);
Expand Down
6 changes: 4 additions & 2 deletions web/src/routes/(user)/albums/[albumId]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@
$: isOwned = $user.id == album.ownerId;
$: isAllUserOwned = [...$selectedAssets].every((asset) => asset.ownerId === $user.id);
$: isAllFavorite = [...$selectedAssets].every((asset) => asset.isFavorite);
$: isAllArchived = [...$selectedAssets].every((asset) => asset.isArchived);
$: {
assetGridWidth = isShowActivity ? globalWidth - (globalWidth < 768 ? 360 : 460) : globalWidth;
}
Expand Down Expand Up @@ -473,9 +474,9 @@
</AssetSelectContextMenu>
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
{#if isAllUserOwned}
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={() => assetStore.triggerUpdate()} />
{/if}
<ArchiveAction menuItem />
<DownloadAction menuItem filename="{album.albumName}.zip" />
{#if isOwned || isAllUserOwned}
<RemoveFromAlbum menuItem bind:album onRemove={(assetIds) => handleRemoveAssets(assetIds)} />
Expand Down Expand Up @@ -591,6 +592,7 @@
isShared={album.sharedUsers.length > 0}
isSelectionMode={viewMode === ViewMode.SELECT_THUMBNAIL}
singleSelect={viewMode === ViewMode.SELECT_THUMBNAIL}
showArchiveIcon
on:select={({ detail: asset }) => handleUpdateThumbnail(asset.id)}
on:escape={handleEscape}
>
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/(user)/archive/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
<DownloadAction menuItem />
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
</AssetSelectContextMenu>
</AssetSelectControlBar>
{/if}
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/(user)/favorites/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<DownloadAction menuItem />
<ArchiveAction menuItem unarchive={isAllArchive} />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => assetStore.removeAssets(ids)} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
</AssetSelectContextMenu>
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/(user)/people/[personId]/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -446,7 +446,7 @@
<DeleteAssets onAssetDelete={(assetId) => $assetStore.removeAsset(assetId)} />
<AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
<DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
<MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
<ChangeDate menuItem />
Expand Down
2 changes: 1 addition & 1 deletion web/src/routes/(user)/photos/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
onAssetDelete={(assetId) => assetStore.removeAsset(assetId)}
/>
<AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={() => assetStore.triggerUpdate()} />
<DownloadAction menuItem />
<ArchiveAction menuItem onArchive={(ids) => assetStore.removeAssets(ids)} />
{#if $selectedAssets.size > 1}
Expand Down
6 changes: 4 additions & 2 deletions web/src/routes/(user)/search/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,8 @@

return personNames.join(', ');
}

const triggerAssetUpdate = () => (searchResultAssets = searchResultAssets);
</script>

<section>
Expand All @@ -239,8 +241,8 @@

<AssetSelectContextMenu icon={mdiDotsVertical} title="Add">
<DownloadAction menuItem />
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
<ArchiveAction menuItem unarchive={isAllArchived} />
<FavoriteAction menuItem removeFavorite={isAllFavorite} onFavorite={triggerAssetUpdate} />
<ArchiveAction menuItem unarchive={isAllArchived} onArchive={triggerAssetUpdate} />
<ChangeDate menuItem />
<ChangeLocation menuItem />
</AssetSelectContextMenu>
Expand Down
Loading