Skip to content

Commit

Permalink
feat(HelpOverflowButton): Implement.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hristoterezov
hristoterezov committed Oct 14, 2019
1 parent 4a8f787 commit f295f60
Show file tree
Hide file tree
Showing 6 changed files with 88 additions and 63 deletions.
6 changes: 6 additions & 0 deletions interface_config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,12 @@ var interfaceConfig = {
*/
AUTO_PIN_LATEST_SCREEN_SHARE: 'remote-only'

/**
* The link to the user documentation.
*/
// HELP_LINK: 'https://docs.example.com/video-meetings.html',


/**
* How many columns the tile view can expand to. The respected range is
* between 1 and 5.
Expand Down
2 changes: 2 additions & 0 deletions lang/main.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -573,6 +573,7 @@
"feedback": "Leave feedback",
"fullScreen": "Toggle full screen",
"hangup": "Leave the call",
"help": "Help",
"invite": "Invite people",
"kick": "Kick participant",
"localRecording": "Toggle local recording controls",
Expand Down Expand Up @@ -614,6 +615,7 @@
"exitTileView": "Exit tile view",
"feedback": "Leave feedback",
"hangup": "Leave",
"help": "Help",
"invite": "Invite people",
"login": "Login",
"logout": "Logout",
Expand Down
1 change: 1 addition & 0 deletions react/features/base/icons/svg/help.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions react/features/base/icons/svg/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export { default as IconExitFullScreen } from './exit-full-screen.svg';
export { default as IconFeedback } from './feedback.svg';
export { default as IconFullScreen } from './full-screen.svg';
export { default as IconHangup } from './hangup.svg';
export { default as IconHelp } from './help.svg';
export { default as IconInfo } from './info.svg';
export { default as IconInvite } from './invite.svg';
export { default as IconKick } from './kick.svg';
Expand Down
44 changes: 44 additions & 0 deletions react/features/toolbox/components/web/HelpButton.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
// @flow

import { createToolbarEvent, sendAnalytics } from '../../../analytics';
import { translate } from '../../../base/i18n';
import { IconHelp } from '../../../base/icons';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox';

declare var interfaceConfig: Object;

/**
* Implements an {@link AbstractButton} to open the user documentation in a new window.
*/
class HelpButton extends AbstractButton<AbstractButtonProps, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.help';
icon = IconHelp;
label = 'toolbar.help';

/**
* Handles clicking / pressing the button, and opens a new window with the user documentation.
*
* @private
* @returns {void}
*/
_handleClick() {
sendAnalytics(createToolbarEvent('help.pressed'));
window.open(interfaceConfig.HELP_LINK);
}

/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {React$Node}
*/
render(): React$Node {
if (typeof interfaceConfig.HELP_LINK === 'string') {
return super.render();
}

return null;
}
}

export default translate(HelpButton);
97 changes: 34 additions & 63 deletions react/features/toolbox/components/web/Toolbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ import {
import AudioMuteButton from '../AudioMuteButton';
import { isToolboxVisible } from '../../functions';
import HangupButton from '../HangupButton';
import HelpButton from './HelpButton';
import OverflowMenuButton from './OverflowMenuButton';
import OverflowMenuProfileItem from './OverflowMenuProfileItem';
import ToolbarButton from './ToolbarButton';
Expand Down Expand Up @@ -218,36 +219,22 @@ class Toolbox extends Component<Props, State> {
this._onSetOverflowVisible = this._onSetOverflowVisible.bind(this);

this._onShortcutToggleChat = this._onShortcutToggleChat.bind(this);
this._onShortcutToggleFullScreen
= this._onShortcutToggleFullScreen.bind(this);
this._onShortcutToggleRaiseHand
= this._onShortcutToggleRaiseHand.bind(this);
this._onShortcutToggleScreenshare
= this._onShortcutToggleScreenshare.bind(this);
this._onShortcutToggleVideoQuality
= this._onShortcutToggleVideoQuality.bind(this);
this._onToolbarOpenFeedback
= this._onToolbarOpenFeedback.bind(this);
this._onShortcutToggleFullScreen = this._onShortcutToggleFullScreen.bind(this);
this._onShortcutToggleRaiseHand = this._onShortcutToggleRaiseHand.bind(this);
this._onShortcutToggleScreenshare = this._onShortcutToggleScreenshare.bind(this);
this._onShortcutToggleVideoQuality = this._onShortcutToggleVideoQuality.bind(this);
this._onToolbarOpenFeedback = this._onToolbarOpenFeedback.bind(this);
this._onToolbarOpenInvite = this._onToolbarOpenInvite.bind(this);
this._onToolbarOpenKeyboardShortcuts
= this._onToolbarOpenKeyboardShortcuts.bind(this);
this._onToolbarOpenSpeakerStats
= this._onToolbarOpenSpeakerStats.bind(this);
this._onToolbarOpenVideoQuality
= this._onToolbarOpenVideoQuality.bind(this);
this._onToolbarOpenKeyboardShortcuts = this._onToolbarOpenKeyboardShortcuts.bind(this);
this._onToolbarOpenSpeakerStats = this._onToolbarOpenSpeakerStats.bind(this);
this._onToolbarOpenVideoQuality = this._onToolbarOpenVideoQuality.bind(this);
this._onToolbarToggleChat = this._onToolbarToggleChat.bind(this);
this._onToolbarToggleFullScreen
= this._onToolbarToggleFullScreen.bind(this);
this._onToolbarToggleProfile
= this._onToolbarToggleProfile.bind(this);
this._onToolbarToggleRaiseHand
= this._onToolbarToggleRaiseHand.bind(this);
this._onToolbarToggleScreenshare
= this._onToolbarToggleScreenshare.bind(this);
this._onToolbarToggleSharedVideo
= this._onToolbarToggleSharedVideo.bind(this);
this._onToolbarOpenLocalRecordingInfoDialog
= this._onToolbarOpenLocalRecordingInfoDialog.bind(this);
this._onToolbarToggleFullScreen = this._onToolbarToggleFullScreen.bind(this);
this._onToolbarToggleProfile = this._onToolbarToggleProfile.bind(this);
this._onToolbarToggleRaiseHand = this._onToolbarToggleRaiseHand.bind(this);
this._onToolbarToggleScreenshare = this._onToolbarToggleScreenshare.bind(this);
this._onToolbarToggleSharedVideo = this._onToolbarToggleSharedVideo.bind(this);
this._onToolbarOpenLocalRecordingInfoDialog = this._onToolbarOpenLocalRecordingInfoDialog.bind(this);

this.state = {
windowWidth: window.innerWidth
Expand Down Expand Up @@ -936,16 +923,11 @@ class Toolbox extends Component<Props, State> {
onClick = { this._onToolbarOpenVideoQuality } />,
this._shouldShowButton('fullscreen')
&& <OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.fullScreen') }
icon = { _fullScreen
? IconExitFullScreen
: IconFullScreen }
accessibilityLabel = { t('toolbar.accessibilityLabel.fullScreen') }
icon = { _fullScreen ? IconExitFullScreen : IconFullScreen }
key = 'fullscreen'
onClick = { this._onToolbarToggleFullScreen }
text = { _fullScreen
? t('toolbar.exitFullScreen')
: t('toolbar.enterFullScreen') } />,
text = { _fullScreen ? t('toolbar.exitFullScreen') : t('toolbar.enterFullScreen') } />,
<LiveStreamButton
key = 'livestreaming'
showLabel = { true } />,
Expand All @@ -954,14 +936,11 @@ class Toolbox extends Component<Props, State> {
showLabel = { true } />,
this._shouldShowButton('sharedvideo')
&& <OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.sharedvideo') }
accessibilityLabel = { t('toolbar.accessibilityLabel.sharedvideo') }
icon = { IconShareVideo }
key = 'sharedvideo'
onClick = { this._onToolbarToggleSharedVideo }
text = { _sharingVideo
? t('toolbar.stopSharedVideo')
: t('toolbar.sharedvideo') } />,
text = { _sharingVideo ? t('toolbar.stopSharedVideo') : t('toolbar.sharedvideo') } />,
this._shouldShowButton('etherpad')
&& <SharedDocumentButton
key = 'etherpad'
Expand All @@ -976,29 +955,30 @@ class Toolbox extends Component<Props, State> {
visible = { this._shouldShowButton('settings') } />,
this._shouldShowButton('stats')
&& <OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.speakerStats') }
accessibilityLabel = { t('toolbar.accessibilityLabel.speakerStats') }
icon = { IconPresentation }
key = 'stats'
onClick = { this._onToolbarOpenSpeakerStats }
text = { t('toolbar.speakerStats') } />,
this._shouldShowButton('feedback')
&& _feedbackConfigured
&& <OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.feedback') }
accessibilityLabel = { t('toolbar.accessibilityLabel.feedback') }
icon = { IconFeedback }
key = 'feedback'
onClick = { this._onToolbarOpenFeedback }
text = { t('toolbar.feedback') } />,
this._shouldShowButton('shortcuts')
&& <OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.shortcuts') }
accessibilityLabel = { t('toolbar.accessibilityLabel.shortcuts') }
icon = { IconOpenInNew }
key = 'shortcuts'
onClick = { this._onToolbarOpenKeyboardShortcuts }
text = { t('toolbar.shortcuts') } />
text = { t('toolbar.shortcuts') } />,
this._shouldShowButton('help')
&& <HelpButton
key = 'help'
showLabel = { true } />
];
}

Expand Down Expand Up @@ -1057,8 +1037,7 @@ class Toolbox extends Component<Props, State> {
case 'invite':
return (
<OverflowMenuItem
accessibilityLabel =
{ t('toolbar.accessibilityLabel.invite') }
accessibilityLabel = { t('toolbar.accessibilityLabel.invite') }
icon = { IconInvite }
key = 'invite'
onClick = { this._onToolbarOpenInvite }
Expand All @@ -1069,13 +1048,10 @@ class Toolbox extends Component<Props, State> {
case 'localrecording':
return (
<OverflowMenuItem
accessibilityLabel
= { t('toolbar.accessibilityLabel.localRecording') }
accessibilityLabel = { t('toolbar.accessibilityLabel.localRecording') }
icon = { IconRec }
key = 'localrecording'
onClick = {
this._onToolbarOpenLocalRecordingInfoDialog
}
onClick = { this._onToolbarOpenLocalRecordingInfoDialog }
text = { t('localRecording.dialogTitle') } />
);
default:
Expand All @@ -1098,8 +1074,7 @@ class Toolbox extends Component<Props, State> {
t
} = this.props;
const overflowMenuContent = this._renderOverflowMenuContent();
const overflowHasItems = Boolean(overflowMenuContent.filter(
child => child).length);
const overflowHasItems = Boolean(overflowMenuContent.filter(child => child).length);
const toolbarAccLabel = 'toolbar.accessibilityLabel.moreActionsMenu';
const buttonsLeft = [];
const buttonsRight = [];
Expand Down Expand Up @@ -1182,19 +1157,15 @@ class Toolbox extends Component<Props, State> {
&& this._renderDesktopSharingButton() }
{ buttonsLeft.indexOf('raisehand') !== -1
&& <ToolbarButton
accessibilityLabel =
{
t('toolbar.accessibilityLabel.raiseHand')
}
accessibilityLabel = { t('toolbar.accessibilityLabel.raiseHand') }
icon = { IconRaisedHand }
onClick = { this._onToolbarToggleRaiseHand }
toggled = { _raisedHand }
tooltip = { t('toolbar.raiseHand') } /> }
{ buttonsLeft.indexOf('chat') !== -1
&& <div className = 'toolbar-button-with-badge'>
<ToolbarButton
accessibilityLabel =
{ t('toolbar.accessibilityLabel.chat') }
accessibilityLabel = { t('toolbar.accessibilityLabel.chat') }
icon = { IconChat }
onClick = { this._onToolbarToggleChat }
toggled = { _chatOpen }
Expand Down

0 comments on commit f295f60

Please sign in to comment.