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;
|
||||
user-select: text;
|
||||
}
|
||||
|
|
@ -16,8 +16,25 @@
|
|||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
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;
|
||||
}
|
||||
|
||||
|
|
@ -59,7 +76,7 @@
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
#chatspace.is-conversation-mode #usermsg {
|
||||
#chat_container.is-conversation-mode #usermsg {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
@ -74,7 +91,7 @@
|
|||
width: 95%;
|
||||
}
|
||||
|
||||
#chatspace.is-conversation-mode #nickname {
|
||||
#chat_container.is-conversation-mode #nickname {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -92,19 +109,19 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
#chatspace .username {
|
||||
#chat_container .username {
|
||||
float: left;
|
||||
padding-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#chatspace .timestamp {
|
||||
#chat_container .timestamp {
|
||||
float: right;
|
||||
padding-right: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#chatspace .usermessage {
|
||||
#chat_container .usermessage {
|
||||
padding-top: 20px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
|
@ -165,7 +182,7 @@
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
#chatspace.is-conversation-mode #smileysarea {
|
||||
#chat_container.is-conversation-mode #smileysarea {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
|
|
@ -221,20 +238,4 @@
|
|||
|
||||
#usermsg::-webkit-scrollbar-track-piece {
|
||||
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;
|
||||
|
||||
> ul#contacts {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#settingsmenu input, select {
|
||||
#settings_container input, select {
|
||||
margin-top: 10px;
|
||||
margin-left: 10%;
|
||||
width: 80%;
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
color: #a7a7a7;
|
||||
}
|
||||
|
||||
#settingsmenu .arrow-up {
|
||||
#settings_container .arrow-up {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5px solid transparent;
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
#settingsmenu #avatar {
|
||||
#settings_container #avatar {
|
||||
width: 24%;
|
||||
left: 38%;
|
||||
border-radius: 25px;
|
||||
|
|
|
|||
|
|
@ -43,16 +43,16 @@
|
|||
margin-right: auto;
|
||||
width: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#mainToolbar .first {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.first {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
#mainToolbar .last {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
.last {
|
||||
border-bottom-right-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#extendedToolbar {
|
||||
|
|
@ -74,7 +74,7 @@
|
|||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
|
||||
#extendedToolbarPanel {
|
||||
#sideToolbarContainer {
|
||||
display: inline-block;
|
||||
position:absolute;
|
||||
top: 0px;
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
z-index: 800;
|
||||
overflow: hidden;
|
||||
|
||||
.extendedToolbarPanel__inner {
|
||||
.sideToolbarContainer__inner {
|
||||
display: none;
|
||||
width: 200px;
|
||||
color: #FFF;
|
||||
|
|
@ -109,34 +109,6 @@
|
|||
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 {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
|
|
@ -145,61 +117,10 @@
|
|||
font-size: 11px;
|
||||
}
|
||||
|
||||
#contactListButton.active #numberOfParticipants {
|
||||
color: #21B9FC;
|
||||
}
|
||||
|
||||
#mainToolbar a.button:last-child::after {
|
||||
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 {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -220,9 +141,11 @@
|
|||
}
|
||||
|
||||
a.button:hover,
|
||||
a.bottomToolbarButton:hover {
|
||||
a.button:active,
|
||||
a.button.selected {
|
||||
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 {
|
||||
|
|
@ -236,6 +159,9 @@ a.button>#avatar {
|
|||
margin-top: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* START of slide in animation for extended toolbar.
|
||||
*/
|
||||
@include keyframes(slideInX) {
|
||||
100% { transform: translateX(0%); }
|
||||
}
|
||||
|
|
@ -252,7 +178,13 @@ a.button>#avatar {
|
|||
.slideOutX {
|
||||
@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) {
|
||||
100% { transform: translateY(0%); }
|
||||
}
|
||||
|
|
@ -269,7 +201,13 @@ a.button>#avatar {
|
|||
.slideOutY {
|
||||
@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) {
|
||||
from { width: 0%; }
|
||||
to { width: 20%; }
|
||||
|
|
@ -286,4 +224,7 @@ a.button>#avatar {
|
|||
|
||||
.slideOutExt {
|
||||
@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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="extendedToolbarPanel">
|
||||
<div id="chatspace" class="extendedToolbarPanel__inner">
|
||||
<div id="nickname">
|
||||
<span data-i18n="chat.nickname.title"></span>
|
||||
<form>
|
||||
<input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
|
||||
</form>
|
||||
</div>
|
||||
<div id="sideToolbarContainer">
|
||||
<div id="chat_container" class="sideToolbarContainer__inner">
|
||||
<div id="nickname">
|
||||
<span data-i18n="chat.nickname.title"></span>
|
||||
<form>
|
||||
<input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="chatconversation"></div>
|
||||
<audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
|
||||
<div id="chatconversation"></div>
|
||||
<audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
|
||||
<textarea id="usermsg" data-i18n="[placeholder]chat.messagebox" autofocus></textarea>
|
||||
<div id="smileysarea">
|
||||
<div id="smileys" id="toggle_smileys">
|
||||
<img src="images/smile.svg"/>
|
||||
<div id="smileysarea">
|
||||
<div id="smileys" id="toggle_smileys">
|
||||
<img src="images/smile.svg"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contactlist" class="extendedToolbarPanel__inner">
|
||||
<div class="title" data-i18n="contactlist"></div>
|
||||
<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 id="contacts_container" class="sideToolbarContainer__inner">
|
||||
<div class="title" data-i18n="contactlist"></div>
|
||||
<ul id="contacts"></ul>
|
||||
</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 id="settings_container" class="sideToolbarContainer__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 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 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 id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import Toolbar from "./toolbars/Toolbar";
|
|||
import ToolbarToggler from "./toolbars/ToolbarToggler";
|
||||
import ContactList from "./side_pannels/contactlist/ContactList";
|
||||
import Avatar from "./avatar/Avatar";
|
||||
import ExtendedToolbarToggler from "./side_pannels/ExtendedToolbarToggler";
|
||||
import SideContainerToggler from "./side_pannels/SideContainerToggler";
|
||||
import UIUtil from "./util/UIUtil";
|
||||
import UIEvents from "../../service/UI/UIEvents";
|
||||
import CQEvents from '../../service/connectionquality/CQEvents';
|
||||
|
|
@ -360,7 +360,7 @@ function registerListeners() {
|
|||
UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
|
||||
|
||||
UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
|
||||
ExtendedToolbarToggler.toggle("settingsmenu");
|
||||
SideContainerToggler.toggle("settings_container");
|
||||
});
|
||||
|
||||
UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
|
||||
|
|
@ -378,7 +378,7 @@ function registerListeners() {
|
|||
*/
|
||||
function bindEvents() {
|
||||
function onResize() {
|
||||
ExtendedToolbarToggler.resize();
|
||||
SideContainerToggler.resize();
|
||||
}
|
||||
|
||||
// Resize and reposition videos in full screen mode.
|
||||
|
|
@ -427,7 +427,7 @@ UI.start = function () {
|
|||
registerListeners();
|
||||
|
||||
ToolbarToggler.init();
|
||||
ExtendedToolbarToggler.init();
|
||||
SideContainerToggler.init(eventEmitter);
|
||||
FilmStrip.init(eventEmitter);
|
||||
|
||||
VideoLayout.init(eventEmitter);
|
||||
|
|
@ -716,14 +716,14 @@ UI.isFilmStripVisible = function () {
|
|||
* Toggles chat panel.
|
||||
*/
|
||||
UI.toggleChat = function () {
|
||||
ExtendedToolbarToggler.toggle("chatspace");
|
||||
SideContainerToggler.toggle("chat_container");
|
||||
};
|
||||
|
||||
/**
|
||||
* Toggles contact list panel.
|
||||
*/
|
||||
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);
|
||||
}
|
||||
|
||||
$("#chatspace").append(smileysContainer);
|
||||
$("#chat_container").append(smileysContainer);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -131,7 +131,7 @@ function addSmileys() {
|
|||
*/
|
||||
function resizeChatConversation() {
|
||||
var msgareaHeight = $('#usermsg').outerHeight();
|
||||
var chatspace = $('#chatspace');
|
||||
var chatspace = $('#chat_container');
|
||||
var width = chatspace.width();
|
||||
var chat = $('#chatconversation');
|
||||
var smileys = $('#smileysarea');
|
||||
|
|
@ -187,7 +187,7 @@ var Chat = {
|
|||
};
|
||||
usermsg.autosize({callback: onTextAreaResize});
|
||||
|
||||
$("#chatspace").bind("shown",
|
||||
$("#chat_container").bind("shown",
|
||||
function () {
|
||||
unreadMessages = 0;
|
||||
setVisualNotification(false);
|
||||
|
|
@ -275,7 +275,8 @@ var Chat = {
|
|||
* conversation mode or not.
|
||||
*/
|
||||
setChatConversationMode (isConversationMode) {
|
||||
$('#chatspace').toggleClass('is-conversation-mode', isConversationMode);
|
||||
$('#chat_container')
|
||||
.toggleClass('is-conversation-mode', isConversationMode);
|
||||
if (isConversationMode) {
|
||||
$('#usermsg').focus();
|
||||
}
|
||||
|
|
@ -285,7 +286,7 @@ var Chat = {
|
|||
* Resizes the chat area.
|
||||
*/
|
||||
resizeChat (width, height) {
|
||||
$('#chatspace').width(width).height(height);
|
||||
$('#chat_container').width(width).height(height);
|
||||
|
||||
resizeChatConversation();
|
||||
},
|
||||
|
|
@ -294,7 +295,8 @@ var Chat = {
|
|||
* Indicates if the chat is currently visible.
|
||||
*/
|
||||
isVisible () {
|
||||
return UIUtil.isVisible(document.getElementById("chatspace"));
|
||||
return UIUtil.isVisible(
|
||||
document.getElementById("chat_container"));
|
||||
},
|
||||
/**
|
||||
* Shows and hides the window with the smileys
|
||||
|
|
|
|||
|
|
@ -23,11 +23,7 @@ function updateNumberOfParticipants(delta) {
|
|||
let buttonIndicatorText = (numberOfContacts === 1) ? '' : numberOfContacts;
|
||||
$("#numberOfParticipants").text(buttonIndicatorText);
|
||||
|
||||
let showVisualNotification
|
||||
= (numberOfContacts === 1) ? false : !ContactList.isVisible();
|
||||
ContactList.setVisualNotification(showVisualNotification);
|
||||
|
||||
$("#contactlist>div.title").text(
|
||||
$("#contacts_container>div.title").text(
|
||||
APP.translation.translateString(
|
||||
"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) {
|
||||
getContactEl(id).toggleClass('clickable', isClickable);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ export default {
|
|||
* @returns {boolean}
|
||||
*/
|
||||
isVisible () {
|
||||
return UIUtil.isVisible(document.getElementById("settingsmenu"));
|
||||
return UIUtil.isVisible(document.getElementById("settings_container"));
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -290,6 +290,6 @@ export default {
|
|||
|
||||
$('#devicesOptions').show();
|
||||
|
||||
APP.translation.translateElement($('#settingsmenu option'));
|
||||
APP.translation.translateElement($('#settings_container option'));
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
/* jshint -W101 */
|
||||
import UIUtil from '../util/UIUtil';
|
||||
import UIEvents from '../../../service/UI/UIEvents';
|
||||
import ExtendedToolbarToggler from "../side_pannels/ExtendedToolbarToggler.js";
|
||||
import SideContainerToggler from "../side_pannels/SideContainerToggler";
|
||||
|
||||
let roomUrl = null;
|
||||
let emitter = null;
|
||||
|
|
@ -208,10 +208,12 @@ const defaultToolbarButtons = {
|
|||
JitsiMeetJS.analytics.sendEvent('shortcut.chat.toggled');
|
||||
APP.UI.toggleChat();
|
||||
},
|
||||
shortcutDescription: "keyboardShortcuts.toggleChat"
|
||||
shortcutDescription: "keyboardShortcuts.toggleChat",
|
||||
sideContainerId: "chat_container"
|
||||
},
|
||||
'contacts': {
|
||||
id: '#toolbar_contact_list'
|
||||
id: '#toolbar_contact_list',
|
||||
sideContainerId: "contacts_container"
|
||||
},
|
||||
'etherpad': {
|
||||
id: '#toolbar_button_etherpad'
|
||||
|
|
@ -220,7 +222,8 @@ const defaultToolbarButtons = {
|
|||
id: '#toolbar_button_fullScreen'
|
||||
},
|
||||
'settings': {
|
||||
id: '#toolbar_button_settings'
|
||||
id: '#toolbar_button_settings',
|
||||
sideContainerId: "settings_container"
|
||||
},
|
||||
'hangup': {
|
||||
id: '#toolbar_button_hangup'
|
||||
|
|
@ -292,6 +295,13 @@ const Toolbar = {
|
|||
!$(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.
|
||||
|
|
@ -534,7 +544,7 @@ const Toolbar = {
|
|||
return true;
|
||||
if ($("#bottomToolbar:hover").length > 0
|
||||
|| $("#extendedToolbar:hover").length > 0
|
||||
|| ExtendedToolbarToggler.isVisible()) {
|
||||
|| SideContainerToggler.isVisible()) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
|
@ -571,6 +581,25 @@ const Toolbar = {
|
|||
|
||||
this.toolbarSelector.toggleClass("slideInY");
|
||||
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",
|
||||
AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
|
||||
AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
|
||||
|
||||
/**
|
||||
* Notifies interested listeners that the follow-me feature is enabled or
|
||||
* disabled.
|
||||
*/
|
||||
FOLLOW_ME_ENABLED: "UI.follow_me_enabled",
|
||||
|
||||
/**
|
||||
* Notifies that flipX property of the local video is changed.
|
||||
*/
|
||||
LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
|
||||
|
||||
// An event which indicates that the resolution of a remote video has
|
||||
// changed.
|
||||
RESOLUTION_CHANGED: "UI.resolution_changed",
|
||||
|
||||
/**
|
||||
* Notifies that the button "Go to webstore" is pressed on the dialog for
|
||||
* external extension installation.
|
||||
*/
|
||||
OPEN_EXTENSION_STORE: "UI.open_extension_store",
|
||||
|
||||
/**
|
||||
* Notifies that the button "Cancel" is pressed on the dialog for
|
||||
* 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