|
@@ -9,9 +9,9 @@
|
|
|
import { AppRoute } from '../../../constants';
|
|
|
import AccountInfoPanel from './account-info-panel.svelte';
|
|
|
import ImmichLogo from '../immich-logo.svelte';
|
|
|
+ import SearchBar from '../search-bar/search-bar.svelte';
|
|
|
export let user: UserResponseDto;
|
|
|
export let shouldShowUploadButton = true;
|
|
|
- export let term = '';
|
|
|
|
|
|
let shouldShowAccountInfo = false;
|
|
|
|
|
@@ -36,100 +36,94 @@
|
|
|
|
|
|
goto(data.redirectUri || '/auth/login?autoLaunch=0');
|
|
|
};
|
|
|
-
|
|
|
- const onSearch = () => {
|
|
|
- goto(`/search?q=${term}`);
|
|
|
- };
|
|
|
</script>
|
|
|
|
|
|
<section
|
|
|
id="dashboard-navbar"
|
|
|
class="fixed w-screen z-[900] bg-immich-bg dark:bg-immich-dark-bg text-sm"
|
|
|
>
|
|
|
- <div class="flex border-b dark:border-b-immich-dark-gray place-items-center px-6 py-2 ">
|
|
|
+ <div
|
|
|
+ class="grid grid-cols-[250px_auto] border-b dark:border-b-immich-dark-gray items-center py-2"
|
|
|
+ >
|
|
|
<a
|
|
|
data-sveltekit-preload-data="hover"
|
|
|
- class="flex gap-2 place-items-center hover:cursor-pointer"
|
|
|
- href="/photos"
|
|
|
+ class="flex gap-2 px-6 place-items-center hover:cursor-pointer"
|
|
|
+ href={AppRoute.PHOTOS}
|
|
|
>
|
|
|
<ImmichLogo height="35" width="35" />
|
|
|
<h1 class="font-immich-title text-2xl text-immich-primary dark:text-immich-dark-primary">
|
|
|
IMMICH
|
|
|
</h1>
|
|
|
</a>
|
|
|
- <form class="flex-1 ml-24" autocomplete="off" on:submit|preventDefault={onSearch}>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- name="search"
|
|
|
- class="w-[50%] rounded-3xl bg-gray-200 dark:bg-immich-dark-gray px-8 py-4"
|
|
|
- placeholder="Search"
|
|
|
- required
|
|
|
- bind:value={term}
|
|
|
- />
|
|
|
- </form>
|
|
|
- <section class="flex gap-4 place-items-center">
|
|
|
- <ThemeButton />
|
|
|
+ <div class="flex justify-between gap-16 pr-6">
|
|
|
+ <div class="w-full max-w-5xl flex-1 pl-4">
|
|
|
+ <SearchBar grayTheme={true} />
|
|
|
+ </div>
|
|
|
|
|
|
- {#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
|
|
|
- <button
|
|
|
- in:fly={{ x: 50, duration: 250 }}
|
|
|
- on:click={() => dispatch('uploadClicked')}
|
|
|
- class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
|
|
- >
|
|
|
- <TrayArrowUp size="20" />
|
|
|
- <span> Upload </span>
|
|
|
- </button>
|
|
|
- {/if}
|
|
|
+ <section class="flex gap-4 place-items-center">
|
|
|
+ <ThemeButton />
|
|
|
|
|
|
- {#if user.isAdmin}
|
|
|
- <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
|
|
|
+ {#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
|
|
|
<button
|
|
|
- class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
|
|
|
- $page.url.pathname.includes('/admin') &&
|
|
|
- 'text-immich-primary dark:immich-dark-primary underline'
|
|
|
- }`}>Administration</button
|
|
|
+ in:fly={{ x: 50, duration: 250 }}
|
|
|
+ on:click={() => dispatch('uploadClicked')}
|
|
|
+ class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
|
|
>
|
|
|
- </a>
|
|
|
- {/if}
|
|
|
+ <TrayArrowUp size="20" />
|
|
|
+ <span> Upload </span>
|
|
|
+ </button>
|
|
|
+ {/if}
|
|
|
|
|
|
- <div
|
|
|
- on:mouseover={() => (shouldShowAccountInfo = true)}
|
|
|
- on:focus={() => (shouldShowAccountInfo = true)}
|
|
|
- on:mouseleave={() => (shouldShowAccountInfo = false)}
|
|
|
- on:click={showAccountInfoPanel}
|
|
|
- on:keydown={showAccountInfoPanel}
|
|
|
- >
|
|
|
- <button
|
|
|
- class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
|
|
- >
|
|
|
- {#if user.profileImagePath}
|
|
|
- <img
|
|
|
- transition:fade={{ duration: 100 }}
|
|
|
- class:hidden={showProfilePictureFallback}
|
|
|
- src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
|
|
- alt="profile-img"
|
|
|
- class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
|
|
|
- draggable="false"
|
|
|
- on:load={() => (showProfilePictureFallback = false)}
|
|
|
- />
|
|
|
- {/if}
|
|
|
- {#if showProfilePictureFallback}
|
|
|
- {getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
|
|
- {/if}
|
|
|
- </button>
|
|
|
+ {#if user.isAdmin}
|
|
|
+ <a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
|
|
|
+ <button
|
|
|
+ class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
|
|
|
+ $page.url.pathname.includes('/admin') &&
|
|
|
+ 'text-immich-primary dark:immich-dark-primary underline'
|
|
|
+ }`}>Administration</button
|
|
|
+ >
|
|
|
+ </a>
|
|
|
+ {/if}
|
|
|
|
|
|
- {#if shouldShowAccountInfo}
|
|
|
- <div
|
|
|
- in:fade={{ delay: 500, duration: 150 }}
|
|
|
- out:fade={{ delay: 200, duration: 150 }}
|
|
|
- class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
|
|
|
+ <div
|
|
|
+ on:mouseover={() => (shouldShowAccountInfo = true)}
|
|
|
+ on:focus={() => (shouldShowAccountInfo = true)}
|
|
|
+ on:mouseleave={() => (shouldShowAccountInfo = false)}
|
|
|
+ on:click={showAccountInfoPanel}
|
|
|
+ on:keydown={showAccountInfoPanel}
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="flex place-items-center place-content-center rounded-full bg-immich-primary hover:bg-immich-primary/80 h-12 w-12 text-gray-100 dark:text-immich-dark-bg dark:bg-immich-dark-primary"
|
|
|
>
|
|
|
- <p>{user.firstName} {user.lastName}</p>
|
|
|
- <p>{user.email}</p>
|
|
|
- </div>
|
|
|
- {/if}
|
|
|
- </div>
|
|
|
- </section>
|
|
|
+ {#if user.profileImagePath}
|
|
|
+ <img
|
|
|
+ transition:fade={{ duration: 100 }}
|
|
|
+ class:hidden={showProfilePictureFallback}
|
|
|
+ src={`${$page.url.origin}/api/user/profile-image/${user.id}`}
|
|
|
+ alt="profile-img"
|
|
|
+ class="inline rounded-full h-12 w-12 object-cover shadow-md border-2 border-immich-primary hover:border-immich-dark-primary dark:hover:border-immich-primary dark:border-immich-dark-primary transition-all"
|
|
|
+ draggable="false"
|
|
|
+ on:load={() => (showProfilePictureFallback = false)}
|
|
|
+ />
|
|
|
+ {/if}
|
|
|
+ {#if showProfilePictureFallback}
|
|
|
+ {getFirstLetter(user.firstName)}{getFirstLetter(user.lastName)}
|
|
|
+ {/if}
|
|
|
+ </button>
|
|
|
+
|
|
|
+ {#if shouldShowAccountInfo}
|
|
|
+ <div
|
|
|
+ in:fade={{ delay: 500, duration: 150 }}
|
|
|
+ out:fade={{ delay: 200, duration: 150 }}
|
|
|
+ class="absolute -bottom-12 right-5 border bg-gray-500 dark:bg-immich-dark-gray text-[12px] text-gray-100 p-2 rounded-md shadow-md dark:border-immich-dark-gray"
|
|
|
+ >
|
|
|
+ <p>{user.firstName} {user.lastName}</p>
|
|
|
+ <p>{user.email}</p>
|
|
|
+ </div>
|
|
|
+ {/if}
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
{#if shouldShowAccountInfoPanel}
|