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

feat(HelpOverflowButton): Implement.

This commit is contained in:
Hristo Terezov 2019-10-11 15:51:42 +01:00
parent 4a8f787519
commit f295f60bea
6 changed files with 88 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
interface_config.js
View File

@ -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.

2
lang/main.json
View File

@ -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",
@ -614,6 +615,7 @@
"exitTileView": "Exit tile view",
"feedback": "Leave feedback",
"hangup": "Leave",
"help": "Help",
"invite": "Invite people",
"login": "Login",
"logout": "Logout",

1
react/features/base/icons/svg/help.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 381 B

1
react/features/base/icons/svg/index.js
View File

@ -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';

44
react/features/toolbox/components/web/HelpButton.js Normal file
View File

@ -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
react/features/toolbox/components/web/Toolbox.js
View File

@ -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';
@ -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
@ -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 } />,
@ -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'
@ -976,8 +955,7 @@ 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 }
@ -985,20 +963,22 @@ class Toolbox extends Component<Props, State> {
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 } />
];
}
@ -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 }
@ -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:
@ -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 = [];
@ -1182,10 +1157,7 @@ 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 }
@ -1193,8 +1165,7 @@ class Toolbox extends Component<Props, State> {
{ 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 }