Rename side panels and implement toggle/untoggle policy

css/_chat.scss

@@ -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;
 }

css/_contact_list.scss

@@ -1,4 +1,4 @@
-#contactlist {
+#contacts_container {
     cursor: default;
 
     > ul#contacts {

css/_settingsmenu.scss

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

css/_toolbars.scss

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

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>
-            <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="contacts_container" class="sideToolbarContainer__inner">
+                <div class="title" data-i18n="contactlist"></div>
+                <ul id="contacts"></ul>
             </div>
-            <div id="followMeOptions">
-                <label class = "followMeLabel">
-                    <input type="checkbox" id="followMeCheckBox">
-                    <span  data-i18n="settings.followMe"></span>
-                </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>
-            <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;">

modules/UI/UI.js

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

modules/UI/side_pannels/ExtendedToolbarToggler.js

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

modules/UI/side_pannels/SideContainerToggler.js

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

modules/UI/side_pannels/chat/Chat.js

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

modules/UI/side_pannels/contactlist/ContactList.js

@@ -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);
     },

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -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'));
     }
 };

modules/UI/toolbars/Toolbar.js

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

service/UI/UIEvents.js

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