Fix the highlighting of buttons

pflooky · Nov 12, 2023 · 48ace3e · 48ace3e
1 parent cb017c4
commit 48ace3e
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 16 deletions.
diff --git a/docs/javascripts/tableselect.js b/docs/javascripts/tableselect.js
@@ -41,18 +41,15 @@ document$.subscribe(function() {
                 // Toggle the visibility of the column
                 column.visible(!isColVisible);
                 // Toggle the highlighting of the button
-                if (el.classList.contains("md-button-column-visible")) {
-                    el.classList.remove("md-button-column-visible");
-                } else {
-                    el.classList.add("md-button-column-visible");
-                }
+                el.classList.toggle("md-button-selected");
+                el.blur();
             });
         });
 
         // Toggle on the visible buttons
         document.querySelectorAll(".md-button.toggle-vis").forEach((el) => {
             if (parseInt(el.getAttribute("data-column")) < 4) {
-                el.classList.add("md-button-column-visible");
+                el.classList.toggle("md-button-selected");
             }
         });
 

diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
@@ -18,6 +18,8 @@
     font-size: 0.8rem;
 }
 
-.md-button-column-visible {
-    background-color: royalblue;
+.md-button-selected, .md-button:focus {
+    background-color: var(--md-accent-fg-color) !important;
+    border-color: white !important;
+    color: var(--md-accent-bg-color) !important;
 }
diff --git a/site/javascripts/tableselect.js b/site/javascripts/tableselect.js
@@ -41,18 +41,15 @@ document$.subscribe(function() {
                 // Toggle the visibility of the column
                 column.visible(!isColVisible);
                 // Toggle the highlighting of the button
-                if (el.classList.contains("md-button-column-visible")) {
-                    el.classList.remove("md-button-column-visible");
-                } else {
-                    el.classList.add("md-button-column-visible");
-                }
+                el.classList.toggle("md-button-selected");
+                el.blur();
             });
         });
 
         // Toggle on the visible buttons
         document.querySelectorAll(".md-button.toggle-vis").forEach((el) => {
             if (parseInt(el.getAttribute("data-column")) < 4) {
-                el.classList.add("md-button-column-visible");
+                el.classList.toggle("md-button-selected");
             }
         });
 

diff --git a/site/sitemap.xml.gz b/site/sitemap.xml.gz
diff --git a/site/stylesheets/extra.css b/site/stylesheets/extra.css
@@ -18,6 +18,8 @@
     font-size: 0.8rem;
 }
 
-.md-button-column-visible {
-    background-color: royalblue;
+.md-button-selected, .md-button:focus {
+    background-color: var(--md-accent-fg-color) !important;
+    border-color: white !important;
+    color: var(--md-accent-bg-color) !important;
 }