beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

ui: Modal work

Browse source
This commit is contained in:
Alex Tran 2023-08-12 10:36:21 -05:00
parent ea6bc8fb10
commit 980c6b0dbb
2 changed files with 45 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
web/src/lib/components/album-page/rule-selection.svelte Normal file
View file

@ -0,0 +1,20 @@
<script lang="ts">
import BaseModal from '$lib/components/shared-components/base-modal.svelte';
import { createEventDispatcher } from 'svelte';
import { AlbumResponseDto } from '@api';
export let album: AlbumResponseDto;
const dispatch = createEventDispatcher();
</script>
<BaseModal
on:close={() => {
dispatch('close');
}}
>
<svelte:fragment slot="title">
<span class="flex place-items-center gap-2">
<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Select people & rule</p>
</span>
</svelte:fragment>
</BaseModal>

31
web/src/routes/(user)/albums/[albumId]/+page.svelte
View file

@ -23,6 +23,7 @@
NotificationType,
notificationController,
} from '$lib/components/shared-components/notification/notification';
import RuleSelection from '$lib/components/album-page/rule-selection.svelte';
import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
import { AppRoute, dateFormats } from '$lib/constants';
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
@ -40,6 +41,7 @@
import FolderDownloadOutline from 'svelte-material-icons/FolderDownloadOutline.svelte';
import Link from 'svelte-material-icons/Link.svelte';
import Plus from 'svelte-material-icons/Plus.svelte';
import FaceMan from 'svelte-material-icons/FaceMan.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import type { PageData } from './$types';
@ -56,6 +58,7 @@
SELECT_ASSETS = 'select-assets',
ALBUM_OPTIONS = 'album-options',
VIEW_USERS = 'view-users',
RULE_SELECTION = 'rule-selection',
VIEW = 'view',
}
@ -338,7 +341,7 @@
<Button
size="sm"
rounded="lg"
disabled={album.assetCount == 0}
disabled={album.assetCount === 0}
on:click={() => (viewMode = ViewMode.SELECT_USERS)}
>
Share
@ -352,7 +355,7 @@
<ControlAppBar on:close-button-click={handleCloseSelectAssets}>
<svelte:fragment slot="leading">
<p class="text-lg dark:text-immich-dark-fg">
{#if $timelineSelected.size == 0}
{#if $timelineSelected.size === 0}
Add to album
{:else}
{$timelineSelected.size.toLocaleString($locale)} selected
@ -398,7 +401,7 @@
<!-- ALBUM TITLE -->
<section class="pt-24">
<input
on:keydown={(e) => e.key == 'Enter' && titleInput.blur()}
on:keydown={(e) => e.key === 'Enter' && titleInput.blur()}
on:blur={handleUpdateName}
class="w-[99%] border-b-2 border-transparent text-6xl text-immich-primary outline-none transition-all dark:text-immich-dark-primary {isOwned
? 'hover:border-gray-400'
@ -474,14 +477,26 @@
{/if}
{#if album.assetCount === 0}
<section id="empty-album" class=" mt-[200px] flex place-content-center place-items-center">
<div class="w-[300px]">
<section id="empty-album" class=" mt-[200px] flex flex-col place-content-center place-items-center">
<div class="w-[340px]">
<p class="text-xs dark:text-immich-dark-fg">ADD PHOTOS</p>
<button
on:click={() => (viewMode = ViewMode.RULE_SELECTION)}
class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
>
<span class="text-text-immich-primary dark:text-immich-dark-primary"><FaceMan size="34" /> </span>
<div class="text-left">
<div class="text-lg">Select people & rules</div>
<div class="text-sm">Create an auto-updating album</div>
</div>
</button>
<button
on:click={() => (viewMode = ViewMode.SELECT_ASSETS)}
class="mt-5 flex w-full place-items-center gap-6 rounded-md border bg-immich-bg px-8 py-8 text-immich-fg transition-all hover:bg-gray-100 hover:text-immich-primary dark:border-none dark:bg-immich-dark-gray dark:text-immich-dark-fg dark:hover:text-immich-dark-primary"
>
<span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="24" /> </span>
<span class="text-text-immich-primary dark:text-immich-dark-primary"><Plus size="34" /> </span>
<span class="text-lg">Select photos</span>
</button>
</div>
@ -533,3 +548,7 @@
on:updated={({ detail: description }) => handleUpdateDescription(description)}
/>
{/if}
{#if viewMode === ViewMode.RULE_SELECTION}
<RuleSelection on:close={() => (viewMode = ViewMode.VIEW)} {album} />
{/if}