Remove/Add asset in ablum on web (#371)

* Added interaction to select multiple thumbnail

* Fixed stutter transition

* Return AlbumResponseDto after removing an asset from album

* Render correctly when an array of thumbnail is updated

* Fixed wording

* Added native dialog for removing users from album

* Fixed rendering incorrect profile image on share user select dialog
This commit is contained in:
Alex
2022-07-23 23:23:14 -05:00
committed by GitHub
parent a35460cb84
commit 052db5d748
14 changed files with 210 additions and 104 deletions

View File

@@ -4,9 +4,12 @@
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
import Close from 'svelte-material-icons/Close.svelte';
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
import { fly } from 'svelte/transition';
export let backIcon = Close;
let appBarBorder = 'bg-immich-bg';
export let tailwindClasses = '';
let appBarBorder = 'bg-immich-bg border border-transparent';
const dispatch = createEventDispatcher();
onMount(() => {
@@ -15,7 +18,7 @@
if (window.pageYOffset > 80) {
appBarBorder = 'border border-gray-200 bg-gray-50';
} else {
appBarBorder = 'bg-immich-bg';
appBarBorder = 'bg-immich-bg border border-transparent';
}
});
}
@@ -28,10 +31,13 @@
});
</script>
<div class="fixed top-0 w-full bg-transparent z-[100]">
<div
transition:fly|local={{ y: 10, duration: 200 }}
class="fixed top-0 w-full bg-transparent z-[100]"
>
<div
id="asset-selection-app-bar"
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center`}
class={`flex justify-between ${appBarBorder} rounded-lg p-2 mx-2 mt-2 transition-all place-items-center ${tailwindClasses}`}
>
<div class="flex place-items-center gap-6">
<CircleIconButton