mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
feat(web): increase usage of CircleIconButton (#9256)
This commit is contained in:
Ben
GitHub
parent
5b87abb021
commit
48b490f5e9
18 changed files with 166 additions and 177 deletions
|
|
@ -9,9 +9,9 @@
|
|||
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 LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
||||
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
|
||||
export let peopleWithFaces: AssetFaceResponseDto[];
|
||||
export let allPeople: PersonResponseDto[];
|
||||
|
|
@ -119,38 +119,19 @@
|
|||
<div class="flex place-items-center justify-between gap-2">
|
||||
{#if !searchFaces}
|
||||
<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">Select face</p>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
|
||||
title="Search existing person"
|
||||
<CircleIconButton
|
||||
icon={mdiMagnify}
|
||||
title="Search for existing person"
|
||||
on:click={() => {
|
||||
searchFaces = true;
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Icon path={mdiMagnify} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
/>
|
||||
{#if !isShowLoadingNewPerson}
|
||||
<button
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
|
||||
on:click={handleCreatePerson}
|
||||
title="Create new person"
|
||||
>
|
||||
<div>
|
||||
<Icon path={mdiPlus} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
<CircleIconButton icon={mdiPlus} title="Create new person" on:click={handleCreatePerson} />
|
||||
{:else}
|
||||
<div class="flex place-content-center place-items-center">
|
||||
<LoadingSpinner />
|
||||
|
|
@ -158,14 +139,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<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} />
|
||||
<div class="w-full flex">
|
||||
<SearchPeople
|
||||
type="input"
|
||||
|
|
@ -179,14 +153,7 @@
|
|||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<button
|
||||
class="flex place-content-center place-items-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
|
||||
on:click={() => (searchFaces = false)}
|
||||
>
|
||||
<div>
|
||||
<Icon path={mdiClose} size="24" />
|
||||
</div>
|
||||
</button>
|
||||
<CircleIconButton icon={mdiClose} title="Cancel search" on:click={() => (searchFaces = false)} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="px-4 py-4 text-sm">
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@
|
|||
|
||||
<div class="absolute right-2 top-2" class:hidden={!showVerticalDots}>
|
||||
<CircleIconButton
|
||||
color="light"
|
||||
color="opaque"
|
||||
icon={mdiDotsVertical}
|
||||
title="Show person options"
|
||||
size="20"
|
||||
|
|
|
|||
|
|
@ -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)}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue