haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
css/_toolbars.scss
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%;
}
}
}

21
react/features/toolbox/components/web/Toolbox.js
View File

@ -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),

71
react/features/toolbox/functions.web.js
View File

@ -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 = [];
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);
}
/**