Fixes toolbar tooltip positioning
This commit is contained in:
parent
77b789e26a
commit
2ffef3bdda
|
@ -6,8 +6,8 @@ import { connect } from 'react-redux';
|
|||
import UIEvents from '../../../../service/UI/UIEvents';
|
||||
|
||||
import { showDesktopSharingButton, toggleFullScreen } from '../actions';
|
||||
import Toolbar from './Toolbar';
|
||||
import { getToolbarClassNames } from '../functions';
|
||||
import Toolbar from './Toolbar';
|
||||
|
||||
declare var APP: Object;
|
||||
declare var interfaceConfig: Object;
|
||||
|
@ -19,8 +19,6 @@ declare var interfaceConfig: Object;
|
|||
* @extends Component
|
||||
*/
|
||||
class PrimaryToolbar extends Component {
|
||||
state: Object;
|
||||
|
||||
static propTypes = {
|
||||
/**
|
||||
* Handler for toggling fullscreen mode.
|
||||
|
@ -43,6 +41,8 @@ class PrimaryToolbar extends Component {
|
|||
_visible: React.PropTypes.bool
|
||||
};
|
||||
|
||||
state: Object;
|
||||
|
||||
/**
|
||||
* Constructs instance of primary toolbar React component.
|
||||
*
|
||||
|
@ -68,10 +68,12 @@ class PrimaryToolbar extends Component {
|
|||
*/
|
||||
fullscreen: {
|
||||
onMount: () =>
|
||||
APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED,
|
||||
APP.UI.addListener(
|
||||
UIEvents.FULLSCREEN_TOGGLED,
|
||||
this.props._onFullScreenToggled),
|
||||
onUnmount: () =>
|
||||
APP.UI.removeListener(UIEvents.FULLSCREEN_TOGGLED,
|
||||
APP.UI.removeListener(
|
||||
UIEvents.FULLSCREEN_TOGGLED,
|
||||
this.props._onFullScreenToggled)
|
||||
}
|
||||
};
|
||||
|
@ -105,21 +107,24 @@ class PrimaryToolbar extends Component {
|
|||
const { _primaryToolbarButtons } = this.props;
|
||||
|
||||
// The number of buttons to show in the toolbar isn't fixed, it depends
|
||||
// on availability of features and configuration parameters, so if we
|
||||
// don't have anything to render we exit here.
|
||||
// on the availability of features and configuration parameters. So
|
||||
// there may be nothing to render.
|
||||
if (_primaryToolbarButtons.size === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { buttonHandlers, splitterIndex } = this.state;
|
||||
const { primaryToolbarClassName } = getToolbarClassNames(this.props);
|
||||
const tooltipPosition
|
||||
= interfaceConfig.filmStripOnly ? 'left' : 'bottom';
|
||||
|
||||
return (
|
||||
<Toolbar
|
||||
buttonHandlers = { buttonHandlers }
|
||||
className = { primaryToolbarClassName }
|
||||
splitterIndex = { splitterIndex }
|
||||
toolbarButtons = { _primaryToolbarButtons } />
|
||||
toolbarButtons = { _primaryToolbarButtons }
|
||||
tooltipPosition = { tooltipPosition } />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -129,7 +134,7 @@ class PrimaryToolbar extends Component {
|
|||
*
|
||||
* @param {Function} dispatch - Redux action dispatcher.
|
||||
* @returns {{
|
||||
* _onShowDesktopSharingButton: Function
|
||||
* _onShowDesktopSharingButton: Function
|
||||
* }}
|
||||
* @private
|
||||
*/
|
||||
|
@ -162,8 +167,8 @@ function _mapDispatchToProps(dispatch: Function): Object {
|
|||
*
|
||||
* @param {Object} state - Snapshot of Redux store.
|
||||
* @returns {{
|
||||
* _primaryToolbarButtons: Map,
|
||||
* _visible: boolean
|
||||
* _primaryToolbarButtons: Map,
|
||||
* _visible: boolean
|
||||
* }}
|
||||
* @private
|
||||
*/
|
||||
|
@ -177,7 +182,7 @@ function _mapStateToProps(state: Object): Object {
|
|||
/**
|
||||
* Default toolbar buttons for primary toolbar.
|
||||
*
|
||||
* @protected
|
||||
* @private
|
||||
* @type {Map}
|
||||
*/
|
||||
_primaryToolbarButtons: primaryToolbarButtons,
|
||||
|
@ -185,7 +190,7 @@ function _mapStateToProps(state: Object): Object {
|
|||
/**
|
||||
* Shows whether toolbox is visible.
|
||||
*
|
||||
* @protected
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
_visible: visible
|
||||
|
|
|
@ -12,8 +12,8 @@ import {
|
|||
showRecordingButton,
|
||||
toggleSideToolbarContainer
|
||||
} from '../actions';
|
||||
import Toolbar from './Toolbar';
|
||||
import { getToolbarClassNames } from '../functions';
|
||||
import Toolbar from './Toolbar';
|
||||
|
||||
declare var APP: Object;
|
||||
declare var config: Object;
|
||||
|
@ -79,10 +79,9 @@ class SecondaryToolbar extends Component {
|
|||
* @type {Object}
|
||||
*/
|
||||
profile: {
|
||||
onMount: () => {
|
||||
onMount: () =>
|
||||
APP.tokenData.isGuest
|
||||
|| this.props._onSetProfileButtonUnclickable(true);
|
||||
}
|
||||
|| this.props._onSetProfileButtonUnclickable(true)
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -91,14 +90,14 @@ class SecondaryToolbar extends Component {
|
|||
* @type {button}
|
||||
*/
|
||||
raisehand: {
|
||||
onMount: () => {
|
||||
APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
|
||||
this.props._onLocalRaiseHandChanged);
|
||||
},
|
||||
onUnmount: () => {
|
||||
APP.UI.removeListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
|
||||
this.props._onLocalRaiseHandChanged);
|
||||
}
|
||||
onMount: () =>
|
||||
APP.UI.addListener(
|
||||
UIEvents.LOCAL_RAISE_HAND_CHANGED,
|
||||
this.props._onLocalRaiseHandChanged),
|
||||
onUnmount: () =>
|
||||
APP.UI.removeListener(
|
||||
UIEvents.LOCAL_RAISE_HAND_CHANGED,
|
||||
this.props._onLocalRaiseHandChanged)
|
||||
},
|
||||
|
||||
/**
|
||||
|
@ -107,11 +106,9 @@ class SecondaryToolbar extends Component {
|
|||
* @type {Object}
|
||||
*/
|
||||
recording: {
|
||||
onMount: () => {
|
||||
if (config.enableRecording) {
|
||||
this.props._onShowRecordingButton();
|
||||
}
|
||||
}
|
||||
onMount: () =>
|
||||
config.enableRecording
|
||||
&& this.props._onShowRecordingButton()
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -131,7 +128,8 @@ class SecondaryToolbar extends Component {
|
|||
* @returns {void}
|
||||
*/
|
||||
componentDidMount(): void {
|
||||
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||
APP.UI.addListener(
|
||||
UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||
this.props._onSideToolbarContainerToggled);
|
||||
}
|
||||
|
||||
|
@ -141,7 +139,8 @@ class SecondaryToolbar extends Component {
|
|||
* @returns {void}
|
||||
*/
|
||||
componentWillUnmount(): void {
|
||||
APP.UI.removeListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||
APP.UI.removeListener(
|
||||
UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
|
||||
this.props._onSideToolbarContainerToggled);
|
||||
}
|
||||
|
||||
|
@ -154,8 +153,8 @@ class SecondaryToolbar extends Component {
|
|||
const { _secondaryToolbarButtons } = this.props;
|
||||
|
||||
// The number of buttons to show in the toolbar isn't fixed, it depends
|
||||
// on availability of features and configuration parameters, so if we
|
||||
// don't have anything to render we exit here.
|
||||
// on the availability of features and configuration parameters. So
|
||||
// there may be nothing to render.
|
||||
if (_secondaryToolbarButtons.size === 0) {
|
||||
return null;
|
||||
}
|
||||
|
@ -167,7 +166,8 @@ class SecondaryToolbar extends Component {
|
|||
<Toolbar
|
||||
buttonHandlers = { buttonHandlers }
|
||||
className = { secondaryToolbarClassName }
|
||||
toolbarButtons = { _secondaryToolbarButtons }>
|
||||
toolbarButtons = { _secondaryToolbarButtons }
|
||||
tooltipPosition = { 'right' }>
|
||||
<FeedbackButton />
|
||||
</Toolbar>
|
||||
);
|
||||
|
@ -179,10 +179,10 @@ class SecondaryToolbar extends Component {
|
|||
*
|
||||
* @param {Function} dispatch - Redux action dispatcher.
|
||||
* @returns {{
|
||||
* _onLocalRaiseHandChanged: Function,
|
||||
* _onSetProfileButtonUnclickable: Function,
|
||||
* _onShowRecordingButton: Function,
|
||||
* _onSideToolbarContainerToggled
|
||||
* _onLocalRaiseHandChanged: Function,
|
||||
* _onSetProfileButtonUnclickable: Function,
|
||||
* _onShowRecordingButton: Function,
|
||||
* _onSideToolbarContainerToggled
|
||||
* }}
|
||||
* @private
|
||||
*/
|
||||
|
@ -237,8 +237,8 @@ function _mapDispatchToProps(dispatch: Function): Object {
|
|||
*
|
||||
* @param {Object} state - Snapshot of Redux store.
|
||||
* @returns {{
|
||||
* _secondaryToolbarButtons: Map,
|
||||
* _visible: boolean
|
||||
* _secondaryToolbarButtons: Map,
|
||||
* _visible: boolean
|
||||
* }}
|
||||
* @private
|
||||
*/
|
||||
|
@ -252,7 +252,7 @@ function _mapStateToProps(state: Object): Object {
|
|||
/**
|
||||
* Default toolbar buttons for secondary toolbar.
|
||||
*
|
||||
* @protected
|
||||
* @private
|
||||
* @type {Map}
|
||||
*/
|
||||
_secondaryToolbarButtons: secondaryToolbarButtons,
|
||||
|
@ -260,7 +260,7 @@ function _mapStateToProps(state: Object): Object {
|
|||
/**
|
||||
* Shows whether toolbar is visible.
|
||||
*
|
||||
* @protected
|
||||
* @private
|
||||
* @type {boolean}
|
||||
*/
|
||||
_visible: visible
|
||||
|
|
|
@ -60,7 +60,13 @@ class Toolbar extends Component {
|
|||
/**
|
||||
* Map with toolbar buttons.
|
||||
*/
|
||||
toolbarButtons: React.PropTypes.instanceOf(Map)
|
||||
toolbarButtons: React.PropTypes.instanceOf(Map),
|
||||
|
||||
/**
|
||||
* Indicates the position of the tooltip.
|
||||
*/
|
||||
tooltipPosition:
|
||||
React.PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -73,7 +79,7 @@ class Toolbar extends Component {
|
|||
|
||||
this._setButtonHandlers();
|
||||
|
||||
// Bind methods to save the context
|
||||
// Bind callbacks to preverse this.
|
||||
this._renderToolbarButton = this._renderToolbarButton.bind(this);
|
||||
}
|
||||
|
||||
|
@ -115,7 +121,7 @@ class Toolbar extends Component {
|
|||
_renderToolbarButton(acc: Array<*>, keyValuePair: Array<*>,
|
||||
index: number): Array<ReactElement<*>> {
|
||||
const [ key, button ] = keyValuePair;
|
||||
const { splitterIndex } = this.props;
|
||||
const { splitterIndex, tooltipPosition } = this.props;
|
||||
|
||||
if (splitterIndex && index === splitterIndex) {
|
||||
const splitter = <span className = 'toolbar__splitter' />;
|
||||
|
@ -131,7 +137,8 @@ class Toolbar extends Component {
|
|||
key = { key }
|
||||
onClick = { onClick }
|
||||
onMount = { onMount }
|
||||
onUnmount = { onUnmount } />
|
||||
onUnmount = { onUnmount }
|
||||
tooltipPosition = { tooltipPosition } />
|
||||
);
|
||||
|
||||
return acc;
|
||||
|
@ -149,16 +156,11 @@ class Toolbar extends Component {
|
|||
toolbarButtons
|
||||
} = this.props;
|
||||
|
||||
// Only a few buttons have custom button handlers defined, so this
|
||||
// list may be undefined or empty depending on the buttons we're
|
||||
// rendering.
|
||||
// TODO: merge the buttonHandlers and onClick properties and come up
|
||||
// with a consistent event handling property.
|
||||
if (!buttonHandlers) {
|
||||
return;
|
||||
}
|
||||
|
||||
Object.keys(buttonHandlers).forEach(key => {
|
||||
// Only a few buttons have buttonHandlers defined, so it may be
|
||||
// undefined or empty depending on the buttons rendered.
|
||||
// TODO Merge the buttonHandlers and onClick properties and come up with
|
||||
// a consistent event handling property.
|
||||
buttonHandlers && Object.keys(buttonHandlers).forEach(key => {
|
||||
let button = toolbarButtons.get(key);
|
||||
|
||||
if (button) {
|
||||
|
|
|
@ -49,7 +49,13 @@ class ToolbarButton extends AbstractToolbarButton {
|
|||
/**
|
||||
* Translation helper function.
|
||||
*/
|
||||
t: React.PropTypes.func
|
||||
t: React.PropTypes.func,
|
||||
|
||||
/**
|
||||
* Indicates the position of the tooltip.
|
||||
*/
|
||||
tooltipPosition:
|
||||
React.PropTypes.oneOf([ 'bottom', 'left', 'right', 'top' ])
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -199,13 +205,10 @@ class ToolbarButton extends AbstractToolbarButton {
|
|||
* @returns {void}
|
||||
*/
|
||||
_setShortcutAndTooltip(): void {
|
||||
const { button } = this.props;
|
||||
const { button, tooltipPosition } = this.props;
|
||||
const name = button.buttonName;
|
||||
|
||||
if (UIUtil.isButtonEnabled(name)) {
|
||||
const tooltipPosition
|
||||
= interfaceConfig.MAIN_TOOLBAR_BUTTONS.indexOf(name) > -1
|
||||
? 'bottom' : 'right';
|
||||
|
||||
if (!button.unclickable) {
|
||||
UIUtil.setTooltip(this.button,
|
||||
|
|
Loading…
Reference in New Issue