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

feat(toolbox): Redesign mobile toolbox

This commit is contained in:
Vlad Piersec 2021-03-10 15:06:56 +02:00 committed by Saúl Ibarra Corretgé
parent b86c271a80
commit c508572cc5
14 changed files with 153 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/features/base/color-scheme/defaultScheme.js
View File

@ -55,6 +55,6 @@ export default {
button: 'rgb(255, 255, 255)',
buttonToggled: 'rgb(38, 58, 76)',
buttonToggledBorder: getRGBAFormat('#a4b8d1', 0.6),
hangup: 'rgb(225, 45, 45)'
hangup: 'rgb(227,79,86)'
}
};

1
react/features/base/styles/components/styles/ColorPalette.js
View File

@ -23,6 +23,7 @@ export const ColorPalette = {
blueHighlight: '#1081b2',
buttonUnderlay: '#495258',
darkGrey: '#555555',
darkBackground: 'rgb(19,21,25)',
green: '#40b183',
lightGrey: '#AAAAAA',
overflowMenuItemUnderlay: '#EEEEEE',

0
react/features/base/toolbox/components/_.native.js Normal file
View File

3
react/features/base/toolbox/components/_.web.js Normal file
View File

@ -0,0 +1,3 @@
// @flow
export * from './web';

3
react/features/base/toolbox/components/index.js
View File

@ -6,5 +6,4 @@ export type { Props as AbstractButtonProps } from './AbstractButton';
export { default as AbstractHangupButton } from './AbstractHangupButton';
export { default as AbstractVideoMuteButton } from './AbstractVideoMuteButton';
export { default as BetaTag } from './BetaTag';
export { default as OverflowMenuItem } from './OverflowMenuItem';
export { default as ToolboxButtonWithIcon } from './ToolboxButtonWithIcon';
export * from './_';

4
react/features/base/toolbox/components/OverflowMenuItem.web.js → react/features/base/toolbox/components/web/OverflowMenuItem.js
View File

@ -2,8 +2,8 @@
import React, { Component } from 'react';
import { Icon } from '../../icons';
import { Tooltip } from '../../tooltip';
import { Icon } from '../../../icons';
import { Tooltip } from '../../../tooltip';
/**
* The type of the React {@code Component} props of {@link OverflowMenuItem}.

4
react/features/base/toolbox/components/ToolboxButtonWithIcon.js → react/features/base/toolbox/components/web/ToolboxButtonWithIcon.js
View File

@ -2,8 +2,8 @@
import React from 'react';
import { Icon } from '../../icons';
import { Tooltip } from '../../tooltip';
import { Icon } from '../../../icons';
import { Tooltip } from '../../../tooltip';
type Props = {

119
react/features/base/toolbox/components/web/ToolboxItem.js Normal file
View File

@ -0,0 +1,119 @@
// @flow
import React, { Fragment } from 'react';
import { Icon } from '../../../icons';
import { Tooltip } from '../../../tooltip';
import AbstractToolboxItem from '../AbstractToolboxItem';
import type { Props } from '../AbstractToolboxItem';
/**
* Web implementation of {@code AbstractToolboxItem}.
*/
export default class ToolboxItem extends AbstractToolboxItem<Props> {
/**
* Initializes a new {@code ToolboxItem} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this._onKeyDown = this._onKeyDown.bind(this);
}
_onKeyDown: (Object) => void;
/**
* Handles 'Enter' key on the button to trigger onClick for accessibility.
* We should be handling Space onKeyUp but it conflicts with PTT.
*
* @param {Object} event - The key event.
* @private
* @returns {void}
*/
_onKeyDown(event) {
// If the event coming to the dialog has been subject to preventDefault
// we don't handle it here.
if (event.defaultPrevented) {
return;
}
if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
this.props.onClick();
}
}
/**
* Handles rendering of the actual item. If the label is being shown, which
* is controlled with the `showLabel` prop, the item is rendered for its
* display in an overflow menu, otherwise it will only have an icon, which
* can be displayed on any toolbar.
*
* @protected
* @returns {ReactElement}
*/
_renderItem() {
const {
disabled,
elementAfter,
onClick,
showLabel,
tooltipPosition,
toggled
} = this.props;
const className = showLabel ? 'overflow-menu-item' : 'toolbox-button';
const props = {
'aria-pressed': toggled,
'aria-disabled': disabled,
'aria-label': this.accessibilityLabel,
className: className + (disabled ? ' disabled' : ''),
onClick: disabled ? undefined : onClick,
onKeyDown: this._onKeyDown,
tabIndex: 0,
role: 'button'
};
const elementType = showLabel ? 'li' : 'div';
const useTooltip = this.tooltip && this.tooltip.length > 0;
let children = (
<Fragment>
{ this._renderIcon() }
{ showLabel && <span>
{ this.label }
</span> }
{ elementAfter }
</Fragment>
);
if (useTooltip) {
children = (
<Tooltip
content = { this.tooltip }
position = { tooltipPosition }>
{ children }
</Tooltip>
);
}
return React.createElement(elementType, props, children);
}
/**
* Helper function to render the item's icon.
*
* @private
* @returns {ReactElement}
*/
_renderIcon() {
const { customClass, disabled, icon, showLabel, toggled } = this.props;
const iconComponent = <Icon src = { icon } />;
const elementType = showLabel ? 'span' : 'div';
const className = `${showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon'} ${
toggled ? 'toggled' : ''} ${disabled ? 'disabled' : ''} ${customClass ?? ''}`;
return React.createElement(elementType, { className }, iconComponent);
}
}

4
react/features/base/toolbox/components/web/index.js Normal file
View File

@ -0,0 +1,4 @@
// @flow
export { default as OverflowMenuItem } from './OverflowMenuItem';
export { default as ToolboxButtonWithIcon } from './ToolboxButtonWithIcon';

15
react/features/conference/components/native/Conference.js
View File

@ -310,21 +310,10 @@ class Conference extends AbstractConference<Props, *> {
<LonelyMeetingExperience />
{/*
* The Toolbox is in a stacking layer below the Filmstrip.
*/}
{ _shouldDisplayTileView ? undefined : <Filmstrip /> }
<Toolbox />
{/*
* The Filmstrip is in a stacking layer above the
* LargeVideo. The LargeVideo and the Filmstrip form what
* the Web/React app calls "videospace". Presumably, the
* name and grouping stem from the fact that these two
* React Components depict the videos of the conference's
* participants.
*/
_shouldDisplayTileView ? undefined : <Filmstrip />
}
</SafeAreaView>
<SafeAreaView

1
react/features/conference/components/native/styles.js
View File

@ -164,7 +164,6 @@ export default {
flexDirection: 'column',
justifyContent: 'flex-end',
left: 0,
paddingBottom: BoxModel.padding,
position: 'absolute',
right: 0,

2
react/features/display-name/components/native/styles.js
View File

@ -5,7 +5,7 @@ import { ColorPalette } from '../../../base/styles';
export default {
displayNameBackdrop: {
alignSelf: 'center',
backgroundColor: 'rgba(28, 32, 37, 0.6)',
backgroundColor: ColorPalette.darkBackground,
borderRadius: 4,
paddingHorizontal: 16,
paddingVertical: 4

18
react/features/toolbox/components/native/Toolbox.js
View File

@ -97,27 +97,27 @@ class Toolbox extends PureComponent<Props> {
*/
_renderToolbar() {
const { _styles } = this.props;
const { buttonStyles, buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
const { buttonStylesBorderless, hangupButtonStyles, toggledButtonStyles } = _styles;
return (
<View
accessibilityRole = 'toolbar'
pointerEvents = 'box-none'
style = { styles.toolbar }>
<AudioMuteButton
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
<VideoMuteButton
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
<ChatButton
styles = { buttonStylesBorderless }
toggledStyles = { this._getChatButtonToggledStyle(toggledButtonStyles) } />
<AudioMuteButton
styles = { buttonStyles }
toggledStyles = { toggledButtonStyles } />
<HangupButton
styles = { hangupButtonStyles } />
<VideoMuteButton
styles = { buttonStyles }
toggledStyles = { toggledButtonStyles } />
<OverflowMenuButton
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
<HangupButton
styles = { hangupButtonStyles } />
</View>
);
}

25
react/features/toolbox/components/native/styles.js
View File

@ -3,7 +3,7 @@
import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
import { BoxModel, ColorPalette } from '../../../base/styles';
const BUTTON_SIZE = 50;
const BUTTON_SIZE = 48;
// Toolbox, toolbar:
@ -11,8 +11,7 @@ const BUTTON_SIZE = 50;
* The style of toolbar buttons.
*/
const toolbarButton = {
backgroundColor: schemeColor('button'),
borderRadius: BUTTON_SIZE / 2,
borderRadius: 3,
borderWidth: 0,
flex: 0,
flexDirection: 'row',
@ -31,16 +30,9 @@ const toolbarButton = {
const toolbarButtonIcon = {
alignSelf: 'center',
color: ColorPalette.darkGrey,
fontSize: 22
fontSize: 24
};
/**
* The style of toolbar buttons which display white icons.
*/
const whiteToolbarButton = {
...toolbarButton,
backgroundColor: schemeColor('buttonToggled')
};
/**
* The icon style of toolbar buttons which display white icons.
@ -72,11 +64,12 @@ const styles = {
*/
toolbar: {
alignItems: 'center',
backgroundColor: ColorPalette.darkBackground,
flexDirection: 'row',
flexGrow: 0,
justifyContent: 'center',
marginBottom: BoxModel.margin / 2,
paddingHorizontal: BoxModel.margin
justifyContent: 'space-between',
paddingHorizontal: BoxModel.margin,
paddingVertical: 8
},
/**
@ -135,9 +128,7 @@ ColorSchemeRegistry.register('Toolbox', {
toggledButtonStyles: {
iconStyle: whiteToolbarButtonIcon,
style: {
...whiteToolbarButton,
borderColor: schemeColor('buttonToggledBorder'),
borderWidth: 1
...toolbarButton
}
}
});