Skip to content

S
sfu
Commit 788e43ba authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

add some interface improvement

parent 382446eb
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 96 deletions
static/sfu.css
View file @ 788e43ba
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
} }
.topnav { .topnav {
padding-left: 0; padding-left: 0;
height: 3.313rem; /*height: 3.313rem;*/
height: 4rem;
z-index: 1039; z-index: 1039;
} }
.navbar .form-control, .topnav { .navbar .form-control, .topnav {
...@@ -197,7 +198,7 @@ ...@@ -197,7 +198,7 @@
.full-width { .full-width {
width: calc(100vw - 200px); width: calc(100vw - 200px);
height: calc(100vh - 53px); height: calc(100vh - 64px);
} }
.full-width-active { .full-width-active {
...@@ -209,7 +210,7 @@ ...@@ -209,7 +210,7 @@
} }
.users-header { .users-header {
height: 53px; height: 4rem;
padding: 10px; padding: 10px;
background: #610a86; background: #610a86;
/*border-bottom: 1px solid #e6e6e6;*/ /*border-bottom: 1px solid #e6e6e6;*/
...@@ -290,20 +291,6 @@ textarea.form-reply { ...@@ -290,20 +291,6 @@ textarea.form-reply {
width: inherit; 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 { .message {
width: auto !important; width: auto !important;
padding: 4px 10px 7px !important; padding: 4px 10px 7px !important;
...@@ -317,6 +304,13 @@ textarea.form-reply { ...@@ -317,6 +304,13 @@ textarea.form-reply {
max-width: 80%; 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 { .message-row:after, .message-row:before {
display: table; display: table;
content: " "; content: " ";
...@@ -344,7 +338,7 @@ textarea.form-reply { ...@@ -344,7 +338,7 @@ textarea.form-reply {
.video-container { .video-container {
/*height: 100%;*/ /*height: 100%;*/
height: calc(100vh - 53px); height: calc(100vh - 64px);
position: relative; position: relative;
background: rgba(0, 0, 0, 0.61); background: rgba(0, 0, 0, 0.61);
/* Display only when showing video */ /* Display only when showing video */
...@@ -363,6 +357,25 @@ textarea.form-reply { ...@@ -363,6 +357,25 @@ textarea.form-reply {
display: block !important; 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 { .label-fallback {
opacity: 0.5; opacity: 0.5;
} }
...@@ -390,15 +403,34 @@ textarea.form-reply { ...@@ -390,15 +403,34 @@ textarea.form-reply {
text-align: center; text-align: center;
margin: 0 10px; margin: 0 10px;
position: relative; position: relative;
line-height: 1.1;
} }
.nav-cancel { .nav-link span {
color: #d03e3e display: block;
}
.nav-link label {
display: block;
cursor: pointer;
color: #fff;
font-size: 55%;
} }
.nav-link:hover { .nav-link:hover {
color: #c2a4e0; 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 { .nav-button {
cursor: pointer; cursor: pointer;
...@@ -485,10 +517,6 @@ h1 { ...@@ -485,10 +517,6 @@ h1 {
margin-right: 0.4em; margin-right: 0.4em;
} }
.muted {
color: red;
}
#sharebutton, #unsharebutton { #sharebutton, #unsharebutton {
white-space: nowrap; white-space: nowrap;
} }
...@@ -523,7 +551,7 @@ h1 { ...@@ -523,7 +551,7 @@ h1 {
background-size: cover; background-size: cover;
overflow-y: scroll; overflow-y: scroll;
border: none; border: none;
border-right: 1px solid #e6e6e6; border-right: 4px solid #e6e6e6;
height: 100% !important; height: 100% !important;
min-width: 300px; min-width: 300px;
} }
...@@ -567,7 +595,7 @@ h1 { ...@@ -567,7 +595,7 @@ h1 {
#resizer { #resizer {
width: 8px; width: 8px;
margin-left: -8px; margin-left: -4px;
z-index: 1000; z-index: 1000;
} }
...@@ -613,58 +641,58 @@ h1 { ...@@ -613,58 +641,58 @@ h1 {
} }
.sidenav { .sidenav {
background-color: #4d076b; background-color: #4d076b;
-webkit-box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08); -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); box-shadow: 0 0 24px 0 rgba(71,77,86,.1), 0 1px 0 0 rgba(71,77,86,.08);
display: block; display: block;
position: fixed; position: fixed;
-webkit-transition: all .2s ease-out; -webkit-transition: all .2s ease-out;
transition: all .2s ease-out; transition: all .2s ease-out;
width: 0px; width: 0px;
z-index: 2999; z-index: 2999;
top: 0; top: 0;
right: 0; right: 0;
height: 100vh; height: 100vh;
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
padding-top: 52px; padding-top: 64px;
} }
.sidenav a { .sidenav a {
padding: 8px; padding: 10px;
text-decoration: none; text-decoration: none;
font-size: 25px; font-size: 30px;
color: #dbd9d9; color: #dbd9d9;
display: block; display: block;
transition: 0.3s; transition: 0.3s;
} }
.sidenav a:hover { .sidenav a:hover {
color: #c2a4e0; color: #c2a4e0;
} }
.sidenav .closebtn { .sidenav .closebtn {
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
top: 0; top: 0;
right: 25px; right: 25px;
margin-left: 50px; margin-left: 50px;
} }
.sidenav label{ .sidenav label{
display: block; display: block;
margin-top: 15px; margin-top: 15px;
} }
.sidenav-header { .sidenav-header {
border-bottom: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;
background: #eee; background: #eee;
} }
.sidenav-content { .sidenav-content {
padding: 20px; padding: 20px;
background: #fff; background: #fff;
height: 100%; height: 100%;
} }
.sidenav-content h2 { .sidenav-content h2 {
...@@ -735,7 +763,7 @@ h1 { ...@@ -735,7 +763,7 @@ h1 {
background-color: #fff; background-color: #fff;
max-width: 300px; max-width: 300px;
min-width: 200px; min-width: 200px;
margin-top: 8px; margin-top: 11px;
overflow: auto; overflow: auto;
right: 7px; right: 7px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
...@@ -874,6 +902,10 @@ header .colapse { ...@@ -874,6 +902,10 @@ header .colapse {
@media only screen and (max-device-width: 768px) { @media only screen and (max-device-width: 768px) {
.nav-link { .nav-link {
margin: 0; margin: 0;
line-height: 1.5;
}
.nav-link label {
display: none;
} }
.nav-text { .nav-text {
display: none; display: none;
...@@ -884,9 +916,9 @@ header .colapse { ...@@ -884,9 +916,9 @@ header .colapse {
} }
.video-container { .video-container {
height: calc(100vh - 53px); height: calc(100vh - 64px);
position: fixed; position: fixed;
top: 53px; top: 64px;
right: 0; right: 0;
left: 0; left: 0;
margin-bottom: 60px; margin-bottom: 60px;
......
static/sfu.html
View file @ 788e43ba
...@@ -35,34 +35,56 @@ ...@@ -35,34 +35,56 @@
</div> </div>
<ul class="nav-menu"> <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>
<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> <button id="presentbutton" class="invisible btn btn-success">
<li><button id="mutebutton" class="invisible btn btn-default">Mute</button></li> <i class="fa fa-video-camera" aria-hidden="true"></i><span class="nav-text"> Present</span>
<li><span id="sharebutton" class="invisible nav-link nav-button"><i class="fa fa-share-square-o" aria-hidden="true"></i></span></li> </button>
<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>
<li><span class="nav-button nav-link" id="user"><i class="fa fa-user dropbtn" aria-hidden="true"></i></span> <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="userDropdown" class="dropdown-content">
<div id="statdiv"> <div id="statdiv">
<span id="statspan"></span> <span id="statspan"></span>
<span id="userspan"></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> <div class="clear"></div>
<input id="disconnectbutton" class="invisible btn btn-warn" <input id="disconnectbutton" class="btn btn-warn"
type="submit" value="Disconnect"/> type="submit" value="Disconnect"/>
<span id="errspan"></span> <span id="errspan"></span>
</div> </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> </div>
</li> </li>
<li><span class="nav-button nav-link" id="openside"><i class="fa fa-cog" aria-hidden="true"></i></span></li>
</ul> </ul>
</nav> </nav>
</header> </header>
...@@ -79,14 +101,29 @@ ...@@ -79,14 +101,29 @@
</div> </div>
</div> </div>
</div> </div>
<div id="resizer">
</div>
</div> </div>
<div id="resizer"></div>
<div class="coln-right"> <div class="coln-right">
<span class="show-video blink" id="switch-video"><i class="fa fa-exchange" aria-hidden="true"></i></span> <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 class="video-container no-video" id="video-container">
<div id="peers"></div> <div id="peers"></div>
</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> </div>
</div> </div>
......
static/sfu.js
View file @ 788e43ba
...@@ -69,19 +69,16 @@ function hideVideo(force) { ...@@ -69,19 +69,16 @@ function hideVideo(force) {
*/ */
function setConnected(connected) { function setConnected(connected) {
let statspan = document.getElementById('statspan'); let statspan = document.getElementById('statspan');
let userform = document.getElementById('userform'); let userbox = document.getElementById('user');
let disconnectbutton = document.getElementById('disconnectbutton'); let connectionbox = document.getElementById('login-container');
let connectbutton = document.getElementById('connectbutton');
if(connected) { if(connected) {
resetUsers(); resetUsers();
clearChat(); clearChat();
statspan.textContent = 'Connected'; statspan.textContent = 'Connected';
statspan.classList.remove('disconnected'); statspan.classList.remove('disconnected');
statspan.classList.add('connected'); statspan.classList.add('connected');
userform.classList.add('invisible'); userbox.classList.remove('invisible');
userform.classList.remove('userform'); connectionbox.classList.add('invisible');
disconnectbutton.classList.remove('invisible');
connectbutton.classList.add('invisible');
displayUsername(); displayUsername();
} else { } else {
resetUsers(); resetUsers();
...@@ -93,10 +90,8 @@ function setConnected(connected) { ...@@ -93,10 +90,8 @@ function setConnected(connected) {
statspan.textContent = 'Disconnected'; statspan.textContent = 'Disconnected';
statspan.classList.remove('connected'); statspan.classList.remove('connected');
statspan.classList.add('disconnected'); statspan.classList.add('disconnected');
userform.classList.add('userform'); userbox.classList.add('invisible');
userform.classList.remove('invisible'); connectionbox.classList.remove('invisible');
disconnectbutton.classList.add('invisible');
connectbutton.classList.remove('invisible');
clearUsername(); clearUsername();
displayError("Disconnected!", "error"); displayError("Disconnected!", "error");
} }
...@@ -195,7 +190,7 @@ function setLocalMute(mute) { ...@@ -195,7 +190,7 @@ function setLocalMute(mute) {
localMute = mute; localMute = mute;
muteLocalTracks(localMute); muteLocalTracks(localMute);
let button = document.getElementById('mutebutton'); let button = document.getElementById('mutebutton');
button.textContent = localMute ? 'Unmute' : 'Mute'; //button.textContent = localMute ? 'Unmute' : 'Mute';
if(localMute) if(localMute)
button.classList.add('muted'); button.classList.add('muted');
else else
...@@ -649,7 +644,8 @@ function resizePeers() { ...@@ -649,7 +644,8 @@ function resizePeers() {
Object.keys(serverConnection.down).length; Object.keys(serverConnection.down).length;
let peers = document.getElementById('peers'); let peers = document.getElementById('peers');
let columns = Math.ceil(Math.sqrt(count)); 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) { if (peers.offsetWidth < peers.offsetHeight) {
// we change view orientation // we change view orientation
peers.style['grid-template-rows'] = `repeat(${columns}, auto)`; peers.style['grid-template-rows'] = `repeat(${columns}, auto)`;
...@@ -793,11 +789,15 @@ function formatLines(lines) { ...@@ -793,11 +789,15 @@ function formatLines(lines) {
let lastMessage = {}; let lastMessage = {};
function addToChatbox(peerId, nick, kind, message){ function addToChatbox(peerId, nick, kind, message){
let userpass = getUserPass();
let row = document.createElement('div'); let row = document.createElement('div');
row.classList.add('message-row'); row.classList.add('message-row');
let container = document.createElement('div'); let container = document.createElement('div');
container.classList.add('message'); container.classList.add('message');
row.appendChild(container); row.appendChild(container);
if (userpass.username === nick) {
container.classList.add('message-sender');
}
if(kind !== 'me') { if(kind !== 'me') {
let p = formatLines(message.split('\n')); let p = formatLines(message.split('\n'));
if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) { if (lastMessage.nick !== nick || lastMessage.peerId !== peerId) {
...@@ -1031,6 +1031,11 @@ document.getElementById('userform').onsubmit = function(e) { ...@@ -1031,6 +1031,11 @@ document.getElementById('userform').onsubmit = function(e) {
document.getElementById('disconnectbutton').onclick = function(e) { document.getElementById('disconnectbutton').onclick = function(e) {
serverConnection.close(); serverConnection.close();
let user_box = document.getElementById('userDropdown');
if (user_box.classList.contains("show")) {
user_box.classList.toggle("show");
}
}; };
function openNav() { function openNav() {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7