Skip to content

Commit

Permalink
fix: close button
Browse files Browse the repository at this point in the history
  • Loading branch information
@martabal
martabal committed Jul 18, 2023
1 parent b2f0511 commit d9d7433
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 95 deletions.
62 changes: 25 additions & 37 deletions web/src/lib/components/faces-page/show-hide.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,48 +6,36 @@
import IconButton from '../elements/buttons/icon-button.svelte';
import { createEventDispatcher } from 'svelte';
export let selectHidden = false;
const dispatch = createEventDispatcher();
const handleDoneClick = () => {
selectHidden = !selectHidden;
dispatch('doneClick');
};
const handleCloseClick = () => {
selectHidden = !selectHidden;
dispatch('closeClick');
};
</script>

{#if selectHidden}
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
<section
transition:fly={{ y: 500, duration: 100, easing: quintOut }}
class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
>
<div
class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full h-16"
>
<div
class="absolute border-b dark:border-immich-dark-gray flex justify-between place-items-center dark:text-immich-dark-fg w-full h-16"
>
<div class="flex items-center justify-between p-8 w-full">
<div class="flex items-center">
<CircleIconButton
logo={Close}
on:click={() => {
handleCloseClick();
}}
/>
<p class="ml-4">Show & hide faces</p>
</div>
<IconButton
<div class="flex items-center justify-between p-8 w-full">
<div class="flex items-center">
<CircleIconButton
logo={Close}
on:click={() => {
handleDoneClick();
dispatch('closeClick');
}}
>
Done
</IconButton>
</div>
<div class="absolute top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8">
<slot />
/>
<p class="ml-4">Show & hide faces</p>
</div>
<IconButton
on:click={() => {
dispatch('doneClick');
}}
>
Done
</IconButton>
</div>
<div class="absolute top-16 h-[calc(100%-theme(spacing.16))] w-full immich-scrollbar p-4 pb-8">
<slot />
</div>
</section>
{/if}
</div>
</section>
121 changes: 63 additions & 58 deletions web/src/routes/(user)/people/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,27 +18,29 @@
let changeCounter = 0;
let initialHiddenValues: Record<string, boolean> = {};
data.people.people.forEach((person: PersonResponseDto) => {
initialHiddenValues[person.id] = person.isHidden;
});
// Get number of person and visible people
let people = data.people.people;
let countTotalPeople = data.people.total;
let countVisiblePeople = data.people.visible;
people.forEach((person: PersonResponseDto) => {
initialHiddenValues[person.id] = person.isHidden;
});
const handleCloseClick = () => {
for (const person of data.people.people) {
selectHidden = false;
people.forEach((person: PersonResponseDto) => {
person.isHidden = initialHiddenValues[person.id];
}
});
};
const handleDoneClick = async () => {
selectHidden = false;
try {
// Reset the counter before checking changes
let changeCounter = 0;
// Check if the visibility for each person has been changed
for (const person of data.people.people) {
for (const person of people) {
if (person.isHidden !== initialHiddenValues[person.id]) {
changeCounter++;
await api.personApi.updatePerson({
Expand Down Expand Up @@ -84,29 +86,31 @@
{#if countVisiblePeople > 0}
<div class="pl-4">
<div class="flex flex-row flex-wrap gap-1">
{#each data.people.people as person (person.id)}
{#if !person.isHidden}
<div class="relative">
<a href="/people/{person.id}" draggable="false">
<div class="filter brightness-95 rounded-xl w-48">
<ImageThumbnail
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
/>
</div>
{#if person.name}
<span
class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
>
{person.name}
</span>
{/if}
</a>
</div>
{/if}
{/each}
{#key selectHidden}
{#each people as person (person.id)}
{#if !person.isHidden}
<div class="relative">
<a href="/people/{person.id}" draggable="false">
<div class="filter brightness-95 rounded-xl w-48">
<ImageThumbnail
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
/>
</div>
{#if person.name}
<span
class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
>
{person.name}
</span>
{/if}
</a>
</div>
{/if}
{/each}
{/key}
</div>
</div>
{:else}
Expand All @@ -118,32 +122,33 @@
</div>
{/if}
</UserPageLayout>

<ShowHide bind:selectHidden on:doneClick={handleDoneClick} on:closeClick={handleCloseClick}>
<div class="pl-4">
<div class="flex flex-row flex-wrap gap-1">
{#each data.people.people as person (person.id)}
<div class="relative">
<div class="filter brightness-95 rounded-xl w-48 h-48">
<button class="h-full w-full" on:click={() => (person.isHidden = !person.isHidden)}>
<ImageThumbnail
hidden={person.isHidden}
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
/>
</button>
{#if selectHidden}
<ShowHide on:doneClick={handleDoneClick} on:closeClick={handleCloseClick}>
<div class="pl-4">
<div class="flex flex-row flex-wrap gap-1">
{#each people as person (person.id)}
<div class="relative">
<div class="filter brightness-95 rounded-xl w-48 h-48">
<button class="h-full w-full" on:click={() => (person.isHidden = !person.isHidden)}>
<ImageThumbnail
bind:hidden={person.isHidden}
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="100%"
/>
</button>
</div>
{#if person.name}
<span
class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
>
{person.name}
</span>
{/if}
</div>
{#if person.name}
<span
class="absolute bottom-2 w-full text-center font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
>
{person.name}
</span>
{/if}
</div>
{/each}
{/each}
</div>
</div>
</div>
</ShowHide>
</ShowHide>
{/if}

0 comments on commit d9d7433

Please sign in to comment.