helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(web): revamp places (#12219)

Browse source 
* revamp places

* add english translations

* migrate places page and components to svelte 5

* fix lint

* chore: cleanup

---------

Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
Krassimir Valev 2025-02-06 21:54:01 +01:00 • committed by GitHub
parent 45f7401513
commit 6aad9fae8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 445 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

23
web/src/lib/components/elements/dropdown.svelte
View file

@ -26,12 +26,14 @@
controlable?: boolean;
hideTextOnSmallScreen?: boolean;
title?: string | undefined;
position?: 'bottom-left' | 'bottom-right';
onSelect: (option: T) => void;
onClickOutside?: () => void;
render?: (item: T) => string | RenderedOption;
}
let {
position = 'bottom-left',
class: className = '',
options,
selectedOption = $bindable(options[0]),
@ -76,9 +78,24 @@
};
let renderedSelectedOption = $derived(renderOption(selectedOption));
const getAlignClass = (position: 'bottom-left' | 'bottom-right') => {
switch (position) {
case 'bottom-left': {
return 'left-0';
}
case 'bottom-right': {
return 'right-0';
}
default: {
return '';
}
}
};
</script>
<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }}>
<div use:clickOutside={{ onOutclick: handleClickOutside, onEscape: handleClickOutside }} class="relative">
<!-- BUTTON TITLE -->
<Button onclick={() => (showMenu = true)} fullWidth {title} variant="ghost" color="secondary" size="small">
{#if renderedSelectedOption?.icon}
@ -91,7 +108,9 @@
{#if showMenu}
<div
transition:fly={{ y: -30, duration: 250 }}
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}"
class="text-sm font-medium absolute 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} {getAlignClass(
position,
)}"
>
{#each options as option (option)}
{@const renderedOption = renderOption(option)}