Move User menu to Settings sidebar

static/sfu.css

@@ -48,6 +48,68 @@
     background-color: #eee;
 }
 
+.profile {
+    width: 230px;
+}
+
+.profile-logo {
+    float: left;
+    width: 50px;
+    height: 50px;
+    background: #b681c3;
+    border-radius: 25px;
+    text-align: center;
+    vertical-align: middle;
+    font-size: 1.4em;
+    padding: 7px;
+    color: #f9f9f9;
+}
+
+.profile-info {
+    float: left;
+    margin-left: 10px;
+    margin-top: 8px;
+    color: #616263;
+    width: 120px;
+}
+
+.user-logout {
+    float: right;
+    text-align: center;
+}
+
+.logout-icon {
+    display: block;
+    font-size: 1.5em;
+}
+
+.logout-text {
+    font-size: .7em;
+}
+
+.profile-info span {
+    display: block;
+    line-height: 1.2;
+    text-transform: capitalize;
+}
+
+#permspan {
+    font-size: .9em;
+    color: #108e07;
+    font-style: italic;
+}
+
+.sidenav .user-logout a {
+    font-size: 1em;
+    padding: 7px 0 0;
+    color: #e4157e;
+    cursor: pointer;
+    line-height: .7;
+}
+
+.sidenav .user-logout a:hover {
+    color: #ab0659;
+}
 
 .navbar, .navbar .container, .navbar .container-fluid, .navbar .container-lg, .navbar .container-md, .navbar .container-sm, .navbar .container-xl {
     display: -webkit-box;
@@ -216,12 +278,12 @@
     font-weight: 500;
 }
 
-.users-header:after, .users-header:before {
+.users-header:after, .profile-user:after, .users-header:before {
     display: table;
     content: " ";
 }
 
-.users-header:after {
+.users-header:after, .profile-user:after {
     clear: both;
 }
 
@@ -685,7 +747,7 @@ h1 {
     border-radius: 4px;
 }
 
-#disconnectbutton, #connectbutton {
+#connectbutton {
     margin-left: 80px;
     margin-top: 15px;
 }

static/sfu.html

@@ -71,22 +71,6 @@
                     <label>Stop Video</label>
                   </div>
                 </li>
-                <li>
-                  <div class="nav-button nav-link invisible" id="user">
-                    <span><i class="fas fa-user dropbtn" aria-hidden="true"></i></span>
-                    <label>User</label>
-                  </div>
-                  <div id="userDropdown" class="dropdown-content">
-                    <div id="statdiv">
-                      <span id="statspan"></span>
-                      <span id="userspan"></span>
-                      <div class="clear"></div>
-                      <input id="disconnectbutton" class="btn btn-warn"
-                             type="submit" value="Disconnect"/>
-                      <span id="errspan"></span>
-                    </div>
-                </div>
-                </li>
                 <li>
                   <div class="nav-button nav-link" id="openside">
                     <span><i class="fas fa-cog" aria-hidden="true"></i></span>
@@ -156,6 +140,23 @@
         <a class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></a>
       </div>
       <div class="sidenav-content" id="optionsdiv">
+        <div id="profile" class="profile invisible">
+          <div class="profile-user">
+            <div class="profile-logo">
+              <span><i class="fas fa-user" aria-hidden="true"></i></span>
+            </div>
+            <div class="profile-info">
+              <span id="userspan"></span>
+              <span id="permspan"></span>
+            </div>
+            <div class="user-logout">
+              <a id="disconnectbutton">
+                <span class="logout-icon"><i class="fas fa-sign-out-alt"></i></span>
+                <span class="logout-text">Logout</span>
+              </a>
+            </div>
+          </div>
+        </div>
         <div id="mediaoptions" class="invisible">
           <fieldset>
             <legend>Media Options</legend>

static/sfu.js

@@ -253,15 +253,11 @@ function closeVideoControls() {
   * @param{boolean} connected
   */
 function setConnected(connected) {
-    let statspan = document.getElementById('statspan');
-    let userbox = document.getElementById('user');
+    let userbox = document.getElementById('profile');
     let connectionbox = document.getElementById('login-container');
     if(connected) {
         resetUsers();
         clearChat();
-        statspan.textContent = 'Connected';
-        statspan.classList.remove('disconnected');
-        statspan.classList.add('connected');
         userbox.classList.remove('invisible');
         connectionbox.classList.add('invisible');
         displayUsername();
@@ -273,12 +269,8 @@ function setConnected(connected) {
         getInputElement('password').value =
             userpass ? userpass.password : '';
         getInputElement('presentoff').checked = true;
-        statspan.textContent = 'Disconnected';
-        statspan.classList.remove('connected');
-        statspan.classList.add('disconnected');
         userbox.classList.add('invisible');
         connectionbox.classList.remove('invisible');
-        clearUsername();
         displayError("Disconnected!", "error");
         hideVideo();
         closeVideoControls();
@@ -1484,18 +1476,14 @@ function displayUsername() {
     let userpass = getUserPass();
     let text = '';
     if(userpass && userpass.username)
-        text = 'as ' + userpass.username;
+        document.getElementById('userspan').textContent = userpass.username;
     if(serverConnection.permissions.op && serverConnection.permissions.present)
-        text = text + ' (op, presenter)';
+        text = '(op, presenter)';
     else if(serverConnection.permissions.op)
-        text = text + ' (op)';
+        text = 'operator';
     else if(serverConnection.permissions.present)
-        text = text + ' (presenter)';
-    document.getElementById('userspan').textContent = text;
-}
-
-function clearUsername() {
-    document.getElementById('userspan').textContent = '';
+        text = 'presenter';
+    document.getElementById('permspan').textContent = text;
 }
 
 /**
@@ -2109,10 +2097,7 @@ document.getElementById('userform').onsubmit = async function(e) {
 
 document.getElementById('disconnectbutton').onclick = function(e) {
     serverConnection.close();
-    let user_box = document.getElementById('userDropdown');
-    if (user_box.classList.contains("show")) {
-      user_box.classList.toggle("show");
-    }
+    closeNav();
 };
 
 function openNav() {
@@ -2139,11 +2124,6 @@ document.getElementById('openside').onclick = function(e) {
       }
 };
 
-document.getElementById('user').onclick = function(e) {
-    e.preventDefault();
-    document.getElementById("userDropdown").classList.toggle("show");
-};
-
 
 document.getElementById('clodeside').onclick = function(e) {
     e.preventDefault();
@@ -2162,10 +2142,6 @@ document.getElementById('collapse-video').onclick = function(e) {
       this.style.display = "";
     }
     if (width <= 768) {
-      let user_box = document.getElementById('userDropdown');
-      if (user_box.classList.contains("show")) {
-        return;
-      }
       // fixed div for small screen
       this.style.display = "";
       hideVideo(true);
@@ -2189,20 +2165,6 @@ document.getElementById('close-chat').onclick = function(e) {
   document.getElementById('collapse-video').style.display = "block";
 };
 
-window.onclick = function(event) {
-  let user_box = document.getElementById('userDropdown');
-  if (user_box.classList.contains("show") && event.target.id != "user") {
-      let parent = event.target;
-      while (parent.id !== "main" && parent.id !== "userDropdown" &&
-              parent.id !== "user" && parent.tagName !== "body") {
-          parent = parent.parentNode;
-      }
-      if (parent.id !="userDropdown" && parent.id !== "user") {
-          user_box.classList.toggle("show");
-      }
-  }
-};
-
 async function serverConnect() {
     if(serverConnection && serverConnection.socket)
         serverConnection.close();
@@ -2239,7 +2201,6 @@ function start() {
 
     setMediaChoices(false).then(e => reflectSettings());
 
-    document.getElementById("user").classList.add('invisible');
     document.getElementById("login-container").classList.remove('invisible');
 }