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

Fixes toolbar tooltip positioning

This commit is contained in:
yanas 2017-04-06 17:40:10 -05:00 committed by Lyubo Marinov
parent 77b789e26a
commit 2ffef3bdda
4 changed files with 72 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
react/features/toolbox/components/PrimaryToolbar.web.js
View File

@ -6,8 +6,8 @@ import { connect } from 'react-redux';
import UIEvents from '../../../../service/UI/UIEvents'; import UIEvents from '../../../../service/UI/UIEvents';
import { showDesktopSharingButton, toggleFullScreen } from '../actions'; import { showDesktopSharingButton, toggleFullScreen } from '../actions';
import Toolbar from './Toolbar';
import { getToolbarClassNames } from '../functions'; import { getToolbarClassNames } from '../functions';
import Toolbar from './Toolbar';
declare var APP: Object; declare var APP: Object;
declare var interfaceConfig: Object; declare var interfaceConfig: Object;
@ -19,8 +19,6 @@ declare var interfaceConfig: Object;
* @extends Component * @extends Component
*/ */
class PrimaryToolbar extends Component { class PrimaryToolbar extends Component {
state: Object;
static propTypes = { static propTypes = {
/** /**
* Handler for toggling fullscreen mode. * Handler for toggling fullscreen mode.
@ -43,6 +41,8 @@ class PrimaryToolbar extends Component {
_visible: React.PropTypes.bool _visible: React.PropTypes.bool
}; };
state: Object;
/** /**
* Constructs instance of primary toolbar React component. * Constructs instance of primary toolbar React component.
* *
@ -68,10 +68,12 @@ class PrimaryToolbar extends Component {
*/ */
fullscreen: { fullscreen: {
onMount: () => onMount: () =>
APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED, APP.UI.addListener(
UIEvents.FULLSCREEN_TOGGLED,
this.props._onFullScreenToggled), this.props._onFullScreenToggled),
onUnmount: () => onUnmount: () =>
APP.UI.removeListener(UIEvents.FULLSCREEN_TOGGLED, APP.UI.removeListener(
UIEvents.FULLSCREEN_TOGGLED,
this.props._onFullScreenToggled) this.props._onFullScreenToggled)
} }
}; };
@ -105,21 +107,24 @@ class PrimaryToolbar extends Component {
const { _primaryToolbarButtons } = this.props; const { _primaryToolbarButtons } = this.props;
// The number of buttons to show in the toolbar isn't fixed, it depends // The number of buttons to show in the toolbar isn't fixed, it depends
// on availability of features and configuration parameters, so if we // on the availability of features and configuration parameters. So
// don't have anything to render we exit here. // there may be nothing to render.
if (_primaryToolbarButtons.size === 0) { if (_primaryToolbarButtons.size === 0) {
return null; return null;
} }
const { buttonHandlers, splitterIndex } = this.state; const { buttonHandlers, splitterIndex } = this.state;
const { primaryToolbarClassName } = getToolbarClassNames(this.props); const { primaryToolbarClassName } = getToolbarClassNames(this.props);
const tooltipPosition
= interfaceConfig.filmStripOnly ? 'left' : 'bottom';
return ( return (
<Toolbar <Toolbar
buttonHandlers = { buttonHandlers } buttonHandlers = { buttonHandlers }
className = { primaryToolbarClassName } className = { primaryToolbarClassName }
splitterIndex = { splitterIndex } splitterIndex = { splitterIndex }
toolbarButtons = { _primaryToolbarButtons } /> toolbarButtons = { _primaryToolbarButtons }
tooltipPosition = { tooltipPosition } />
); );
} }
} }
@ -129,7 +134,7 @@ class PrimaryToolbar extends Component {
* *
* @param {Function} dispatch - Redux action dispatcher. * @param {Function} dispatch - Redux action dispatcher.
* @returns {{ * @returns {{
* _onShowDesktopSharingButton: Function * _onShowDesktopSharingButton: Function
* }} * }}
* @private * @private
*/ */
@ -162,8 +167,8 @@ function _mapDispatchToProps(dispatch: Function): Object {
* *
* @param {Object} state - Snapshot of Redux store. * @param {Object} state - Snapshot of Redux store.
* @returns {{ * @returns {{
* _primaryToolbarButtons: Map, * _primaryToolbarButtons: Map,
* _visible: boolean * _visible: boolean
* }} * }}
* @private * @private
*/ */
@ -177,7 +182,7 @@ function _mapStateToProps(state: Object): Object {
/** /**
* Default toolbar buttons for primary toolbar. * Default toolbar buttons for primary toolbar.
* *
* @protected * @private
* @type {Map} * @type {Map}
*/ */
_primaryToolbarButtons: primaryToolbarButtons, _primaryToolbarButtons: primaryToolbarButtons,
@ -185,7 +190,7 @@ function _mapStateToProps(state: Object): Object {
/** /**
* Shows whether toolbox is visible. * Shows whether toolbox is visible.
* *
* @protected * @private
* @type {boolean} * @type {boolean}
*/ */
_visible: visible _visible: visible

60
react/features/toolbox/components/SecondaryToolbar.web.js
View File

@ -12,8 +12,8 @@ import {
showRecordingButton, showRecordingButton,
toggleSideToolbarContainer toggleSideToolbarContainer
} from '../actions'; } from '../actions';
import Toolbar from './Toolbar';
import { getToolbarClassNames } from '../functions'; import { getToolbarClassNames } from '../functions';
import Toolbar from './Toolbar';
declare var APP: Object; declare var APP: Object;
declare var config: Object; declare var config: Object;
@ -79,10 +79,9 @@ class SecondaryToolbar extends Component {
* @type {Object} * @type {Object}
*/ */
profile: { profile: {
onMount: () => { onMount: () =>
APP.tokenData.isGuest APP.tokenData.isGuest
|| this.props._onSetProfileButtonUnclickable(true); || this.props._onSetProfileButtonUnclickable(true)
}
}, },
/** /**
@ -91,14 +90,14 @@ class SecondaryToolbar extends Component {
* @type {button} * @type {button}
*/ */
raisehand: { raisehand: {
onMount: () => { onMount: () =>
APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED, APP.UI.addListener(
this.props._onLocalRaiseHandChanged); UIEvents.LOCAL_RAISE_HAND_CHANGED,
}, this.props._onLocalRaiseHandChanged),
onUnmount: () => { onUnmount: () =>
APP.UI.removeListener(UIEvents.LOCAL_RAISE_HAND_CHANGED, APP.UI.removeListener(
this.props._onLocalRaiseHandChanged); UIEvents.LOCAL_RAISE_HAND_CHANGED,
} this.props._onLocalRaiseHandChanged)
}, },
/** /**
@ -107,11 +106,9 @@ class SecondaryToolbar extends Component {
* @type {Object} * @type {Object}
*/ */
recording: { recording: {
onMount: () => { onMount: () =>
if (config.enableRecording) { config.enableRecording
this.props._onShowRecordingButton(); && this.props._onShowRecordingButton()
}
}
} }
}; };
@ -131,7 +128,8 @@ class SecondaryToolbar extends Component {
* @returns {void} * @returns {void}
*/ */
componentDidMount(): void { componentDidMount(): void {
APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED, APP.UI.addListener(
UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
this.props._onSideToolbarContainerToggled); this.props._onSideToolbarContainerToggled);
} }
@ -141,7 +139,8 @@ class SecondaryToolbar extends Component {
* @returns {void} * @returns {void}
*/ */
componentWillUnmount(): void { componentWillUnmount(): void {
APP.UI.removeListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED, APP.UI.removeListener(
UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
this.props._onSideToolbarContainerToggled); this.props._onSideToolbarContainerToggled);
} }
@ -154,8 +153,8 @@ class SecondaryToolbar extends Component {
const { _secondaryToolbarButtons } = this.props; const { _secondaryToolbarButtons } = this.props;
// The number of buttons to show in the toolbar isn't fixed, it depends // The number of buttons to show in the toolbar isn't fixed, it depends
// on availability of features and configuration parameters, so if we // on the availability of features and configuration parameters. So
// don't have anything to render we exit here. // there may be nothing to render.
if (_secondaryToolbarButtons.size === 0) { if (_secondaryToolbarButtons.size === 0) {
return null; return null;
} }
@ -167,7 +166,8 @@ class SecondaryToolbar extends Component {
<Toolbar <Toolbar
buttonHandlers = { buttonHandlers } buttonHandlers = { buttonHandlers }
className = { secondaryToolbarClassName } className = { secondaryToolbarClassName }
toolbarButtons = { _secondaryToolbarButtons }> toolbarButtons = { _secondaryToolbarButtons }
tooltipPosition = { 'right' }>
<FeedbackButton /> <FeedbackButton />
</Toolbar> </Toolbar>
); );
@ -179,10 +179,10 @@ class SecondaryToolbar extends Component {
* *
* @param {Function} dispatch - Redux action dispatcher. * @param {Function} dispatch - Redux action dispatcher.
* @returns {{ * @returns {{
* _onLocalRaiseHandChanged: Function, * _onLocalRaiseHandChanged: Function,
* _onSetProfileButtonUnclickable: Function, * _onSetProfileButtonUnclickable: Function,
* _onShowRecordingButton: Function, * _onShowRecordingButton: Function,
* _onSideToolbarContainerToggled * _onSideToolbarContainerToggled
* }} * }}
* @private * @private
*/ */
@ -237,8 +237,8 @@ function _mapDispatchToProps(dispatch: Function): Object {
* *
* @param {Object} state - Snapshot of Redux store. * @param {Object} state - Snapshot of Redux store.
* @returns {{ * @returns {{
* _secondaryToolbarButtons: Map, * _secondaryToolbarButtons: Map,
* _visible: boolean * _visible: boolean
* }} * }}
* @private * @private
*/ */
@ -252,7 +252,7 @@ function _mapStateToProps(state: Object): Object {
/** /**
* Default toolbar buttons for secondary toolbar. * Default toolbar buttons for secondary toolbar.
* *
* @protected * @private
* @type {Map} * @type {Map}
*/ */
_secondaryToolbarButtons: secondaryToolbarButtons, _secondaryToolbarButtons: secondaryToolbarButtons,
@ -260,7 +260,7 @@ function _mapStateToProps(state: Object): Object {
/** /**
* Shows whether toolbar is visible. * Shows whether toolbar is visible.
* *
* @protected * @private
* @type {boolean} * @type {boolean}
*/ */
_visible: visible _visible: visible

30
react/features/toolbox/components/Toolbar.web.js
View File

@ -60,7 +60,13 @@ class Toolbar extends Component {
/** /**
* Map with toolbar buttons. * 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(); this._setButtonHandlers();
// Bind methods to save the context // Bind callbacks to preverse this.
this._renderToolbarButton = this._renderToolbarButton.bind(this); this._renderToolbarButton = this._renderToolbarButton.bind(this);
} }
@ -115,7 +121,7 @@ class Toolbar extends Component {
_renderToolbarButton(acc: Array<*>, keyValuePair: Array<*>, _renderToolbarButton(acc: Array<*>, keyValuePair: Array<*>,
index: number): Array<ReactElement<*>> { index: number): Array<ReactElement<*>> {
const [ key, button ] = keyValuePair; const [ key, button ] = keyValuePair;
const { splitterIndex } = this.props; const { splitterIndex, tooltipPosition } = this.props;
if (splitterIndex && index === splitterIndex) { if (splitterIndex && index === splitterIndex) {
const splitter = <span className = 'toolbar__splitter' />; const splitter = <span className = 'toolbar__splitter' />;
@ -131,7 +137,8 @@ class Toolbar extends Component {
key = { key } key = { key }
onClick = { onClick } onClick = { onClick }
onMount = { onMount } onMount = { onMount }
onUnmount = { onUnmount } /> onUnmount = { onUnmount }
tooltipPosition = { tooltipPosition } />
); );
return acc; return acc;
@ -149,16 +156,11 @@ class Toolbar extends Component {
toolbarButtons toolbarButtons
} = this.props; } = this.props;
// Only a few buttons have custom button handlers defined, so this // Only a few buttons have buttonHandlers defined, so it may be
// list may be undefined or empty depending on the buttons we're // undefined or empty depending on the buttons rendered.
// rendering. // TODO Merge the buttonHandlers and onClick properties and come up with
// TODO: merge the buttonHandlers and onClick properties and come up // a consistent event handling property.
// with a consistent event handling property. buttonHandlers && Object.keys(buttonHandlers).forEach(key => {
if (!buttonHandlers) {
return;
}
Object.keys(buttonHandlers).forEach(key => {
let button = toolbarButtons.get(key); let button = toolbarButtons.get(key);
if (button) { if (button) {

13
react/features/toolbox/components/ToolbarButton.web.js
View File

@ -49,7 +49,13 @@ class ToolbarButton extends AbstractToolbarButton {
/** /**
* Translation helper function. * 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} * @returns {void}
*/ */
_setShortcutAndTooltip(): void { _setShortcutAndTooltip(): void {
const { button } = this.props; const { button, tooltipPosition } = this.props;
const name = button.buttonName; const name = button.buttonName;
if (UIUtil.isButtonEnabled(name)) { if (UIUtil.isButtonEnabled(name)) {
const tooltipPosition
= interfaceConfig.MAIN_TOOLBAR_BUTTONS.indexOf(name) > -1
? 'bottom' : 'right';
if (!button.unclickable) { if (!button.unclickable) {
UIUtil.setTooltip(this.button, UIUtil.setTooltip(this.button,