rn,remote-video-menu: make UI consistent with other menus
This commit is contained in:
parent
44d7828e9c
commit
f9888e5dbb
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import React, { PureComponent } from 'react';
|
||||
import { Text, View } from 'react-native';
|
||||
|
||||
import { Avatar } from '../../../base/avatar';
|
||||
|
@ -68,7 +68,7 @@ let RemoteVideoMenu_;
|
|||
/**
|
||||
* Class to implement a popup menu that opens upon long pressing a thumbnail.
|
||||
*/
|
||||
class RemoteVideoMenu extends Component<Props> {
|
||||
class RemoteVideoMenu extends PureComponent<Props> {
|
||||
/**
|
||||
* Constructor of the component.
|
||||
*
|
||||
|
@ -78,6 +78,7 @@ class RemoteVideoMenu extends Component<Props> {
|
|||
super(props);
|
||||
|
||||
this._onCancel = this._onCancel.bind(this);
|
||||
this._renderMenuHeader = this._renderMenuHeader.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -94,32 +95,15 @@ class RemoteVideoMenu extends Component<Props> {
|
|||
styles: this.props._bottomSheetStyles.buttons
|
||||
};
|
||||
|
||||
const buttons = [];
|
||||
|
||||
if (!_disableRemoteMute) {
|
||||
buttons.push(<MuteButton { ...buttonProps } />);
|
||||
}
|
||||
|
||||
buttons.push(<GrantModeratorButton { ...buttonProps } />);
|
||||
|
||||
if (!_disableKick) {
|
||||
buttons.push(<KickButton { ...buttonProps } />);
|
||||
}
|
||||
|
||||
buttons.push(<PinButton { ...buttonProps } />);
|
||||
buttons.push(<PrivateMessageButton { ...buttonProps } />);
|
||||
|
||||
return (
|
||||
<BottomSheet onCancel = { this._onCancel }>
|
||||
<View style = { styles.participantNameContainer }>
|
||||
<Avatar
|
||||
participantId = { participant.id }
|
||||
size = { AVATAR_SIZE } />
|
||||
<Text style = { styles.participantNameLabel }>
|
||||
{ this.props._participantDisplayName }
|
||||
</Text>
|
||||
</View>
|
||||
{ buttons }
|
||||
<BottomSheet
|
||||
onCancel = { this._onCancel }
|
||||
renderHeader = { this._renderMenuHeader }>
|
||||
{ !_disableRemoteMute && <MuteButton { ...buttonProps } /> }
|
||||
{ !_disableKick && <KickButton { ...buttonProps } /> }
|
||||
<GrantModeratorButton { ...buttonProps } />
|
||||
<PinButton { ...buttonProps } />
|
||||
<PrivateMessageButton { ...buttonProps } />
|
||||
</BottomSheet>
|
||||
);
|
||||
}
|
||||
|
@ -141,6 +125,31 @@ class RemoteVideoMenu extends Component<Props> {
|
|||
|
||||
return false;
|
||||
}
|
||||
|
||||
_renderMenuHeader: () => React$Element<any>;
|
||||
|
||||
/**
|
||||
* Function to render the menu's header.
|
||||
*
|
||||
* @returns {React$Element}
|
||||
*/
|
||||
_renderMenuHeader() {
|
||||
const { _bottomSheetStyles, participant } = this.props;
|
||||
|
||||
return (
|
||||
<View
|
||||
style = { [
|
||||
_bottomSheetStyles.sheet,
|
||||
styles.participantNameContainer ] }>
|
||||
<Avatar
|
||||
participantId = { participant.id }
|
||||
size = { AVATAR_SIZE } />
|
||||
<Text style = { styles.participantNameLabel }>
|
||||
{ this.props._participantDisplayName }
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -10,10 +10,13 @@ import { ColorPalette, createStyleSheet } from '../../../base/styles';
|
|||
export default createStyleSheet({
|
||||
participantNameContainer: {
|
||||
alignItems: 'center',
|
||||
borderBottomColor: ColorPalette.darkGrey,
|
||||
borderBottomColor: ColorPalette.lightGrey,
|
||||
borderBottomWidth: 1,
|
||||
borderTopLeftRadius: 16,
|
||||
borderTopRightRadius: 16,
|
||||
flexDirection: 'row',
|
||||
height: MD_ITEM_HEIGHT
|
||||
height: MD_ITEM_HEIGHT,
|
||||
paddingLeft: MD_ITEM_MARGIN_PADDING
|
||||
},
|
||||
|
||||
participantNameLabel: {
|
||||
|
|
Loading…
Reference in New Issue