Rename side panels and implement toggle/untoggle policy
This commit is contained in:
yanas
parent
17e28069ab
commit
b4c9816d9f
|
|
@ -1,4 +1,4 @@
|
||||||
#chatspace * {
|
#chat_container * {
|
||||||
-webkit-user-select: text;
|
-webkit-user-select: text;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
}
|
}
|
||||||
|
|
@ -16,8 +16,25 @@
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
color: rgb(184, 184, 184);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: rgb(213, 213, 213);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
#chatspace.is-conversation-mode #chatconversation {
|
|
||||||
|
#chat_container.is-conversation-mode #chatconversation {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -59,7 +76,7 @@
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatspace.is-conversation-mode #usermsg {
|
#chat_container.is-conversation-mode #usermsg {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -74,7 +91,7 @@
|
||||||
width: 95%;
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatspace.is-conversation-mode #nickname {
|
#chat_container.is-conversation-mode #nickname {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -92,19 +109,19 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatspace .username {
|
#chat_container .username {
|
||||||
float: left;
|
float: left;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatspace .timestamp {
|
#chat_container .timestamp {
|
||||||
float: right;
|
float: right;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatspace .usermessage {
|
#chat_container .usermessage {
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
@ -165,7 +182,7 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chatspace.is-conversation-mode #smileysarea {
|
#chat_container.is-conversation-mode #smileysarea {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -221,20 +238,4 @@
|
||||||
|
|
||||||
#usermsg::-webkit-scrollbar-track-piece {
|
#usermsg::-webkit-scrollbar-track-piece {
|
||||||
background: #3a3a3a;
|
background: #3a3a3a;
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
color: rgb(184, 184, 184);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: rgb(213, 213, 213);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
color: black;
|
|
||||||
}
|
}
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
#contactlist {
|
#contacts_container {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
|
|
||||||
> ul#contacts {
|
> ul#contacts {
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
#settingsmenu input, select {
|
#settings_container input, select {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
|
|
@ -9,7 +9,7 @@
|
||||||
color: #a7a7a7;
|
color: #a7a7a7;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settingsmenu .arrow-up {
|
#settings_container .arrow-up {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
border-left: 5px solid transparent;
|
border-left: 5px solid transparent;
|
||||||
|
|
@ -21,7 +21,7 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#settingsmenu #avatar {
|
#settings_container #avatar {
|
||||||
width: 24%;
|
width: 24%;
|
||||||
left: 38%;
|
left: 38%;
|
||||||
border-radius: 25px;
|
border-radius: 25px;
|
||||||
|
|
|
||||||
|
|
@ -43,16 +43,16 @@
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
width: auto;
|
width: auto;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
|
||||||
|
|
||||||
#mainToolbar .first {
|
.first {
|
||||||
border-bottom-left-radius: 4px;
|
border-bottom-left-radius: 4px;
|
||||||
border-top-left-radius: 4px;
|
border-top-left-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mainToolbar .last {
|
.last {
|
||||||
border-bottom-right-radius: 4px;
|
border-bottom-right-radius: 4px;
|
||||||
border-top-right-radius: 4px;
|
border-top-right-radius: 4px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#extendedToolbar {
|
#extendedToolbar {
|
||||||
|
|
@ -74,7 +74,7 @@
|
||||||
-webkit-transform: translateX(-100%);
|
-webkit-transform: translateX(-100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
#extendedToolbarPanel {
|
#sideToolbarContainer {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position:absolute;
|
position:absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
@ -86,7 +86,7 @@
|
||||||
z-index: 800;
|
z-index: 800;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.extendedToolbarPanel__inner {
|
.sideToolbarContainer__inner {
|
||||||
display: none;
|
display: none;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
|
|
@ -109,34 +109,6 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#toolbar_button_chat,
|
|
||||||
#chatBottomButton,
|
|
||||||
#contactListButton,
|
|
||||||
#numberOfParticipants,
|
|
||||||
#toolbar_button_record {
|
|
||||||
-webkit-transition: all .5s ease-in-out;
|
|
||||||
-moz-transition: all .5s ease-in-out;
|
|
||||||
transition: all .5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#ffde00*/
|
|
||||||
#toolbar_button_chat.active,
|
|
||||||
#contactListButton.glowing,
|
|
||||||
#chatBottomButton.glowing {
|
|
||||||
-webkit-text-shadow: -1px 0 10px #21B9FC,
|
|
||||||
0 1px 10px #21B9FC,
|
|
||||||
1px 0 10px #21B9FC,
|
|
||||||
0 -1px 10px #21B9FC;
|
|
||||||
-moz-text-shadow: 1px 0 10px #21B9FC,
|
|
||||||
0 1px 10px #21B9FC,
|
|
||||||
1px 0 10px #21B9FC,
|
|
||||||
0 -1px 10px #21B9FC;
|
|
||||||
text-shadow: -1px 0 10px #21B9FC,
|
|
||||||
0 1px 10px #21B9FC,
|
|
||||||
1px 0 10px #21B9FC,
|
|
||||||
0 -1px 10px #21B9FC;
|
|
||||||
}
|
|
||||||
|
|
||||||
#numberOfParticipants {
|
#numberOfParticipants {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5px;
|
top: 5px;
|
||||||
|
|
@ -145,61 +117,10 @@
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#contactListButton.active #numberOfParticipants {
|
|
||||||
color: #21B9FC;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mainToolbar a.button:last-child::after {
|
#mainToolbar a.button:last-child::after {
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bottomToolbar {
|
|
||||||
display:block;
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
margin-right: 5px;
|
|
||||||
bottom: 40px;
|
|
||||||
width: 29px;
|
|
||||||
border-radius: 1px;
|
|
||||||
color: #FFF;
|
|
||||||
background: rgba(0,0,0,0.5);
|
|
||||||
z-index: 6; /*+1 from #remoteVideos*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottomToolbarButton {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
color: #FFFFFF;
|
|
||||||
top: 0;
|
|
||||||
padding-top: 6px;
|
|
||||||
margin: 2px;
|
|
||||||
width: 25px;
|
|
||||||
height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 10pt;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar_span>span {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
font-size: 7pt;
|
|
||||||
color: #ffffff;
|
|
||||||
text-align:center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottomToolbar_span>span {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
font-size: 7pt;
|
|
||||||
color: #ffffff;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -220,9 +141,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
a.button:hover,
|
a.button:hover,
|
||||||
a.bottomToolbarButton:hover {
|
a.button:active,
|
||||||
|
a.button.selected {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background: rgba(0, 0, 0, 0.8);
|
// sum opacity with background layer should give us 0.8
|
||||||
|
background: rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
a.button>#avatar {
|
a.button>#avatar {
|
||||||
|
|
@ -236,6 +159,9 @@ a.button>#avatar {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* START of slide in animation for extended toolbar.
|
||||||
|
*/
|
||||||
@include keyframes(slideInX) {
|
@include keyframes(slideInX) {
|
||||||
100% { transform: translateX(0%); }
|
100% { transform: translateX(0%); }
|
||||||
}
|
}
|
||||||
|
|
@ -252,7 +178,13 @@ a.button>#avatar {
|
||||||
.slideOutX {
|
.slideOutX {
|
||||||
@include animation('slideOutX .5s forwards');
|
@include animation('slideOutX .5s forwards');
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* END of slide out animation for extended toolbar.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* START of slide in / out animation for main toolbar.
|
||||||
|
*/
|
||||||
@include keyframes(slideInY) {
|
@include keyframes(slideInY) {
|
||||||
100% { transform: translateY(0%); }
|
100% { transform: translateY(0%); }
|
||||||
}
|
}
|
||||||
|
|
@ -269,7 +201,13 @@ a.button>#avatar {
|
||||||
.slideOutY {
|
.slideOutY {
|
||||||
@include animation('slideOutY .5s forwards');
|
@include animation('slideOutY .5s forwards');
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* END of slide in / out animation for main toolbar.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* START of slide in animation for extended toolbar panel.
|
||||||
|
*/
|
||||||
@include keyframes(slideInExt) {
|
@include keyframes(slideInExt) {
|
||||||
from { width: 0%; }
|
from { width: 0%; }
|
||||||
to { width: 20%; }
|
to { width: 20%; }
|
||||||
|
|
@ -286,4 +224,7 @@ a.button>#avatar {
|
||||||
|
|
||||||
.slideOutExt {
|
.slideOutExt {
|
||||||
@include animation("slideOutExt .5s forwards");
|
@include animation("slideOutExt .5s forwards");
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* END of slide in animation for extended toolbar panel.
|
||||||
|
*/
|
||||||
108
index.html
108
index.html
|
|
@ -191,66 +191,66 @@
|
||||||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="extendedToolbarPanel">
|
<div id="sideToolbarContainer">
|
||||||
<div id="chatspace" class="extendedToolbarPanel__inner">
|
<div id="chat_container" class="sideToolbarContainer__inner">
|
||||||
<div id="nickname">
|
<div id="nickname">
|
||||||
<span data-i18n="chat.nickname.title"></span>
|
<span data-i18n="chat.nickname.title"></span>
|
||||||
<form>
|
<form>
|
||||||
<input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
|
<input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="chatconversation"></div>
|
<div id="chatconversation"></div>
|
||||||
<audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
|
<audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
|
||||||
<textarea id="usermsg" data-i18n="[placeholder]chat.messagebox" autofocus></textarea>
|
<textarea id="usermsg" data-i18n="[placeholder]chat.messagebox" autofocus></textarea>
|
||||||
<div id="smileysarea">
|
<div id="smileysarea">
|
||||||
<div id="smileys" id="toggle_smileys">
|
<div id="smileys" id="toggle_smileys">
|
||||||
<img src="images/smile.svg"/>
|
<img src="images/smile.svg"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="contacts_container" class="sideToolbarContainer__inner">
|
||||||
<div id="contactlist" class="extendedToolbarPanel__inner">
|
<div class="title" data-i18n="contactlist"></div>
|
||||||
<div class="title" data-i18n="contactlist"></div>
|
<ul id="contacts"></ul>
|
||||||
<ul id="contacts"></ul>
|
|
||||||
</div>
|
|
||||||
<div id="settingsmenu" class="extendedToolbarPanel__inner">
|
|
||||||
<div class="title" data-i18n="settings.title"></div>
|
|
||||||
<div class="arrow-up"></div>
|
|
||||||
<input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
|
|
||||||
<input type="text" id="setEmail" placeholder="E-Mail">
|
|
||||||
<select id="languages_selectbox"></select>
|
|
||||||
<div id = "startMutedOptions">
|
|
||||||
<label class = "startMutedLabel">
|
|
||||||
<input type="checkbox" id="startAudioMuted">
|
|
||||||
<span data-i18n="settings.startAudioMuted"></span>
|
|
||||||
</label>
|
|
||||||
<label class = "startMutedLabel">
|
|
||||||
<input type="checkbox" id="startVideoMuted">
|
|
||||||
<span data-i18n="settings.startVideoMuted"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="devicesOptions">
|
<div id="settings_container" class="sideToolbarContainer__inner">
|
||||||
<label className="devicesOptionsLabel">
|
<div class="title" data-i18n="settings.title"></div>
|
||||||
<span data-i18n="settings.selectCamera"></span>
|
<div class="arrow-up"></div>
|
||||||
<select id="selectCamera"></select>
|
<input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
|
||||||
</label>
|
<input type="text" id="setEmail" placeholder="E-Mail">
|
||||||
<label className="devicesOptionsLabel">
|
<select id="languages_selectbox"></select>
|
||||||
<span data-i18n="settings.selectMic"></span>
|
<div id = "startMutedOptions">
|
||||||
<select id="selectMic"></select>
|
<label class = "startMutedLabel">
|
||||||
</label>
|
<input type="checkbox" id="startAudioMuted">
|
||||||
<label className="devicesOptionsLabel">
|
<span data-i18n="settings.startAudioMuted"></span>
|
||||||
<span data-i18n="settings.selectAudioOutput"></span>
|
</label>
|
||||||
<select id="selectAudioOutput"></select>
|
<label class = "startMutedLabel">
|
||||||
</label>
|
<input type="checkbox" id="startVideoMuted">
|
||||||
|
<span data-i18n="settings.startVideoMuted"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div id="devicesOptions">
|
||||||
|
<label className="devicesOptionsLabel">
|
||||||
|
<span data-i18n="settings.selectCamera"></span>
|
||||||
|
<select id="selectCamera"></select>
|
||||||
|
</label>
|
||||||
|
<label className="devicesOptionsLabel">
|
||||||
|
<span data-i18n="settings.selectMic"></span>
|
||||||
|
<select id="selectMic"></select>
|
||||||
|
</label>
|
||||||
|
<label className="devicesOptionsLabel">
|
||||||
|
<span data-i18n="settings.selectAudioOutput"></span>
|
||||||
|
<select id="selectAudioOutput"></select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div id="followMeOptions">
|
||||||
|
<label class = "followMeLabel">
|
||||||
|
<input type="checkbox" id="followMeCheckBox">
|
||||||
|
<span data-i18n="settings.followMe"></span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="fa fa-cloud-download"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div id="followMeOptions">
|
|
||||||
<label class = "followMeLabel">
|
|
||||||
<input type="checkbox" id="followMeCheckBox">
|
|
||||||
<span data-i18n="settings.followMe"></span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="fa fa-cloud-download"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
|
<div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ import Toolbar from "./toolbars/Toolbar";
|
||||||
import ToolbarToggler from "./toolbars/ToolbarToggler";
|
import ToolbarToggler from "./toolbars/ToolbarToggler";
|
||||||
import ContactList from "./side_pannels/contactlist/ContactList";
|
import ContactList from "./side_pannels/contactlist/ContactList";
|
||||||
import Avatar from "./avatar/Avatar";
|
import Avatar from "./avatar/Avatar";
|
||||||
import ExtendedToolbarToggler from "./side_pannels/ExtendedToolbarToggler";
|
import SideContainerToggler from "./side_pannels/SideContainerToggler";
|
||||||
import UIUtil from "./util/UIUtil";
|
import UIUtil from "./util/UIUtil";
|
||||||
import UIEvents from "../../service/UI/UIEvents";
|
import UIEvents from "../../service/UI/UIEvents";
|
||||||
import CQEvents from '../../service/connectionquality/CQEvents';
|
import CQEvents from '../../service/connectionquality/CQEvents';
|
||||||
|
|
@ -360,7 +360,7 @@ function registerListeners() {
|
||||||
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
|
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
|
||||||
|
|
||||||
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
|
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
|
||||||
ExtendedToolbarToggler.toggle("settingsmenu");
|
SideContainerToggler.toggle("settings_container");
|
||||||
});
|
});
|
||||||
|
|
||||||
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
|
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
|
||||||
|
|
@ -378,7 +378,7 @@ function registerListeners() {
|
||||||
*/
|
*/
|
||||||
function bindEvents() {
|
function bindEvents() {
|
||||||
function onResize() {
|
function onResize() {
|
||||||
ExtendedToolbarToggler.resize();
|
SideContainerToggler.resize();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Resize and reposition videos in full screen mode.
|
// Resize and reposition videos in full screen mode.
|
||||||
|
|
@ -427,7 +427,7 @@ UI.start = function () {
|
||||||
registerListeners();
|
registerListeners();
|
||||||
|
|
||||||
ToolbarToggler.init();
|
ToolbarToggler.init();
|
||||||
ExtendedToolbarToggler.init();
|
SideContainerToggler.init(eventEmitter);
|
||||||
FilmStrip.init(eventEmitter);
|
FilmStrip.init(eventEmitter);
|
||||||
|
|
||||||
VideoLayout.init(eventEmitter);
|
VideoLayout.init(eventEmitter);
|
||||||
|
|
@ -716,14 +716,14 @@ UI.isFilmStripVisible = function () {
|
||||||
* Toggles chat panel.
|
* Toggles chat panel.
|
||||||
*/
|
*/
|
||||||
UI.toggleChat = function () {
|
UI.toggleChat = function () {
|
||||||
ExtendedToolbarToggler.toggle("chatspace");
|
SideContainerToggler.toggle("chat_container");
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toggles contact list panel.
|
* Toggles contact list panel.
|
||||||
*/
|
*/
|
||||||
UI.toggleContactList = function () {
|
UI.toggleContactList = function () {
|
||||||
ExtendedToolbarToggler.toggle("contactlist");
|
SideContainerToggler.toggle("contacts_container");
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
/* global $ */
|
|
||||||
|
|
||||||
const ExtendedToolbarToggler = {
|
|
||||||
init() {
|
|
||||||
document.getElementById("extendedToolbarPanel")
|
|
||||||
.addEventListener("animationend", function(e) {
|
|
||||||
console.log("ANIM NAME", e.animationName);
|
|
||||||
if(e.animationName === "slideOutExt")
|
|
||||||
$("#extendedToolbarPanel").children().each(function() {
|
|
||||||
if ($(this).hasClass("show"))
|
|
||||||
$(this).removeClass("show").addClass("hide");
|
|
||||||
});
|
|
||||||
}, false);
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle(elementId) {
|
|
||||||
let elementSelector = $(`#${elementId}`);
|
|
||||||
let isSelectorVisible = elementSelector.hasClass("show");
|
|
||||||
|
|
||||||
if (isSelectorVisible) {
|
|
||||||
this.hide();
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
if (this.isVisible())
|
|
||||||
$("#extendedToolbarPanel").children().each(function() {
|
|
||||||
if ($(this).id !== elementId && $(this).hasClass("show"))
|
|
||||||
$(this).removeClass("show").addClass("hide");
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!this.isVisible())
|
|
||||||
this.show();
|
|
||||||
|
|
||||||
elementSelector.removeClass("hide").addClass("show");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Returns true if this toolbar is currently visible, or false otherwise.
|
|
||||||
* @return <tt>true</tt> if currently visible, <tt>false</tt> - otherwise
|
|
||||||
*/
|
|
||||||
isVisible() {
|
|
||||||
return $("#extendedToolbarPanel").hasClass("slideInExt");
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Hides the toolbar with animation or not depending on the animate
|
|
||||||
* parameter.
|
|
||||||
*/
|
|
||||||
hide(elementId) {
|
|
||||||
$("#extendedToolbarPanel")
|
|
||||||
.removeClass("slideInExt").addClass("slideOutExt");
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Shows the toolbar with animation or not depending on the animate
|
|
||||||
* parameter.
|
|
||||||
*/
|
|
||||||
show(elementId) {
|
|
||||||
if (!this.isVisible())
|
|
||||||
$("#extendedToolbarPanel")
|
|
||||||
.removeClass("slideOutExt").addClass("slideInExt");
|
|
||||||
},
|
|
||||||
|
|
||||||
resize () {
|
|
||||||
//let [width, height] = UIUtil.getSidePanelSize();
|
|
||||||
//Chat.resizeChat(width, height);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ExtendedToolbarToggler;
|
|
||||||
|
|
@ -0,0 +1,107 @@
|
||||||
|
/* global $ */
|
||||||
|
import UIEvents from "../../../service/UI/UIEvents";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles open and close of the extended toolbar side panel
|
||||||
|
* (chat, settings, etc.).
|
||||||
|
*
|
||||||
|
* @type {{init, toggle, isVisible, hide, show, resize}}
|
||||||
|
*/
|
||||||
|
const SideContainerToggler = {
|
||||||
|
/**
|
||||||
|
* Initialises this toggler by registering the listeners.
|
||||||
|
*
|
||||||
|
* @param eventEmitter
|
||||||
|
*/
|
||||||
|
init(eventEmitter) {
|
||||||
|
this.eventEmitter = eventEmitter;
|
||||||
|
|
||||||
|
// Adds a listener for the animation end event that would take care
|
||||||
|
// of hiding all internal containers when the extendedToolbarPanel is
|
||||||
|
// closed.
|
||||||
|
document.getElementById("sideToolbarContainer")
|
||||||
|
.addEventListener("animationend", function(e) {
|
||||||
|
if(e.animationName === "slideOutExt")
|
||||||
|
$("#sideToolbarContainer").children().each(function() {
|
||||||
|
if ($(this).hasClass("show"))
|
||||||
|
SideContainerToggler.hideInnerContainer($(this));
|
||||||
|
});
|
||||||
|
}, false);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Toggles the container with the given element id.
|
||||||
|
*
|
||||||
|
* @param {String} elementId the identifier of the container element to
|
||||||
|
* toggle
|
||||||
|
*/
|
||||||
|
toggle(elementId) {
|
||||||
|
let elementSelector = $(`#${elementId}`);
|
||||||
|
let isSelectorVisible = elementSelector.hasClass("show");
|
||||||
|
|
||||||
|
if (isSelectorVisible) {
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
if (this.isVisible())
|
||||||
|
$("#sideToolbarContainer").children().each(function() {
|
||||||
|
if ($(this).id !== elementId && $(this).hasClass("show"))
|
||||||
|
SideContainerToggler.hideInnerContainer($(this));
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!this.isVisible())
|
||||||
|
this.show();
|
||||||
|
|
||||||
|
this.showInnerContainer(elementSelector);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns {true} if the extended toolbar panel is currently visible,
|
||||||
|
* otherwise returns {false}.
|
||||||
|
*/
|
||||||
|
isVisible() {
|
||||||
|
return $("#sideToolbarContainer").hasClass("slideInExt");
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hides the extended toolbar panel with a slide out animation.
|
||||||
|
*/
|
||||||
|
hide() {
|
||||||
|
$("#sideToolbarContainer")
|
||||||
|
.removeClass("slideInExt").addClass("slideOutExt");
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shows the extended toolbar panel with a slide in animation.
|
||||||
|
*/
|
||||||
|
show() {
|
||||||
|
if (!this.isVisible())
|
||||||
|
$("#sideToolbarContainer")
|
||||||
|
.removeClass("slideOutExt").addClass("slideInExt");
|
||||||
|
},
|
||||||
|
|
||||||
|
hideInnerContainer(containerSelector) {
|
||||||
|
containerSelector.removeClass("show").addClass("hide");
|
||||||
|
|
||||||
|
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||||
|
containerSelector.attr('id'), false);
|
||||||
|
},
|
||||||
|
|
||||||
|
showInnerContainer(containerSelector) {
|
||||||
|
containerSelector.removeClass("hide").addClass("show");
|
||||||
|
|
||||||
|
this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||||
|
containerSelector.attr('id'), true);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TO FIX: do we need to resize the chat?
|
||||||
|
*/
|
||||||
|
resize () {
|
||||||
|
//let [width, height] = UIUtil.getSidePanelSize();
|
||||||
|
//Chat.resizeChat(width, height);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SideContainerToggler;
|
||||||
|
|
@ -123,7 +123,7 @@ function addSmileys() {
|
||||||
smileysContainer.appendChild(smileyContainer);
|
smileysContainer.appendChild(smileyContainer);
|
||||||
}
|
}
|
||||||
|
|
||||||
$("#chatspace").append(smileysContainer);
|
$("#chat_container").append(smileysContainer);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -131,7 +131,7 @@ function addSmileys() {
|
||||||
*/
|
*/
|
||||||
function resizeChatConversation() {
|
function resizeChatConversation() {
|
||||||
var msgareaHeight = $('#usermsg').outerHeight();
|
var msgareaHeight = $('#usermsg').outerHeight();
|
||||||
var chatspace = $('#chatspace');
|
var chatspace = $('#chat_container');
|
||||||
var width = chatspace.width();
|
var width = chatspace.width();
|
||||||
var chat = $('#chatconversation');
|
var chat = $('#chatconversation');
|
||||||
var smileys = $('#smileysarea');
|
var smileys = $('#smileysarea');
|
||||||
|
|
@ -187,7 +187,7 @@ var Chat = {
|
||||||
};
|
};
|
||||||
usermsg.autosize({callback: onTextAreaResize});
|
usermsg.autosize({callback: onTextAreaResize});
|
||||||
|
|
||||||
$("#chatspace").bind("shown",
|
$("#chat_container").bind("shown",
|
||||||
function () {
|
function () {
|
||||||
unreadMessages = 0;
|
unreadMessages = 0;
|
||||||
setVisualNotification(false);
|
setVisualNotification(false);
|
||||||
|
|
@ -275,7 +275,8 @@ var Chat = {
|
||||||
* conversation mode or not.
|
* conversation mode or not.
|
||||||
*/
|
*/
|
||||||
setChatConversationMode (isConversationMode) {
|
setChatConversationMode (isConversationMode) {
|
||||||
$('#chatspace').toggleClass('is-conversation-mode', isConversationMode);
|
$('#chat_container')
|
||||||
|
.toggleClass('is-conversation-mode', isConversationMode);
|
||||||
if (isConversationMode) {
|
if (isConversationMode) {
|
||||||
$('#usermsg').focus();
|
$('#usermsg').focus();
|
||||||
}
|
}
|
||||||
|
|
@ -285,7 +286,7 @@ var Chat = {
|
||||||
* Resizes the chat area.
|
* Resizes the chat area.
|
||||||
*/
|
*/
|
||||||
resizeChat (width, height) {
|
resizeChat (width, height) {
|
||||||
$('#chatspace').width(width).height(height);
|
$('#chat_container').width(width).height(height);
|
||||||
|
|
||||||
resizeChatConversation();
|
resizeChatConversation();
|
||||||
},
|
},
|
||||||
|
|
@ -294,7 +295,8 @@ var Chat = {
|
||||||
* Indicates if the chat is currently visible.
|
* Indicates if the chat is currently visible.
|
||||||
*/
|
*/
|
||||||
isVisible () {
|
isVisible () {
|
||||||
return UIUtil.isVisible(document.getElementById("chatspace"));
|
return UIUtil.isVisible(
|
||||||
|
document.getElementById("chat_container"));
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Shows and hides the window with the smileys
|
* Shows and hides the window with the smileys
|
||||||
|
|
|
||||||
|
|
@ -23,11 +23,7 @@ function updateNumberOfParticipants(delta) {
|
||||||
let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
|
let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
|
||||||
$("#numberOfParticipants").text(buttonIndicatorText);
|
$("#numberOfParticipants").text(buttonIndicatorText);
|
||||||
|
|
||||||
let showVisualNotification
|
$("#contacts_container>div.title").text(
|
||||||
= (numberOfContacts === 1) ? false : !ContactList.isVisible();
|
|
||||||
ContactList.setVisualNotification(showVisualNotification);
|
|
||||||
|
|
||||||
$("#contactlist>div.title").text(
|
|
||||||
APP.translation.translateString(
|
APP.translation.translateString(
|
||||||
"contactlist", {participants: numberOfContacts}
|
"contactlist", {participants: numberOfContacts}
|
||||||
));
|
));
|
||||||
|
|
@ -138,23 +134,6 @@ var ContactList = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
setVisualNotification (show, stopGlowingIn) {
|
|
||||||
let glower = $('#contactListButton');
|
|
||||||
|
|
||||||
if (show && !notificationInterval) {
|
|
||||||
notificationInterval = window.setInterval(function () {
|
|
||||||
glower.toggleClass('active glowing');
|
|
||||||
}, 800);
|
|
||||||
} else if (!show && notificationInterval) {
|
|
||||||
stopGlowing(glower);
|
|
||||||
}
|
|
||||||
if (stopGlowingIn) {
|
|
||||||
setTimeout(function () {
|
|
||||||
stopGlowing(glower);
|
|
||||||
}, stopGlowingIn);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setClickable (id, isClickable) {
|
setClickable (id, isClickable) {
|
||||||
getContactEl(id).toggleClass('clickable', isClickable);
|
getContactEl(id).toggleClass('clickable', isClickable);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -191,7 +191,7 @@ export default {
|
||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
*/
|
*/
|
||||||
isVisible () {
|
isVisible () {
|
||||||
return UIUtil.isVisible(document.getElementById("settingsmenu"));
|
return UIUtil.isVisible(document.getElementById("settings_container"));
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -290,6 +290,6 @@ export default {
|
||||||
|
|
||||||
$('#devicesOptions').show();
|
$('#devicesOptions').show();
|
||||||
|
|
||||||
APP.translation.translateElement($('#settingsmenu option'));
|
APP.translation.translateElement($('#settings_container option'));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
/* jshint -W101 */
|
/* jshint -W101 */
|
||||||
import UIUtil from '../util/UIUtil';
|
import UIUtil from '../util/UIUtil';
|
||||||
import UIEvents from '../../../service/UI/UIEvents';
|
import UIEvents from '../../../service/UI/UIEvents';
|
||||||
import ExtendedToolbarToggler from "../side_pannels/ExtendedToolbarToggler.js";
|
import SideContainerToggler from "../side_pannels/SideContainerToggler";
|
||||||
|
|
||||||
let roomUrl = null;
|
let roomUrl = null;
|
||||||
let emitter = null;
|
let emitter = null;
|
||||||
|
|
@ -208,10 +208,12 @@ const defaultToolbarButtons = {
|
||||||
JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
|
JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
|
||||||
APP.UI.toggleChat();
|
APP.UI.toggleChat();
|
||||||
},
|
},
|
||||||
shortcutDescription: "keyboardShortcuts.toggleChat"
|
shortcutDescription: "keyboardShortcuts.toggleChat",
|
||||||
|
sideContainerId: "chat_container"
|
||||||
},
|
},
|
||||||
'contacts': {
|
'contacts': {
|
||||||
id: '#toolbar_contact_list'
|
id: '#toolbar_contact_list',
|
||||||
|
sideContainerId: "contacts_container"
|
||||||
},
|
},
|
||||||
'etherpad': {
|
'etherpad': {
|
||||||
id: '#toolbar_button_etherpad'
|
id: '#toolbar_button_etherpad'
|
||||||
|
|
@ -220,7 +222,8 @@ const defaultToolbarButtons = {
|
||||||
id: '#toolbar_button_fullScreen'
|
id: '#toolbar_button_fullScreen'
|
||||||
},
|
},
|
||||||
'settings': {
|
'settings': {
|
||||||
id: '#toolbar_button_settings'
|
id: '#toolbar_button_settings',
|
||||||
|
sideContainerId: "settings_container"
|
||||||
},
|
},
|
||||||
'hangup': {
|
'hangup': {
|
||||||
id: '#toolbar_button_hangup'
|
id: '#toolbar_button_hangup'
|
||||||
|
|
@ -292,6 +295,13 @@ const Toolbar = {
|
||||||
!$(this).prop('disabled') && buttonHandlers[buttonId](event);
|
!$(this).prop('disabled') && buttonHandlers[buttonId](event);
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||||
|
function(containerId, isVisible) {
|
||||||
|
console.log("TOGGLED", containerId, isVisible);
|
||||||
|
Toolbar.handleSideToolbarContainerToggled( containerId,
|
||||||
|
isVisible);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* Enables / disables the toolbar.
|
* Enables / disables the toolbar.
|
||||||
|
|
@ -534,7 +544,7 @@ const Toolbar = {
|
||||||
return true;
|
return true;
|
||||||
if ($("#bottomToolbar:hover").length > 0
|
if ($("#bottomToolbar:hover").length > 0
|
||||||
|| $("#extendedToolbar:hover").length > 0
|
|| $("#extendedToolbar:hover").length > 0
|
||||||
|| ExtendedToolbarToggler.isVisible()) {
|
|| SideContainerToggler.isVisible()) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
|
@ -571,6 +581,25 @@ const Toolbar = {
|
||||||
|
|
||||||
this.toolbarSelector.toggleClass("slideInY");
|
this.toolbarSelector.toggleClass("slideInY");
|
||||||
this.extendedToolbarSelector.toggleClass("slideInX");
|
this.extendedToolbarSelector.toggleClass("slideInX");
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
handleSideToolbarContainerToggled(containerId, isVisible) {
|
||||||
|
Object.keys(defaultToolbarButtons).forEach(
|
||||||
|
id => {
|
||||||
|
if (!UIUtil.isButtonEnabled(id))
|
||||||
|
return;
|
||||||
|
|
||||||
|
var button = defaultToolbarButtons[id];
|
||||||
|
|
||||||
|
if (button.sideContainerId
|
||||||
|
&& button.sideContainerId === containerId) {
|
||||||
|
UIUtil.buttonClick(button.id, "selected");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -68,26 +68,38 @@ export default {
|
||||||
VIDEO_DEVICE_CHANGED: "UI.video_device_changed",
|
VIDEO_DEVICE_CHANGED: "UI.video_device_changed",
|
||||||
AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
|
AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
|
||||||
AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
|
AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Notifies interested listeners that the follow-me feature is enabled or
|
* Notifies interested listeners that the follow-me feature is enabled or
|
||||||
* disabled.
|
* disabled.
|
||||||
*/
|
*/
|
||||||
FOLLOW_ME_ENABLED: "UI.follow_me_enabled",
|
FOLLOW_ME_ENABLED: "UI.follow_me_enabled",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Notifies that flipX property of the local video is changed.
|
* Notifies that flipX property of the local video is changed.
|
||||||
*/
|
*/
|
||||||
LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
|
LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
|
||||||
|
|
||||||
// An event which indicates that the resolution of a remote video has
|
// An event which indicates that the resolution of a remote video has
|
||||||
// changed.
|
// changed.
|
||||||
RESOLUTION_CHANGED: "UI.resolution_changed",
|
RESOLUTION_CHANGED: "UI.resolution_changed",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Notifies that the button "Go to webstore" is pressed on the dialog for
|
* Notifies that the button "Go to webstore" is pressed on the dialog for
|
||||||
* external extension installation.
|
* external extension installation.
|
||||||
*/
|
*/
|
||||||
OPEN_EXTENSION_STORE: "UI.open_extension_store",
|
OPEN_EXTENSION_STORE: "UI.open_extension_store",
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Notifies that the button "Cancel" is pressed on the dialog for
|
* Notifies that the button "Cancel" is pressed on the dialog for
|
||||||
* external extension installation.
|
* external extension installation.
|
||||||
*/
|
*/
|
||||||
EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled"
|
EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled",
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Notifies that the side toolbar container has been toggled. The actual
|
||||||
|
* event must contain the identifier of the container that has been toggled
|
||||||
|
* and information about toggle on or off.
|
||||||
|
*/
|
||||||
|
SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled"
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue