helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

refactor(web): admin layout (#4461)

Browse source
This commit is contained in:
Jason Rasmussen 2023-10-13 11:02:28 -04:00 • committed by GitHub
parent 268a9c4803
commit 9d225d3d06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 333 additions and 344 deletions
Download patch file Download diff file Expand all files Collapse all files

11
web/src/lib/components/admin-page/jobs/jobs-panel.svelte
View file

@ -3,7 +3,6 @@
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { featureFlags } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error';
import { AllJobStatusResponseDto, api, JobCommand, JobCommandDto, JobName } from '@api';
@ -14,7 +13,6 @@
import FileXmlBox from 'svelte-material-icons/FileXmlBox.svelte';
import LibraryShelves from 'svelte-material-icons/LibraryShelves.svelte';
import FolderMove from 'svelte-material-icons/FolderMove.svelte';
import CogIcon from 'svelte-material-icons/Cog.svelte';
import Table from 'svelte-material-icons/Table.svelte';
import TagMultiple from 'svelte-material-icons/TagMultiple.svelte';
import VectorCircle from 'svelte-material-icons/VectorCircle.svelte';
@ -22,7 +20,6 @@
import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
import JobTile from './job-tile.svelte';
import StorageMigrationDescription from './storage-migration-description.svelte';
import Button from '../../elements/buttons/button.svelte';
export let jobs: AllJobStatusResponseDto;
@ -149,14 +146,6 @@
{/if}
<div class="flex flex-col gap-7">
<div class="flex justify-end">
<a href="{AppRoute.ADMIN_SETTINGS}?open=job-settings">
<Button size="sm">
<CogIcon size="18" />
<span class="pl-2">Manage Concurrency</span>
</Button>
</a>
</div>
{#each jobList as [jobName, { title, subtitle, disabled, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
{@const { jobCounts, queueStatus } = jobs[jobName]}
<JobTile

9
web/src/lib/components/layouts/user-page-layout.svelte
View file

@ -3,11 +3,14 @@
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';
import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
export let user: UserResponseDto;
export let hideNavbar = false;
export let showUploadButton = false;
export let title: string | undefined = undefined;
export let scrollbar = true;
export let admin = false;
$: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden pl-4';
</script>
@ -23,7 +26,11 @@
class="relative grid h-screen grid-cols-[theme(spacing.18)_auto] overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
>
<slot name="sidebar">
<SideBar />
{#if admin}
<AdminSideBar />
{:else}
<SideBar />
{/if}
</slot>
<slot name="content">
{#if title}

33
web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte Normal file
View file

@ -0,0 +1,33 @@
<script lang="ts">
import { page } from '$app/stores';
import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
import StatusBox from '$lib/components/shared-components/status-box.svelte';
import { AppRoute } from '$lib/constants';
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import Cog from 'svelte-material-icons/Cog.svelte';
import Server from 'svelte-material-icons/Server.svelte';
import Sync from 'svelte-material-icons/Sync.svelte';
</script>
<SideBarSection>
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT} draggable="false">
<SideBarButton
title="Users"
logo={AccountMultipleOutline}
isSelected={$page.route.id === AppRoute.ADMIN_USER_MANAGEMENT}
/>
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_JOBS} draggable="false">
<SideBarButton title="Jobs" logo={Sync} isSelected={$page.route.id === AppRoute.ADMIN_JOBS} />
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_SETTINGS} draggable="false">
<SideBarButton title="Settings" logo={Cog} isSelected={$page.route.id === AppRoute.ADMIN_SETTINGS} />
</a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_STATS} draggable="false">
<SideBarButton title="Server Stats" logo={Server} isSelected={$page.route.id === AppRoute.ADMIN_STATS} />
</a>
<div class="mb-6 mt-auto">
<StatusBox />
</div>
</SideBarSection>