Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-05-30 19:54:52 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): syling sidebar buttons (#1812)

Browse Source 
* feat(web): syling sidebar buttons

* style: some small changes

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Michel Heusschen 2023-02-21 13:42:22 +01:00 committed by GitHub
parent e9c9b7a3e2
commit 4be55428d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 86 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View File

@ -1,11 +1,14 @@
<script lang="ts"> <script lang="ts">
import type Icon from 'svelte-material-icons/AbTesting.svelte'; import type Icon from 'svelte-material-icons/AbTesting.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import { fade } from 'svelte/transition';
import { createEventDispatcher } from 'svelte';
export let title: string; export let title: string;
export let logo: typeof Icon; export let logo: typeof Icon;
export let isSelected: boolean; export let isSelected: boolean;
import { createEventDispatcher } from 'svelte'; let showMoreInformation = false;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
const onButtonClicked = () => dispatch('selected'); const onButtonClicked = () => dispatch('selected');
@ -14,13 +17,40 @@
<div <div
on:click={onButtonClicked} on:click={onButtonClicked}
on:keydown={onButtonClicked} on:keydown={onButtonClicked}
class={`flex gap-4 place-items-center pl-5 py-3 rounded-tr-full rounded-br-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer class={`flex gap-4 justify-between place-items-center w-full px-5 py-3 rounded-r-full hover:bg-immich-gray dark:hover:bg-immich-dark-gray hover:text-immich-primary dark:text-immich-dark-fg dark:hover:text-immich-dark-primary hover:cursor-pointer
${ ${
isSelected && isSelected
'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25' ? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-[#adcbfa] hover:bg-immich-primary/25'
: ''
} }
`} `}
> >
<svelte:component this={logo} size="24" /> <div class="flex gap-4 place-items-center w-full">
<p class="font-medium text-sm ">{title}</p> <svelte:component this={logo} size="1.5em" />
<p class="font-medium text-sm">{title}</p>
</div>
{#if $$slots.moreInformation}
<div
class="relative flex justify-center select-none cursor-default"
on:mouseenter={() => (showMoreInformation = true)}
on:mouseleave={() => (showMoreInformation = false)}
>
<div class="hover:cursor-help p-1 text-gray-600 dark:text-gray-400">
<InformationOutline />
</div>
{#if showMoreInformation}
<div class="absolute left-6 top-0 z-20">
<div
class="flex place-items-center place-content-center whitespace-nowrap rounded-3xl shadow-lg py-3 px-6 bg-immich-bg text-immich-fg dark:bg-gray-600 dark:text-immich-dark-fg text-xs border dark:border-immich-dark-gray"
class:hidden={!showMoreInformation}
transition:fade={{ duration: 200 }}
>
<slot name="moreInformation" />
</div>
</div>
{/if}
</div>
{/if}
</div> </div>

165
web/src/lib/components/shared-components/side-bar/side-bar.svelte
View File

@ -4,19 +4,12 @@
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte'; import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte'; import ImageAlbum from 'svelte-material-icons/ImageAlbum.svelte';
import ImageOutline from 'svelte-material-icons/ImageOutline.svelte'; import ImageOutline from 'svelte-material-icons/ImageOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import StarOutline from 'svelte-material-icons/StarOutline.svelte'; import StarOutline from 'svelte-material-icons/StarOutline.svelte';
import { fade } from 'svelte/transition';
import { AppRoute } from '../../../constants'; import { AppRoute } from '../../../constants';
import LoadingSpinner from '../loading-spinner.svelte'; import LoadingSpinner from '../loading-spinner.svelte';
import StatusBox from '../status-box.svelte'; import StatusBox from '../status-box.svelte';
import SideBarButton from './side-bar-button.svelte'; import SideBarButton from './side-bar-button.svelte';
let showAssetCount = false;
let showSharingCount = false;
let showFavoritesCount = false;
let showAlbumsCount = false;
const getAssetCount = async () => { const getAssetCount = async () => {
const { data: assetCount } = await api.assetApi.getAssetCountByUserId(); const { data: assetCount } = await api.assetApi.getAssetCountByUserId();
@ -51,137 +44,75 @@
data-sveltekit-preload-data="hover" data-sveltekit-preload-data="hover"
data-sveltekit-noscroll data-sveltekit-noscroll
href={AppRoute.PHOTOS} href={AppRoute.PHOTOS}
class="relative"
draggable="false" draggable="false"
> >
<SideBarButton <SideBarButton
title={`Photos`} title="Photos"
logo={ImageOutline} logo={ImageOutline}
isSelected={$page.route.id === AppRoute.PHOTOS} isSelected={$page.route.id === AppRoute.PHOTOS}
/>
<div
id="asset-count-info"
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
on:mouseenter={() => (showAssetCount = true)}
on:mouseleave={() => (showAssetCount = false)}
> >
<InformationOutline size={18} color="#989a9f" /> <svelte:fragment slot="moreInformation">
{#if showAssetCount} {#await getAssetCount()}
<div <LoadingSpinner />
transition:fade={{ duration: 200 }} {:then data}
class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center" <div>
> <p>{data.videos.toLocaleString(locale)} Videos</p>
{#await getAssetCount()} <p>{data.photos.toLocaleString(locale)} Photos</p>
<LoadingSpinner /> </div>
{:then data} {/await}
<div> </svelte:fragment>
<p>{data.videos.toLocaleString(locale)} Videos</p> </SideBarButton>
<p>{data.photos.toLocaleString(locale)} Photos</p>
</div>
{/await}
</div>
{/if}
</div>
</a> </a>
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} draggable="false">
<a data-sveltekit-preload-data="hover" href={AppRoute.SHARING} class="relative" draggable="false">
<SideBarButton <SideBarButton
title="Sharing" title="Sharing"
logo={AccountMultipleOutline} logo={AccountMultipleOutline}
isSelected={$page.route.id === AppRoute.SHARING} isSelected={$page.route.id === AppRoute.SHARING}
/>
<div
id="sharing-count-info"
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
on:mouseenter={() => (showSharingCount = true)}
on:mouseleave={() => (showSharingCount = false)}
> >
<InformationOutline size={18} color="#989a9f" /> <svelte:fragment slot="moreInformation">
{#if showSharingCount} {#await getAlbumCount()}
<div <LoadingSpinner />
transition:fade={{ duration: 200 }} {:then data}
class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center" <div>
> <p>{(data.shared + data.sharing).toLocaleString(locale)} Albums</p>
{#await getAlbumCount()} </div>
<LoadingSpinner /> {/await}
{:then data} </svelte:fragment>
<div> </SideBarButton>
<p>{(data.shared + data.sharing).toLocaleString(locale)} Albums</p>
</div>
{/await}
</div>
{/if}
</div>
</a> </a>
<div class="text-xs ml-5 my-4 dark:text-immich-dark-fg">
<div class="text-xs p-5 pb-2 dark:text-immich-dark-fg">
<p>LIBRARY</p> <p>LIBRARY</p>
</div> </div>
<a <a data-sveltekit-preload-data="hover" href={AppRoute.FAVORITES} draggable="false">
data-sveltekit-preload-data="hover"
href={AppRoute.FAVORITES}
class="relative"
draggable="false"
>
<SideBarButton <SideBarButton
title="Favorites" title="Favorites"
logo={StarOutline} logo={StarOutline}
isSelected={$page.route.id == AppRoute.FAVORITES} isSelected={$page.route.id == AppRoute.FAVORITES}
/>
<div
id="favorite-count-info"
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help"
on:mouseenter={() => (showFavoritesCount = true)}
on:mouseleave={() => (showFavoritesCount = false)}
> >
<InformationOutline size={18} color="#989a9f" /> <svelte:fragment slot="moreInformation">
{#if showFavoritesCount} {#await getFavoriteCount()}
<div <LoadingSpinner />
transition:fade={{ duration: 200 }} {:then data}
id="asset-count-info-detail" <div>
class="w-32 rounded-lg p-4 shadow-lg bg-white absolute -right-[135px] top-0 z-[9999] flex place-items-center place-content-center" <p>{data.favorites} Favorites</p>
> </div>
{#await getFavoriteCount()} {/await}
<LoadingSpinner /> </svelte:fragment>
{:then data} </SideBarButton>
<div>
<p>{data.favorites} Favorites</p>
</div>
{/await}
</div>
{/if}
</div>
</a> </a>
<a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} class="relative" draggable="false"> <a data-sveltekit-preload-data="hover" href={AppRoute.ALBUMS} draggable="false">
<SideBarButton <SideBarButton title="Albums" logo={ImageAlbum} isSelected={$page.route.id === AppRoute.ALBUMS}>
title="Albums" <svelte:fragment slot="moreInformation">
logo={ImageAlbum} {#await getAlbumCount()}
isSelected={$page.route.id === AppRoute.ALBUMS} <LoadingSpinner />
/> {:then data}
<div>
<div <p>{data.owned.toLocaleString(locale)} Albums</p>
id="album-count-info" </div>
class="absolute right-4 top-[15px] z-40 text-xs hover:cursor-help" {/await}
on:mouseenter={() => (showAlbumsCount = true)} </svelte:fragment>
on:mouseleave={() => (showAlbumsCount = false)} </SideBarButton>
>
<InformationOutline size={18} color="#989a9f" />
{#if showAlbumsCount}
<div
transition:fade={{ duration: 200 }}
id="asset-count-info-detail"
class="w-24 rounded-lg p-4 shadow-lg bg-white absolute -right-[105px] top-0 z-[9999] flex place-items-center place-content-center"
>
{#await getAlbumCount()}
<LoadingSpinner />
{:then data}
<div>
<p>{data.owned.toLocaleString(locale)} Albums</p>
</div>
{/await}
</div>
{/if}
</div>
</a> </a>
<!-- Status Box --> <!-- Status Box -->

2
web/src/routes/admin/+layout.svelte
View File

@ -61,7 +61,7 @@
</section> </section>
<section class="overflow-y-auto immich-scrollbar "> <section class="overflow-y-auto immich-scrollbar ">
<div id="setting-title" class="pt-10 w-full z-50 bg-immich-bg dark:bg-immich-dark-bg"> <div id="setting-title" class="pt-10 w-full bg-immich-bg dark:bg-immich-dark-bg">
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium"> <h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
{getPageTitle($page.route.id)} {getPageTitle($page.route.id)}
</h1> </h1>

2
web/src/routes/user-settings/+page.svelte
View File

@ -19,7 +19,7 @@
<section class="overflow-y-auto "> <section class="overflow-y-auto ">
<div <div
id="user-setting-title" id="user-setting-title"
class="pt-10 fixed w-full z-50 bg-immich-bg dark:bg-immich-dark-bg" class="pt-10 fixed w-full z-10 bg-immich-bg dark:bg-immich-dark-bg"
> >
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium"> <h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
User Settings User Settings