Fixes side toolbar container behavior
This commit is contained in:
yanas
parent
b4c9816d9f
commit
50e803f1a0
|
|
@ -28,6 +28,11 @@
|
|||
padding: 7px 10px;
|
||||
margin: 2px;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background: $toolbarSelectBackground;
|
||||
}
|
||||
|
||||
> p {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
position:absolute;
|
||||
top: 0px;
|
||||
left: $defaultToolbarSize;
|
||||
width:0%;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
max-width: 200px;
|
||||
background-color: rgba(0,0,0,0.8);
|
||||
|
|
@ -145,7 +145,7 @@ a.button:active,
|
|||
a.button.selected {
|
||||
cursor: pointer;
|
||||
// sum opacity with background layer should give us 0.8
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
background: $toolbarSelectBackground;
|
||||
}
|
||||
|
||||
a.button>#avatar {
|
||||
|
|
@ -163,7 +163,8 @@ a.button>#avatar {
|
|||
* START of slide in animation for extended toolbar.
|
||||
*/
|
||||
@include keyframes(slideInX) {
|
||||
100% { transform: translateX(0%); }
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(0%); }
|
||||
}
|
||||
|
||||
.slideInX {
|
||||
|
|
@ -171,13 +172,32 @@ a.button>#avatar {
|
|||
}
|
||||
|
||||
@include keyframes(slideOutX) {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
|
||||
.slideOutX {
|
||||
@include animation('slideOutX .5s forwards');
|
||||
}
|
||||
|
||||
@include keyframes(slideInExtX) {
|
||||
0% { transform: translateX(-500%); }
|
||||
100% { transform: translateX(0%); }
|
||||
}
|
||||
|
||||
.slideInExtX {
|
||||
@include animation('slideInExtX .5s forwards');
|
||||
}
|
||||
|
||||
@include keyframes(slideOutExtX) {
|
||||
0% { transform: translateX(0%); }
|
||||
100% { transform: translateX(-500%); }
|
||||
}
|
||||
|
||||
.slideOutExtX {
|
||||
@include animation('slideOutExtX .5s forwards');
|
||||
}
|
||||
|
||||
/**
|
||||
* END of slide out animation for extended toolbar.
|
||||
*/
|
||||
|
|
@ -209,8 +229,8 @@ a.button>#avatar {
|
|||
* START of slide in animation for extended toolbar panel.
|
||||
*/
|
||||
@include keyframes(slideInExt) {
|
||||
from { width: 0%; }
|
||||
to { width: 20%; }
|
||||
from { width: 0px; }
|
||||
to { width: 200px; } // TO FIX: Make this value a percentage.
|
||||
}
|
||||
|
||||
.slideInExt {
|
||||
|
|
@ -218,8 +238,8 @@ a.button>#avatar {
|
|||
}
|
||||
|
||||
@include keyframes(slideOutExt) {
|
||||
from { width: 20%; }
|
||||
to { width: 0%; }
|
||||
from { width: 200px; } // TO FIX: Make this value a percentage.
|
||||
to { width: 0px; }
|
||||
}
|
||||
|
||||
.slideOutExt {
|
||||
|
|
|
|||
|
|
@ -8,3 +8,8 @@ $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-seri
|
|||
*/
|
||||
$defaultToolbarSize: 50px;
|
||||
|
||||
/**
|
||||
* Miscellaneous.
|
||||
*/
|
||||
$toolbarSelectBackground: rgba(0, 0, 0, 0.6);
|
||||
|
||||
|
|
|
|||
130
index.html
130
index.html
|
|
@ -116,7 +116,7 @@
|
|||
</span>
|
||||
</div>
|
||||
<div id="subject" class="hide"></div>
|
||||
<span id="extendedToolbar" class="toolbar">
|
||||
<div id="extendedToolbar" class="toolbar">
|
||||
<a class="button" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile">
|
||||
<img id="avatar" src="images/avatar2.png"/>
|
||||
</a>
|
||||
|
|
@ -133,6 +133,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
<a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.invite" content="Invite others"></a>
|
||||
<a class="button icon-contactList" id="toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="right" shortcut="contactlistpopover" data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
|
||||
<span id="numberOfParticipants"></span>
|
||||
</a>
|
||||
|
|
@ -141,7 +142,6 @@
|
|||
</a>
|
||||
<a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="right" style="display: none"></a>
|
||||
<a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
|
||||
<a class="button icon-link" id="toolbar_button_link" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.invite" content="Invite others"></a>
|
||||
<a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="right" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
|
||||
<a class="button fa fa-share-alt-square" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="right" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
|
||||
<ul id="sharedVideoMutedPopup" class="loginmenu">
|
||||
|
|
@ -153,7 +153,68 @@
|
|||
<a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="right" content="Settings" data-i18n="[content]toolbar.Settings"></a>
|
||||
<a class="button icon-filmstrip" id="toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="right" data-i18n="[content]toolbar.filmstrip" content="Show / hide videos"></a>
|
||||
<a class="button fa fa-heart" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>
|
||||
</span>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contacts_container" class="sideToolbarContainer__inner">
|
||||
<div class="title" data-i18n="contactlist"></div>
|
||||
<ul id="contacts"></ul>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div id="videospace">
|
||||
<div id="largeVideoContainer" class="videocontainer">
|
||||
<div id="presentation"></div>
|
||||
|
|
@ -169,7 +230,7 @@
|
|||
<canvas id="dominantSpeakerAudioLevel"></canvas>
|
||||
</div>
|
||||
<div id="largeVideoWrapper">
|
||||
<video id="largeVideo" muted="true" autoplay></video>
|
||||
<video id="largeVideo" muted="true" preload="auto" autoplay></video>
|
||||
</div>
|
||||
<span id="videoConnectionMessage"></span>
|
||||
<span id="videoResolutionLabel">HD</span>
|
||||
|
|
@ -191,67 +252,6 @@
|
|||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||
</div>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contacts_container" class="sideToolbarContainer__inner">
|
||||
<div class="title" data-i18n="contactlist"></div>
|
||||
<ul id="contacts"></ul>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
|
||||
<div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const SideContainerToggler = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Returns {true} if the extended toolbar panel is currently visible,
|
||||
* Returns {true} if the side toolbar panel is currently visible,
|
||||
* otherwise returns {false}.
|
||||
*/
|
||||
isVisible() {
|
||||
|
|
@ -65,7 +65,15 @@ const SideContainerToggler = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Hides the extended toolbar panel with a slide out animation.
|
||||
* Returns {true} if the side toolbar panel is currently hovered and
|
||||
* {false} otherwise.
|
||||
*/
|
||||
isHovered() {
|
||||
return $("#sideToolbarContainer:hover").length > 0;
|
||||
},
|
||||
|
||||
/**
|
||||
* Hides the side toolbar panel with a slide out animation.
|
||||
*/
|
||||
hide() {
|
||||
$("#sideToolbarContainer")
|
||||
|
|
@ -73,7 +81,7 @@ const SideContainerToggler = {
|
|||
},
|
||||
|
||||
/**
|
||||
* Shows the extended toolbar panel with a slide in animation.
|
||||
* Shows the side toolbar panel with a slide in animation.
|
||||
*/
|
||||
show() {
|
||||
if (!this.isVisible())
|
||||
|
|
@ -81,6 +89,12 @@ const SideContainerToggler = {
|
|||
.removeClass("slideOutExt").addClass("slideInExt");
|
||||
},
|
||||
|
||||
/**
|
||||
* Hides the inner container given by the selector.
|
||||
*
|
||||
* @param {Object} containerSelector the jquery selector for the
|
||||
* element to hide
|
||||
*/
|
||||
hideInnerContainer(containerSelector) {
|
||||
containerSelector.removeClass("show").addClass("hide");
|
||||
|
||||
|
|
@ -88,6 +102,12 @@ const SideContainerToggler = {
|
|||
containerSelector.attr('id'), false);
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows the inner container given by the selector.
|
||||
*
|
||||
* @param {Object} containerSelector the jquery selector for the
|
||||
* element to show
|
||||
*/
|
||||
showInnerContainer(containerSelector) {
|
||||
containerSelector.removeClass("hide").addClass("show");
|
||||
|
||||
|
|
|
|||
|
|
@ -298,8 +298,7 @@ const Toolbar = {
|
|||
|
||||
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||
function(containerId, isVisible) {
|
||||
console.log("TOGGLED", containerId, isVisible);
|
||||
Toolbar.handleSideToolbarContainerToggled( containerId,
|
||||
Toolbar._handleSideToolbarContainerToggled( containerId,
|
||||
isVisible);
|
||||
});
|
||||
},
|
||||
|
|
@ -544,7 +543,7 @@ const Toolbar = {
|
|||
return true;
|
||||
if ($("#bottomToolbar:hover").length > 0
|
||||
|| $("#extendedToolbar:hover").length > 0
|
||||
|| SideContainerToggler.isVisible()) {
|
||||
|| SideContainerToggler.isHovered()) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
|
@ -564,8 +563,16 @@ const Toolbar = {
|
|||
*/
|
||||
hide() {
|
||||
this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY");
|
||||
this.extendedToolbarSelector.toggleClass("slideInX")
|
||||
.toggleClass("slideOutX");
|
||||
|
||||
let slideInAnimation = (SideContainerToggler.isVisible)
|
||||
? "slideInExtX"
|
||||
: "slideInX";
|
||||
let slideOutAnimation = (SideContainerToggler.isVisible)
|
||||
? "slideOutExtX"
|
||||
: "slideOutX";
|
||||
|
||||
this.extendedToolbarSelector.toggleClass(slideInAnimation)
|
||||
.toggleClass(slideOutAnimation);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
@ -576,17 +583,30 @@ const Toolbar = {
|
|||
if (this.toolbarSelector.hasClass("slideOutY"))
|
||||
this.toolbarSelector.toggleClass("slideOutY");
|
||||
|
||||
if (this.extendedToolbarSelector.hasClass("slideOutX"))
|
||||
this.extendedToolbarSelector.toggleClass("slideOutX");
|
||||
let slideInAnimation = (SideContainerToggler.isVisible)
|
||||
? "slideInExtX"
|
||||
: "slideInX";
|
||||
let slideOutAnimation = (SideContainerToggler.isVisible)
|
||||
? "slideOutExtX"
|
||||
: "slideOutX";
|
||||
|
||||
if (this.extendedToolbarSelector.hasClass(slideOutAnimation))
|
||||
this.extendedToolbarSelector.toggleClass(slideOutAnimation);
|
||||
|
||||
this.toolbarSelector.toggleClass("slideInY");
|
||||
this.extendedToolbarSelector.toggleClass("slideInX");
|
||||
this.extendedToolbarSelector.toggleClass(slideInAnimation);
|
||||
},
|
||||
|
||||
registerClickListeners(listener) {
|
||||
$('#mainToolbarContainer').click(listener);
|
||||
|
||||
$("#extendedToolbar").click(listener);
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* Handles the side toolbar toggle.
|
||||
*/
|
||||
handleSideToolbarContainerToggled(containerId, isVisible) {
|
||||
_handleSideToolbarContainerToggled(containerId, isVisible) {
|
||||
Object.keys(defaultToolbarButtons).forEach(
|
||||
id => {
|
||||
if (!UIUtil.isButtonEnabled(id))
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
import UIUtil from '../util/UIUtil';
|
||||
import Toolbar from './Toolbar';
|
||||
import SideContainerToggler from "../side_pannels/SideContainerToggler";
|
||||
import FilmStrip from '../videolayout/FilmStrip.js';
|
||||
|
||||
let toolbarTimeoutObject;
|
||||
|
|
@ -22,8 +23,11 @@ function showDesktopSharingButton() {
|
|||
|
||||
/**
|
||||
* Hides the toolbar.
|
||||
*
|
||||
* @param force {true} to force the hiding of the toolbar without caring about
|
||||
* the extended toolbar side panels.
|
||||
*/
|
||||
function hideToolbar() {
|
||||
function hideToolbar(force) {
|
||||
if (alwaysVisibleToolbar) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -33,7 +37,7 @@ function hideToolbar() {
|
|||
|
||||
if (Toolbar.isHovered()) {
|
||||
toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
|
||||
} else {
|
||||
} else if (!SideContainerToggler.isVisible() || force) {
|
||||
Toolbar.hide();
|
||||
$('#subject').animate({top: "-=40"}, 300);
|
||||
}
|
||||
|
|
@ -45,7 +49,26 @@ const ToolbarToggler = {
|
|||
*/
|
||||
init() {
|
||||
alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true);
|
||||
|
||||
this._registerWindowClickListeners();
|
||||
},
|
||||
|
||||
/**
|
||||
* Registers click listeners handling the show and hode of toolbars when
|
||||
* user clicks outside of toolbar area.
|
||||
*/
|
||||
_registerWindowClickListeners() {
|
||||
$(window).click(function() {
|
||||
(Toolbar.isEnabled() && Toolbar.isVisible())
|
||||
? hideToolbar(true)
|
||||
: this.showToolbar();
|
||||
}.bind(this));
|
||||
|
||||
Toolbar.registerClickListeners(function(event){
|
||||
event.stopPropagation();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the value of alwaysVisibleToolbar variable.
|
||||
* @param value {boolean} the new value of alwaysVisibleToolbar variable
|
||||
|
|
@ -53,12 +76,14 @@ const ToolbarToggler = {
|
|||
setAlwaysVisibleToolbar(value) {
|
||||
alwaysVisibleToolbar = value;
|
||||
},
|
||||
|
||||
/**
|
||||
* Resets the value of alwaysVisibleToolbar variable to the default one.
|
||||
*/
|
||||
resetAlwaysVisibleToolbar() {
|
||||
alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true);
|
||||
},
|
||||
|
||||
/**
|
||||
* Shows the main toolbar.
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue