forked from Cutlery/immich
ce84f9c755
* Album view option for cover or list view * Dropdown can now receive list of icons to display with selected option * Formatting * Use table element with formatting similar to other pages * Make table rows clickable with hover styling * Also make row navigateable using keyboard without mouse * Formatting * Define DropdownOption interface * Album view mode type definition for typescript support in if statements * format * fix typing --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
72 lines
2.1 KiB
Svelte
72 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import Check from 'svelte-material-icons/Check.svelte';
|
|
import LinkButton from './buttons/link-button.svelte';
|
|
import { clickOutside } from '$lib/utils/click-outside';
|
|
import { fly } from 'svelte/transition';
|
|
import type Icon from 'svelte-material-icons/DotsVertical.svelte';
|
|
|
|
interface DropdownOption {
|
|
value: string;
|
|
icon?: Icon;
|
|
}
|
|
|
|
export let options: DropdownOption[] | string[] = [];
|
|
export let value = options[0];
|
|
export let icons: (typeof Icon)[] | undefined = undefined;
|
|
|
|
let showMenu = false;
|
|
|
|
const handleClickOutside = () => {
|
|
showMenu = false;
|
|
};
|
|
|
|
const handleSelectOption = (index: number) => {
|
|
value = options[index];
|
|
showMenu = false;
|
|
};
|
|
|
|
$: index = options.findIndex((option) => option === value);
|
|
$: icon = icons?.[index];
|
|
</script>
|
|
|
|
<div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside}>
|
|
<!-- BUTTON TITLE -->
|
|
<LinkButton on:click={() => (showMenu = true)}>
|
|
<div class="flex place-items-center gap-2 text-sm">
|
|
{#if icon}
|
|
<svelte:component this={icon} size="18" />
|
|
{/if}
|
|
{value}
|
|
</div>
|
|
</LinkButton>
|
|
|
|
<!-- DROP DOWN MENU -->
|
|
{#if showMenu}
|
|
<div
|
|
transition:fly={{ y: -30, x: 30, duration: 200 }}
|
|
class="text-md absolute right-0 top-5 z-50 flex min-w-[250px] flex-col rounded-2xl bg-gray-100 py-4 text-black shadow-lg dark:bg-gray-700 dark:text-white"
|
|
>
|
|
{#each options as option, index (option)}
|
|
<button
|
|
class="grid grid-cols-[20px,1fr] place-items-center gap-2 p-4 transition-all hover:bg-gray-300 dark:hover:bg-gray-800"
|
|
on:click={() => handleSelectOption(index)}
|
|
>
|
|
{#if value == option}
|
|
<div class="font-medium text-immich-primary dark:text-immich-dark-primary">
|
|
<Check size="18" />
|
|
</div>
|
|
<p class="justify-self-start font-medium text-immich-primary dark:text-immich-dark-primary">
|
|
{option}
|
|
</p>
|
|
{:else}
|
|
<div />
|
|
<p class="justify-self-start">
|
|
{option}
|
|
</p>
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|