From c2ad06c5e63be8a5475e3dc933a527b3a34edb41 Mon Sep 17 00:00:00 2001 From: Vlad Piersec Date: Fri, 12 Mar 2021 14:19:04 +0200 Subject: [PATCH] fix(toolbox): Restructure items order for desktop & mobile --- css/_toolbars.scss | 17 +++++ .../toolbox/components/web/Toolbox.js | 21 +++++- react/features/toolbox/functions.web.js | 71 +++++++++++++------ 3 files changed, 86 insertions(+), 23 deletions(-) diff --git a/css/_toolbars.scss b/css/_toolbars.scss index 5f3803220e..773cd32bb1 100644 --- a/css/_toolbars.scss +++ b/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%; + } + } +} diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js index fcf9b0cd92..aa3f7047df 100644 --- a/react/features/toolbox/components/web/Toolbox.js +++ b/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 { * @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 { const { _feedbackConfigured, _fullScreen, + _isMobile, _screensharing, t } = this.props; @@ -963,6 +972,7 @@ class Toolbox extends Component { key = 'videoquality' onClick = { this._onToolbarOpenVideoQuality } />, this._shouldShowButton('fullscreen') + && !_isMobile && { key = 'settings' showLabel = { true } />, this._shouldShowButton('shortcuts') + && !_isMobile && { */ _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 ( -
+
{ 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), diff --git a/react/features/toolbox/functions.web.js b/react/features/toolbox/functions.web.js index 9433b4aa47..ca1f59222a 100644 --- a/react/features/toolbox/functions.web.js +++ b/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 { - 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 { + let buttons = []; - return new Set([ 'overflow' ]); - } - - return new Set([ 'chat', 'tileview', 'overflow' ]); - } - - return new Set([ 'chat', 'raisehand', 'tileview', 'overflow' ]); + switch (true) { + case width >= WIDTH.FIT_9_ICONS: { + buttons = isMobile + ? [ 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ] + : [ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]; + break; } - return new Set([ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]); + 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; + } + + case width >= WIDTH.FIT_6_ICONS: { + buttons = [ 'chat', 'invite', 'overflow' ]; + break; + } + + case width >= WIDTH.FIT_5_ICONS: { + buttons = [ 'chat', 'overflow' ]; + break; + } + + case width >= WIDTH.FIT_4_ICONS: { + buttons = isMobile + ? [ 'chat', 'overflow' ] + : [ 'overflow' ]; + break; + } + + default: { + buttons = isMobile + ? [ 'chat', 'overflow' ] + : []; + } + } + + return new Set(buttons); } /**