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

chore: modal shenanigan (#18116)

Browse source
This commit is contained in:
Alex 2025-05-06 07:47:58 -05:00 • committed by GitHub
parent 118a3fc9db
commit c578273e7a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 16 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

25
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View file

@ -13,6 +13,7 @@
import { AppRoute } from '$lib/constants';
import { authManager } from '$lib/managers/auth-manager.svelte';
import { mobileDevice } from '$lib/stores/mobile-device.svelte';
import { notificationManager } from '$lib/stores/notification-manager.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { sidebarStore } from '$lib/stores/sidebar.svelte';
import { user } from '$lib/stores/user.store';
@ -22,11 +23,9 @@
import { mdiBellBadge, mdiBellOutline, mdiHelpCircleOutline, mdiMagnify, mdiMenu, mdiTrayArrowUp } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
import { fade } from 'svelte/transition';
import ThemeButton from '../theme-button.svelte';
import UserAvatar from '../user-avatar.svelte';
import AccountInfoPanel from './account-info-panel.svelte';
import { notificationManager } from '$lib/stores/notification-manager.svelte';
interface Props {
showUploadButton?: boolean;
@ -35,7 +34,6 @@
let { showUploadButton = true, onUploadClick }: Props = $props();
let shouldShowAccountInfo = $state(false);
let shouldShowAccountInfoPanel = $state(false);
let shouldShowHelpPanel = $state(false);
let shouldShowNotificationPanel = $state(false);
@ -55,10 +53,7 @@
<HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
{/if}
<nav
id="dashboard-navbar"
class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm"
>
<nav id="dashboard-navbar" class="z-auto max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm">
<SkipLink text={$t('skip_to_content')} />
<div
class="grid h-full grid-cols-[theme(spacing.32)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
@ -180,28 +175,14 @@
<button
type="button"
class="flex ps-2"
onmouseover={() => (shouldShowAccountInfo = true)}
onfocus={() => (shouldShowAccountInfo = true)}
onblur={() => (shouldShowAccountInfo = false)}
onmouseleave={() => (shouldShowAccountInfo = false)}
onclick={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
title={`${$user.name} (${$user.email})`}
>
{#key $user}
<UserAvatar user={$user} size="md" showTitle={false} interactive />
{/key}
</button>
{#if shouldShowAccountInfo && !shouldShowAccountInfoPanel}
<div
in:fade={{ delay: 500, duration: 150 }}
out:fade={{ delay: 200, duration: 150 }}
class="absolute -bottom-12 end-5 rounded-md border bg-gray-500 p-2 text-[12px] text-gray-100 shadow-md dark:border-immich-dark-gray dark:bg-immich-dark-gray"
>
<p>{$user.name}</p>
<p>{$user.email}</p>
</div>
{/if}
{#if shouldShowAccountInfoPanel}
<AccountInfoPanel onLogout={() => authManager.logout()} />
{/if}

2
web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
View file

@ -35,7 +35,7 @@
id="sidebar"
aria-label={ariaLabel}
tabindex="-1"
class="immich-scrollbar relative z-10 w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
class="immich-scrollbar relative z-auto w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
class:shadow-2xl={isExpanded}
class:dark:border-e-immich-dark-gray={isExpanded}
class:border-r={isExpanded}