fred.boniface/OwlBoard
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Frontend: Add saved popup to settings

Browse Source 
Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-25 14:12:30 +00:00
parent daadc1b6bb
commit 6e7248dafb
5 changed files with 90 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/nav/save-59.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

40
static/images/nav/save.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

19
static/js/settings.js
View File

@ -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";
}

9
static/settings.html
View File

@ -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>

22
static/styles/settings.css
View File

@ -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;
}