mirror of
https://github.com/jech/galene.git
synced 2024-12-22 23:35:46 +01:00
add some interface improvement
This commit is contained in:
Alain Takoudjou
parent
382446ebcb
commit
788e43ba7a
3 changed files with 170 additions and 96 deletions
158
static/sfu.css
158
static/sfu.css
|
|
@ -10,7 +10,8 @@
|
|||
}
|
||||
.topnav {
|
||||
padding-left: 0;
|
||||
height: 3.313rem;
|
||||
/*height: 3.313rem;*/
|
||||
height: 4rem;
|
||||
z-index: 1039;
|
||||
}
|
||||
.navbar .form-control, .topnav {
|
||||
|
|
@ -197,7 +198,7 @@
|
|||
|
||||
.full-width {
|
||||
width: calc(100vw - 200px);
|
||||
height: calc(100vh - 53px);
|
||||
height: calc(100vh - 64px);
|
||||
}
|
||||
|
||||
.full-width-active {
|
||||
|
|
@ -209,7 +210,7 @@
|
|||
}
|
||||
|
||||
.users-header {
|
||||
height: 53px;
|
||||
height: 4rem;
|
||||
padding: 10px;
|
||||
background: #610a86;
|
||||
/*border-bottom: 1px solid #e6e6e6;*/
|
||||
|
|
@ -290,20 +291,6 @@ textarea.form-reply {
|
|||
width: inherit;
|
||||
}
|
||||
|
||||
.message-sender {
|
||||
float: right;
|
||||
width: auto !important;
|
||||
background: #dcf8c6;
|
||||
border-radius: 10px 10px 0 10px;
|
||||
padding: 4px 10px 7px !important;
|
||||
font-size: 12px;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
display: inline-block;
|
||||
word-wrap: break-word;
|
||||
margin-left: 20% !important;
|
||||
max-width: 80%;
|
||||
}
|
||||
|
||||
.message {
|
||||
width: auto !important;
|
||||
padding: 4px 10px 7px !important;
|
||||
|
|
@ -317,6 +304,13 @@ textarea.form-reply {
|
|||
max-width: 80%;
|
||||
}
|
||||
|
||||
.message-sender {
|
||||
float: right;
|
||||
background: #ececec;
|
||||
border-radius: 10px 10px 0 10px;
|
||||
margin-left: 20% !important;
|
||||
}
|
||||
|
||||
.message-row:after, .message-row:before {
|
||||
display: table;
|
||||
content: " ";
|
||||
|
|
@ -344,7 +338,7 @@ textarea.form-reply {
|
|||
|
||||
.video-container {
|
||||
/*height: 100%;*/
|
||||
height: calc(100vh - 53px);
|
||||
height: calc(100vh - 64px);
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.61);
|
||||
/* Display only when showing video */
|
||||
|
|
@ -363,6 +357,25 @@ textarea.form-reply {
|
|||
display: block !important;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
height: calc(100vh - 64px);
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
left: 25%;
|
||||
width: 21em;
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.login-box h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.label-fallback {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -390,15 +403,34 @@ textarea.form-reply {
|
|||
text-align: center;
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.nav-cancel {
|
||||
color: #d03e3e
|
||||
.nav-link span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-link label {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 55%;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #c2a4e0;
|
||||
}
|
||||
.nav-link label:hover {
|
||||
color: #c2a4e0;
|
||||
}
|
||||
|
||||
.nav-cancel, .muted, .nav-cancel label, .muted label {
|
||||
color: #d03e3e
|
||||
}
|
||||
|
||||
.nav-cancel:hover, .muted:hover, .nav-cancel label:hover, .muted label:hover {
|
||||
color: #d03e3e
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
cursor: pointer;
|
||||
|
|
@ -485,10 +517,6 @@ h1 {
|
|||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#sharebutton, #unsharebutton {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -523,7 +551,7 @@ h1 {
|
|||
background-size: cover;
|
||||
overflow-y: scroll;
|
||||
border: none;
|
||||
border-right: 1px solid #e6e6e6;
|
||||
border-right: 4px solid #e6e6e6;
|
||||
height: 100% !important;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
|
@ -567,7 +595,7 @@ h1 {
|
|||
|
||||
#resizer {
|
||||
width: 8px;
|
||||
margin-left: -8px;
|
||||
margin-left: -4px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
|
@ -613,58 +641,58 @@ h1 {
|
|||
}
|
||||
|
||||
.sidenav {
|
||||
background-color: #4d076b;
|
||||
-webkit-box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
|
||||
box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
|
||||
display: block;
|
||||
position: fixed;
|
||||
-webkit-transition: all .2s ease-out;
|
||||
transition: all .2s ease-out;
|
||||
width: 0px;
|
||||
z-index: 2999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
padding-top: 52px;
|
||||
background-color: #4d076b;
|
||||
-webkit-box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
|
||||
box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
|
||||
display: block;
|
||||
position: fixed;
|
||||
-webkit-transition: all .2s ease-out;
|
||||
transition: all .2s ease-out;
|
||||
width: 0px;
|
||||
z-index: 2999;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
padding-top: 64px;
|
||||
}
|
||||
|
||||
.sidenav a {
|
||||
padding: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 25px;
|
||||
color: #dbd9d9;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
font-size: 30px;
|
||||
color: #dbd9d9;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sidenav a:hover {
|
||||
color: #c2a4e0;
|
||||
color: #c2a4e0;
|
||||
}
|
||||
|
||||
.sidenav .closebtn {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
margin-left: 50px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 25px;
|
||||
margin-left: 50px;
|
||||
}
|
||||
|
||||
.sidenav label{
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.sidenav-header {
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
background: #eee;
|
||||
border-bottom: 1px solid #e6e6e6;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
background: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.sidenav-content h2 {
|
||||
|
|
@ -735,7 +763,7 @@ h1 {
|
|||
background-color: #fff;
|
||||
max-width: 300px;
|
||||
min-width: 200px;
|
||||
margin-top: 8px;
|
||||
margin-top: 11px;
|
||||
overflow: auto;
|
||||
right: 7px;
|
||||
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
|
||||
|
|
@ -874,6 +902,10 @@ header .colapse {
|
|||
@media only screen and (max-device-width: 768px) {
|
||||
.nav-link {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.nav-link label {
|
||||
display: none;
|
||||
}
|
||||
.nav-text {
|
||||
display: none;
|
||||
|
|
@ -884,9 +916,9 @@ header .colapse {
|
|||
}
|
||||
|
||||
.video-container {
|
||||
height: calc(100vh - 53px);
|
||||
height: calc(100vh - 64px);
|
||||
position: fixed;
|
||||
top: 53px;
|
||||
top: 64px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin-bottom: 60px;
|
||||
|
|
|
|||
|
|
@ -35,34 +35,56 @@
|
|||
</div>
|
||||
|
||||
<ul class="nav-menu">
|
||||
<li><button id="presentbutton" class="invisible btn btn-success"><i class="fa fa-video-camera" aria-hidden="true"></i><span class="nav-text"> Present</span></button></li>
|
||||
<li><button id="unpresentbutton" class="invisible btn btn-cancel"><i class="fa fa-stop" aria-hidden="true"></i><span class="nav-text"> Stop presenting</span></button></li>
|
||||
<li><button id="mutebutton" class="invisible btn btn-default">Mute</button></li>
|
||||
<li><span id="sharebutton" class="invisible nav-link nav-button"><i class="fa fa-share-square-o" aria-hidden="true"></i></span></li>
|
||||
<li><span id="unsharebutton" class="invisible nav-link nav-button nav-cancel"><i class="fa fa-window-close-o" aria-hidden="true"></i></span></li>
|
||||
<li><span class="nav-button nav-link" id="user"><i class="fa fa-user dropbtn" aria-hidden="true"></i></span>
|
||||
<li>
|
||||
<button id="presentbutton" class="invisible btn btn-success">
|
||||
<i class="fa fa-video-camera" aria-hidden="true"></i><span class="nav-text"> Present</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button id="unpresentbutton" class="invisible btn btn-cancel">
|
||||
<i class="fa fa-stop" aria-hidden="true"></i><span class="nav-text"> Stop presenting</span>
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<div id="mutebutton" class="nav-link nav-button">
|
||||
<span><i class="fa fa-microphone-slash" aria-hidden="true"></i></span>
|
||||
<label>Mute</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="sharebutton" class="invisible nav-link nav-button">
|
||||
<span><i class="fa fa-share-square-o" aria-hidden="true"></i></span>
|
||||
<label>Share Screen</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div id="unsharebutton" class="invisible nav-link nav-button nav-cancel">
|
||||
<span><i class="fa fa-window-close-o" aria-hidden="true"></i></span>
|
||||
<label>Share Screen</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="nav-button nav-link" id="user">
|
||||
<span><i class="fa 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>
|
||||
<form id="userform" class="userform">
|
||||
<label for="username">Username:</label>
|
||||
<input id="username" type="text" name="username"
|
||||
autocomplete="username" class="form-control"/>
|
||||
<label for="password">Password:</label>
|
||||
<input id="password" type="password" name="password"
|
||||
autocomplete="current-password" class="form-control"/>
|
||||
<div class="clear"></div>
|
||||
<input id="connectbutton" type="submit" class="invisible btn btn-blue" value="Connect" disabled/>
|
||||
</form>
|
||||
<div class="clear"></div>
|
||||
<input id="disconnectbutton" class="invisible btn btn-warn"
|
||||
<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="fa fa-cog" aria-hidden="true"></i></span>
|
||||
<label>Parameters</label>
|
||||
</div>
|
||||
</li>
|
||||
<li><span class="nav-button nav-link" id="openside"><i class="fa fa-cog" aria-hidden="true"></i></span></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -79,14 +101,29 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="resizer">
|
||||
</div>
|
||||
</div>
|
||||
<div id="resizer"></div>
|
||||
<div class="coln-right">
|
||||
<span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span>
|
||||
<div class="video-container no-video" id="video-container">
|
||||
<div id="peers"></div>
|
||||
</div>
|
||||
<div class="login-container invisible" id="login-container">
|
||||
<div class="login-box">
|
||||
<h2>Login to SFU</h2>
|
||||
<form id="userform" class="userform">
|
||||
<label for="username">Username:</label>
|
||||
<input id="username" type="text" name="username"
|
||||
autocomplete="username" class="form-control"/>
|
||||
<label for="password">Password:</label>
|
||||
<input id="password" type="password" name="password"
|
||||
autocomplete="current-password" class="form-control"/>
|
||||
<div class="clear"></div>
|
||||
<input id="connectbutton" type="submit" class="btn btn-blue" value="Connect" disabled/>
|
||||
</form>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -69,19 +69,16 @@ function hideVideo(force) {
|
|||
*/
|
||||
function setConnected(connected) {
|
||||
let statspan = document.getElementById('statspan');
|
||||
let userform = document.getElementById('userform');
|
||||
let disconnectbutton = document.getElementById('disconnectbutton');
|
||||
let connectbutton = document.getElementById('connectbutton');
|
||||
let userbox = document.getElementById('user');
|
||||
let connectionbox = document.getElementById('login-container');
|
||||
if(connected) {
|
||||
resetUsers();
|
||||
clearChat();
|
||||
statspan.textContent = 'Connected';
|
||||
statspan.classList.remove('disconnected');
|
||||
statspan.classList.add('connected');
|
||||
userform.classList.add('invisible');
|
||||
userform.classList.remove('userform');
|
||||
disconnectbutton.classList.remove('invisible');
|
||||
connectbutton.classList.add('invisible');
|
||||
userbox.classList.remove('invisible');
|
||||
connectionbox.classList.add('invisible');
|
||||
displayUsername();
|
||||
} else {
|
||||
resetUsers();
|
||||
|
|
@ -93,10 +90,8 @@ function setConnected(connected) {
|
|||
statspan.textContent = 'Disconnected';
|
||||
statspan.classList.remove('connected');
|
||||
statspan.classList.add('disconnected');
|
||||
userform.classList.add('userform');
|
||||
userform.classList.remove('invisible');
|
||||
disconnectbutton.classList.add('invisible');
|
||||
connectbutton.classList.remove('invisible');
|
||||
userbox.classList.add('invisible');
|
||||
connectionbox.classList.remove('invisible');
|
||||
clearUsername();
|
||||
displayError("Disconnected!", "error");
|
||||
}
|
||||
|
|
@ -195,7 +190,7 @@ function setLocalMute(mute) {
|
|||
localMute = mute;
|
||||
muteLocalTracks(localMute);
|
||||
let button = document.getElementById('mutebutton');
|
||||
button.textContent = localMute ? 'Unmute' : 'Mute';
|
||||
//button.textContent = localMute ? 'Unmute' : 'Mute';
|
||||
if(localMute)
|
||||
button.classList.add('muted');
|
||||
else
|
||||
|
|
@ -649,7 +644,8 @@ function resizePeers() {
|
|||
Object.keys(serverConnection.down).length;
|
||||
let peers = document.getElementById('peers');
|
||||
let columns = Math.ceil(Math.sqrt(count));
|
||||
if (columns > 1) {
|
||||
peers.style['grid-template-columns'] = `repeat(${columns}, 1fr)`;
|
||||
if (false) {
|
||||
if (peers.offsetWidth < peers.offsetHeight) {
|
||||
// we change view orientation
|
||||
peers.style['grid-template-rows'] = `repeat(${columns}, auto)`;
|
||||
|
|
@ -793,11 +789,15 @@ function formatLines(lines) {
|
|||
let lastMessage = {};
|
||||
|
||||
function addToChatbox(peerId, nick, kind, message){
|
||||
let userpass = getUserPass();
|
||||
let row = document.createElement('div');
|
||||
row.classList.add('message-row');
|
||||
let container = document.createElement('div');
|
||||
container.classList.add('message');
|
||||
row.appendChild(container);
|
||||
if (userpass.username === nick) {
|
||||
container.classList.add('message-sender');
|
||||
}
|
||||
if(kind !== 'me') {
|
||||
let p = formatLines(message.split('\n'));
|
||||
if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) {
|
||||
|
|
@ -1031,6 +1031,11 @@ document.getElementById('userform').onsubmit = 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");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function openNav() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue