diff --git a/css/_drawer.scss b/css/_drawer.scss index fd142d51f..c4eaf8186 100644 --- a/css/_drawer.scss +++ b/css/_drawer.scss @@ -24,10 +24,9 @@ } .drawer-menu { - max-height: calc(80vh - 64px); background: #242528; border-radius: 16px 16px 0 0; - overflow-y: scroll; + overflow-y: auto; margin-bottom: env(safe-area-inset-bottom, 0); width: 100%; diff --git a/css/_reactions-menu.scss b/css/_reactions-menu.scss index 6d40b008c..94f23e3a8 100644 --- a/css/_reactions-menu.scss +++ b/css/_reactions-menu.scss @@ -8,12 +8,6 @@ padding: 16px; &.overflow { - width: auto; - padding-bottom: max(env(safe-area-inset-bottom, 0), 16px); - background-color: #141414; - box-shadow: none; - border-radius: 0; - position: relative; .toolbox-icon { width: 48px; diff --git a/react/features/reactions/components/web/ReactionsMenu.js b/react/features/reactions/components/web/ReactionsMenu.js index 7e5b45eaa..16ccb55eb 100644 --- a/react/features/reactions/components/web/ReactionsMenu.js +++ b/react/features/reactions/components/web/ReactionsMenu.js @@ -2,6 +2,7 @@ /* eslint-disable react/jsx-no-bind */ +import { withStyles } from '@material-ui/styles'; import React, { Component } from 'react'; import { bindActionCreators } from 'redux'; @@ -17,7 +18,7 @@ import { connect } from '../../../base/redux'; import { dockToolbox } from '../../../toolbox/actions.web'; import { addReactionToBuffer } from '../../actions.any'; import { toggleReactionsMenuVisibility } from '../../actions.web'; -import { REACTIONS } from '../../constants'; +import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../constants'; import ReactionButton from './ReactionButton'; @@ -43,6 +44,11 @@ type Props = { */ _raisedHand: boolean, + /** + * An object containing the CSS classes. + */ + classes: Object, + /** * The Redux Dispatch function. */ @@ -61,6 +67,21 @@ type Props = { declare var APP: Object; +const styles = theme => { + return { + overflow: { + width: 'auto', + paddingBottom: 'max(env(safe-area-inset-bottom, 0), 16px)', + backgroundColor: theme.palette.ui01, + boxShadow: 'none', + borderRadius: 0, + position: 'relative', + boxSizing: 'border-box', + height: `${REACTIONS_MENU_HEIGHT}px` + } + }; +}; + /** * Implements the reactions menu. * @@ -172,10 +193,10 @@ class ReactionsMenu extends Component { * @inheritdoc */ render() { - const { _raisedHand, t, overflowMenu, _isMobile } = this.props; + const { _raisedHand, t, overflowMenu, _isMobile, classes } = this.props; return ( -
+
{ this._getReactionButtons() }
@@ -233,4 +254,4 @@ function mapDispatchToProps(dispatch) { export default translate(connect( mapStateToProps, mapDispatchToProps -)(ReactionsMenu)); +)(withStyles(styles)(ReactionsMenu))); diff --git a/react/features/reactions/constants.js b/react/features/reactions/constants.js index f441b538f..318f72b71 100644 --- a/react/features/reactions/constants.js +++ b/react/features/reactions/constants.js @@ -9,6 +9,11 @@ import { SILENCE_SOUND_FILES } from './sounds'; +/** + * Reactions menu height on mobile web (px). + */ +export const REACTIONS_MENU_HEIGHT = 144; + /** * The payload name for the datachannel/endpoint reaction event. */ diff --git a/react/features/toolbox/components/web/Drawer.js b/react/features/toolbox/components/web/Drawer.js index c41714723..40f160ed2 100644 --- a/react/features/toolbox/components/web/Drawer.js +++ b/react/features/toolbox/components/web/Drawer.js @@ -3,6 +3,8 @@ import { makeStyles } from '@material-ui/core'; import React, { useCallback } from 'react'; +import { DRAWER_MAX_HEIGHT } from '../../constants'; + type Props = { @@ -25,7 +27,8 @@ type Props = { const useStyles = makeStyles(theme => { return { drawer: { - backgroundColor: theme.palette.ui02 + backgroundColor: theme.palette.ui02, + maxHeight: `calc(${DRAWER_MAX_HEIGHT})` } }; }); diff --git a/react/features/toolbox/components/web/Toolbox.js b/react/features/toolbox/components/web/Toolbox.js index 345b67cd3..f3ae3b5eb 100644 --- a/react/features/toolbox/components/web/Toolbox.js +++ b/react/features/toolbox/components/web/Toolbox.js @@ -42,7 +42,7 @@ import { ParticipantsPaneButton } from '../../../participants-pane/components/we import { getParticipantsPaneOpen } from '../../../participants-pane/functions'; import { addReactionToBuffer } from '../../../reactions/actions.any'; import { ReactionsMenuButton } from '../../../reactions/components'; -import { REACTIONS } from '../../../reactions/constants'; +import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../../reactions/constants'; import { isReactionsEnabled } from '../../../reactions/functions.any'; import { LiveStreamButton, @@ -75,7 +75,7 @@ import { setToolbarHovered, showToolbox } from '../../actions'; -import { THRESHOLDS, NOT_APPLICABLE } from '../../constants'; +import { THRESHOLDS, NOT_APPLICABLE, DRAWER_MAX_HEIGHT } from '../../constants'; import { isToolboxVisible } from '../../functions'; import DownloadButton from '../DownloadButton'; import HangupButton from '../HangupButton'; @@ -264,7 +264,9 @@ const styles = theme => { fontSize: 14, listStyleType: 'none', padding: '8px 0', - backgroundColor: theme.palette.ui03 + backgroundColor: theme.palette.ui03, + overflowY: 'auto', + height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)` } }; }; diff --git a/react/features/toolbox/constants.js b/react/features/toolbox/constants.js index b375061fa..3dcd48ec7 100644 --- a/react/features/toolbox/constants.js +++ b/react/features/toolbox/constants.js @@ -31,3 +31,5 @@ export const THRESHOLDS = [ export const NOT_APPLICABLE = 'N/A'; export const TOOLBAR_TIMEOUT = 4000; + +export const DRAWER_MAX_HEIGHT = '80vh - 64px';