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 AssetFaceResponseDto,
type PersonResponseDto, type PersonResponseDto,
} from '@immich/sdk'; } from '@immich/sdk';
import { IconButton } from '@immich/ui';
import { mdiAccountOff, mdiArrowLeftThin, mdiPencil, mdiRestart, mdiTrashCan } from '@mdi/js'; import { mdiAccountOff, mdiArrowLeftThin, mdiPencil, mdiRestart, mdiTrashCan } from '@mdi/js';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -28,7 +29,6 @@
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte'; import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification'; import { NotificationType, notificationController } from '../shared-components/notification/notification';
import AssignFaceSidePanel from './assign-face-side-panel.svelte'; import AssignFaceSidePanel from './assign-face-side-panel.svelte';
import { IconButton } from '@immich/ui';
interface Props { interface Props {
assetId: string; assetId: string;
@ -309,7 +309,7 @@
</p> </p>
{/if} {/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]} {#if selectedPersonToCreate[face.id] || selectedPersonToReassign[face.id]}
<IconButton <IconButton
shape="round" shape="round"
@ -317,38 +317,39 @@
color="primary" color="primary"
icon={mdiRestart} icon={mdiRestart}
aria-label={$t('reset')} aria-label={$t('reset')}
size="medium" size="small"
class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform" class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
onclick={() => handleReset(face.id)} onclick={() => handleReset(face.id)}
/> />
{:else} {:else}
<IconButton <IconButton
shape="round"
color="primary" color="primary"
icon={mdiPencil} icon={mdiPencil}
aria-label={$t('select_new_face')} 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" class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
onclick={() => handleFacePicker(face)} onclick={() => handleFacePicker(face)}
/> />
{/if} {/if}
</div> </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} {#if !selectedPersonToCreate[face.id] && !selectedPersonToReassign[face.id] && !face.person}
<div <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" 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> </div>
{/if} {/if}
</div> </div>
{#if face.person != null} {#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 <IconButton
shape="round" shape="round"
color="danger" color="danger"
icon={mdiTrashCan} icon={mdiTrashCan}
aria-label={$t('delete_face')} aria-label={$t('delete_face')}
size="medium" size="small"
class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform" class="absolute start-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] transform"
onclick={() => deleteAssetFace(face)} onclick={() => deleteAssetFace(face)}
/> />