Nemcio/SysTray-X
1
0
Fork 0
mirror of https://github.com/Ximi1970/systray-x.git synced 2026-05-07 12:15:50 +02:00
Code Issues Packages Projects Releases Activity

Add included account tree

Browse Source
This commit is contained in:
Ximi1970
2020-01-09 23:37:33 +01:00
parent 7ccbbe0e6b
commit 5134cf83fa
3 changed files with 48 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
webext/css/options.css
View File

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

49
webext/js/options_accounts.js
View File

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

190
webext/options.html
View File

@@ -8,6 +8,8 @@
<script src="js/styles.js" stylesheet="css/options.css"></script>
<script src="js/i18n.js"></script>
<script src="js/options_accounts.js"></script>
<div class="tab">
<button class="tablinks active" id="Windows">__MSG_tabWindows__</button>
<button class="tablinks" id="Icon">__MSG_tabIcon__</button>
@@ -35,195 +37,14 @@
<form>
<h3>Icon</h3>
<p>Icon options here.</p>
<ul id="myUL">
<li>
<span class="caret">Beverages</span>
<ul class="nested">
<li><span class="box">Water</span></li>
<li><span class="box">Coffee</span></li>
<li>
<span class="caret">Tea</span>
<ul class="nested">
<li>
<input
type="checkbox"
name="blacktea"
value="BlackTea"
/>Black Tea<br />
</li>
<li>
<input
type="checkbox"
name="blacktea"
value="BlackTea"
/>White Tea<br />
</li>
<li>
<span class="caret">Green Tea</span>
<ul class="nested">
<li>Sencha</li>
<li>Gyokuro</li>
<li>Matcha</li>
<li>Pi Lo Chun</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</form>
</div>
<div id="MailContent" class="tabcontent">
<form>
<h3>Mail</h3>
<p>Mail options here.</p>
<h3>Included accounts</h3>
<p class="account">Account</p>
<ul class="accountstree"></ul>
<ul class="tree">
<li>
<a href="#">Part 1</a>
<ul>
<li>
<a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Part 2</a>
<ul>
<li>
<a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Part 3</a>
<ul>
<li>
<a href="#">Item A</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item B</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item C</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item D</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
<li>
<a href="#">Item E</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul id="accountsTree"></ul>
</form>
</div>
@@ -233,11 +54,8 @@
</form>
<script src="js/options_tabbutton.js"></script>
<script src="js/options_treetable.js"></script>
<script src="js/options_treeview.js"></script>
<script src="js/options_accounts.js"></script>
<script src="options.js"></script>
</body>
</html>