beenull/immich
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki 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"> <section class="px-4 py-4 text-sm">
<div class="flex h-10 w-full items-center justify-between"> <div class="flex h-10 w-full items-center justify-between">
<h2>PEOPLE</h2> <h2>PEOPLE</h2>
<div class="flex gap-2"> <div class="flex gap-2 items-center">
{#if people.some((person) => person.isHidden)} {#if people.some((person) => person.isHidden)}
<CircleIconButton <CircleIconButton
title="Show hidden people" title="Show hidden people"
icon={showingHiddenPeople ? mdiEyeOff : mdiEye} icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
padding="1" padding="1"
buttonSize="32"
on:click={() => (showingHiddenPeople = !showingHiddenPeople)} on:click={() => (showingHiddenPeople = !showingHiddenPeople)}
/> />
{/if} {/if}
@ -219,6 +220,7 @@
icon={mdiPencil} icon={mdiPencil}
padding="1" padding="1"
size="20" size="20"
buttonSize="32"
on:click={() => (showEditFaces = true)} on:click={() => (showEditFaces = true)}
/> />
</div> </div>
@ -337,7 +339,7 @@
</div> </div>
{#if isOwner} {#if isOwner}
<button class="focus:outline-none"> <button class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" /> <Icon path={mdiPencil} size="20" />
</button> </button>
{/if} {/if}
@ -349,7 +351,7 @@
<Icon path={mdiCalendar} size="24" /> <Icon path={mdiCalendar} size="24" />
</div> </div>
</div> </div>
<button class="focus:outline-none"> <button class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" /> <Icon path={mdiPencil} size="20" />
</button> </button>
</div> </div>
@ -507,7 +509,7 @@
</div> </div>
{:else if !asset.exifInfo?.city && !asset.isReadOnly && $user && asset.ownerId === $user.id} {:else if !asset.exifInfo?.city && !asset.isReadOnly && $user && asset.ownerId === $user.id}
<div <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:click={() => (isShowChangeLocation = true)}
on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)} on:keydown={(event) => event.key === 'Enter' && (isShowChangeLocation = true)}
tabindex="0" tabindex="0"
@ -521,7 +523,7 @@
<p>Add a location</p> <p>Add a location</p>
</div> </div>
<div class="focus:outline-none"> <div class="focus:outline-none p-1">
<Icon path={mdiPencil} size="20" /> <Icon path={mdiPencil} size="20" />
</div> </div>
</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 forceDark = false;
export let hideMobile = false; export let hideMobile = false;
export let iconColor = 'currentColor'; export let iconColor = 'currentColor';
export let buttonSize: string | undefined = undefined;
</script> </script>
<button <button
{title} {title}
style:width={buttonSize ? buttonSize + 'px' : ''}
style:height={buttonSize ? buttonSize + 'px' : ''}
style:background-color={backgroundColor} style:background-color={backgroundColor}
style:--immich-icon-button-hover-color={hoverColor} style:--immich-icon-button-hover-color={hoverColor}
class:dark:text-immich-dark-fg={!forceDark} class:dark:text-immich-dark-fg={!forceDark}