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

chore(web): prettier (#2821)

Browse source 
Co-authored-by: Thomas Way <thomas@6f.io>
This commit is contained in:
Jason Rasmussen 2023-07-01 00:50:47 -04:00 • committed by GitHub
parent 7c2f7d6c51
commit f55b3add80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
242 changed files with 12794 additions and 13426 deletions
Download patch file Download diff file Expand all files Collapse all files

96
web/src/lib/components/shared-components/side-bar/side-bar-button.svelte
View file

@ -1,64 +1,60 @@
<script lang="ts">
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';
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 logo: typeof Icon;
export let isSelected: boolean;
export let flippedLogo = false;
export let title: string;
export let logo: typeof Icon;
export let isSelected: boolean;
export let flippedLogo = false;
let showMoreInformation = false;
let showMoreInformation = false;
const dispatch = createEventDispatcher();
const onButtonClicked = () => dispatch('selected');
const dispatch = createEventDispatcher();
const onButtonClicked = () => dispatch('selected');
</script>
<div
on:click={onButtonClicked}
on:keydown={onButtonClicked}
class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 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
on:click={onButtonClicked}
on:keydown={onButtonClicked}
class="flex gap-4 justify-between place-items-center w-full transition-[padding] delay-100 duration-100 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
? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-immich-dark-primary hover:bg-immich-primary/25'
: ''}
? 'bg-immich-primary/10 dark:bg-immich-dark-primary/10 text-immich-primary dark:text-immich-dark-primary hover:bg-immich-primary/25'
: ''}
pl-5 group-hover:sm:px-5 md:px-5
"
>
<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
<svelte:component
this={logo}
size="1.5em"
class="shrink-0 {flippedLogo ? '-scale-x-100' : ''}"
/>
<p class="font-medium text-sm">{title}</p>
</div>
<div class="flex gap-4 place-items-center w-full overflow-hidden truncate">
<svelte:component this={logo} size="1.5em" class="shrink-0 {flippedLogo ? '-scale-x-100' : ''}" />
<p class="font-medium text-sm">{title}</p>
</div>
<div
class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
>
{#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>
<div
class="transition-[height] group-hover:sm:overflow-visible md:overflow-visible overflow-hidden duration-100 delay-1000 sm:group-hover:h-auto md:h-auto h-0"
>
{#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 right-6 top-0">
<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>
{#if showMoreInformation}
<div class="absolute right-6 top-0">
<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>