apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(HelpOverflowButton): Implement.

Browse Source
pull/4745/head
Hristo Terezov 5 years ago
parent 4a8f787519
commit f295f60bea
6 changed files with 88 additions and 63 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 6
      interface_config.js
  2. 2
      lang/main.json
  3. 1
      react/features/base/icons/svg/help.svg
  4. 1
      react/features/base/icons/svg/index.js
  5. 44
      react/features/toolbox/components/web/HelpButton.js
  6. 97
      react/features/toolbox/components/web/Toolbox.js

6
interface_config.js
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 }

Write Preview
Loading…
Cancel
Save