self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-28 09:33:27 +02:00
Code Issues Releases 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 437 additions and 552 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/lib/components/layouts/user-page-layout.svelte Normal file
View File

@ -0,0 +1,47 @@
<script lang="ts">
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import type { UserResponseDto } from '@api';
import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
import SideBar from '../shared-components/side-bar/side-bar.svelte';
export let user: UserResponseDto;
export let hideNavbar = false;
export let showUploadButton = false;
export let title: string | undefined = undefined;
</script>
<header>
{#if !hideNavbar}
<NavigationBar
{user}
shouldShowUploadButton={showUploadButton}
on:uploadClicked={() => openFileUploadDialog()}
/>
{/if}
<slot name="header" />
</header>
<main
class="grid grid-cols-[250px_auto] relative pt-[4.25rem] h-screen bg-immich-bg dark:bg-immich-dark-bg immich-scrollbar"
>
<SideBar />
<slot name="content">
<section class="my-8 mx-4 bg-immich-bg dark:bg-immich-dark-bg">
{#if title}
<div class="flex justify-between place-items-center dark:text-immich-dark-fg px-4 h-10">
<p class="font-medium">{title}</p>
<slot name="buttons" />
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
{/if}
<slot />
</section>
</slot>
</main>

4
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -40,14 +40,14 @@
<section
id="dashboard-navbar"
class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
class="fixed h-[4.25rem] w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
>
<div
class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2"
>
<a
data-sveltekit-preload-data="hover"
class="flex gap-2 px-6 place-items-center hover:cursor-pointer"
class="flex gap-2 mx-6 place-items-center"
href={AppRoute.PHOTOS}
>
<ImmichLogo height="35" width="35" />

2
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View File

@ -25,7 +25,7 @@
<form
autocomplete="off"
class="relative text-base"
class="relative text-sm"
action={AppRoute.SEARCH}
on:reset={() => (value = '')}
on:submit|preventDefault={onSearch}

11
web/src/routes/(user)/albums/+page.server.ts
View File

@ -1,14 +1,13 @@
import { AppRoute } from '$lib/constants';
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
export const load = (async ({ parent, locals: { api } }) => {
try {
const { user } = await parent();
export const load = (async ({ locals: { api, user } }) => {
if (!user) {
throw Error('User is not logged in');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
try {
const { data: albums } = await api.albumApi.getAllAlbums();
return {
@ -19,6 +18,6 @@ export const load = (async ({ parent, locals: { api } }) => {
}
};
} catch (e) {
throw redirect(302, '/auth/login');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
}) satisfies PageServerLoad;

42
web/src/routes/(user)/albums/+page.svelte
View File

@ -5,11 +5,10 @@
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import type { PageData } from './$types';
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 PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
import { useAlbums } from './albums.bloc';
import empty1Url from '$lib/assets/empty-1.svg';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
export let data: PageData;
@ -31,28 +30,8 @@
};
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<!-- Main Section -->
<section class="overflow-y-auto relative immich-scrollbar">
<section
id="album-content"
class="relative pt-8 pl-4 pr-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">Albums</p>
</div>
<div>
<UserPageLayout user={data.user} title={data.meta.title}>
<div slot="buttons">
<button
on:click={handleCreateAlbum}
class="immich-text-button text-sm dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
@ -63,11 +42,6 @@
<p>Create album</p>
</button>
</div>
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
<!-- Album Card -->
<div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-8">
@ -97,11 +71,10 @@
</p>
</div>
{/if}
</section>
</section>
</UserPageLayout>
<!-- Context Menu -->
{#if $isShowContextMenu}
<!-- Context Menu -->
{#if $isShowContextMenu}
<ContextMenu {...$contextMenuPosition} on:clickoutside={closeAlbumContextMenu}>
<MenuOption on:click={deleteSelectedContextAlbum}>
<span class="flex place-items-center place-content-center gap-2">
@ -110,5 +83,4 @@
</span>
</MenuOption>
</ContextMenu>
{/if}
</section>
{/if}

9
web/src/routes/(user)/albums/[albumId]/+page.server.ts
View File

@ -1,11 +1,10 @@
import { AppRoute } from '$lib/constants';
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
export const load = (async ({ parent, params, locals: { api } }) => {
const { user } = await parent();
export const load = (async ({ params, locals: { api, user } }) => {
if (!user) {
throw redirect(302, '/auth/login');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
const albumId = params['albumId'];
@ -19,6 +18,6 @@ export const load = (async ({ parent, params, locals: { api } }) => {
}
};
} catch (e) {
throw redirect(302, '/albums');
throw redirect(302, AppRoute.ALBUMS);
}
}) satisfies PageServerLoad;

33
web/src/routes/(user)/explore/+page.svelte
View File

@ -1,7 +1,6 @@
<script lang="ts">
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import ImmichThumbnail from '$lib/components/shared-components/immich-thumbnail.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 { AppRoute } from '$lib/constants';
import { AssetTypeEnum, SearchExploreItem } from '@api';
import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
@ -39,31 +38,7 @@
places = places.slice(0, MAX_ITEMS);
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<section class="overflow-y-auto relative immich-scrollbar">
<section
id="album-content"
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
>
<!-- Main Section -->
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div>
<p class="font-medium">Explore</p>
</div>
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
<UserPageLayout user={data.user} title={data.meta.title}>
<div class="mx-4 flex flex-col">
{#if places.length > 0}
<div class="mb-6 mt-2">
@ -168,6 +143,4 @@
</div>
</div>
</div>
</section>
</section>
</section>
</UserPageLayout>

15
web/src/routes/(user)/favorites/+page.server.ts
View File

@ -1,11 +1,10 @@
import type { PageServerLoad } from './$types';
import { redirect, error } from '@sveltejs/kit';
import { redirect } from '@sveltejs/kit';
import { AppRoute } from '$lib/constants';
export const load: PageServerLoad = async ({ parent }) => {
try {
const { user } = await parent();
export const load = (async ({ locals: { user } }) => {
if (!user) {
throw error(400, 'Not logged in');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
return {
@ -14,8 +13,4 @@ export const load: PageServerLoad = async ({ parent }) => {
title: 'Favorites'
}
};
} catch (e) {
console.log('Photo page load error', e);
throw redirect(302, '/auth/login');
}
};
}) satisfies PageServerLoad;

51
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,17 +60,8 @@
};
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<!-- Multiselection mode app bar -->
{#if isMultiSelectionMode}
<ControlAppBar
on:close-button-click={clearMultiSelectAssetAssetHandler}
backIcon={Close}
@ -95,33 +85,19 @@
/>
</svelte:fragment>
</ControlAppBar>
{/if}
{/if}
<!-- Create shared link modal -->
{#if isShowCreateSharedLinkModal}
<!-- 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>
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
{/if}
<UserPageLayout user={data.user} title={data.meta.title} hideNavbar={isMultiSelectionMode}>
<section>
<!-- Empty Message -->
{#if favorites.length === 0}
<div
@ -137,5 +113,4 @@
<GalleryViewer assets={favorites} bind:selectedAssets />
</section>
</section>
</section>
</UserPageLayout>

15
web/src/routes/(user)/photos/+page.server.ts
View File

@ -1,11 +1,10 @@
import type { PageServerLoad } from './$types';
import { redirect, error } from '@sveltejs/kit';
import { redirect } from '@sveltejs/kit';
import { AppRoute } from '$lib/constants';
export const load: PageServerLoad = async ({ parent }) => {
try {
const { user } = await parent();
export const load = (async ({ locals: { user } }) => {
if (!user) {
throw error(400, 'Not logged in');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
return {
@ -14,8 +13,4 @@ export const load: PageServerLoad = async ({ parent }) => {
title: 'Photos'
}
};
} catch (e) {
console.log('Photo page load error', e);
throw redirect(302, '/auth/login');
}
};
}) satisfies PageServerLoad;

22
web/src/routes/(user)/photos/+page.svelte
View File

@ -7,12 +7,10 @@
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
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 NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import SideBar from '$lib/components/shared-components/side-bar/side-bar.svelte';
import {
assetInteractionStore,
isMultiSelectStoreState,
@ -20,17 +18,18 @@
} from '$lib/stores/asset-interaction.store';
import { assetStore } from '$lib/stores/assets.store';
import { addAssetsToAlbum, bulkDownload } from '$lib/utils/asset-utils';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import { AlbumResponseDto, api, SharedLinkType } from '@api';
import Close from 'svelte-material-icons/Close.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import type { PageData } from './$types';
import { locale } from '$lib/stores/preferences.store';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import type { PageData } from './$types';
export let data: PageData;
let isShowCreateSharedLinkModal = false;
const deleteSelectedAssetHandler = async () => {
try {
@ -144,7 +143,8 @@
};
</script>
<section>
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectStoreState} showUploadButton>
<svelte:fragment slot="header">
{#if $isMultiSelectStoreState}
<ControlAppBar
on:close-button-click={() => assetInteractionStore.clearMultiselect()}
@ -175,8 +175,6 @@
/>
</svelte:fragment>
</ControlAppBar>
{:else}
<NavigationBar user={data.user} on:uploadClicked={() => openFileUploadDialog()} />
{/if}
{#if isShowAddMenu}
@ -206,11 +204,7 @@
on:close={handleCloseSharedLinkModal}
/>
{/if}
</section>
</svelte:fragment>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<AssetGrid />
</section>
<AssetGrid slot="content" />
</UserPageLayout>

11
web/src/routes/(user)/share/[key]/+page.server.ts
View File

@ -1,14 +1,10 @@
export const prerender = false;
import { error } from '@sveltejs/kit';
import { getThumbnailUrl } from '$lib/utils/asset-utils';
import { ThumbnailFormat } from '@api';
import type { PageServerLoad } from './$types';
import featurePanelUrl from '$lib/assets/feature-panel.png';
export const load: PageServerLoad = async ({ params, parent, locals: { api } }) => {
const { user } = await parent();
export const load = (async ({ params, locals: { api } }) => {
const { key } = params;
try {
@ -25,12 +21,11 @@ export const load: PageServerLoad = async ({ params, parent, locals: { api } })
imageUrl: assetId
? getThumbnailUrl(assetId, ThumbnailFormat.Webp, sharedLink.key)
: featurePanelUrl
},
user
}
};
} catch (e) {
throw error(404, {
message: 'Invalid shared link'
});
}
};
}) satisfies PageServerLoad;

14
web/src/routes/(user)/sharing/+page.server.ts
View File

@ -1,25 +1,23 @@
export const prerender = false;
import { AppRoute } from '$lib/constants';
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
export const load = (async ({ parent, locals: { api } }) => {
try {
const { user } = await parent();
export const load = (async ({ locals: { api, user } }) => {
if (!user) {
throw redirect(302, '/auth/login');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
try {
const { data: sharedAlbums } = await api.albumApi.getAllAlbums(true);
return {
user: user,
user,
sharedAlbums,
meta: {
title: 'Albums'
}
};
} catch (e) {
throw redirect(302, '/auth/login');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
}) satisfies PageServerLoad;

36
web/src/routes/(user)/sharing/+page.svelte
View File

@ -1,9 +1,6 @@
<script lang="ts">
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 PlusBoxOutline from 'svelte-material-icons/PlusBoxOutline.svelte';
import Link from 'svelte-material-icons/Link.svelte';
import SharedAlbumListTile from '$lib/components/sharing-page/shared-album-list-tile.svelte';
import { goto } from '$app/navigation';
import { api } from '@api';
@ -13,6 +10,7 @@
NotificationType
} from '$lib/components/shared-components/notification/notification';
import empty2Url from '$lib/assets/empty-2.svg';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
export let data: PageData;
@ -34,27 +32,8 @@
};
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<section class="overflow-y-auto relative">
<section
id="album-content"
class="relative pt-8 pl-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg"
>
<!-- Main Section -->
<div class="px-4 flex justify-between place-items-center dark:text-immich-dark-fg">
<div>
<p class="font-medium">Sharing</p>
</div>
<div class="flex">
<UserPageLayout user={data.user} title={data.meta.title}>
<div class="flex" slot="buttons">
<button
on:click={createSharedAlbum}
class="flex place-items-center gap-1 text-sm hover:bg-immich-primary/5 p-2 rounded-lg font-medium hover:text-gray-700 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
@ -75,12 +54,8 @@
<p>Shared links</p>
</button>
</div>
</div>
<div class="my-4">
<hr class="dark:border-immich-dark-gray" />
</div>
<section>
<!-- Share Album List -->
<div class="w-full flex flex-col place-items-center">
{#each data.sharedAlbums as album}
@ -102,5 +77,4 @@
</div>
{/if}
</section>
</section>
</section>
</UserPageLayout>

13
web/src/routes/(user)/sharing/sharedlinks/+page.server.ts
View File

@ -1,12 +1,10 @@
import { AppRoute } from '$lib/constants';
import { redirect } from '@sveltejs/kit';
export const prerender = false;
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ parent }) => {
try {
const { user } = await parent();
export const load = (async ({ locals: { user } }) => {
if (!user) {
throw redirect(302, '/auth/login');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
return {
@ -15,7 +13,4 @@ export const load: PageServerLoad = async ({ parent }) => {
title: 'Shared Links'
}
};
} catch (e) {
throw redirect(302, '/auth/login');
}
};
}) satisfies PageServerLoad;

13
web/src/routes/(user)/user-settings/+page.server.ts
View File

@ -1,12 +1,10 @@
import { AppRoute } from '$lib/constants';
import { redirect } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ parent }) => {
try {
const { user } = await parent();
export const load = (async ({ locals: { user } }) => {
if (!user) {
throw Error('User is not logged in');
throw redirect(302, AppRoute.AUTH_LOGIN);
}
return {
@ -15,7 +13,4 @@ export const load: PageServerLoad = async ({ parent }) => {
title: 'Settings'
}
};
} catch (e) {
throw redirect(302, '/auth/login');
}
};
}) satisfies PageServerLoad;

33
web/src/routes/(user)/user-settings/+page.svelte
View File

@ -1,36 +1,15 @@
<script lang="ts">
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 UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
import UserSettingsList from '$lib/components/user-settings-page/user-settings-list.svelte';
import type { PageData } from './$types';
export let data: PageData;
</script>
<section>
<NavigationBar user={data.user} shouldShowUploadButton={false} />
</section>
<section
class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<section class="overflow-y-auto ">
<div
id="user-setting-title"
class="pt-10 fixed w-full z-10 bg-immich-bg dark:bg-immich-dark-bg"
>
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
User Settings
</h1>
<hr class="dark:border-immich-dark-gray" />
</div>
<section id="user-setting-content" class="pt-[85px] flex place-content-center">
<section class="w-[800px] pt-5">
<UserPageLayout user={data.user} title={data.meta.title}>
<section class="flex place-content-center mx-4">
<div class="w-full max-w-3xl">
<UserSettingsList user={data.user} />
</div>
</section>
</section>
</section>
</section>
</UserPageLayout>