Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-07-31 15:08:44 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): adjust button size in person side panel (#19924)

Browse Source 
* fix(web): adjust button size in person side panel

* round edit button
This commit is contained in:
Lukas 2025-07-15 00:05:34 +02:00 committed by GitHub
parent 5f10a4cae7
commit ccd0c35ca1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/lib/components/faces-page/person-side-panel.svelte
View File

@ -20,6 +20,7 @@
type AssetFaceResponseDto,
type PersonResponseDto,
} from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { mdiAccountOff, mdiArrowLeftThin, mdiPencil, mdiRestart, mdiTrashCan } from '@mdi/js';
import { onMount } from 'svelte';
import { t } from 'svelte-i18n';
@ -28,7 +29,6 @@
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import AssignFaceSidePanel from './assign-face-side-panel.svelte';
import { IconButton } from '@immich/ui';
interface Props {
assetId: string;
@ -309,7 +309,7 @@
</p>
{/if}
<div class="absolute -end-[5px] -top-[5px] h-[20px] w-[20px] rounded-full">
<div class="absolute -end-[3px] -top-[3px] h-[20px] w-[20px] rounded-full">
{#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
<IconButton
shape="round"
@ -317,38 +317,39 @@
color="primary"
icon={mdiRestart}
aria-label={$t('reset')}
size="medium"
size="small"
class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
onclick={() => handleReset(face.id)}
/>
{:else}
<IconButton
shape="round"
color="primary"
icon={mdiPencil}
aria-label={$t('select_new_face')}
size="medium"
size="small"
class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
onclick={() => handleFacePicker(face)}
/>
{/if}
</div>
<div class="absolute end-[25px] -top-[5px] h-[20px] w-[20px] rounded-full">
<div class="absolute end-[33px] -top-[3px] h-[20px] w-[20px] rounded-full">
{#if !selectedPersonToCreate[face.id] && !selectedPersonToReassign[face.id] && !face.person}
<div
class="flex place-content-center place-items-center rounded-full bg-[#d3d3d3] p-1 transition-all absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
>
<Icon color="primary" path={mdiAccountOff} ariaHidden size="18" />
<Icon color="primary" path={mdiAccountOff} ariaHidden size="24" />
</div>
{/if}
</div>
{#if face.person != null}
<div class="absolute -end-[5px] top-[25px] h-[20px] w-[20px] rounded-full">
<div class="absolute -end-[3px] top-[33px] h-[20px] w-[20px] rounded-full">
<IconButton
shape="round"
color="danger"
icon={mdiTrashCan}
aria-label={$t('delete_face')}
size="medium"
size="small"
class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
onclick={() => deleteAssetFace(face)}
/>