self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00
Code Issues Releases Activity

fix(web): align all edit buttons and not correctly rounded buttons on detail-panel (#5524)

Browse Source 
* fix: align all pencils

* fix: format
This commit is contained in:
martin 2023-12-07 03:03:28 +01:00 committed by GitHub
parent 338a028185
commit 8736c77f7a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lib/components/asset-viewer/detail-panel.svelte
View File

@ -205,12 +205,13 @@
<section class="px-4 py-4 text-sm">
<div class="flex h-10 w-full items-center justify-between">
<h2>PEOPLE</h2>
<div class="flex gap-2">
<div class="flex gap-2 items-center">
{#if people.some((person) => person.isHidden)}
<CircleIconButton
title="Show hidden people"
icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
padding="1"
buttonSize="32"
on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
/>
{/if}
@ -219,6 +220,7 @@
icon={mdiPencil}
padding="1"
size="20"
buttonSize="32"
on:click={() => (showEditFaces = true)}
/>
</div>
@ -337,7 +339,7 @@
</div>
{#if isOwner}
<button class="focus:outline-none">
<button class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" />
</button>
{/if}
@ -349,7 +351,7 @@
<Icon path={mdiCalendar} size="24" />
</div>
</div>
<button class="focus:outline-none">
<button class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" />
</button>
</div>
@ -507,7 +509,7 @@
</div>
{:else if !asset.exifInfo?.city && !asset.isReadOnly && $user && asset.ownerId === $user.id}
<div
class="flex justify-between place-items-start gap-4 py-4 rounded-lg pr-2 hover:dark:text-immich-dark-primary hover:text-immich-primary"
class="flex justify-between place-items-start gap-4 py-4 rounded-lg hover:dark:text-immich-dark-primary hover:text-immich-primary"
on:click={() => (isShowChangeLocation = true)}
on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
tabindex="0"
@ -521,7 +523,7 @@
<p>Add a location</p>
</div>
<div class="focus:outline-none">
<div class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" />
</div>
</div>

3
web/src/lib/components/elements/buttons/circle-icon-button.svelte
View File

@ -11,10 +11,13 @@
export let forceDark = false;
export let hideMobile = false;
export let iconColor = 'currentColor';
export let buttonSize: string | undefined = undefined;
</script>
<button
{title}
style:width={buttonSize ? buttonSize + 'px' : ''}
style:height={buttonSize ? buttonSize + 'px' : ''}
style:background-color={backgroundColor}
style:--immich-icon-button-hover-color={hoverColor}
class:dark:text-immich-dark-fg={!forceDark}