Frontend: Add saved popup to settings

Signed-off-by: Fred Boniface <fred@fjla.uk>

static/images/nav/save.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.0" viewBox="0 0 187.5 187.5" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<g transform="translate(.54506 1.0901)">
+<g transform="translate(11.649 12.217)">
+<rect x="27.357" y="25.341" width="108.4" height="110.2" rx="2.97" ry="2.8871" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="44.497" y="25.703" width="74.653" height="56.282" rx="2.0454" ry="1.4745" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="54.873" y="104.02" width="50.282" height="31.224" rx="1.8157" ry="1.2523" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="54.42" y="104.02" width="38.051" height="31.224" rx="1.8157" ry="1.2523" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="59.661" y="108.85" width="9.9589" height="20.587"/>
+</g>
+</g>
+<metadata>
+<rdf:RDF>
+<cc:Work>
+<dc:format>image/svg+xml</dc:format>
+<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+<cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/>
+<dc:publisher>
+<cc:Agent rdf:about="http://openclipart.org/">
+<dc:title>Openclipart</dc:title>
+</cc:Agent>
+</dc:publisher>
+<dc:title>Floppy disk icon</dc:title>
+<dc:date>2006-12-26T00:00:00</dc:date>
+<dc:description/>
+<dc:source>https://openclipart.org/detail/24502/-by--24502</dc:source>
+<dc:creator>
+<cc:Agent>
+<dc:title>Anonymous</dc:title>
+</cc:Agent>
+</dc:creator>
+</cc:Work>
+<cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
+<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
+<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
+<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
+</cc:License>
+</rdf:RDF>
+</metadata>
+</svg>

static/js/settings.js

@@ -29,10 +29,27 @@ async function setQl(){
     }
     localStorage.setItem("qlOpt", JSON.stringify(qlSet))
     log(`settings.setQl: User settings saved`, "INFO")
-    hideLoading();
+    await hideLoading();
+    await showDone();
+    await delay(600);
+    hideDone();
 }
 
 async function clearQl(){
+    showLoading();
     localStorage.removeItem("qlOpt")
+    log(`settings.setQl: User settings reset to default`, "INFO")
     getQl()
+    await hideLoading();
+    await showDone();
+    await delay(600);
+    hideDone();
+}
+
+async function showDone() {
+    document.getElementById("done").style = "opacity: 1";
+}
+
+async function hideDone() {
+    document.getElementById("done").style = "opacity: 0";
 }

static/settings.html

@@ -23,6 +23,15 @@
       <p>Loading</p>
     </div>
 
+    <div id="done">
+      <!-- Insert white tick SVG Here -->
+      <picture id="save-icon">
+        <source srcset="./images/nav/save.svg" type="image/svg+xml">
+        <img src="./images/nav/save-59.png" alt="">
+      </picture>
+      <p>Done</p>
+    </div>
+
     <div id="top_button" class="hide_micro">
       <button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
     </div>

static/styles/settings.css

@@ -2,3 +2,25 @@
     max-width: 100px;
     height: 20px;
 }
+
+#done {
+    opacity: 0;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: auto;
+    background-color: var(--overlay-color);
+    border-radius: 45px;
+    padding: 20px;
+    padding-bottom: 1px;
+    min-width: 90px;
+    max-width: 90px;
+    transition: opacity 0.25s;
+  }
+
+#done p {
+    padding-top: 0px;
+    font-weight: bolder;
+    overflow-wrap: normal;
+  }