self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-26 05:01:05 +02:00
Code Issues Releases Activity

feat(web): enhance ux/ui of the album list page (#8499)

Browse Source 
* feat(web): enhance ux/ui of the album list page

* fix unit tests

* feat(web): enhance ux/ui of the album list page

* fix unit tests

* small styling

* better dot

* lint

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ethan Margaillan
2024-04-05 21:19:26 +02:00
committed by GitHub
parent 939e91f9ed
commit 8f981b6052
27 changed files with 1352 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/lib/components/elements/dropdown.svelte
View File

@ -6,6 +6,7 @@
export type RenderedOption = {
title: string;
icon?: string;
disabled?: boolean;
};
</script>
@ -33,6 +34,7 @@
export let showMenu = false;
export let controlable = false;
export let hideTextOnSmallScreen = true;
export let title: string | undefined = undefined;
export let render: (item: T) => string | RenderedOption = String;
@ -61,6 +63,7 @@
return {
title: renderedOption.title,
icon: renderedOption.icon,
disabled: renderedOption.disabled,
};
}
}
@ -69,9 +72,9 @@
$: renderedSelectedOption = renderOption(selectedOption);
</script>
<div id="dropdown-button" use:clickOutside on:outclick={handleClickOutside} on:escape={handleClickOutside}>
<div use:clickOutside on:outclick={handleClickOutside} on:escape={handleClickOutside}>
<!-- BUTTON TITLE -->
<LinkButton on:click={() => (showMenu = true)} fullwidth>
<LinkButton on:click={() => (showMenu = true)} fullwidth {title}>
<div class="flex place-items-center gap-2 text-sm">
{#if renderedSelectedOption?.icon}
<Icon path={renderedSelectedOption.icon} size="18" />
@ -84,13 +87,15 @@
{#if showMenu}
<div
transition:fly={{ y: -30, duration: 250 }}
class="text-md fixed z-50 flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className}"
class="text-sm font-medium fixed z-50 flex min-w-[250px] max-h-[70vh] overflow-y-auto immich-scrollbar flex-col rounded-2xl bg-gray-100 py-2 text-black shadow-lg dark:bg-gray-700 dark:text-white {className}"
>
{#each options as option (option)}
{@const renderedOption = renderOption(option)}
{@const buttonStyle = renderedOption.disabled ? '' : 'transition-all hover:bg-gray-300 dark:hover:bg-gray-800'}
<button
class="grid grid-cols-[20px,1fr] place-items-center p-2 transition-all hover:bg-gray-300 dark:hover:bg-gray-800"
on:click={() => handleSelectOption(option)}
class="grid grid-cols-[36px,1fr] place-items-center p-2 disabled:opacity-40 {buttonStyle}"
disabled={renderedOption.disabled}
on:click={() => !renderedOption.disabled && handleSelectOption(option)}
>
{#if isEqual(selectedOption, option)}
<div class="text-immich-primary dark:text-immich-dark-primary">