Fixes side toolbar container behavior

css/_contact_list.scss

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

css/_toolbars.scss

@@ -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 {

css/_variables.scss

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

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>

modules/UI/side_pannels/SideContainerToggler.js

@@ -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");
 

modules/UI/toolbars/Toolbar.js

@@ -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))

modules/UI/toolbars/ToolbarToggler.js

@@ -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.
      */