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

immich-app · May 4, 2024 · 48b490f · 48b490f
1 parent 5b87abb
commit 48b490f
Show file tree

Hide file tree

Showing 18 changed files with 166 additions and 177 deletions.
diff --git a/web/src/lib/components/admin-page/jobs/job-tile.svelte b/web/src/lib/components/admin-page/jobs/job-tile.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import Badge from '$lib/components/elements/badge.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { JobCommand, type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
@@ -16,6 +15,7 @@
   import { createEventDispatcher } from 'svelte';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let title: string;
   export let subtitle: string | undefined;
@@ -56,16 +56,19 @@
         <div class="flex gap-2">
           {#if jobCounts.failed > 0}
             <Badge color="primary">
-              <span class="text-sm">
-                {jobCounts.failed.toLocaleString($locale)} failed
-              </span>
-              <Button
-                size="tiny"
-                shadow={false}
-                on:click={() => dispatch('command', { command: JobCommand.ClearFailed, force: false })}
-              >
-                <Icon path={mdiClose} size="18" />
-              </Button>
+              <div class="flex flex-row gap-1">
+                <span class="text-sm">
+                  {jobCounts.failed.toLocaleString($locale)} failed
+                </span>
+                <CircleIconButton
+                  color="primary"
+                  icon={mdiClose}
+                  title="Clear message"
+                  size="12"
+                  padding="1"
+                  on:click={() => dispatch('command', { command: JobCommand.ClearFailed, force: false })}
+                />
+              </div>
             </Badge>
           {/if}
           {#if jobCounts.delayed > 0}

diff --git a/web/src/lib/components/album-page/album-card.svelte b/web/src/lib/components/album-page/album-card.svelte
@@ -33,7 +33,7 @@
       data-testid="context-button-parent"
     >
       <CircleIconButton
-        color="light"
+        color="opaque"
         title="Show album options"
         icon={mdiDotsVertical}
         size="20"

diff --git a/web/src/lib/components/asset-viewer/activity-status.svelte b/web/src/lib/components/asset-viewer/activity-status.svelte
@@ -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>

diff --git a/web/src/lib/components/asset-viewer/activity-viewer.svelte b/web/src/lib/components/asset-viewer/activity-viewer.svelte
@@ -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>

diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -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">

diff --git a/web/src/lib/components/elements/search-bar.svelte b/web/src/lib/components/elements/search-bar.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
   import { mdiClose, mdiMagnify } from '@mdi/js';
-  import Icon from './icon.svelte';
   import { createEventDispatcher } from 'svelte';
   import type { SearchOptions } from '$lib/utils/dipatch';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let name: string;
   export let roundedBottom = true;
   export let showLoadingSpinner: boolean;
   export let placeholder: string;
 
+  let inputRef: HTMLElement;
+
   const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
 
   const resetSearch = () => {
     name = '';
     dispatch('reset');
+    inputRef?.focus();
   };
 
   const handleSearch = (event: KeyboardEvent) => {
@@ -29,16 +32,19 @@
     ? 'rounded-2xl'
     : 'rounded-t-lg'} bg-gray-200 p-2 dark:bg-immich-dark-gray gap-2 place-items-center h-full"
 >
-  <button type="button" on:click={() => dispatch('search', { force: true })}>
-    <div class="w-fit">
-      <Icon path={mdiMagnify} size="24" />
-    </div>
-  </button>
+  <CircleIconButton
+    icon={mdiMagnify}
+    title="Search"
+    size="16"
+    padding="2"
+    on:click={() => dispatch('search', { force: true })}
+  />
   <input
     class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
     type="text"
     {placeholder}
     bind:value={name}
+    bind:this={inputRef}
     on:keydown={handleSearch}
     on:input={() => dispatch('search', { force: false })}
   />
@@ -48,8 +54,6 @@
     </div>
   {/if}
   {#if name}
-    <button on:click={resetSearch}>
-      <Icon path={mdiClose} />
-    </button>
+    <CircleIconButton icon={mdiClose} title="Clear value" size="16" padding="2" on:click={resetSearch} />
   {/if}
 </div>
diff --git a/web/src/lib/components/faces-page/assign-face-side-panel.svelte b/web/src/lib/components/faces-page/assign-face-side-panel.svelte
@@ -9,9 +9,9 @@
   import { linear } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
-  import Icon from '../elements/icon.svelte';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
 
   export let peopleWithFaces: AssetFaceResponseDto[];
   export let allPeople: PersonResponseDto[];
@@ -119,53 +119,27 @@
   <div class="flex place-items-center justify-between gap-2">
     {#if !searchFaces}
       <div class="flex items-center gap-2">
-        <button
-          class="flex place-content-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-          on:click={handleBackButton}
-        >
-          <div>
-            <Icon path={mdiArrowLeftThin} size="24" />
-          </div>
-        </button>
+        <CircleIconButton icon={mdiArrowLeftThin} title="Back" on:click={handleBackButton} />
         <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Select face</p>
       </div>
       <div class="flex justify-end 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"
-          title="Search existing person"
+        <CircleIconButton
+          icon={mdiMagnify}
+          title="Search for existing person"
           on:click={() => {
             searchFaces = true;
           }}
-        >
-          <div>
-            <Icon path={mdiMagnify} size="24" />
-          </div>
-        </button>
+        />
         {#if !isShowLoadingNewPerson}
-          <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={handleCreatePerson}
-            title="Create new person"
-          >
-            <div>
-              <Icon path={mdiPlus} size="24" />
-            </div>
-          </button>
+          <CircleIconButton icon={mdiPlus} title="Create new person" on:click={handleCreatePerson} />
         {:else}
           <div class="flex place-content-center place-items-center">
             <LoadingSpinner />
           </div>
         {/if}
       </div>
     {:else}
-      <button
-        class="flex place-content-center rounded-full p-3 transition-colors hover:bg-gray-200 dark:text-immich-dark-fg dark:hover:bg-gray-900"
-        on:click={handleBackButton}
-      >
-        <div>
-          <Icon path={mdiArrowLeftThin} size="24" />
-        </div>
-      </button>
+      <CircleIconButton icon={mdiArrowLeftThin} title="Back" on:click={handleBackButton} />
       <div class="w-full flex">
         <SearchPeople
           type="input"
@@ -179,14 +153,7 @@
           </div>
         {/if}
       </div>
-      <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={() => (searchFaces = false)}
-      >
-        <div>
-          <Icon path={mdiClose} size="24" />
-        </div>
-      </button>
+      <CircleIconButton icon={mdiClose} title="Cancel search" on:click={() => (searchFaces = false)} />
     {/if}
   </div>
   <div class="px-4 py-4 text-sm">

diff --git a/web/src/lib/components/faces-page/people-card.svelte b/web/src/lib/components/faces-page/people-card.svelte
@@ -74,7 +74,7 @@
 
   <div class="absolute right-2 top-2" class:hidden={!showVerticalDots}>
     <CircleIconButton
-      color="light"
+      color="opaque"
       icon={mdiDotsVertical}
       title="Show person options"
       size="20"