KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): common layout for user pages (#1995)

Browse Source 
* refactor(web): common layout for user pages

* remove unused imports
This commit is contained in:
Michel Heusschen
2023-03-18 22:31:15 +01:00
committed by GitHub
parent dd02f1025f
commit 9a332074c7
17 changed files with 437 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
web/src/routes/(user)/favorites/+page.svelte
View File

@@ -3,8 +3,6 @@
import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
import { handleError } from '$lib/utils/handle-error';
import { api, AssetResponseDto, SharedLinkType } from '@api';
import { onMount } from 'svelte';
@@ -12,15 +10,16 @@
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import StarMinusOutline from 'svelte-material-icons/StarMinusOutline.svelte';
import Error from '../../+error.svelte';
import type { PageData } from './$types';
import empty1Url from '$lib/assets/empty-1.svg';
export let data: PageData;
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import type { PageData } from './$types';
let favorites: AssetResponseDto[] = [];
let isShowCreateSharedLinkModal = false;
let selectedAssets: Set<AssetResponseDto> = new Set();
export let data: PageData;
$: isMultiSelectionMode = selectedAssets.size > 0;
onMount(async () => {
@@ -61,81 +60,57 @@
};
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<ControlAppBar
on:close-button-click={clearMultiSelectAssetAssetHandler}
backIcon={Close}
tailwindClasses={'bg-white shadow-md'}
>
<svelte:fragment slot="leading">
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
Selected {selectedAssets.size}
</p>
</svelte:fragment>
<svelte:fragment slot="trailing">
<CircleIconButton
title="Share"
logo={ShareVariantOutline}
on:click={handleCreateSharedLink}
/>
<CircleIconButton
title="Remove Favorite"
logo={StarMinusOutline}
on:click={handleRemoveFavorite}
/>
</svelte:fragment>
</ControlAppBar>
{/if}
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<!-- Create shared link modal -->
{#if isShowCreateSharedLinkModal}
<CreateSharedLinkModal
sharedAssets={Array.from(selectedAssets)}
shareType={SharedLinkType.Individual}
on:close={handleCloseSharedLinkModal}
/>
{/if}
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<ControlAppBar
on:close-button-click={clearMultiSelectAssetAssetHandler}
backIcon={Close}
tailwindClasses={'bg-white shadow-md'}
>
<svelte:fragment slot="leading">
<p class="font-medium text-immich-primary dark:text-immich-dark-primary">
Selected {selectedAssets.size}
<UserPageLayout user={data.user} title={data.meta.title} hideNavbar={isMultiSelectionMode}>
<section>
<!-- Empty Message -->
{#if favorites.length === 0}
<div
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
>
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
Add favorites to quickly find your best pictures and videos
</p>
</svelte:fragment>
<svelte:fragment slot="trailing">
<CircleIconButton
title="Share"
logo={ShareVariantOutline}
on:click={handleCreateSharedLink}
/>
<CircleIconButton
title="Remove Favorite"
logo={StarMinusOutline}
on:click={handleRemoveFavorite}
/>
</svelte:fragment>
</ControlAppBar>
{/if}
<!-- Create shared link modal -->
{#if isShowCreateSharedLinkModal}
<CreateSharedLinkModal
sharedAssets={Array.from(selectedAssets)}
shareType={SharedLinkType.Individual}
on:close={handleCloseSharedLinkModal}
/>
{/if}
<!-- Main Section -->
<section class="overflow-y-auto relative immich-scrollbar">
<section
id="favorite-content"
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
>
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div>
<p class="font-medium">Favorites</p>
</div>
</div>
{/if}
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
<!-- Empty Message -->
{#if favorites.length === 0}
<div
class="border dark:border-immich-dark-gray hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 hover:cursor-pointer p-5 w-[50%] m-auto mt-10 bg-gray-50 dark:bg-immich-dark-gray rounded-3xl flex flex-col place-content-center place-items-center"
>
<img src={empty1Url} alt="Empty shared album" width="500" draggable="false" />
<p class="text-center text-immich-text-gray-500 dark:text-immich-dark-fg">
Add favorites to quickly find your best pictures and videos
</p>
</div>
{/if}
<GalleryViewer assets={favorites} bind:selectedAssets />
</section>
<GalleryViewer assets={favorites} bind:selectedAssets />
</section>
</section>
</UserPageLayout>