mirror of
https://github.com/jech/galene.git
synced 2024-11-26 10:35:59 +01:00
Move User menu to Settings sidebar
This commit is contained in:
Alain Takoudjou
Juliusz Chroboczek
parent
3a86157f15
commit
63b460d20c
3 changed files with 89 additions and 65 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -665,7 +727,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();
|
||||
|
|
@ -1397,18 +1389,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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2022,10 +2010,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() {
|
||||
|
|
@ -2052,11 +2037,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();
|
||||
|
|
@ -2075,10 +2055,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);
|
||||
|
|
@ -2102,20 +2078,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();
|
||||
|
|
@ -2152,7 +2114,6 @@ function start() {
|
|||
|
||||
setMediaChoices(false).then(e => reflectSettings());
|
||||
|
||||
document.getElementById("user").classList.add('invisible');
|
||||
document.getElementById("login-container").classList.remove('invisible');
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue