diff --git a/webext/css/options.css b/webext/css/options.css
index 09a6463..6d90408 100644
--- a/webext/css/options.css
+++ b/webext/css/options.css
@@ -60,16 +60,16 @@ body {
color: dodgerblue;
}
-/* Remove default bullets */
ul,
-#myUL {
+#accountsTree {
list-style-type: none;
}
/* Remove margins and padding from the parent ul */
-#myUL {
+#accountsTree {
+ border-style: solid;
margin: 0;
- padding: 0;
+ padding: 10px;
}
/* Style the caret/arrow */
@@ -100,40 +100,3 @@ ul,
.active {
display: block;
}
-
-/* Style the tree */
-ul.tree li {
- list-style-type: none;
- position: relative;
-}
-
-ul.tree li ul {
- display: none;
-}
-
-ul.tree li.open > ul {
- display: block;
-}
-
-ul.tree li a {
- color: black;
- text-decoration: none;
-}
-
-ul.tree li a:before {
- height: 1em;
- padding: 0 0.1em;
- font-size: 0.8em;
- display: block;
- position: absolute;
- left: -1.3em;
- top: 0.2em;
-}
-
-ul.tree li > a:not(:last-child):before {
- content: "+";
-}
-
-ul.tree li.open > a:not(:last-child):before {
- content: "-";
-}
diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js
index 0096664..c4e2c1f 100644
--- a/webext/js/options_accounts.js
+++ b/webext/js/options_accounts.js
@@ -35,7 +35,9 @@ SysTrayX.Accounts = {
console.debug("SysTrayX accounts name: " + mailAccount[i].name);
console.debug("SysTrayX accounts type: " + mailAccount[i].type);
- accounts[mailAccount[i].type] = [];
+ if (!accounts[mailAccount[i].type]) {
+ accounts[mailAccount[i].type] = [];
+ }
accounts[mailAccount[i].type].push({
id: mailAccount[i].id,
name: mailAccount[i].name
@@ -48,25 +50,54 @@ SysTrayX.Accounts = {
console.debug(prop + ": " + accounts[prop][0].name);
}
- let p = document.getElementsByClassName("account");
- p[0].innerHTML = accounts.imap[0].name;
+ /*
+ * Build tree
+ */
// Get base
- let treeBase = document.getElementsByClassName("accountstree");
+ let treeBase = document.getElementById("accountsTree");
for (let prop in accounts) {
- console.debug("Tree: " + prop + ": " + accounts[prop][0].name);
-
let typeLi = document.createElement("li");
let typeSpan = document.createElement("span");
- typeSpan.setAttribute("class", "caret");
+ if (accounts[prop]) {
+ typeSpan.setAttribute("class", "caret");
+ }
let typeText = document.createTextNode(prop);
typeSpan.appendChild(typeText);
-
typeLi.appendChild(typeSpan);
- treeBase[0].appendChild(typeLi);
+ if (accounts[prop]) {
+ let typeUl = document.createElement("ul");
+ typeUl.setAttribute("class", "nested");
+
+ for (let i = 0; i < accounts[prop].length; ++i) {
+ let typeLi = document.createElement("li");
+ let typeInput = document.createElement("input");
+ typeInput.setAttribute("type", "checkbox");
+ typeInput.setAttribute("name", accounts[prop][i].name);
+ typeInput.setAttribute("value", accounts[prop][i].id);
+ typeLi.appendChild(typeInput);
+ let typeText = document.createTextNode(" " + accounts[prop][i].name);
+ typeLi.appendChild(typeText);
+ typeUl.appendChild(typeLi);
+ }
+ typeLi.appendChild(typeUl);
+ }
+
+ treeBase.appendChild(typeLi);
+ }
+
+ /*
+ * Activate tree
+ */
+ let toggler = document.getElementsByClassName("caret");
+ for (let i = 0; i < toggler.length; i++) {
+ toggler[i].addEventListener("click", function() {
+ this.parentElement.querySelector(".nested").classList.toggle("active");
+ this.classList.toggle("caret-down");
+ });
}
}
};
diff --git a/webext/options.html b/webext/options.html
index b799205..f404ee3 100644
--- a/webext/options.html
+++ b/webext/options.html
@@ -8,6 +8,8 @@
+
+
@@ -35,195 +37,14 @@
@@ -233,11 +54,8 @@
-
-
-