fix(toolbox): Restructure items order for desktop & mobile

css/_toolbars.scss

@@ -292,3 +292,20 @@
     }
 
 }
+
+/**
+ * On small mobile devices make the toolbar full width.
+ */
+.toolbox-content-mobile {
+    @media (max-width: 500px) {
+        margin-bottom: 0;
+
+        .toolbox-content-items {
+            border-radius: 0;
+            display: flex;
+            justify-content: space-evenly;
+            padding: 6px 0;
+            width: 100%;
+        }
+    }
+}

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

@@ -10,6 +10,7 @@ import {
 } from '../../../analytics';
 import { getToolbarButtons } from '../../../base/config';
 import { openDialog, toggleDialog } from '../../../base/dialog';
+import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
 import {
     IconChat,
@@ -127,6 +128,11 @@ type Props = {
      */
     _fullScreen: boolean,
 
+    /**
+     * Whether or not the app is running in mobile browser.
+     */
+    _isMobile: boolean,
+
     /**
      * Whether or not the profile is disabled.
      */
@@ -928,7 +934,9 @@ class Toolbox extends Component<Props, State> {
      * @returns {boolean}
      */
     _isEmbedMeetingVisible() {
-        return !this.props._isVpaasMeeting && this._shouldShowButton('embedmeeting');
+        return !this.props._isVpaasMeeting
+            && !this.props._isMobile
+            && this._shouldShowButton('embedmeeting');
     }
 
     /**
@@ -951,6 +959,7 @@ class Toolbox extends Component<Props, State> {
         const {
             _feedbackConfigured,
             _fullScreen,
+            _isMobile,
             _screensharing,
             t
         } = this.props;
@@ -963,6 +972,7 @@ class Toolbox extends Component<Props, State> {
                     key = 'videoquality'
                     onClick = { this._onToolbarOpenVideoQuality } />,
             this._shouldShowButton('fullscreen')
+                && !_isMobile
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.fullScreen') }
                     icon = { _fullScreen ? IconExitFullScreen : IconFullScreen }
@@ -1049,6 +1059,7 @@ class Toolbox extends Component<Props, State> {
                     key = 'settings'
                     showLabel = { true } />,
             this._shouldShowButton('shortcuts')
+                && !_isMobile
                 && <OverflowMenuItem
                     accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
                     icon = { IconDeviceDocument }
@@ -1228,22 +1239,25 @@ class Toolbox extends Component<Props, State> {
      */
     _renderToolboxContent() {
         const {
+            _isMobile,
             _overflowMenuVisible,
             t
         } = this.props;
 
-        const buttonSet = getToolbarAdditionalButtons(this.state.windowWidth);
+        const buttonSet = getToolbarAdditionalButtons(this.state.windowWidth, _isMobile);
         const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
         const showOverflowMenuButton = buttonSet.has('overflow');
+        const containerClassName = `toolbox-content${_isMobile ? ' toolbox-content-mobile' : ''}`;
         let overflowMenuAdditionalButtons = [];
         let mainMenuAdditionalButtons = [];
 
+
         if (showOverflowMenuButton) {
             ({ overflowMenuAdditionalButtons, mainMenuAdditionalButtons } = this._getAdditionalButtons(buttonSet));
         }
 
         return (
-            <div className = 'toolbox-content'>
+            <div className = { containerClassName }>
                 <div className = 'toolbox-content-items'>
                     { this._renderAudioButton() }
                     { this._renderVideoButton() }
@@ -1322,6 +1336,7 @@ function _mapStateToProps(state) {
         _dialog: Boolean(state['features/base/dialog'].component),
         _feedbackConfigured: Boolean(callStatsID),
         _isProfileDisabled: Boolean(state['features/base/config'].disableProfile),
+        _isMobile: isMobileBrowser(),
         _isVpaasMeeting: isVpaasMeeting(state),
         _fullScreen: fullScreen,
         _tileViewEnabled: shouldDisplayTileView(state),

react/features/toolbox/functions.web.js

@@ -4,36 +4,67 @@ import { getToolbarButtons } from '../base/config';
 import { hasAvailableDevices } from '../base/devices';
 
 const WIDTH = {
-    MEDIUM: 500,
-    SMALL: 390,
-    VERY_SMALL: 332,
-    NARROW: 224
+    FIT_9_ICONS: 520,
+    FIT_8_ICONS: 470,
+    FIT_7_ICONS: 420,
+    FIT_6_ICONS: 370,
+    FIT_5_ICONS: 320,
+    FIT_4_ICONS: 280
 };
 
 /**
- * Returns a set of button names to be displayed in the toolbox, based on the screen width.
+ * Returns a set of button names to be displayed in the toolbox, based on the screen width and platform.
  *
  * @param {number} width - The width of the screen.
+ * @param {number} isMobile - The device is a mobile one.
  * @returns {Set} The button set.
  */
-export function getToolbarAdditionalButtons(width: number): Set<string> {
-    if (width <= WIDTH.MEDIUM) {
-        if (width <= WIDTH.SMALL) {
-            if (width <= WIDTH.VERY_SMALL) {
-                if (width <= WIDTH.NARROW) {
-                    return new Set();
-                }
+export function getToolbarAdditionalButtons(width: number, isMobile: boolean): Set<string> {
+    let buttons = [];
+
+    switch (true) {
+    case width >= WIDTH.FIT_9_ICONS: {
+        buttons = isMobile
+            ? [ 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]
+            : [ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ];
+        break;
+    }
+
+    case width >= WIDTH.FIT_8_ICONS: {
+        buttons = [ 'desktop', 'chat', 'raisehand', 'invite', 'overflow' ];
+        break;
+    }
+
+    case width >= WIDTH.FIT_7_ICONS: {
+        buttons = [ 'desktop', 'chat', 'invite', 'overflow' ];
+        break;
+    }
 
-                return new Set([ 'overflow' ]);
-            }
+    case width >= WIDTH.FIT_6_ICONS: {
+        buttons = [ 'chat', 'invite', 'overflow' ];
+        break;
+    }
 
-            return new Set([ 'chat', 'tileview', 'overflow' ]);
-        }
+    case width >= WIDTH.FIT_5_ICONS: {
+        buttons = [ 'chat', 'overflow' ];
+        break;
+    }
 
-        return new Set([ 'chat', 'raisehand', 'tileview', 'overflow' ]);
+    case width >= WIDTH.FIT_4_ICONS: {
+        buttons = isMobile
+            ? [ 'chat', 'overflow' ]
+            : [ 'overflow' ];
+        break;
+    }
+
+    default: {
+        buttons = isMobile
+            ? [ 'chat', 'overflow' ]
+            : [];
+    }
     }
 
-    return new Set([ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]);
+    return new Set(buttons);
 }
 
 /**