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

feat(web): ascending order for slideshow (#7502)

Browse Source 
* feat: ascending order for slideshow

* feat: use dropdown

* rename

* fix: size

* pr feedback

* fix: hide text on small screen

* Wording

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
martin
2024-03-02 16:50:02 +01:00
committed by GitHub
parent db455060f0
commit 8d44afe915
7 changed files with 144 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,11 @@
// Necessary for eslint
/* eslint-disable @typescript-eslint/no-explicit-any */
type T = any;
export type RenderedOption = {
title: string;
icon?: string;
};
</script>
<script lang="ts" generics="T">
@ -25,16 +30,11 @@
export let options: T[];
export let selectedOption = options[0];
export let render: (item: T) => string | RenderedOption = String;
type RenderedOption = {
title: string;
icon?: string;
};
export let showMenu = false;
export let controlable = false;
export let hideTextOnSmallScreen = true;
export let render: (item: T) => string | RenderedOption = String;
const handleClickOutside = () => {
if (!controlable) {
@ -76,14 +76,14 @@
{#if renderedSelectedOption?.icon}
<Icon path={renderedSelectedOption.icon} size="18" />
{/if}
<p class="hidden sm:block">{renderedSelectedOption.title}</p>
<p class={hideTextOnSmallScreen ? 'hidden sm:block' : ''}>{renderedSelectedOption.title}</p>
</div>
</LinkButton>
<!-- DROP DOWN MENU -->
{#if showMenu}
<div
transition:fly={{ y: -30, x: 30, duration: 100 }}
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}"
>
{#each options as option (option)}