helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): use time buckets of person detail page (3) (#3557)

Browse source 
* feat: add personId to time bucket endpoints

* chore: open api

* feat(web): time bucket on person detail page
This commit is contained in:
Jason Rasmussen 2023-08-05 09:58:52 -04:00 • committed by GitHub
parent 68b5202730
commit ff32506c5e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 402 additions and 316 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -18,8 +18,9 @@
export let assets: AssetResponseDto[];
export let bucketDate: string;
export let bucketHeight: number;
export let isAlbumSelectionMode = false;
export let isSelectionMode = false;
export let viewport: Viewport;
export let singleSelect = false;
export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore;
@ -90,16 +91,12 @@
assetsInDateGroup: AssetResponseDto[],
dateGroupTitle: string,
) => {
if (isAlbumSelectionMode) {
if (isSelectionMode || $isMultiSelectState) {
assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
return;
}
if ($isMultiSelectState) {
assetSelectHandler(asset, assetsInDateGroup, dateGroupTitle);
} else {
assetViewingStore.setAssetId(asset.id);
}
assetViewingStore.setAssetId(asset.id);
};
const selectAssetGroupHandler = (selectAssetGroupHandler: AssetResponseDto[], dateGroupTitle: string) => {
@ -166,7 +163,7 @@
class="mb-2 flex h-6 place-items-center text-xs font-medium text-immich-fg dark:text-immich-dark-fg md:text-sm"
style="width: {geometry[groupIndex].containerWidth}px"
>
{#if (hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle)}
{#if !singleSelect && ((hoveredDateGroup == dateGroupTitle && isMouseOverGroup) || $selectedGroup.has(dateGroupTitle))}
<div
transition:fly={{ x: -24, duration: 200, opacity: 0.5 }}
class="inline-block px-2 hover:cursor-pointer"

17
web/src/lib/components/photos-page/asset-grid.svelte
View file

@ -4,7 +4,7 @@
import { formatGroupTitle, splitBucketIntoDateGroups } from '$lib/utils/timeline-util';
import type { AssetResponseDto } from '@api';
import { DateTime } from 'luxon';
import { onDestroy, onMount } from 'svelte';
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import AssetViewer from '../asset-viewer/asset-viewer.svelte';
import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
import Portal from '../shared-components/portal/portal.svelte';
@ -19,7 +19,8 @@
import { isSearchEnabled } from '$lib/stores/search.store';
import ShowShortcuts from '../shared-components/show-shortcuts.svelte';
export let isAlbumSelectionMode = false;
export let isSelectionMode = false;
export let singleSelect = false;
export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore;
export let removeAction: AssetAction | null = null;
@ -33,6 +34,7 @@
$: timelineY = element?.scrollTop || 0;
const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
const dispatch = createEventDispatcher<{ select: AssetResponseDto }>();
onMount(async () => {
document.addEventListener('keydown', onKeyboardPress);
@ -173,11 +175,17 @@
};
const handleSelectAssets = async (e: CustomEvent) => {
const asset = e.detail.asset;
const asset = e.detail.asset as AssetResponseDto;
if (!asset) {
return;
}
dispatch('select', asset);
if (singleSelect) {
element.scrollTop = 0;
}
const rangeSelection = $assetSelectionCandidates.size > 0;
const deselect = $selectedAssets.has(asset);
@ -308,7 +316,8 @@
<AssetDateGroup
{assetStore}
{assetInteractionStore}
{isAlbumSelectionMode}
{isSelectionMode}
{singleSelect}
on:shift={handleScrollTimeline}
on:selectAssetCandidates={handleSelectAssetCandidates}
on:selectAssets={handleSelectAssets}