Add x-button to table filter input (#125)

stephanmahieu · Oct 25, 2023 · d0853e6 · d0853e6
1 parent 2aa68e7
commit d0853e6
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 1 deletion.
diff --git a/popup/tableview/popup-common.js b/popup/tableview/popup-common.js
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2018. Stephan Mahieu
+ * Copyright (c) 2023. Stephan Mahieu
  *
  * This file is subject to the terms and conditions defined in
  * file 'LICENSE', which is part of this source code package.
@@ -178,6 +178,23 @@ function adjustSearchBox() {
     if (inpSearch) {
         const placeholderText = inpSearch.getAttribute("placeholder");
         inpSearch.setAttribute("size", placeholderText.length + 2);
+
+        addSearchBoxEraseButton();
+    }
+}
+
+function addSearchBoxEraseButton() {
+    // add erase icon searchbox
+    if (!$("#fhcTable_filter_erase").length) {
+        const inpSearchLbl = $($("#fhcTable_filter label")[0]);
+        if (inpSearchLbl.length) {
+            inpSearchLbl.append('<div id="fhcTable_filter_erase">X</div>');
+            $("#fhcTable_filter_erase").on('click', function(event) {
+                // Event listener for erasing the searchbox
+                $($("#fhcTable_filter input")[0]).val('').trigger('cut');
+                return false;
+            });
+        }
     }
 }
 

diff --git a/popup/tableview/theme/table-theme-blue.css b/popup/tableview/theme/table-theme-blue.css
@@ -4,6 +4,9 @@
 #fhcTable_filter input[type=search] {
     background: url("search-white.png") no-repeat 3px 3px var(--field-bg-color);
 }
+#fhcTable_filter_erase {
+    color: #b6b6b6;
+}
 ::-webkit-input-placeholder {
     color: #b6b6b6;
 }

diff --git a/popup/tableview/theme/table-theme-dark.css b/popup/tableview/theme/table-theme-dark.css
@@ -4,6 +4,9 @@
 #fhcTable_filter input[type=search] {
     background: url("search-white.png") no-repeat 3px 3px var(--field-bg-color);
 }
+#fhcTable_filter_erase {
+    color: #b6b6b6;
+}
 ::-webkit-input-placeholder {
     color: #b6b6b6;
 }

diff --git a/popup/tableview/theme/table-theme-orange.css b/popup/tableview/theme/table-theme-orange.css
@@ -4,6 +4,9 @@
 #fhcTable_filter input[type=search] {
     background: url("search-white.png") no-repeat 3px 3px var(--field-bg-color);
 }
+#fhcTable_filter_erase {
+    color: #b6b6b6;
+}
 ::-webkit-input-placeholder {
     color: #b6b6b6;
 }

diff --git a/popup/tableview/theme/table-theme.css b/popup/tableview/theme/table-theme.css
@@ -21,9 +21,19 @@ table.dataTable.compact thead td {
     transition: min-width 0.4s ease-in-out;
     background: url("search-dark.png") no-repeat 3px 3px;
     padding-left: 22px;
+    padding-right: 14px;
     padding-top: 1px !important;
     padding-bottom: 2px !important;
 }
+#fhcTable_filter_erase {
+    display: inline-block;
+    position: relative;
+    left: -14px;
+    font-size: 14px;
+    color: #434343;
+    font-weight: bold;
+}
+
 #fhcTable_length select {
     padding-top: 1px;
     padding-bottom: 2px;