self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-25 10:43:13 +02:00
Code Issues Releases Activity

feat(web): custom drop down button (#2887)

Browse Source 
* feat(web): custom drop down button

* fix test

* fix test
This commit is contained in:
Alex 2023-06-21 08:05:59 -05:00 committed by GitHub
parent 80d02e8a8d
commit 82b89aa20b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
web/src/lib/components/elements/dropdown.svelte Normal file
View File

@ -0,0 +1,62 @@
<script lang="ts">
import SwapVertical from 'svelte-material-icons/SwapVertical.svelte';
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';
export let options: string[] = [];
export let value = options[0];
let showMenu = false;
const handleClickOutside = () => {
showMenu = false;
};
const handleSelectOption = (index: number) => {
value = options[index];
showMenu = false;
};
</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">
<SwapVertical size="18" />
{value}
</div>
</LinkButton>
<!-- DROP DOWN MENU -->
{#if showMenu}
<div
transition:fly={{ y: -30, x: 30, duration: 200 }}
class="absolute top-5 right-0 min-w-[250px] bg-gray-100 dark:bg-gray-700 rounded-2xl py-4 shadow-lg dark:text-white text-black z-50 text-md flex flex-col"
>
{#each options as option, index (option)}
<button
class="hover:bg-gray-300 dark:hover:bg-gray-800 p-4 transition-all grid grid-cols-[20px,1fr] place-items-center gap-2"
on:click={() => handleSelectOption(index)}
>
{#if value == option}
<div class="text-immich-primary dark:text-immich-dark-primary font-medium">
<Check size="18" />
</div>
<p
class="justify-self-start text-immich-primary dark:text-immich-dark-primary font-medium"
>
{option}
</p>
{:else}
<div />
<p class="justify-self-start">
{option}
</p>
{/if}
</button>
{/each}
</div>
{/if}
</div>

22
web/src/routes/(user)/albums/+page.svelte
View File

@ -12,18 +12,13 @@
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import { onMount } from 'svelte';
import { flip } from 'svelte/animate';
import Dropdown from '$lib/components/elements/dropdown.svelte';
export let data: PageData;
const sortByOptions = ['Most recent photo', 'Last modified', 'Album title'];
let selectedSortBy = sortByOptions[0];
const handleChangeSortBy = (e: Event) => {
const target = e.target as HTMLSelectElement;
selectedSortBy = target.value;
};
const {
albums: unsortedAlbums,
isShowContextMenu,
@ -84,25 +79,14 @@
<UserPageLayout user={data.user} title={data.meta.title}>
<div class="flex place-items-center gap-2" slot="buttons">
<label class="text-xs" for="sortBy">Sort by:</label>
<select
class="text-sm bg-slate-200 p-2 rounded-lg dark:bg-gray-600 hover:cursor-pointer"
name="sortBy"
id="sortBy-select"
bind:value={selectedSortBy}
on:change={handleChangeSortBy}
>
{#each sortByOptions as option}
<option value={option}>{option}</option>
{/each}
</select>
<LinkButton on:click={handleCreateAlbum}>
<div class="flex place-items-center gap-2 text-sm">
<PlusBoxOutline size="18" />
Create album
</div>
</LinkButton>
<Dropdown options={sortByOptions} bind:value={selectedSortBy} />
</div>
<!-- Album Card -->