From 9641dbf3730f16c7214b9708a251c1c8f79a3729 Mon Sep 17 00:00:00 2001
From: yanas <yana@jitsi.org>
Date: Fri, 14 Oct 2016 15:27:08 -0500
Subject: [PATCH] Adds toolbar splitter button

---
 css/_toolbars.scss             | 13 +++++++++++++
 css/_variables.scss            |  7 +------
 interface_config.js            |  1 +
 modules/UI/toolbars/Toolbar.js | 12 +++++++++---
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/css/_toolbars.scss b/css/_toolbars.scss
index 22fbea927..f8d000e2f 100644
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -44,15 +44,28 @@
     width: auto;
     border-radius: 3px;
 
+    /**
+     * First button in the toolbar.
+     */
     .first {
         border-bottom-left-radius: 3px;
         border-top-left-radius: 3px;
     }
 
+    /**
+     * Last button in the toolbar.
+     */
     .last {
         border-bottom-right-radius: 3px;
         border-top-right-radius: 3px;
     }
+
+    /**
+     * Splitter button in the toolbar.
+     */
+    .splitter {
+        margin-left: $splitterToolbarButtonLeftMargin;
+    }
 }
 
 #extendedToolbar {
diff --git a/css/_variables.scss b/css/_variables.scss
index df3bbe913..f3b6a3751 100644
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,8 +1,3 @@
-/**
-* Theme
-*/
-@import 'themes/light';
-
 /**
  * Style variables
  */
@@ -33,10 +28,10 @@ $tooltipBg: rgba(0,0,0, 0.7);
 
 // Toolbar
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
-
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
 $toolbarToggleBackground: #12499C;
+$splitterToolbarButtonLeftMargin: 0px;
 
 // Main controls
 $inputSemiBackground: rgba(132, 132, 132, .8);
diff --git a/interface_config.js b/interface_config.js
index 876e048a3..c0dbecf94 100644
--- a/interface_config.js
+++ b/interface_config.js
@@ -20,6 +20,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     // the toolbar buttons line is intentionally left in one line, to be able
     // to easily override values or remove them using regex
     MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
+    MAIN_TOOLBAR_SPLITTER_INDEX: -1,
     TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
     SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
     // Determines how the video would fit the screen. 'both' would fit the whole
diff --git a/modules/UI/toolbars/Toolbar.js b/modules/UI/toolbars/Toolbar.js
index a36cc10d4..bb7a00720 100644
--- a/modules/UI/toolbars/Toolbar.js
+++ b/modules/UI/toolbars/Toolbar.js
@@ -710,7 +710,10 @@ Toolbar = {
                 this._addMainToolbarButton(
                     button,
                     (index === 0),
-                    (index === interfaceConfig.MAIN_TOOLBAR_BUTTONS.length -1));
+                    (index === interfaceConfig.MAIN_TOOLBAR_BUTTONS.length -1),
+                    (interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX
+                        && index
+                            === interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX));
             }
         });
     },
@@ -723,13 +726,16 @@ Toolbar = {
      * toolbar
      * @param {boolean} isLast indicates if this is the last button in the
      * toolbar
+     * @param {boolean} isSplitter if this button is a splitter button for
+     * the dialog, which means that a special splitter style will be applied
      */
-    _addMainToolbarButton(button, isFirst, isLast) {
+    _addMainToolbarButton(button, isFirst, isLast, isSplitter) {
         let buttonElement = document.createElement("a");
         if (button.className)
             buttonElement.className = button.className
                                     + ((isFirst) ? " first" : "")
-                                    + ((isLast) ? " last" : "");
+                                    + ((isLast) ? " last" : "")
+                                    + ((isSplitter) ? " splitter": "");
 
         buttonElement.id = button.id;