diff --git a/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte b/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte index 2243488c0d..df2013ad89 100644 --- a/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte +++ b/web/src/lib/components/admin-page/server-stats/server-stats-panel.svelte @@ -14,6 +14,14 @@ usageByUser: [] }; + $: zeros = (value: number) => { + const maxLength = 13; + const valueLength = value.toString().length; + const zeroLength = maxLength - valueLength; + + return '0'.repeat(zeroLength); + }; + $: [statsUsage, statsUsageUnit] = getBytesWithUnit(stats.usage, 0); @@ -21,11 +29,62 @@

TOTAL USAGE

-
+ +
+
+
+
+ +

PHOTOS

+
+ +
+ {zeros(stats.photos)}{stats.photos} +
+
+
+
+ +

VIDEOS

+
+ +
+ {zeros(stats.videos)}{stats.videos} +
+
+
+
+ +

STORAGE

+
+ +
+ {zeros(statsUsage)}{statsUsage} + {statsUsageUnit} +
+
+
+
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte index 3c02e9dcc9..79afd41054 100644 --- a/web/src/lib/components/layouts/user-page-layout.svelte +++ b/web/src/lib/components/layouts/user-page-layout.svelte @@ -23,7 +23,7 @@
diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte index d60cf31f6b..b74fd11fc0 100644 --- a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte +++ b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte @@ -11,6 +11,9 @@ import ImmichLogo from '../immich-logo.svelte'; import SearchBar from '../search-bar/search-bar.svelte'; import LinkButton from '$lib/components/elements/buttons/link-button.svelte'; + import Magnify from 'svelte-material-icons/Magnify.svelte'; + 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; @@ -41,24 +44,34 @@
-

+

IMMICH

-
+ -
+
+ + +
+ +
+
+
+ {#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton} @@ -66,7 +79,7 @@ dispatch('uploadClicked')}>
- Upload +
@@ -74,15 +87,32 @@ {#if user.isAdmin} - -
+
+ + + +
- Administration - - + ? 'block border-1 w-2/3 mx-auto border-immich-primary dark:border-immich-dark-primary' + : 'hidden'} + /> +
{/if} diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte index aafe3276e3..662b32e4c3 100644 --- a/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte +++ b/web/src/lib/components/shared-components/side-bar/side-bar-button.svelte @@ -7,6 +7,7 @@ export let title: string; export let logo: typeof Icon; export let isSelected: boolean; + export let isCollapsed: boolean; let showMoreInformation = false; @@ -17,40 +18,43 @@
-
- +
+

{title}

- {#if $$slots.moreInformation} -
(showMoreInformation = true)} - on:mouseleave={() => (showMoreInformation = false)} - > -
- -
- - {#if showMoreInformation} -
-
- -
+
+ {#if $$slots.moreInformation && !isCollapsed} +
(showMoreInformation = true)} + on:mouseleave={() => (showMoreInformation = false)} + > +
+
- {/if} -
- {/if} + + {#if showMoreInformation} +
+
+ +
+
+ {/if} +
+ {/if} +
diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte new file mode 100644 index 0000000000..a4429d37bb --- /dev/null +++ b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte @@ -0,0 +1,32 @@ + + + + + diff --git a/web/src/lib/components/shared-components/side-bar/side-bar.svelte b/web/src/lib/components/shared-components/side-bar/side-bar.svelte index 2705ed086e..a7ac7d0c80 100644 --- a/web/src/lib/components/shared-components/side-bar/side-bar.svelte +++ b/web/src/lib/components/shared-components/side-bar/side-bar.svelte @@ -12,6 +12,9 @@ import StatusBox from '../status-box.svelte'; import SideBarButton from './side-bar-button.svelte'; import { locale } from '$lib/stores/preferences.store'; + import SideBarSection from './side-bar-section.svelte'; + + let isCollapsed: boolean; const getAssetCount = async () => { const { data: allAssetCount } = await api.assetApi.getAssetCountByUserId(); @@ -71,7 +74,7 @@ }; - + diff --git a/web/src/lib/components/shared-components/status-box.svelte b/web/src/lib/components/shared-components/status-box.svelte index 73ed2497c0..9f7cba687e 100644 --- a/web/src/lib/components/shared-components/status-box.svelte +++ b/web/src/lib/components/shared-components/status-box.svelte @@ -12,6 +12,8 @@ let serverInfo: ServerInfoResponseDto; let pingServerInterval: NodeJS.Timer; + export let isCollapsed: boolean; + onMount(async () => { try { const { data: version } = await api.serverInfoApi.getServerVersion(); @@ -51,27 +53,33 @@
-
+
-

Storage

- {#if serverInfo} -
- -
-
-

- {asByteUnitString(serverInfo?.diskUseRaw, $locale)} of - {asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used -

- {:else} -
- -
+ {#if !isCollapsed} +

Storage

+ {#if serverInfo} +
+ +
+
+

+ {asByteUnitString(serverInfo?.diskUseRaw, $locale)} of + {asByteUnitString(serverInfo?.diskSizeRaw, $locale)} used +

+ {:else} +
+ +
+ {/if} {/if}
@@ -79,28 +87,35 @@
-
+
+ {#if !isCollapsed} +
+

Server

-
-

Server

+
+

Status

-
-

Status

+ {#if isServerOk} +

Online

+ {:else} +

Offline

+ {/if} +
- {#if isServerOk} -

Online

- {:else} -

Offline

- {/if} +
+

Version

+

+ {serverVersion} +

+
- -
-

Version

-

{serverVersion}

-
-
+ {/if}