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

This commit is contained in:
Vlad Piersec 2021-03-12 14:19:04 +02:00 committed by vp8x8
parent e40b02ab3c
commit c2ad06c5e6
3 changed files with 86 additions and 23 deletions

View File

@ -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%;
}
}
}

View File

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

View File

@ -4,36 +4,67 @@ import { getToolbarButtons } from '../base/config';
import { hasAvailableDevices } from '../base/devices'; import { hasAvailableDevices } from '../base/devices';
const WIDTH = { const WIDTH = {
MEDIUM: 500, FIT_9_ICONS: 520,
SMALL: 390, FIT_8_ICONS: 470,
VERY_SMALL: 332, FIT_7_ICONS: 420,
NARROW: 224 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} width - The width of the screen.
* @param {number} isMobile - The device is a mobile one.
* @returns {Set} The button set. * @returns {Set} The button set.
*/ */
export function getToolbarAdditionalButtons(width: number): Set<string> { export function getToolbarAdditionalButtons(width: number, isMobile: boolean): Set<string> {
if (width <= WIDTH.MEDIUM) { let buttons = [];
if (width <= WIDTH.SMALL) {
if (width <= WIDTH.VERY_SMALL) {
if (width <= WIDTH.NARROW) {
return new Set();
}
return new Set([ 'overflow' ]); switch (true) {
} case width >= WIDTH.FIT_9_ICONS: {
buttons = isMobile
return new Set([ 'chat', 'tileview', 'overflow' ]); ? [ 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ]
} : [ 'desktop', 'chat', 'raisehand', 'tileview', 'invite', 'overflow' ];
break;
return new Set([ 'chat', 'raisehand', 'tileview', 'overflow' ]);
} }
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);
} }
/** /**