fix: Add Filter/Close button to device pills

victronenergy · Dec 6, 2024 · ed4812b · ed4812b
1 parent 66e65fa
commit ed4812b
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/client/views/dashboard/Dashboard.tsx b/src/client/views/dashboard/Dashboard.tsx
@@ -23,6 +23,7 @@ import { cilRss } from "@coreui/icons"
 import { AppState } from "../../store"
 import { WebSocketStatus } from "../settings/WebsocketStatus"
 import ms from "ms"
+import { TinyFilterActionButton } from "../troubleshooting/Troubleshooting"
 
 function Dashboard() {
   const {
@@ -112,6 +113,7 @@ function Dashboard() {
                             >
                               <CBadge textBgColor="light" textColor="secondary" shape="rounded-pill">
                                 {deviceStats.type} {deviceStats.address}
+                                <TinyFilterActionButton isFilterActive={false} height={16} />
                               </CBadge>
                             </CLink>
                             &nbsp; &nbsp;

diff --git a/src/client/views/troubleshooting/Troubleshooting.tsx b/src/client/views/troubleshooting/Troubleshooting.tsx
@@ -25,8 +25,18 @@ import { WebSocketStatus } from "../settings/WebsocketStatus"
 import ms from "ms"
 import { useEffect, useRef, useState } from "react"
 
-function TinyCloseButton() {
-  return <span className="opacity-50 ps-1">✕</span>
+import CIcon from "@coreui/icons-react"
+import { cilX, cilListFilter } from "@coreui/icons"
+
+export function TinyFilterActionButton(props: { isFilterActive: boolean; size?: "sm" | "custom"; height?: number }) {
+  return (
+    <CIcon
+      icon={props.isFilterActive ? cilX : cilListFilter}
+      size={props.size || "sm"}
+      height={props.height || 12}
+      className="ms-1"
+    />
+  )
 }
 
 function Troubleshooting() {
@@ -93,7 +103,7 @@ function Troubleshooting() {
                   className="text-decoration-none"
                 >
                   <CBadge color="primary" shape="rounded-pill" size="sm">
-                    {labelFilter} <TinyCloseButton />
+                    {labelFilter} <TinyFilterActionButton isFilterActive={labelFilter !== undefined} />
                   </CBadge>
                 </CLink>
               )}
@@ -175,7 +185,7 @@ function LogList(props: LogListProps) {
                     >
                       <CBadge textBgColor="light" textColor="secondary" shape="rounded-pill" size="sm">
                         {entry.label}
-                        {props.labelFilter && <TinyCloseButton />}
+                        {<TinyFilterActionButton isFilterActive={props.labelFilter !== undefined} />}
                       </CBadge>
                     </CLink>
                   </CTableDataCell>