UI/UX improvements for filter comparison

linfindel · Oct 31, 2023 · 88a332e · 88a332e
1 parent 9eda2b1
commit 88a332e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/filters.html b/filters.html
@@ -28,7 +28,7 @@ <h1>Image Viewer</h1>
                 <span id="export-text">Copy link to filtered image</span>
             </button>
 
-            <button onclick="compare()" id="original-button">
+            <button onclick="compare()" id="original-button" inert class="button-subtle">
                 <span class="material-symbols-rounded">compare</span>
                 <span id="original-text">Show original image</span>
             </button>

diff --git a/filters.js b/filters.js
@@ -29,7 +29,6 @@ generateMaterialDesignPalette(url, (error, palette) => {
         document.getElementById("hue-rotate").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("invert").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("opacity").style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        document.getElementById("original-button").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("saturate").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         document.getElementById("sepia").style.backgroundColor = generateRGBA(palette.accent, 0.25);
 
@@ -105,14 +104,6 @@ generateMaterialDesignPalette(url, (error, palette) => {
             document.getElementById("opacity").style.backgroundColor = generateRGBA(palette.accent, 0.25);
         })
 
-        document.getElementById("original-button").addEventListener("mouseover", () => {
-            document.getElementById("original-button").style.backgroundColor = generateRGBA(palette.accent, 0.5);
-        })
-
-        document.getElementById("original-button").addEventListener("mouseout", () => {
-            document.getElementById("original-button").style.backgroundColor = generateRGBA(palette.accent, 0.25);
-        })
-
         document.getElementById("saturate").addEventListener("focusin", () => {
             document.getElementById("saturate").style.backgroundColor = generateRGBA(palette.accent, 0.5);
         })
@@ -152,6 +143,8 @@ function generateMaterialDesignPalette(imageURL, callback) {
                 primaryLight: swatches.LightVibrant.getHex(),
                 primary: swatches.Muted.getHex(),
             };
+
+            localStorage.setItem("accent", palette.accent);
 
             // Execute the callback function with the generated palette
             callback(null, palette);
@@ -327,6 +320,19 @@ function addFilter(filter) {
         }
     }
 
+    document.getElementById("original-button").removeAttribute("inert");
+    document.getElementById("original-button").removeAttribute("class");
+
+    document.getElementById("original-button").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.25);
+
+    document.getElementById("original-button").addEventListener("mouseover", () => {
+        document.getElementById("original-button").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.5);
+    })
+
+    document.getElementById("original-button").addEventListener("mouseout", () => {
+        document.getElementById("original-button").style.backgroundColor = generateRGBA(localStorage.getItem("accent"), 0.25);
+    })
+
     filters = img.style.filter;
     document.getElementById("original-text").innerText = "Show original image";
 }