dogeystamp/encryptme
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styled tabs properly

Browse Source
This commit is contained in:
dogeystamp 2023-01-21 16:22:40 -05:00
parent 937a802f54
commit 8b64db64d9
Signed by: dogeystamp
GPG Key ID: 7225FE3592EFFA38
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
scripts/interface.js
View File

@ -393,6 +393,7 @@ class TabList extends InterfaceElement {
if (tag === undefined) { if (tag === undefined) {
this.handle = document.createElement("div"); this.handle = document.createElement("div");
this.handle.classList.add("tabList");
} else { } else {
this.handle = tag; this.handle = tag;
} }
@ -400,15 +401,18 @@ class TabList extends InterfaceElement {
par.appendChild(this.fragment); par.appendChild(this.fragment);
} }
forms = [] tabs = []
#activeForm; #activeForm;
set activeForm(x) { set activeForm(x) {
this.#activeForm = x; this.#activeForm = x;
for (const form of this.forms) { for (const tab of this.tabs) {
if (form !== x) { if (tab.form !== x) {
form.hidden = true; tab.form.hidden = true;
tab.handle.classList.remove("active");
} else { } else {
form.hidden = false; tab.form.hidden = false;
tab.handle.classList.add("active");
} }
} }
} }
@ -420,12 +424,13 @@ class TabList extends InterfaceElement {
if (params.par === undefined) params.par = this.par; if (params.par === undefined) params.par = this.par;
let form = new Form(params); let form = new Form(params);
this.forms.push(form);
let tab = new Tab({ let tab = new Tab({
label: params.label, label: params.label,
form: form form: form
}); });
this.tabs.push(tab);
tab.handle.addEventListener('click', function() { tab.handle.addEventListener('click', function() {
this.activeForm = form; this.activeForm = form;
}.bind(this)); }.bind(this));

18
style.css
View File

@ -109,6 +109,24 @@ button:active {
opacity: 50%; opacity: 50%;
} }
.tabList {
border-radius: 5px;
}
.tabList button {
display: inline;
width: 6em;
margin: 0;
border: 1px solid #44444444;
margin-right: 0.2em;
}
.tabList button:hover {
background: #aaaaaa44;
}
.tabList button.active {
border: none;
background: #0077ff44;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
body { body {
color: #c9d1d9; color: #c9d1d9;