helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-10-17 18:19:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): increase usage of CircleIconButton (#9256)

Browse source
This commit is contained in:
Ben 2024-05-04 18:29:50 +00:00 • committed by GitHub
parent 5b87abb021
commit 48b490f5e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 166 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

57
web/src/lib/components/faces-page/person-side-panel.svelte
View file

@ -15,14 +15,14 @@
type AssetFaceResponseDto,
type PersonResponseDto,
} from '@immich/sdk';
import { mdiArrowLeftThin, mdiRestart } from '@mdi/js';
import { mdiArrowLeftThin, mdiMinus, mdiRestart } from '@mdi/js';
import { createEventDispatcher, onMount } from 'svelte';
import { linear } from 'svelte/easing';
import { fly } from 'svelte/transition';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import Icon from '../elements/icon.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import AssignFaceSidePanel from './assign-face-side-panel.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
export let assetId: string;
export let assetType: AssetTypeEnum;
@ -42,7 +42,7 @@
let isShowLoadingPeople = false;
// search people
let showSeletecFaces = false;
let showSelectedFaces = false;
let allPeople: PersonResponseDto[] = [];
// timers
@ -159,21 +159,21 @@
if (newFeaturePhoto && personToUpdate) {
selectedPersonToCreate[personToUpdate.id] = newFeaturePhoto;
}
showSeletecFaces = false;
showSelectedFaces = false;
};
const handleReassignFace = (person: PersonResponseDto | null) => {
const personToUpdate = peopleWithFaces.find((face) => face.person?.id === editedPerson.id);
if (person && personToUpdate) {
selectedPersonToReassign[personToUpdate.id] = person;
showSeletecFaces = false;
showSelectedFaces = false;
}
};
const handlePersonPicker = (person: PersonResponseDto | null) => {
if (person) {
editedPerson = person;
showSeletecFaces = true;
showSelectedFaces = true;
}
};
</script>
@ -184,14 +184,7 @@
>
<div class="flex place-items-center justify-between gap-2">
<div class="flex items-center gap-2">
<button
class="flex place-content-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
on:click={handleBackButton}
>
<div>
<Icon path={mdiArrowLeftThin} size="24" />
</div>
</button>
<CircleIconButton icon={mdiArrowLeftThin} title="Back" on:click={handleBackButton} />
<p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Edit faces</p>
</div>
{#if !isShowLoadingDone}
@ -273,21 +266,27 @@
</p>
{/if}
<div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full bg-blue-700">
<div class="absolute -right-[5px] -top-[5px] h-[20px] w-[20px] rounded-full">
{#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
<button on:click={() => handleReset(face.id)} class="flex h-full w-full">
<div class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform">
<div>
<Icon path={mdiRestart} size={18} />
</div>
</div>
</button>
<CircleIconButton
color="primary"
icon={mdiRestart}
title="Reset"
size="18"
padding="1"
class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
on:click={() => handleReset(face.id)}
/>
{:else}
<button on:click={() => handlePersonPicker(face.person)} class="flex h-full w-full">
<div
class="absolute left-1/2 top-1/2 h-[2px] w-[14px] translate-x-[-50%] translate-y-[-50%] transform bg-white"
/>
</button>
<CircleIconButton
color="primary"
icon={mdiMinus}
title="Select new face"
size="18"
padding="1"
class="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
on:click={() => handlePersonPicker(face.person)}
/>
{/if}
</div>
</div>
@ -299,14 +298,14 @@
</div>
</section>
{#if showSeletecFaces}
{#if showSelectedFaces}
<AssignFaceSidePanel
{peopleWithFaces}
{allPeople}
{editedPerson}
{assetType}
{assetId}
on:close={() => (showSeletecFaces = false)}
on:close={() => (showSelectedFaces = false)}
on:createPerson={(event) => handleCreatePerson(event.detail)}
on:reassign={(event) => handleReassignFace(event.detail)}
/>