mirror of
https://github.com/immich-app/immich.git
synced 2025-05-31 20:25:32 -04:00
69983ff83a
* feat: hybrid search * fixing normal search * building out the query * okla * filters * date * order by date * Remove hybrid search endpoint * remove search hybrid endpoint * faces query * search for person * search and pagination * with exif * with exif * justify gallery viewer * memory view * Fixed userId is null * openapi and styling * searchdto * lint and format * remove term * generate sql * fix test * chips * not showing true * pr feedback * pr feedback * nit name * linting * pr feedback * styling * linting
81 lines
2.2 KiB
Svelte
81 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { browser } from '$app/environment';
|
|
|
|
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
|
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
|
import { fly } from 'svelte/transition';
|
|
import { mdiClose } from '@mdi/js';
|
|
import { isSelectAllCancelled } from '$lib/stores/assets.store';
|
|
|
|
export let showBackButton = true;
|
|
export let backIcon = mdiClose;
|
|
export let tailwindClasses = '';
|
|
export let forceDark = false;
|
|
|
|
let appBarBorder = 'bg-immich-bg border border-transparent';
|
|
|
|
const dispatch = createEventDispatcher<{
|
|
close: void;
|
|
}>();
|
|
|
|
const onScroll = () => {
|
|
if (window.pageYOffset > 80) {
|
|
appBarBorder = 'border border-gray-200 bg-gray-50 dark:border-gray-600';
|
|
|
|
if (forceDark) {
|
|
appBarBorder = 'border border-gray-600';
|
|
}
|
|
} else {
|
|
appBarBorder = 'bg-immich-bg border border-transparent';
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
$isSelectAllCancelled = true;
|
|
dispatch('close');
|
|
};
|
|
|
|
onMount(() => {
|
|
if (browser) {
|
|
document.addEventListener('scroll', onScroll);
|
|
}
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (browser) {
|
|
document.removeEventListener('scroll', onScroll);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
|
|
<div
|
|
id="asset-selection-app-bar"
|
|
class={`grid grid-cols-[10%_80%_10%] justify-between md:grid-cols-[15%_70%_15%] lg:grid-cols-[25%_50%_25%] ${appBarBorder} mx-2 mt-2 place-items-center rounded-lg p-2 transition-all ${tailwindClasses} dark:bg-immich-dark-gray ${
|
|
forceDark && 'bg-immich-dark-gray text-white'
|
|
}`}
|
|
>
|
|
<div class="flex place-items-center gap-6 justify-self-start dark:text-immich-dark-fg">
|
|
{#if showBackButton}
|
|
<CircleIconButton
|
|
on:click={handleClose}
|
|
icon={backIcon}
|
|
backgroundColor={'transparent'}
|
|
hoverColor={'#e2e7e9'}
|
|
size={'24'}
|
|
forceDark
|
|
/>
|
|
{/if}
|
|
<slot name="leading" />
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<slot />
|
|
</div>
|
|
|
|
<div class="mr-4 flex place-items-center gap-1 justify-self-end">
|
|
<slot name="trailing" />
|
|
</div>
|
|
</div>
|
|
</div>
|