From 6e7248dafbf9157f40fa32bfb1f6fb040c7861fe Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 25 Jan 2023 14:12:30 +0000
Subject: [PATCH] Frontend: Add saved popup to settings

Signed-off-by: Fred Boniface <fred@fjla.uk>
---
 static/images/nav/save-59.png | Bin 0 -> 1134 bytes
 static/images/nav/save.svg    |  40 ++++++++++++++++++++++++++++++++++
 static/js/settings.js         |  19 +++++++++++++++-
 static/settings.html          |   9 ++++++++
 static/styles/settings.css    |  24 +++++++++++++++++++-
 5 files changed, 90 insertions(+), 2 deletions(-)
 create mode 100644 static/images/nav/save-59.png
 create mode 100644 static/images/nav/save.svg

diff --git a/static/images/nav/save-59.png b/static/images/nav/save-59.png
new file mode 100644
index 0000000000000000000000000000000000000000..40fd3b770fe15cdec6d71e442bd12cf24d4f549a
GIT binary patch
literal 1134
zcmV-!1d;oRP)<h;3K|Lk000e1NJLTq0027x0024&1^@s64tXIK0004mX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmP!xqvQ>7v;4t7v+$k003rHVM#DionYs1;guFnQ@8G-*jv
zTpR`0f`dPcRR<SmT^(EnLGTB})x}BCMM}IcDYS_3!sC6MchBLy`v9R;Wt!QS05sh)
zGO47P%dd)oSNJfB5aNi+%&gBzQW~E1bx++?cQKyj-S=mO)Pl(XpGcfwb;BawAfDN@
z>YVq9!>lZ;#OK7523?T&k?V@fZ=6dG3p_JyWHa-`VPdh=!%7dcvY`=A6Gv1{r+gvj
zvdVdjvsP`e&OP}Hg9UwMnd`L1k-{RDAVGwJ1}dn+LX38u6cZUbPkQ*r9KS>^g<KUd
zax9<*4YK10|AXJNHH%YmHz}9|`d@7OBMJm|fp*ijzmILZeFFHOfh)c1ueE^LPtu!R
zEph}5Z37qAT}{~oE_Z;Dr@Cy&j^w8$6pO(78GTb87`_Dt*W9^v&T;wxWNB9E8{ps&
zm?%;9y2rZ*dgu0UPiKBV)!=f@X-?BP00006VoOIv06+jt09C^=GU)&S010qNS#tmY
z4c7nw4c7reD4Tcy00MqVL_t(&-tF7JPvT%02k>v-x7bz_0^U+bT^P)HE3lBJHR(Wz
zi^Kf`{sT_B!c+%mTnq^V4s3K`ASSXIhjuVI7B=o=)I~&jZ@427Yfr=<;Q2hsyF73E
z<o)o%+qWby@QFftB&PsK0Em2W+YNvgfL_=I-#F)803xi(vMm19|DNrsv2e~W0IUsh
z@&oLSuIr1%ViAg>1U`vMrGj#~j6$I>6H`|zm7uCB9LEXt^?E&QZEbz&bUHf#z6Zb4
zl5}j_wg`*e-CYrlM#Zee#>R$7CX=E4wrvYZl8%Qy_L&wa!V;FSge5Ft2}@YQ5|*%p
zB`jeHOIX4Zmav3<C#(<xLWr3d{9rJ6J8UYI!qwFk7-NtmY3j{&U8K|LvBxhz2b;}i
z(P%VqdU`q&v%9>!j9f1FHdp{K3<HK?&;mtR!V;FSgeB}7JZB%q_4PIO_V&<fwO&+5
zQ53AMu3}+fVI;3<8rIj>q3inev74Kla9#IRc2u$~<M#G8kWVBMI6prJV{E!u&+}ke
z7LJaNUR1|%9PID!qucF{<PQ%IvAw;G%gal|VzKFB0U#2IARdpy^E~*zKhkGe7M7Nl
zo~)s&DgYoJkB{W%=jUhVH+w&-)hhD&{79}|uaAYL)tIn^B`jeHOW05TB5*%4nM~ln
z+?AD;{}XGPCQQ@(7&9w`_~rZlU9DE*!@cTL(eL-sZntr8aPXpmoSmJ4a~`PEY&O9d
z!^z1BG);TftEcb#cS4AtVb`qvJw))T2NT9=oO2;bQXtP56O6G*YhD2OI>bG8)MXBT
zj=Ib}bD`5i>Ww`a0Qw>Mn+fXO0QfQCy&pe*12ove6hJ*=TL1t607*qoM6N<$f{+#r
AJOBUy

literal 0
HcmV?d00001

diff --git a/static/images/nav/save.svg b/static/images/nav/save.svg
new file mode 100644
index 0000000..d45ea58
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/static/js/settings.js b/static/js/settings.js
index bf484bc..9db69e6 100644
--- a/static/js/settings.js
+++ b/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";
 }
\ No newline at end of file
diff --git a/static/settings.html b/static/settings.html
index 6982828..9dbdece 100644
--- a/static/settings.html
+++ b/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>
diff --git a/static/styles/settings.css b/static/styles/settings.css
index fe3cb01..6f27cff 100644
--- a/static/styles/settings.css
+++ b/static/styles/settings.css
@@ -1,4 +1,26 @@
 .small-lookup-box{
     max-width: 100px;
     height: 20px;
-}
\ No newline at end of file
+}
+
+#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;
+  }
\ No newline at end of file