Skip to content

Commit

Permalink
[RN] Implement a new UI for the Toolbox
Browse files Browse the repository at this point in the history
- 5 buttons in the (now single) toolbar
- Overflow menu in the form of a BottomSheet
- Filmstrip on the right when in wide mode
  • Loading branch information
saghul authored and lyubomir committed May 16, 2018
1 parent c344a83 commit f54f5df
Show file tree
Hide file tree
Showing 9 changed files with 407 additions and 307 deletions.
5 changes: 5 additions & 0 deletions react/features/base/toolbox/components/AbstractToolboxItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ export type Styles = {
*/
iconStyle: Object,

/**
* Style for te item's label.
*/
labelStyle: Object,

/**
* Style for the item itself.
*/
Expand Down
47 changes: 40 additions & 7 deletions react/features/base/toolbox/components/ToolboxItem.native.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @flow

import React from 'react';
import { TouchableHighlight } from 'react-native';
import { Text, TouchableHighlight, View } from 'react-native';

import { Icon } from '../../../base/font-icons';

Expand All @@ -26,9 +26,23 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
}

/**
* Handles rendering of the actual item.
* Helper function to render the {@code Icon} part of this item.
*
* TODO: currently no handling for labels is implemented.
* @private
* @returns {ReactElement}
*/
_renderIcon() {
const { styles } = this.props;

return (
<Icon
name = { this._getIconName() }
style = { styles && styles.iconStyle } />
);
}

/**
* Handles rendering of the actual item.
*
* @protected
* @returns {ReactElement}
Expand All @@ -38,19 +52,38 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
accessibilityLabel,
disabled,
onClick,
showLabel,
styles
} = this.props;

let children;

if (showLabel) {
// eslint-disable-next-line no-extra-parens
children = (
<View style = { styles && styles.style } >
{ this._renderIcon() }
<Text style = { styles && styles.labelStyle } >
{ this.label }
</Text>
</View>
);
} else {
children = this._renderIcon();
}

// When using a wrapper view, apply the style to it instead of
// applying it to the TouchableHighlight.
const style = showLabel ? undefined : styles && styles.style;

return (
<TouchableHighlight
accessibilityLabel = { accessibilityLabel }
disabled = { disabled }
onPress = { onClick }
style = { styles && styles.style }
style = { style }
underlayColor = { styles && styles.underlayColor } >
<Icon
name = { this._getIconName() }
style = { styles && styles.iconStyle } />
{ children }
</TouchableHighlight>
);
}
Expand Down
2 changes: 1 addition & 1 deletion react/features/filmstrip/components/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export default {
...filmstrip,
bottom: 0,
flexDirection: 'column',
left: 0,
position: 'absolute',
right: 0,
top: 0
},

Expand Down
91 changes: 91 additions & 0 deletions react/features/toolbox/components/native/OverflowMenu.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
// @flow

import React, { Component } from 'react';
import { connect } from 'react-redux';

import { hideDialog, BottomSheet } from '../../../base/dialog';
import { AudioRouteButton } from '../../../mobile/audio-mode';
import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
import { RoomLockButton } from '../../../room-lock';

import AudioOnlyButton from './AudioOnlyButton';
import ToggleCameraButton from './ToggleCameraButton';

import { overflowMenuItemStyles } from './styles';

type Props = {

/**
* Used for hiding the dialog when the selection was completed.
*/
dispatch: Function,
};

/**
* The exported React {@code Component}. We need a reference to the wrapped
* component in order to be able to hide it using the dialog hiding logic.
*/

// eslint-disable-next-line prefer-const
let OverflowMenu_;

/**
* Implements a React {@code Component} with some extra actions in addition to
* those in the toolbar.
*/
class OverflowMenu extends Component<Props> {
/**
* Initializes a new {@code OverflowMenu} instance.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);

this._onCancel = this._onCancel.bind(this);
}

/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
return (
<BottomSheet onCancel = { this._onCancel }>
<AudioRouteButton
showLabel = { true }
styles = { overflowMenuItemStyles } />
<ToggleCameraButton
showLabel = { true }
styles = { overflowMenuItemStyles } />
<AudioOnlyButton
showLabel = { true }
styles = { overflowMenuItemStyles } />
<RoomLockButton
showLabel = { true }
styles = { overflowMenuItemStyles } />
<PictureInPictureButton
showLabel = { true }
styles = { overflowMenuItemStyles } />
</BottomSheet>
);
}

_onCancel: () => void;

/**
* Hides the dialog.
*
* @private
* @returns {void}
*/
_onCancel() {
this.props.dispatch(hideDialog(OverflowMenu_));
}
}

OverflowMenu_ = connect()(OverflowMenu);

export default OverflowMenu_;
39 changes: 39 additions & 0 deletions react/features/toolbox/components/native/OverflowMenuButton.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// @flow

import { connect } from 'react-redux';

import { openDialog } from '../../../base/dialog';
import { translate } from '../../../base/i18n';
import { AbstractButton } from '../../../base/toolbox';
import type { AbstractButtonProps } from '../../../base/toolbox';

import OverflowMenu from './OverflowMenu';

type Props = AbstractButtonProps & {

/**
* The redux {@code dispatch} function.
*/
dispatch: Function
}

/**
* An implementation of a button for showing the {@code OverflowMenu}.
*/
class OverflowMenuButton extends AbstractButton<Props, *> {
accessibilityLabel = 'Overflow menu';
iconName = 'icon-thumb-menu';
label = 'toolbar.moreActions';

/**
* Handles clicking / pressing the button.
*
* @private
* @returns {void}
*/
_handleClick() {
this.props.dispatch(openDialog(OverflowMenu));
}
}

export default translate(connect()(OverflowMenuButton));
62 changes: 0 additions & 62 deletions react/features/toolbox/components/native/ToolbarButton.js

This file was deleted.

Loading

0 comments on commit f54f5df

Please sign in to comment.