helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): increase usage of CircleIconButton (#9256)

Browse source
This commit is contained in:
Ben 2024-05-04 18:29:50 +00:00 • committed by GitHub
parent 5b87abb021
commit 48b490f5e9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 166 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

1
web/src/lib/components/asset-viewer/activity-status.svelte
View file

@ -19,7 +19,6 @@
class="w-full h-14 flex p-4 text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60"
>
<button class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
<!-- svelte-ignore missing-declaration -->
<div class="items-center justify-center">
<Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
</div>

29
web/src/lib/components/asset-viewer/activity-viewer.svelte
View file

@ -160,12 +160,7 @@
bind:clientHeight={activityHeight}
>
<div class="flex place-items-center 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"
on:click={() => dispatch('close')}
>
<Icon path={mdiClose} size="24" />
</button>
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} title="Close" />
<p class="text-lg text-immich-fg dark:text-immich-dark-fg">Activity</p>
</div>
@ -193,10 +188,13 @@
</a>
{/if}
{#if reaction.user.id === user.id || albumOwnerId === user.id}
<div class="flex items-start w-fit pt-[5px]" title="Delete comment">
<button on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}>
<Icon path={mdiDotsVertical} />
</button>
<div class="flex items-start w-fit pt-[5px]">
<CircleIconButton
icon={mdiDotsVertical}
title="Comment options"
size="16"
on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
/>
</div>
{/if}
<div>
@ -242,10 +240,13 @@
</a>
{/if}
{#if reaction.user.id === user.id || albumOwnerId === user.id}
<div class="flex items-start w-fit" title="Delete like">
<button on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}>
<Icon path={mdiDotsVertical} />
</button>
<div class="flex items-start w-fit">
<CircleIconButton
icon={mdiDotsVertical}
title="Reaction options"
size="16"
on:click={() => (showDeleteReaction[index] ? '' : showOptionsMenu(index))}
/>
</div>
{/if}
<div>

18
web/src/lib/components/asset-viewer/detail-panel.svelte
View file

@ -169,13 +169,7 @@
<section class="relative p-2 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
<div class="flex place-items-center 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"
on:click={() => dispatch('close')}
>
<Icon path={mdiClose} size="24" />
</button>
<CircleIconButton icon={mdiClose} title="Close" on:click={() => dispatch('close')} />
<p class="text-lg text-immich-fg dark:text-immich-dark-fg">Info</p>
</div>
@ -401,9 +395,13 @@
<p class="break-all flex place-items-center gap-2">
{asset.originalFileName}
{#if isOwner}
<button title="Show File Location" on:click={toggleAssetPath} class="-translate-y-[2px]">
<Icon path={mdiInformationOutline} />
</button>
<CircleIconButton
icon={mdiInformationOutline}
title="Show file location"
size="16"
padding="2"
on:click={toggleAssetPath}
/>
{/if}
</p>
<div class="flex gap-2 text-sm">