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

Implement mechanism to remove and add shared user in album on web (#369)

Browse Source 
* AFixed overlay issue of modal

* Added modal with existing user

* Added custom scrollbar to all pages

* Fixed Document is not define when access document DOM node in browswer

* Added context menu

* Added api to remove user from album

* Handle user leave album

* Added share button to non-shared album

* Added padding to album viewer:

* Fixed margin top of asset selection page

* Fixed issue cannot push to dockerhub
This commit is contained in:
Alex
2022-07-23 13:08:49 -05:00
committed by GitHub
parent 6021124688
commit 3b97c7729b
20 changed files with 405 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
web/src/lib/components/shared-components/base-modal.svelte
View File

@ -1,30 +1,54 @@
<script lang="ts">
import { fly } from 'svelte/transition';
import { fade } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import Close from 'svelte-material-icons/Close.svelte';
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
import { browser } from '$app/env';
import CircleIconButton from './circle-icon-button.svelte';
import { clickOutside } from '$lib/utils/click-outside';
const dispatch = createEventDispatcher();
export let zIndex = 9999;
onMount(() => {
if (browser) {
const scrollTop = document.documentElement.scrollTop;
const scrollLeft = document.documentElement.scrollLeft;
window.onscroll = function () {
window.scrollTo(scrollLeft, scrollTop);
};
}
});
onDestroy(() => {
if (browser) {
window.onscroll = function () {};
}
});
</script>
<div
id="immich-modal"
transition:fly={{ y: 1000, duration: 200, easing: quintOut }}
class="absolute top-0 w-screen h-screen z-[9999] bg-black/50 flex place-items-center place-content-center"
style:z-index={zIndex}
transition:fade={{ duration: 100, easing: quintOut }}
class="fixed top-0 w-full h-full bg-black/50 flex place-items-center place-content-center overflow-hidden"
>
<div class="bg-white w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md">
<div
use:clickOutside
on:out-click={() => dispatch('close')}
class="bg-white w-[450px] min-h-[200px] max-h-[500px] rounded-lg shadow-md"
>
<div class="flex justify-between place-items-center p-5">
<div>
<slot name="title">
<p>Modal Title</p>
</slot>
</div>
<button on:click={() => dispatch('close')}>
<Close size="24" />
</button>
<CircleIconButton on:click={() => dispatch('close')} logo={Close} size={'20'} />
</div>
<div class="mt-4">
<div class="">
<slot />
</div>
</div>