Feature - Implemented virtual scroll on web (#573)

This PR implemented a virtual scroll on the web, as seen in this article.

[Building the Google Photos Web UI](https://medium.com/google-design/google-photos-45b714dfbed1)
This commit is contained in:
Alex 2022-09-04 08:34:39 -05:00 committed by GitHub
parent bd92dde117
commit 552340add7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
58 changed files with 2197 additions and 698 deletions

View file

@ -26,11 +26,22 @@
notificationController,
NotificationType
} from '../shared-components/notification/notification';
import { browser } from '$app/env';
export let album: AlbumResponseDto;
let isShowAssetViewer = false;
let isShowAssetSelection = false;
$: {
if (browser) {
if (isShowAssetSelection) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = 'auto';
}
}
}
let isShowShareUserSelection = false;
let isEditingTitle = false;
let isCreatingSharedAlbum = false;
@ -197,10 +208,12 @@
}
const createAlbumHandler = async (event: CustomEvent) => {
const { assets }: { assets: string[] } = event.detail;
const { assets }: { assets: AssetResponseDto[] } = event.detail;
try {
const { data } = await api.albumApi.addAssetsToAlbum(album.id, { assetIds: assets });
const { data } = await api.albumApi.addAssetsToAlbum(album.id, {
assetIds: assets.map((a) => a.id)
});
album = data;
isShowAssetSelection = false;
@ -456,8 +469,8 @@
{#if isShowAssetViewer}
<AssetViewer
asset={selectedAsset}
on:navigate-backward={navigateAssetBackward}
on:navigate-forward={navigateAssetForward}
on:navigate-previous={navigateAssetBackward}
on:navigate-next={navigateAssetForward}
on:close={closeViewer}
/>
{/if}