Merge pull request #1019 from jitsi/add-toolbar-splitter-button

Adds toolbar splitter button

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 {

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

interface_config.js

@@ -20,6 +20,12 @@ 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
+    /**
+     * The index of the splitter button in the main toolbar. The splitter
+     * button is a button in the toolbar that will be applied a special styling
+     * visually dividing the toolbar buttons.
+     */
+    //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

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 !== undefined
+                        && 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;