UI improvements

linfindel · Feb 18, 2024 · f6a1366 · f6a1366
1 parent 01cdc39
commit f6a1366
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/filters.html b/filters.html
@@ -23,7 +23,7 @@ <h1>Image Viewer</h1>
         </button>
       </a>
 
-      <button onclick="exportImage()" id="export">
+      <button onclick="exportImage()" id="export" inert class="button-subtle">
         <span id="export-icon" class="material-symbols-rounded">download</span>
         <span id="export-text">Download filtered image</span>
       </button>

diff --git a/filters.js b/filters.js
@@ -17,7 +17,6 @@ generateMaterialDesignPalette(url, (error, palette) => {
   else {
     document.getElementById("navbar").style.backgroundColor = generateRGBA(palette.accent, 0.25);
     document.getElementById("back").style.backgroundColor = generateRGBA(palette.accent, 0.25);
-    document.getElementById("export").style.backgroundColor = generateRGBA(palette.accent, 0.25);
     document.getElementById("filters").style.backgroundColor = generateRGBA(palette.accent, 0.25);
     document.getElementById("blur").style.backgroundColor = generateRGBA(palette.accent, 0.25);
     document.getElementById("brightness").style.backgroundColor = generateRGBA(palette.accent, 0.25);
@@ -37,14 +36,6 @@ generateMaterialDesignPalette(url, (error, palette) => {
       document.getElementById("back").style.backgroundColor = generateRGBA(palette.accent, 0.25);
     })
 
-    document.getElementById("export").addEventListener("mouseover", () => {
-      document.getElementById("export").style.backgroundColor = generateRGBA(palette.accent, 0.5);
-    })
-
-    document.getElementById("export").addEventListener("mouseout", () => {
-      document.getElementById("export").style.backgroundColor = generateRGBA(palette.accent, 0.25);
-    })
-
     document.getElementById("blur").addEventListener("focusin", () => {
       document.getElementById("blur").style.backgroundColor = generateRGBA(palette.accent, 0.5);
     })
@@ -328,6 +319,19 @@ function addFilter(filter) {
     document.getElementById("original-button").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.25);
   })
 
+  document.getElementById("export").removeAttribute("inert");
+  document.getElementById("export").removeAttribute("class");
+
+  document.getElementById("export").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.25);
+
+  document.getElementById("export").addEventListener("mouseover", () => {
+    document.getElementById("export").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.5);
+  })
+
+  document.getElementById("export").addEventListener("mouseout", () => {
+    document.getElementById("export").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.25);
+  })
+
   filters = img.style.filter;
   document.getElementById("original-text").innerText = "Show original image";
 }