mirror of https://github.com/immich-app/immich.git
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 dockerhubpull/370/head
Alex
GitHub
parent
6021124688
commit
3b97c7729b
@ -0,0 +1,98 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { AlbumResponseDto, api, UserResponseDto } from '@api';
|
||||
import BaseModal from '../shared-components/base-modal.svelte';
|
||||
import CircleAvatar from '../shared-components/circle-avatar.svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
|
||||
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
|
||||
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
|
||||
|
||||
export let album: AlbumResponseDto;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
let currentUser: UserResponseDto;
|
||||
let isShowMenu = false;
|
||||
let position = { x: 0, y: 0 };
|
||||
let targetUserId: string;
|
||||
$: isOwned = currentUser?.id == album.ownerId;
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const { data } = await api.userApi.getMyUserInfo();
|
||||
currentUser = data;
|
||||
} catch (e) {
|
||||
console.error('Error [share-info-modal] [getAllUsers]', e);
|
||||
}
|
||||
});
|
||||
|
||||
const showContextMenu = (userId: string) => {
|
||||
const iconButton = document.getElementById('icon-' + userId);
|
||||
|
||||
if (iconButton) {
|
||||
position = {
|
||||
x: iconButton.getBoundingClientRect().left,
|
||||
y: iconButton.getBoundingClientRect().bottom
|
||||
};
|
||||
}
|
||||
|
||||
targetUserId = userId;
|
||||
isShowMenu = !isShowMenu;
|
||||
};
|
||||
|
||||
const removeUser = async (userId: string) => {
|
||||
try {
|
||||
await api.albumApi.removeUserFromAlbum(album.id, userId);
|
||||
dispatch('user-deleted', { userId });
|
||||
} catch (e) {
|
||||
console.error('Error [share-info-modal] [removeUser]', e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<BaseModal on:close={() => dispatch('close')}>
|
||||
<svelte:fragment slot="title">
|
||||
<span class="flex gap-2 place-items-center">
|
||||
<p class="font-medium text-immich-fg">Options</p>
|
||||
</span>
|
||||
</svelte:fragment>
|
||||
|
||||
<section class="max-h-[400px] overflow-y-auto immich-scrollbar pb-4">
|
||||
{#each album.sharedUsers as user}
|
||||
<div
|
||||
class="flex gap-4 p-5 place-items-center justify-between w-full transition-colors hover:bg-gray-50"
|
||||
>
|
||||
<div class="flex gap-4 place-items-center">
|
||||
<CircleAvatar {user} />
|
||||
<p class="font-medium text-sm">{user.firstName} {user.lastName}</p>
|
||||
</div>
|
||||
|
||||
<div id={`icon-${user.id}`} class="flex place-items-center">
|
||||
{#if isOwned}
|
||||
<CircleIconButton
|
||||
on:click={() => showContextMenu(user.id)}
|
||||
logo={DotsVertical}
|
||||
backgroundColor={'transparent'}
|
||||
logoColor={'#5f6368'}
|
||||
hoverColor={'#e2e7e9'}
|
||||
size={'20'}
|
||||
/>
|
||||
{:else if user.id == currentUser?.id}
|
||||
<button
|
||||
on:click={() => removeUser('me')}
|
||||
class="text-sm text-immich-primary font-medium transition-colors hover:text-immich-primary/75"
|
||||
>Leave</button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
{#if isShowMenu}
|
||||
<ContextMenu {...position} on:clickoutside={() => (isShowMenu = false)}>
|
||||
<MenuOption on:click={() => removeUser(targetUserId)} text="Remove" />
|
||||
</ContextMenu>
|
||||
{/if}
|
||||
</BaseModal>
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
@ -0,0 +1,3 @@
|
||||
const key = {};
|
||||
|
||||
export { key };
|
||||
Loading…
Reference in New Issue