Commit 4b67547e authored by Alain Takoudjou's avatar Alain Takoudjou

Move User menu to Settings sidebar

parent 96288a11
......@@ -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;
}
......
......@@ -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>
......
......@@ -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');
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment