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

* 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

web/src/lib/components/shared-components/base-modal.svelte

@@ -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>

web/src/lib/components/shared-components/circle-avatar.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { api, UserResponseDto } from '@api';
+	import { createEventDispatcher } from 'svelte';
 
 	export let user: UserResponseDto;
 
 	// Avatar Size In Pixel
 	export let size: number = 48;
 
+	const dispatch = createEventDispatcher();
 	const getUserAvatar = async () => {
 		try {
 			const { data } = await api.userApi.getProfileImage(user.id, {
@@ -22,18 +24,21 @@
 </script>
 
 {#await getUserAvatar()}
-	<div
+	<button
+		on:click={() => dispatch('click')}
 		style:width={`${size}px`}
 		style:height={`${size}px`}
 		class={` rounded-full bg-immich-primary/25`}
 	/>
 {:then data}
-	<img
-		src={data}
-		alt="profile-img"
-		style:width={`${size}px`}
-		style:height={`${size}px`}
-		class={`inline rounded-full  object-cover border shadow-md`}
-		title={user.email}
-	/>
+	<button on:click={() => dispatch('click')}>
+		<img
+			src={data}
+			alt="profile-img"
+			style:width={`${size}px`}
+			style:height={`${size}px`}
+			class={`inline rounded-full  object-cover border shadow-md`}
+			title={user.email}
+		/>
+	</button>
 {/await}

web/src/lib/components/shared-components/circle-icon-button.svelte

@@ -1,18 +1,41 @@
 <script lang="ts">
+	/**
+	 * This is the circle icon component.
+	 */
 	import { createEventDispatcher } from 'svelte';
 
 	export let logo: any;
-	export let backgroundColor: string = '';
-	export let logoColor: string = '';
-
+	export let backgroundColor: string = 'transparent';
+	export let hoverColor: string = '#e2e7e9';
+	export let logoColor: string = '#5f6368';
+	export let size = '24';
+	export let title = '';
+	let iconButton: HTMLButtonElement;
 	const dispatch = createEventDispatcher();
+
+	$: {
+		if (iconButton) {
+			iconButton.style.backgroundColor = backgroundColor;
+			iconButton.style.setProperty('--immich-icon-button-hover-color', hoverColor);
+		}
+	}
 </script>
 
 <button
-	class="rounded-full p-3 flex place-items-center place-content-center text-gray-50 hover:bg-gray-800"
-	class:background-color={backgroundColor}
-	class:color={logoColor}
+	{title}
+	bind:this={iconButton}
+	class={`immich-circle-icon-button rounded-full p-3 flex place-items-center place-content-center transition-all`}
 	on:click={() => dispatch('click')}
 >
-	<svelte:component this={logo} size="24" />
+	<svelte:component this={logo} {size} color={logoColor} />
 </button>
+
+<style>
+	:root {
+		--immich-icon-button-hover-color: #d3d3d3;
+	}
+
+	.immich-circle-icon-button:hover {
+		background-color: var(--immich-icon-button-hover-color) !important;
+	}
+</style>

web/src/lib/components/shared-components/context-menu/context-menu.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { clickOutside } from '$lib/utils/click-outside';
+	import { createEventDispatcher } from 'svelte';
+	import { quintOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+
+	export let x: number = 0;
+	export let y: number = 0;
+
+	const dispatch = createEventDispatcher();
+	let menuEl: HTMLElement;
+
+	$: (() => {
+		if (!menuEl) return;
+
+		const rect = menuEl.getBoundingClientRect();
+		x = Math.min(window.innerWidth - rect.width, x);
+		if (y > window.innerHeight - rect.height) {
+			y -= rect.height;
+		}
+	})();
+</script>
+
+<div
+	transition:slide={{ duration: 200, easing: quintOut }}
+	bind:this={menuEl}
+	class="absolute bg-white w-[150px] z-[99999] rounded-lg shadow-md"
+	style={`top: ${y}px; left: ${x}px;`}
+	use:clickOutside
+	on:out-click={() => dispatch('clickoutside')}
+>
+	<slot />
+</div>

web/src/lib/components/shared-components/context-menu/menu-option.svelte

@@ -0,0 +1,26 @@
+<script>
+	import { createEventDispatcher } from 'svelte';
+
+	export let isDisabled = false;
+	export let text = '';
+
+	const dispatch = createEventDispatcher();
+
+	const handleClick = () => {
+		if (isDisabled) return;
+
+		dispatch('click');
+	};
+</script>
+
+<button
+	class:disabled={isDisabled}
+	on:click={handleClick}
+	class="bg-white hover:bg-immich-bg transition-all p-4 w-full text-left rounded-lg"
+>
+	{#if text}
+		{text}
+	{:else}
+		<slot />
+	{/if}
+</button>

web/src/lib/components/shared-components/context-menu/menu.ts

@@ -0,0 +1,3 @@
+const key = {};
+
+export { key };