Add basic menu selection option

webext/css/options.css

@@ -116,11 +116,64 @@ ul,
   padding: 10px;
 }
 
-#account {
+#accountContainer {
   float: right;
   margin-right: 40px;
 }
 
+#accountMenu {
+  background:none;
+  border:none;
+  margin:0;
+  padding:0;
+  cursor: pointer;
+}
+
+
+
+
+
+#popup{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -100px;
+  margin-left: -150px;
+
+    border: 1px solid #5C5C5C;    
+    height:200px;
+    width:300px;
+    background-color:#CFC;
+    display:none;
+}
+
+#popup h2
+{
+    font-size:1.2em;
+    color:#FFF;
+    background-color:#090;
+    margin:0;
+    padding:10px;   
+    position:relative;
+}
+
+#popup h2>.close
+{
+    border: solid 1px #FFF;
+    padding:2px;
+    position:relative;  
+    left:220px;
+    cursor:pointer;
+}
+
+#popup .content
+{
+    padding:10px;
+}
+
+
+
+
 /* Style the caret/arrow filler */
 .caretfiller::before {
   user-select: none; /* Prevent text selection */

webext/js/options_accounts.js

@@ -127,36 +127,52 @@ SysTrayX.Accounts = {
 
           if (prop === "imap" || prop === "pop3") {
             const typeDiv = document.createElement("div");
+            typeDiv.setAttribute("id", "accountContainer");
 
             const typeInputAccount = document.createElement("input");
             typeInputAccount.setAttribute("type", "checkbox");
             typeInputAccount.setAttribute("id", "account");
             typeInputAccount.setAttribute("name", accounts[prop][i].name);
 
-            typeDiv.innerHTML = typeInputAccount;
+            typeDiv.appendChild(typeInputAccount);
 
             const typeButton = document.createElement("button");
-            typeButton.innerHTML = "☰";
+            typeButton.setAttribute("id", "accountMenu");
+            typeButton.innerHTML = " ☰";
+//            typeButton.onclick = alert("Hallo");
 
-            typeDiv.innerHTML += typeButton;
+            const handleClickEvent = (e) => {
+              e.preventDefault();
 
-            typeLi.appendChild(typeDiv);
+              const divAccountsFolders = document.getElementById("accountsFolders");
+              divAccountsFolders.setAttribute("style", "display: none");
+
+              const divAccountMenuDialog = document.getElementById("accountMenuDialog");
+              divAccountMenuDialog.removeAttribute("style");
+
+              // Do something
+            };
+
+
+            typeButton.onclick = handleClickEvent;
 
             /*
-            const typeMenu = document.createElement("kbd");
+            const typeDivMenu = document.createElement("div");
-            typeMenu.innerHTML="☰"
+            typeDivMenu.setAttribute("id", "popup");
-//            <kbd>&#9776;</kbd>
+            typeDivMenu.innerHTML = "Hallo world!"
-            typeLi.appendChild(typeMenu);
 */
-
 /*
-            const typeInputAccount = document.createElement("input");
+<div id="popup">
-            typeInputAccount.setAttribute("type", "checkbox");
+    <h2>Info <span title="click to close" class="close">X</span></h2>
-            typeInputAccount.setAttribute("id", "account");
+    <div class="content"></div>  
-            typeInputAccount.setAttribute("name", accounts[prop][i].name);
+</div>
-
-            typeLi.appendChild(typeInputAccount);
 */
+
+
+
+            typeDiv.appendChild(typeButton);
+
+            typeLi.appendChild(typeDiv);
           }
 
           //  Create a usable folder tree

webext/options.html

@@ -718,12 +718,18 @@
       <form name="mailform">
         <h3>__MSG_accounts__</h3>
 
-        <div id="accountsTreeHeader">
+        <div id="accountsFolders">
-          <p>__MSG_accounts_folders__</p>
+          <div id="accountsTreeHeader">
-          <p>__MSG_accounts_new__</p>
+            <p>__MSG_accounts_folders__</p>
+            <p>__MSG_accounts_new__</p>
+          </div>
+
+          <ul id="accountsTree"></ul>
         </div>
 
-        <ul id="accountsTree"></ul>
+        <div id="accountMenuDialog" style="display: none">
+          Hello world!
+        </div>
 
         <br />
       </form>