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

feat(web,a11y): consolidate BaseModal into FullScreenModal (#8787)

Browse source 
* feat(web,a11y): FullScreenModal sticky buttons

* chore(web): combine BaseModal into FullScreenModal

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Ben 2024-04-16 05:06:15 +00:00 • committed by GitHub
parent 28f591d01b
commit bcdec25843
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 251 additions and 337 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/lib/components/album-page/albums-list.svelte
View file

@ -7,7 +7,6 @@
import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import {
NotificationType,
notificationController,
@ -432,9 +431,12 @@
{#if allowEdit}
<!-- Edit Modal -->
{#if albumToEdit}
<FullScreenModal id="edit-album-modal" title="Edit album" width="wide" onClose={() => (albumToEdit = null)}>
<EditAlbumForm album={albumToEdit} onEditSuccess={successEditAlbumInfo} onCancel={() => (albumToEdit = null)} />
</FullScreenModal>
<EditAlbumForm
album={albumToEdit}
onEditSuccess={successEditAlbumInfo}
onCancel={() => (albumToEdit = null)}
onClose={() => (albumToEdit = null)}
/>
{/if}
<!-- Share Modal -->

8
web/src/lib/components/album-page/share-info-modal.svelte
View file

@ -5,12 +5,12 @@
import { getContextMenuPosition } from '../../utils/context-menu';
import { handleError } from '../../utils/handle-error';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import BaseModal from '../shared-components/base-modal.svelte';
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import UserAvatar from '../shared-components/user-avatar.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
export let album: AlbumResponseDto;
export let onClose: () => void;
@ -66,7 +66,7 @@
</script>
{#if !selectedRemoveUser}
<BaseModal id="share-info-modal" title="Options" {onClose}>
<FullScreenModal id="share-info-modal" title="Options" {onClose}>
<section class="immich-scrollbar max-h-[400px] overflow-y-auto pb-4">
<div class="flex w-full place-items-center justify-between gap-4 p-5">
<div class="flex place-items-center gap-4">
@ -80,7 +80,7 @@
</div>
{#each album.sharedUsers as user}
<div
class="flex w-full place-items-center justify-between gap-4 p-5 transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
class="flex w-full place-items-center justify-between gap-4 p-5 rounded-xl transition-colors hover:bg-gray-50 dark:hover:bg-gray-700"
>
<div class="flex place-items-center gap-4">
<UserAvatar {user} size="md" />
@ -116,7 +116,7 @@
</div>
{/each}
</section>
</BaseModal>
</FullScreenModal>
{/if}
{#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}

14
web/src/lib/components/album-page/user-selection-modal.svelte
View file

@ -12,8 +12,8 @@
import { mdiCheck, mdiLink, mdiShareCircle } from '@mdi/js';
import { createEventDispatcher, onMount } from 'svelte';
import Button from '../elements/buttons/button.svelte';
import BaseModal from '../shared-components/base-modal.svelte';
import UserAvatar from '../shared-components/user-avatar.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
export let album: AlbumResponseDto;
export let onClose: () => void;
@ -54,7 +54,7 @@
};
</script>
<BaseModal id="user-selection-modal" title="Invite to album" showLogo {onClose}>
<FullScreenModal id="user-selection-modal" title="Invite to album" showLogo {onClose}>
{#if selectedUsers.length > 0}
<div class="mb-2 flex flex-wrap place-items-center gap-4 overflow-x-auto px-5 py-2 sticky">
<p class="font-medium">To</p>
@ -75,13 +75,13 @@
<div class="immich-scrollbar max-h-[500px] overflow-y-auto">
{#if users.length > 0}
<p class="px-5 text-xs font-medium">SUGGESTIONS</p>
<p class="text-xs font-medium">SUGGESTIONS</p>
<div class="my-4">
{#each users as user}
<button
on:click={() => handleSelect(user)}
class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700"
class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
>
{#if selectedUsers.includes(user)}
<div
@ -112,7 +112,7 @@
</div>
{#if users.length > 0}
<div class="p-3">
<div class="py-3">
<Button
size="sm"
fullwidth
@ -125,7 +125,7 @@
<hr />
<div id="shared-buttons" class="my-4 flex place-content-center place-items-center justify-around">
<div id="shared-buttons" class="mt-4 flex place-content-center place-items-center justify-around">
<button
class="flex flex-col place-content-center place-items-center gap-2 hover:cursor-pointer"
on:click={() => dispatch('share')}
@ -144,4 +144,4 @@
</button>
{/if}
</div>
</BaseModal>
</FullScreenModal>