a better search clear button

Abdenasser · Nov 9, 2024 · b56dae8 · b56dae8
1 parent 1b66f37
commit b56dae8
Showing 1 changed file with 46 additions and 3 deletions.
diff --git a/src/lib/components/ToolBar.svelte b/src/lib/components/ToolBar.svelte
@@ -7,7 +7,6 @@
     faPause,
     faChevronDown,
     faChevronRight,
-    faArrowRotateRight,
   } from "@fortawesome/free-solid-svg-icons";
   export let searchTerm: string;
   export let statusFilter: string = "all";
@@ -54,11 +53,16 @@
     <div class="search-box">
       <div class="search-input-wrapper">
         <input
-          type="search"
+          type="text"
           placeholder="Search processes"
           bind:value={searchTerm}
           class="search-input"
         />
+        {#if searchTerm}
+          <button class="btn-clear" on:click={() => (searchTerm = "")}>
+            Clear
+          </button>
+        {/if}
       </div>
     </div>
     <div class="toolbar-group">
@@ -214,7 +218,9 @@
 
   .search-input {
     width: 240px;
-    padding: 6px 12px;
+    height: 28px;
+    padding: 0 12px;
+    padding-right: 70px;
     border: 1px solid var(--surface1);
     border-radius: 6px;
     font-size: 12px;
@@ -223,6 +229,43 @@
     transition: all 0.2s ease;
   }
 
+  .btn-clear {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 4px 8px;
+    font-size: 11px;
+    color: var(--subtext0);
+    background: var(--surface1);
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .btn-clear:hover {
+    background: var(--surface2);
+    color: var(--text);
+  }
+
+  .search-input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    height: 14px;
+    width: 14px;
+    margin-right: 4px;
+    background: var(--overlay0);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
+      no-repeat 50% 50%;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E")
+      no-repeat 50% 50%;
+    cursor: pointer;
+  }
+
+  .search-input::-webkit-search-cancel-button:hover {
+    background: var(--text);
+  }
+
   .search-input:hover {
     background-color: var(--surface1);
   }