Remove primary toolbar splitter (#1811)

css/themes/_light.scss

@@ -94,7 +94,6 @@ $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
 $secondaryToolbarBg: rgba(0, 0, 0, 0.5);
 // TOFIX: Once moved to react rename to match the side panel class name.
 $sideToolbarContainerBg: rgba(0, 0, 0, 0.75);
-$splitterColor: #ccc;
 $toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;

interface_config.js

@@ -27,12 +27,6 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
      * If we should show authentication block in profile
      */
     AUTHENTICATION_ENABLE: true,
-    /**
-     * 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,
     /**
      * the toolbar buttons line is intentionally left in one line, to be able
      * to easily override values or remove them using regex

react/features/toolbox/components/PrimaryToolbar.web.js

@@ -30,28 +30,6 @@ class PrimaryToolbar extends Component {
 
     state: Object;
 
-    /**
-     * Constructs instance of primary toolbar React component.
-     *
-     * @param {Object} props - React component's properties.
-     */
-    constructor(props) {
-        super(props);
-
-        const splitterIndex = interfaceConfig.MAIN_TOOLBAR_SPLITTER_INDEX;
-
-        this.state = {
-
-            /**
-             * If deployment supports toolbar splitter this value contains its
-             * index.
-             *
-             * @type {number}
-             */
-            splitterIndex
-        };
-    }
-
     /**
      * Renders primary toolbar component.
      *
@@ -67,7 +45,6 @@ class PrimaryToolbar extends Component {
             return null;
         }
 
-        const { splitterIndex } = this.state;
         const { primaryToolbarClassName } = getToolbarClassNames(this.props);
         const tooltipPosition
             = interfaceConfig.filmStripOnly ? 'left' : 'bottom';
@@ -75,7 +52,6 @@ class PrimaryToolbar extends Component {
         return (
             <Toolbar
                 className = { primaryToolbarClassName }
-                splitterIndex = { splitterIndex }
                 toolbarButtons = { _primaryToolbarButtons }
                 tooltipPosition = { tooltipPosition } />
         );

react/features/toolbox/components/Toolbar.web.js

@@ -44,12 +44,6 @@ class Toolbar extends Component {
          */
         className: React.PropTypes.string,
 
-        /**
-         * If the toolbar requires splitter this property defines splitter
-         * index.
-         */
-        splitterIndex: React.PropTypes.number,
-
         /**
          * Map with toolbar buttons.
          */
@@ -105,12 +99,11 @@ class Toolbar extends Component {
      * @param {Array} acc - Toolbar buttons array.
      * @param {Array} keyValuePair - Key value pair containing button and its
      * key.
-     * @param {number} index - Index of the key value pair in the array.
      * @private
-     * @returns {Array} Array of toolbar buttons and splitter if it's on.
+     * @returns {Array} Array of toolbar buttons.
      */
-    _renderToolbarButton(acc: Array<*>, keyValuePair: Array<*>,
-                         index: number): Array<ReactElement<*>> {
+    _renderToolbarButton(acc: Array<*>,
+                         keyValuePair: Array<*>): Array<ReactElement<*>> {
         const [ key, button ] = keyValuePair;
 
         if (button.component) {
@@ -123,13 +116,7 @@ class Toolbar extends Component {
             return acc;
         }
 
-        const { splitterIndex, tooltipPosition } = this.props;
-
-        if (splitterIndex && index === splitterIndex) {
-            const splitter = <span className = 'toolbar__splitter' />;
-
-            acc.push(splitter);
-        }
+        const { tooltipPosition } = this.props;
 
         const { onClick, onMount, onUnmount } = button;