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

event listener

Browse source
This commit is contained in:
Alex Tran 2023-08-12 17:57:53 -05:00
parent ac18f7515a
commit 9bd2934aa2
2 changed files with 19 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@
import Button from '../elements/buttons/button.svelte';
export let album: AlbumResponseDto;
const dispatch = createEventDispatcher<{ close: void }>();
const dispatch = createEventDispatcher<{ close: void; 'select-people': void; 'select-location': void }>();
</script>
<BaseModal
@ -16,17 +16,18 @@
>
<svelte:fragment slot="title">
<div class="flex place-items-center gap-2">
<p class="text-immich-fg dark:text-immich-dark-fg font-medium">Automatically add photos</p>
<p class="font-medium text-immich-fg dark:text-immich-dark-fg">Automatically add photos</p>
</div>
</svelte:fragment>
<section class="mb-5 px-5">
<!-- People Selection -->
<div id="people-selection">
<p class="text-sm">PEOPLE</p>
<p class="text-sm font-medium">PEOPLE</p>
<div class="mt-4">
<button
class="immich-text-primary border-1 flex h-20 w-20 place-content-center place-items-center rounded-lg border border-gray-300 hover:bg-gray-500/20 dark:border-gray-500"
on:click={() => dispatch('select-people')}
>
<Plus size="24" />
</button>
@ -35,10 +36,11 @@
<!-- Location Selection -->
<div id="location-selection" class="mt-5">
<p class="text-sm">LOCATION</p>
<p class="text-sm font-medium">LOCATION</p>
<div class="mt-4">
<button
class="immich-text-primary border-1 flex w-full place-content-center place-items-center rounded-2xl border border-gray-300 py-2 hover:bg-gray-500/20 dark:border-gray-500"
on:click={() => dispatch('select-location')}
>
<Plus size="24" />
</button>
@ -47,7 +49,7 @@
<!-- Date Selection -->
<div id="date-selection" class="mt-5">
<p class="text-sm">START DATE</p>
<p class="text-sm font-medium">START DATE</p>
<div class="mt-2">
<div class="text-xs">
<p>Only include photos after the set date.</p>
@ -55,9 +57,17 @@
</div>
<div class="mt-4">
<Button size="sm">Select</Button>
<Button size="sm" }>Select</Button>
</div>
</div>
</div>
<!-- Buttons rows -->
<div>
<div class="mt-5 flex justify-end gap-2">
<Button size="sm" color="secondary" on:click={() => dispatch('close')}>Cancel</Button>
<Button size="sm" variant="primary">Confirm</Button>
</div>
</div>
</section>
</BaseModal>

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

@ -479,13 +479,13 @@
{#if album.assetCount === 0}
<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>
<p class="text-sm 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>
<span class="immich-text-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>
@ -496,7 +496,7 @@
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="34" /> </span>
<span class="immich-text-primary"><Plus size="34" /> </span>
<span class="text-lg">Select photos</span>
</button>
</div>