Fix userlist saving, revert options panel

5 files changed, 22 insertions, 48 deletions

diff --git a/res/client.js b/res/client.js
index f7cf45c..0ab736c 100644
--- a/res/client.js
+++ b/res/client.js
@@ -472,17 +472,16 @@ client_Buttons.init = function(main) {
 	var userlistToggle = window.document.querySelector("#userlisttoggle");
 	userlistToggle.onclick = function(e) {
 		var icon = userlistToggle.firstElementChild;
-		var isHidden = userlistToggle.classList.toggle("chevron-right");
-		userlistToggle.classList.toggle("chevron-down");
+		var isHidden = icon.getAttribute("name") == "chevron-forward";
 		var style = window.document.querySelector("#userlist").style;
 		if(isHidden) {
-			style.display = "none";
-			icon.setAttribute("name","chevron-forward");
-		} else {
 			style.display = "block";
 			icon.setAttribute("name","chevron-down");
+		} else {
+			style.display = "none";
+			icon.setAttribute("name","chevron-forward");
 		}
-		client_Buttons.settings.isUserListHidden = isHidden;
+		client_Buttons.settings.isUserListHidden = !isHidden;
 		client_Settings.write(client_Buttons.settings);
 	};
 	window.document.querySelector("#usercount").onclick = userlistToggle.onclick;
@@ -553,11 +552,7 @@ client_Buttons.init = function(main) {
 	};
 	var showOptions = window.document.querySelector("#showoptions");
 	showOptions.onclick = function(e) {
-		var isActive = client_Buttons.toggleGroup(showOptions);
-		window.document.querySelector("#messagebuffer").style.display = isActive ? "none" : "block";
-		window.document.querySelector("#chatbox").style.display = isActive ? "none" : "flex";
-		window.document.querySelector("#userlisttoggle").style.display = isActive ? "none" : "inline-flex";
-		return window.document.querySelector("#optionsTitle").style.display = isActive ? "inline-flex" : "none";
+		return client_Buttons.toggleGroup(showOptions);
 	};
 	window.document.querySelector("#exitBtn").onclick = function(e) {
 		if((main.personal.group & 1) != 0) {
@@ -1404,7 +1399,6 @@ client_Main.prototype = {
 		window.document.querySelector("#guestpassword").style.display = "none";
 		window.document.querySelector("#chatbox").style.display = "none";
 		window.document.querySelector("#exitBtn").textContent = Lang.get("login");
-		window.dispatchEvent(new Event("resize"));
 	}
 	,hideGuestLoginPanel: function() {
 		window.document.querySelector("#guestlogin").style.display = "none";
@@ -1412,9 +1406,8 @@ client_Main.prototype = {
 		window.document.querySelector("#chatbox").style.display = "flex";
 		window.document.querySelector("#exitBtn").textContent = Lang.get("exit");
 		if((this.personal.group & 4) != 0) {
-			window.document.querySelector("#clearchatbtn").style.display = "inline-block";
+			window.document.querySelector("#adminMenu").style.display = "block";
 		}
-		window.dispatchEvent(new Event("resize"));
 	}
 	,showGuestPasswordPanel: function() {
 		window.document.querySelector("#guestlogin").style.display = "none";
diff --git a/res/css/des.css b/res/css/des.css
index 73a937f..69cf6e8 100644
--- a/res/css/des.css
+++ b/res/css/des.css
@@ -487,19 +487,15 @@ footer#footer {
 
 /* Options */
 
-#optionsTitle {
-  display: inline-flex;
-  line-height: 1;
-  padding: .5rem;
-  align-items: center;
-  text-align: center;
-  margin-left: .5rem;
-}
-
 #optionsPanel {
   z-index: 1;
   background-color: var(--background-chat);
   overflow-y: scroll;
+  position: absolute;
+  top: 3rem;
+  left: 1rem;
+  bottom: 1rem;
+  right: 1rem;
   scrollbar-color: var(--border) var(--background-chat);
   scrollbar-width: thin;
 }
diff --git a/res/index.html b/res/index.html
index 61944a7..074c283 100644
--- a/res/index.html
+++ b/res/index.html
@@ -99,9 +99,8 @@
   <aside id="chat">
     <!-- Chat controls -->
     <div class="controls">
-      <div id="optionsTitle" style="display: none;">${settings}</div>
       <button id="userlisttoggle" title="${toggleUserList}">
-        <ion-icon  name="chevron-forward"></ion-icon>
+        <ion-icon name="chevron-down"></ion-icon>
         <span id="usercount">${connection}...</span>
       </button>
       <span>
@@ -114,7 +113,6 @@
     <div id="userlist"></div>
     <!-- Settings list -->
     <ul id="optionsPanel" class="collapse" aria-expanded="false">
-      <!-- <div><h3>${settings}</h3></div> -->
       <div>
         <h4>${account}</h4>
         <li><button id="exitBtn">${login}</button></li>
@@ -129,13 +127,10 @@
         <li><button id="synchThresholdBtn"><span>${synchThreshold}</span></button></li>
         <li><button id="removeVideoBtn"><span>${removeVideo}</span></button></li>
       </div>
-      <div>
+      <div id="adminMenu" style="display: none;">
         <h4>${chat}</h4>
-        <li><button id="clearchatbtn" style="display: none;"><span>${clearChat}</span></button></li>
+        <li><button id="clearchatbtn"><span>${clearChat}</span></button></li>
       </div>
-      <!-- <li><a href="#">${exportSettings}</a></li>
-      <li><a href="#">${importSettings}</a></li>
-      <li class="divider"></li> -->
     </ul>
     <!-- Messages -->
     <div id="messagebuffer" data-simplebar></div>
diff --git a/src/client/Buttons.hx b/src/client/Buttons.hx
index 7d673b7..1377b09 100644
--- a/src/client/Buttons.hx
+++ b/src/client/Buttons.hx
@@ -75,18 +75,16 @@ class Buttons {
 		final userlistToggle = ge("#userlisttoggle");
 		userlistToggle.onclick = e -> {
 			final icon = userlistToggle.firstElementChild;
-			final isHidden = userlistToggle.classList.toggle("chevron-right");
-			userlistToggle.classList.toggle("chevron-down");
+			final isHidden = icon.getAttribute("name") == "chevron-forward";
 			final style = ge("#userlist").style;
 			if (isHidden) {
-				style.display = "none";
-				icon.setAttribute("name", "chevron-forward");
-			}
-			else {
 				style.display = "block";
 				icon.setAttribute("name", "chevron-down");
+			} else {
+				style.display = "none";
+				icon.setAttribute("name", "chevron-forward");
 			}
-			settings.isUserListHidden = isHidden;
+			settings.isUserListHidden = !isHidden;
 			Settings.write(settings);
 		}
 		ge("#usercount").onclick = userlistToggle.onclick;
@@ -155,13 +153,7 @@ class Buttons {
 		}
 
 		final showOptions = ge("#showoptions");
-		showOptions.onclick = e -> {
-			final isActive = toggleGroup(showOptions);
-			ge("#messagebuffer").style.display = isActive ? "none" : "block";
-			ge("#chatbox").style.display = isActive ? "none" : "flex";
-			ge("#userlisttoggle").style.display = isActive ? "none" : "inline-flex";
-			ge("#optionsTitle").style.display = isActive ? "inline-flex" : "none";
-		}
+		showOptions.onclick = e -> toggleGroup(showOptions);
 
 		final exitBtn = ge("#exitBtn");
 		exitBtn.onclick = e -> {
diff --git a/src/client/Main.hx b/src/client/Main.hx
index 730742f..55c6a9a 100644
--- a/src/client/Main.hx
+++ b/src/client/Main.hx
@@ -575,7 +575,6 @@ class Main {
 		ge("#guestpassword").style.display = "none";
 		ge("#chatbox").style.display = "none";
 		ge("#exitBtn").textContent = Lang.get("login");
-		window.dispatchEvent(new Event("resize"));
 	}
 
 	function hideGuestLoginPanel():Void {
@@ -583,8 +582,7 @@ class Main {
 		ge("#guestpassword").style.display = "none";
 		ge("#chatbox").style.display = "flex";
 		ge("#exitBtn").textContent = Lang.get("exit");
-		if (isAdmin()) ge("#clearchatbtn").style.display = "inline-block";
-		window.dispatchEvent(new Event("resize"));
+		if (isAdmin()) ge("#adminMenu").style.display = "block";
 	}
 
 	function showGuestPasswordPanel():Void {