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

feat(web): use user layout on admin pages (#2550)

Browse Source
This commit is contained in:
Jason Rasmussen 2023-05-23 20:02:12 -04:00 committed by GitHub
parent c2145cbe11
commit 2dc8a93685
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/lib/components/layouts/user-page-layout.svelte
View File

@ -11,11 +11,7 @@
<header>
{#if !hideNavbar}
<NavigationBar
{user}
shouldShowUploadButton={showUploadButton}
on:uploadClicked={() => openFileUploadDialog()}
/>
<NavigationBar {user} {showUploadButton} on:uploadClicked={() => openFileUploadDialog()} />
{/if}
<slot name="header" />
@ -24,7 +20,9 @@
<main
class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] relative pt-[var(--navbar-height)] h-screen overflow-hidden bg-immich-bg dark:bg-immich-dark-bg"
>
<SideBar />
<slot name="sidebar">
<SideBar />
</slot>
<slot name="content">
{#if title}
<section class="relative">

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

@ -17,7 +17,7 @@
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import Cog from 'svelte-material-icons/Cog.svelte';
export let user: UserResponseDto;
export let shouldShowUploadButton = true;
export let showUploadButton = true;
let shouldShowAccountInfo = false;
let shouldShowAccountInfoPanel = false;
@ -72,7 +72,7 @@
<ThemeButton />
{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
{#if !$page.url.pathname.includes('/admin') && showUploadButton}
<div in:fly={{ x: 50, duration: 250 }}>
<LinkButton on:click={() => dispatch('uploadClicked')}>
<div class="flex gap-2">

85
web/src/routes/admin/+layout.svelte
View File

@ -6,7 +6,6 @@
// This is an issue in SvelteKit caused by using the page store in layouts and
// using transitions on pages: https://github.com/sveltejs/kit/issues/7405
import NavigationBar from '$lib/components/shared-components/navigation-bar/navigation-bar.svelte';
import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import Sync from 'svelte-material-icons/Sync.svelte';
@ -17,6 +16,7 @@
import { AppRoute } from '../../lib/constants';
import type { LayoutData } from './$types';
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
export let data: LayoutData;
@ -38,55 +38,40 @@
};
</script>
<NavigationBar user={data.user} />
<UserPageLayout user={data.user} showUploadButton={false} title={getPageTitle(data.routeId)}>
<SideBarSection slot="sidebar">
<SideBarButton
title="Users"
logo={AccountMultipleOutline}
isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
/>
<SideBarButton
title="Jobs"
logo={Sync}
isSelected={data.routeId === AppRoute.ADMIN_JOBS}
on:selected={() => goto(AppRoute.ADMIN_JOBS)}
/>
<SideBarButton
title="Settings"
logo={Cog}
isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
/>
<SideBarButton
title="Server Stats"
logo={Server}
isSelected={data.routeId === AppRoute.ADMIN_STATS}
on:selected={() => goto(AppRoute.ADMIN_STATS)}
/>
<div class="mb-6 mt-auto">
<StatusBox />
</div>
</SideBarSection>
<main>
<section
class="grid md:grid-cols-[theme(spacing.64)_auto] grid-cols-[theme(spacing.18)_auto] pt-[var(--navbar-height)] h-screen"
>
<SideBarSection>
<SideBarButton
title="Users"
logo={AccountMultipleOutline}
isSelected={data.routeId === AppRoute.ADMIN_USER_MANAGEMENT}
on:selected={() => goto(AppRoute.ADMIN_USER_MANAGEMENT)}
/>
<SideBarButton
title="Jobs"
logo={Sync}
isSelected={data.routeId === AppRoute.ADMIN_JOBS}
on:selected={() => goto(AppRoute.ADMIN_JOBS)}
/>
<SideBarButton
title="Settings"
logo={Cog}
isSelected={data.routeId === AppRoute.ADMIN_SETTINGS}
on:selected={() => goto(AppRoute.ADMIN_SETTINGS)}
/>
<SideBarButton
title="Server Stats"
logo={Server}
isSelected={data.routeId === AppRoute.ADMIN_STATS}
on:selected={() => goto(AppRoute.ADMIN_STATS)}
/>
<div class="mb-6 mt-auto">
<StatusBox />
</div>
</SideBarSection>
<section class="overflow-y-auto immich-scrollbar">
<div id="setting-title" class="pt-10 w-full 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">
{getPageTitle(data.routeId)}
</h1>
<hr class="dark:border-immich-dark-gray" />
</div>
<section id="setting-content" class="flex place-content-center mx-4">
<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
<slot />
</section>
</section>
<section id="setting-content" class="flex place-content-center mx-4">
<section class="w-full sm:w-5/6 md:w-[800px] pt-5 pb-28">
<slot />
</section>
</section>
</main>
</UserPageLayout>