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 7

feat(web, server): Implement justified layout for AssetGrid (#2666)

Browse source 
* Implement justified layout for timeline

* Add withoutThumbs field to GetTimelineLayotDto

* Back to rough estimation of initial buckets height

* Remove getTimelineLayout endpoint

* Estimate rough viewport height better

* Fix shift/jump issues while scrolling up

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sergey Kondrikov 2023-06-08 18:22:45 +03:00 • committed by GitHub
parent 8ebac41318
commit 5764bf16f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 172 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -16,6 +16,7 @@
OnScrollbarDragDetail
} from '../shared-components/scrollbar/scrollbar.svelte';
import AssetDateGroup from './asset-date-group.svelte';
import { BucketPosition } from '$lib/models/asset-grid-state';
export let user: UserResponseDto | undefined = undefined;
export let isAlbumSelectionMode = false;
@ -33,6 +34,7 @@
withoutThumbs: true
}
});
bucketInfo = assetCountByTimebucket;
assetStore.setInitialState(viewportHeight, viewportWidth, assetCountByTimebucket, user?.id);
@ -51,7 +53,7 @@
});
bucketsToFetchInitially.forEach((bucketDate) => {
assetStore.getAssetsByBucket(bucketDate);
assetStore.getAssetsByBucket(bucketDate, BucketPosition.Visible);
});
});
@ -60,15 +62,18 @@
});
function intersectedHandler(event: CustomEvent) {
const el = event.detail as HTMLElement;
const el = event.detail.container as HTMLElement;
const target = el.firstChild as HTMLElement;
if (target) {
const bucketDate = target.id.split('_')[1];
assetStore.getAssetsByBucket(bucketDate);
assetStore.getAssetsByBucket(bucketDate, event.detail.position);
}
}
function handleScrollTimeline(event: CustomEvent) {
assetGridElement.scrollBy(0, event.detail.heightDelta);
}
const navigateToPreviousAsset = () => {
assetInteractionStore.navigateAsset('previous');
};
@ -115,9 +120,10 @@
/>
{/if}
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
<section
id="asset-grid"
class="overflow-y-auto pl-4 scrollbar-hidden"
class="overflow-y-auto ml-4 mb-4 mr-[60px] scrollbar-hidden"
bind:clientHeight={viewportHeight}
bind:clientWidth={viewportWidth}
bind:this={assetGridElement}
@ -143,9 +149,11 @@
{#if intersecting}
<AssetDateGroup
{isAlbumSelectionMode}
on:shift={handleScrollTimeline}
assets={bucket.assets}
bucketDate={bucket.bucketDate}
bucketHeight={bucket.bucketHeight}
{viewportWidth}
/>
{/if}
</div>