diff --git a/webext/css/options.css b/webext/css/options.css index eb21a5a..1363874 100644 --- a/webext/css/options.css +++ b/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 */ diff --git a/webext/js/options_accounts.js b/webext/js/options_accounts.js index 6b21ec9..6d120b9 100644 --- a/webext/js/options_accounts.js +++ b/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"); - typeMenu.innerHTML="☰" -// ☰ - typeLi.appendChild(typeMenu); + const typeDivMenu = document.createElement("div"); + typeDivMenu.setAttribute("id", "popup"); + typeDivMenu.innerHTML = "Hallo world!" */ - /* - const typeInputAccount = document.createElement("input"); - typeInputAccount.setAttribute("type", "checkbox"); - typeInputAccount.setAttribute("id", "account"); - typeInputAccount.setAttribute("name", accounts[prop][i].name); - - typeLi.appendChild(typeInputAccount); +