KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2025-10-29 17:40:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): theme/locale preferences and improve SSR (#1832)

Browse Source
This commit is contained in:
Michel Heusschen
2023-02-22 18:53:08 +01:00
committed by GitHub
parent a9a769d902
commit 10cb612fb1
20 changed files with 142 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/routes/+layout.svelte
View File

@@ -19,11 +19,9 @@
let localVersion: string;
let remoteVersion: string;
let showNavigationLoadingBar = false;
let canShow = false;
let showUploadCover = false;
onMount(async () => {
checkUserTheme();
const res = await checkAppVersion();
shouldShowAnnouncement = res.shouldShowAnnouncement;
@@ -31,21 +29,6 @@
remoteVersion = res.remoteVersion ?? 'unknown';
});
const checkUserTheme = () => {
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (
localStorage.getItem('color-theme') === 'dark' ||
(!('color-theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
canShow = true;
};
beforeNavigate(() => {
showNavigationLoadingBar = true;
});
@@ -99,32 +82,30 @@
</svelte:head>
<main on:dragenter={() => (showUploadCover = true)}>
{#if canShow}
<div in:fade={{ duration: 100 }}>
{#if showNavigationLoadingBar}
<NavigationLoadingBar />
{/if}
<div in:fade={{ duration: 100 }}>
{#if showNavigationLoadingBar}
<NavigationLoadingBar />
{/if}
<slot />
<slot />
{#if showUploadCover}
<UploadCover
{dropHandler}
{dragOverHandler}
dragLeaveHandler={() => (showUploadCover = false)}
/>
{/if}
{#if showUploadCover}
<UploadCover
{dropHandler}
{dragOverHandler}
dragLeaveHandler={() => (showUploadCover = false)}
/>
{/if}
<DownloadPanel />
<UploadPanel />
<NotificationList />
{#if shouldShowAnnouncement}
<AnnouncementBox
{localVersion}
{remoteVersion}
on:close={() => (shouldShowAnnouncement = false)}
/>
{/if}
</div>
{/if}
<DownloadPanel />
<UploadPanel />
<NotificationList />
{#if shouldShowAnnouncement}
<AnnouncementBox
{localVersion}
{remoteVersion}
on:close={() => (shouldShowAnnouncement = false)}
/>
{/if}
</div>
</main>