mirror of
https://github.com/immich-app/immich.git
synced 2024-12-28 11:15:54 +02:00
feat(web): use user layout on admin pages (#2550)
This commit is contained in:
Jason Rasmussen
GitHub
parent
c2145cbe11
commit
2dc8a93685
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user