mirror of
https://github.com/jech/galene.git
synced 2024-11-10 02:35:58 +01:00
add some interface improvement
This commit is contained in:
parent
382446ebcb
commit
788e43ba7a
3 changed files with 170 additions and 96 deletions
|
@ -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 @@
|
||||||
|
|
||||||
.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 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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 {
|
||||||
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 {
|
||||||
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 {
|
||||||
|
|
||||||
.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 {
|
||||||
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 {
|
||||||
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 {
|
||||||
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 {
|
||||||
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 {
|
||||||
|
|
||||||
#resizer {
|
#resizer {
|
||||||
width: 8px;
|
width: 8px;
|
||||||
margin-left: -8px;
|
margin-left: -4px;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -627,13 +655,13 @@ h1 {
|
||||||
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;
|
||||||
|
@ -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 {
|
||||||
@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 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
|
|
|
@ -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>
|
<div class="clear"></div>
|
||||||
<input id="connectbutton" type="submit" class="invisible btn btn-blue" value="Connect" disabled/>
|
<input id="disconnectbutton" class="btn btn-warn"
|
||||||
</form>
|
|
||||||
<div class="clear"></div>
|
|
||||||
<input id="disconnectbutton" class="invisible btn btn-warn"
|
|
||||||
type="submit" value="Disconnect"/>
|
type="submit" value="Disconnect"/>
|
||||||
<span id="errspan"></span>
|
<span id="errspan"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
<li><span class="nav-button nav-link" id="openside"><i class="fa fa-cog" aria-hidden="true"></i></span></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>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
@ -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>
|
||||||
|
|
|
@ -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) {
|
||||||
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) {
|
||||||
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() {
|
||||||
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) {
|
||||||
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) {
|
||||||
|
|
||||||
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() {
|
||||||
|
|
Loading…
Reference in a new issue