haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes side toolbar container behavior

This commit is contained in:
yanas 2016-09-09 21:26:29 -05:00
parent b4c9816d9f
commit 50e803f1a0
7 changed files with 184 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/_contact_list.scss
View File

@ -28,6 +28,11 @@
padding: 7px 10px; padding: 7px 10px;
margin: 2px; margin: 2px;
&:hover,
&:active {
background: $toolbarSelectBackground;
}
> p { > p {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;

38
css/_toolbars.scss
View File

@ -79,7 +79,7 @@
position:absolute; position:absolute;
top: 0px; top: 0px;
left: $defaultToolbarSize; left: $defaultToolbarSize;
width:0%; width: 0%;
height: 100%; height: 100%;
max-width: 200px; max-width: 200px;
background-color: rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.8);
@ -145,7 +145,7 @@ a.button:active,
a.button.selected { a.button.selected {
cursor: pointer; cursor: pointer;
// sum opacity with background layer should give us 0.8 // sum opacity with background layer should give us 0.8
background: rgba(0, 0, 0, 0.6); background: $toolbarSelectBackground;
} }
a.button>#avatar { a.button>#avatar {
@ -163,7 +163,8 @@ a.button>#avatar {
* START of slide in animation for extended toolbar. * START of slide in animation for extended toolbar.
*/ */
@include keyframes(slideInX) { @include keyframes(slideInX) {
100% { transform: translateX(0%); } 0% { transform: translateX(-100%); }
100% { transform: translateX(0%); }
} }
.slideInX { .slideInX {
@ -171,13 +172,32 @@ a.button>#avatar {
} }
@include keyframes(slideOutX) { @include keyframes(slideOutX) {
0% { transform: translateX(0%); } 0% { transform: translateX(0%); }
100% { transform: translateX(-100%); } 100% { transform: translateX(-100%); }
} }
.slideOutX { .slideOutX {
@include animation('slideOutX .5s forwards'); @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. * END of slide out animation for extended toolbar.
*/ */
@ -209,8 +229,8 @@ a.button>#avatar {
* START of slide in animation for extended toolbar panel. * START of slide in animation for extended toolbar panel.
*/ */
@include keyframes(slideInExt) { @include keyframes(slideInExt) {
from { width: 0%; } from { width: 0px; }
to { width: 20%; } to { width: 200px; } // TO FIX: Make this value a percentage.
} }
.slideInExt { .slideInExt {
@ -218,8 +238,8 @@ a.button>#avatar {
} }
@include keyframes(slideOutExt) { @include keyframes(slideOutExt) {
from { width: 20%; } from { width: 200px; } // TO FIX: Make this value a percentage.
to { width: 0%; } to { width: 0px; }
} }
.slideOutExt { .slideOutExt {

5
css/_variables.scss
View File

@ -8,3 +8,8 @@ $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-seri
*/ */
$defaultToolbarSize: 50px; $defaultToolbarSize: 50px;
/**
* Miscellaneous.
*/
$toolbarSelectBackground: rgba(0, 0, 0, 0.6);

130
index.html
View File

@ -116,7 +116,7 @@
</span> </span>
</div> </div>
<div id="subject" class="hide"></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"> <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"/> <img id="avatar" src="images/avatar2.png"/>
</a> </a>
@ -133,6 +133,7 @@
</li> </li>
</ul> </ul>
</span> </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"> <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> <span id="numberOfParticipants"></span>
</a> </a>
@ -141,7 +142,6 @@
</a> </a>
<a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="right" style="display: none"></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-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 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"> <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"> <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-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 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> <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="videospace">
<div id="largeVideoContainer" class="videocontainer"> <div id="largeVideoContainer" class="videocontainer">
<div id="presentation"></div> <div id="presentation"></div>
@ -169,7 +230,7 @@
<canvas id="dominantSpeakerAudioLevel"></canvas> <canvas id="dominantSpeakerAudioLevel"></canvas>
</div> </div>
<div id="largeVideoWrapper"> <div id="largeVideoWrapper">
<video id="largeVideo" muted="true" autoplay></video> <video id="largeVideo" muted="true" preload="auto" autoplay></video>
</div> </div>
<span id="videoConnectionMessage"></span> <span id="videoConnectionMessage"></span>
<span id="videoResolutionLabel">HD</span> <span id="videoResolutionLabel">HD</span>
@ -191,67 +252,6 @@
<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="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>
<div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;"> <div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
<div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div> <div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div>

26
modules/UI/side_pannels/SideContainerToggler.js
View File

@ -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}. * otherwise returns {false}.
*/ */
isVisible() { 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() { hide() {
$("#sideToolbarContainer") $("#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() { show() {
if (!this.isVisible()) if (!this.isVisible())
@ -81,6 +89,12 @@ const SideContainerToggler = {
.removeClass("slideOutExt").addClass("slideInExt"); .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) { hideInnerContainer(containerSelector) {
containerSelector.removeClass("show").addClass("hide"); containerSelector.removeClass("show").addClass("hide");
@ -88,6 +102,12 @@ const SideContainerToggler = {
containerSelector.attr('id'), false); 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) { showInnerContainer(containerSelector) {
containerSelector.removeClass("hide").addClass("show"); containerSelector.removeClass("hide").addClass("show");

40
modules/UI/toolbars/Toolbar.js
View File

@ -298,8 +298,7 @@ const Toolbar = {
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED, APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
function(containerId, isVisible) { function(containerId, isVisible) {
console.log("TOGGLED", containerId, isVisible); Toolbar._handleSideToolbarContainerToggled( containerId,
Toolbar.handleSideToolbarContainerToggled( containerId,
isVisible); isVisible);
}); });
}, },
@ -544,7 +543,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
|| SideContainerToggler.isVisible()) { || SideContainerToggler.isHovered()) {
return true; return true;
} }
return false; return false;
@ -564,8 +563,16 @@ const Toolbar = {
*/ */
hide() { hide() {
this.toolbarSelector.toggleClass("slideInY").toggleClass("slideOutY"); 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")) if (this.toolbarSelector.hasClass("slideOutY"))
this.toolbarSelector.toggleClass("slideOutY"); this.toolbarSelector.toggleClass("slideOutY");
if (this.extendedToolbarSelector.hasClass("slideOutX")) let slideInAnimation = (SideContainerToggler.isVisible)
this.extendedToolbarSelector.toggleClass("slideOutX"); ? "slideInExtX"
: "slideInX";
let slideOutAnimation = (SideContainerToggler.isVisible)
? "slideOutExtX"
: "slideOutX";
if (this.extendedToolbarSelector.hasClass(slideOutAnimation))
this.extendedToolbarSelector.toggleClass(slideOutAnimation);
this.toolbarSelector.toggleClass("slideInY"); 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( Object.keys(defaultToolbarButtons).forEach(
id => { id => {
if (!UIUtil.isButtonEnabled(id)) if (!UIUtil.isButtonEnabled(id))

29
modules/UI/toolbars/ToolbarToggler.js
View File

@ -2,6 +2,7 @@
import UIUtil from '../util/UIUtil'; import UIUtil from '../util/UIUtil';
import Toolbar from './Toolbar'; import Toolbar from './Toolbar';
import SideContainerToggler from "../side_pannels/SideContainerToggler";
import FilmStrip from '../videolayout/FilmStrip.js'; import FilmStrip from '../videolayout/FilmStrip.js';
let toolbarTimeoutObject; let toolbarTimeoutObject;
@ -22,8 +23,11 @@ function showDesktopSharingButton() {
/** /**
* Hides the toolbar. * 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) { if (alwaysVisibleToolbar) {
return; return;
} }
@ -33,7 +37,7 @@ function hideToolbar() {
if (Toolbar.isHovered()) { if (Toolbar.isHovered()) {
toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout); toolbarTimeoutObject = setTimeout(hideToolbar, toolbarTimeout);
} else { } else if (!SideContainerToggler.isVisible() || force) {
Toolbar.hide(); Toolbar.hide();
$('#subject').animate({top: "-=40"}, 300); $('#subject').animate({top: "-=40"}, 300);
} }
@ -45,7 +49,26 @@ const ToolbarToggler = {
*/ */
init() { init() {
alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true); 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. * Sets the value of alwaysVisibleToolbar variable.
* @param value {boolean} the new value of alwaysVisibleToolbar variable * @param value {boolean} the new value of alwaysVisibleToolbar variable
@ -53,12 +76,14 @@ const ToolbarToggler = {
setAlwaysVisibleToolbar(value) { setAlwaysVisibleToolbar(value) {
alwaysVisibleToolbar = value; alwaysVisibleToolbar = value;
}, },
/** /**
* Resets the value of alwaysVisibleToolbar variable to the default one. * Resets the value of alwaysVisibleToolbar variable to the default one.
*/ */
resetAlwaysVisibleToolbar() { resetAlwaysVisibleToolbar() {
alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true); alwaysVisibleToolbar = (config.alwaysVisibleToolbar === true);
}, },
/** /**
* Shows the main toolbar. * Shows the main toolbar.
*/ */