BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add locale to whiteboard toolbox items

Browse Source
This commit is contained in:
João Francisco Siebel 2017-12-08 11:28:02 -02:00
parent 056dc4051d
commit 950eb488a0
5 changed files with 224 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/component.jsx
View File

@ -2,6 +2,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { HEXToINTColor, INTToHEXColor } from '/imports/utils/hexInt';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
import styles from './styles.scss';
import ToolbarMenuItem from './toolbar-menu-item/component';
@ -14,6 +15,41 @@ const THICKNESS_RADIUSES = TOOLBAR_CONFIG.thickness;
const FONT_SIZES = TOOLBAR_CONFIG.font_sizes;
const ANNOTATION_TOOLS = TOOLBAR_CONFIG.tools;
const intlMessages = defineMessages({
toolbarTools: {
id: 'app.whiteboard.toolbar.tools',
description: 'Whiteboard toolbar tools menu',
},
toolbarLineThickness: {
id: 'app.whiteboard.toolbar.thickness',
description: 'Whiteboard toolbar thickness menu',
},
toolbarLineColor: {
id: 'app.whiteboard.toolbar.color',
description: 'Whiteboard toolbar colors menu',
},
toolbarUndoAnnotation: {
id: 'app.whiteboard.toolbar.undo',
description: 'Whiteboard toolbar tools menu',
},
toolbarClearAnnotations: {
id: 'app.whiteboard.toolbar.clear',
description: 'Whiteboard toolbar clear menu',
},
toolbarMultiUserOn: {
id: 'app.whiteboard.toolbar.multiUserOn',
description: 'Whiteboard toolbar turn multi-user on menu',
},
toolbarMultiUserOff: {
id: 'app.whiteboard.toolbar.multiUserOff',
description: 'Whiteboard toolbar turn multi-user off menu',
},
toolbarFontSize: {
id: 'app.whiteboard.toolbar.fontSize',
description: 'Whiteboard toolbar font size menu',
},
});
class WhiteboardToolbar extends Component {
constructor() {
@ -256,9 +292,11 @@ class WhiteboardToolbar extends Component {
}
renderToolItem() {
const { intl } = this.props;
return (
<ToolbarMenuItem
label={'Tools'}
label={intl.formatMessage(intlMessages.toolbarTools)}
icon={this.state.annotationSelected.icon}
onItemClick={this.displaySubMenu}
objectToReturn={'annotationList'}
@ -282,9 +320,11 @@ class WhiteboardToolbar extends Component {
}
renderFontItem() {
const { intl } = this.props;
return (
<ToolbarMenuItem
label={'Font Size List'}
label={intl.formatMessage(intlMessages.toolbarFontSize)}
customIcon={this.renderFontItemIcon()}
onItemClick={this.displaySubMenu}
objectToReturn={'fontSizeList'}
@ -324,9 +364,11 @@ class WhiteboardToolbar extends Component {
}
renderThicknessItem() {
const { intl } = this.props;
return (
<ToolbarMenuItem
label={'Thickness List'}
label={intl.formatMessage(intlMessages.toolbarLineThickness)}
onItemClick={this.displaySubMenu}
objectToReturn={'thicknessList'}
onBlur={this.closeSubMenu}
@ -387,9 +429,11 @@ class WhiteboardToolbar extends Component {
}
renderColorItem() {
const { intl } = this.props;
return (
<ToolbarMenuItem
label={'Color List'}
label={intl.formatMessage(intlMessages.toolbarLineColor)}
onItemClick={this.displaySubMenu}
objectToReturn={'colorList'}
onBlur={this.closeSubMenu}
@ -433,9 +477,11 @@ class WhiteboardToolbar extends Component {
}
renderUndoItem() {
const { intl } = this.props;
return (
<ToolbarMenuItem
label={'Undo Annotation'}
label={intl.formatMessage(intlMessages.toolbarUndoAnnotation)}
icon={'undo'}
onItemClick={this.handleUndo}
className={cx(styles.toolbarButton, styles.notActive)}
@ -444,9 +490,11 @@ class WhiteboardToolbar extends Component {
}
renderClearAllItem() {
const { intl } = this.props;
return (
<ToolbarMenuItem
label={'Clear All Annotations'}
label={intl.formatMessage(intlMessages.toolbarClearAnnotations)}
icon={'circle_close'}
onItemClick={this.handleClearAll}
className={cx(styles.toolbarButton, styles.notActive)}
@ -455,11 +503,11 @@ class WhiteboardToolbar extends Component {
}
renderMultiUserItem() {
const { multiUser } = this.props;
const { intl, multiUser } = this.props;
return (
<ToolbarMenuItem
label={multiUser ? 'Turn multi-user mode off' : 'Tuen multi-user mode on'}
label={multiUser ? intl.formatMessage(intlMessages.toolbarMultiUserOff) : intl.formatMessage(intlMessages.toolbarMultiUserOn)}
icon={multiUser ? 'multi_whiteboard' : 'whiteboard'}
onItemClick={this.handleSwitchWhiteboardMode}
className={cx(styles.toolbarButton, styles.notActive)}
@ -540,6 +588,11 @@ WhiteboardToolbar.propTypes = {
// defines the physical height of the whiteboard
height: PropTypes.number.isRequired,
intl: PropTypes.shape({
formatMessage: PropTypes.func.isRequired,
}).isRequired,
};
export default injectWbResizeEvent(WhiteboardToolbar);
export default injectWbResizeEvent(injectIntl(WhiteboardToolbar));

12
bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu-item/component.jsx
View File

@ -19,6 +19,9 @@ export default class ToolbarSubmenuItem extends Component {
}
render() {
const { className, customIcon, icon, label } = this.props
return (
<div className={styles.buttonWrapper}>
<Button
@ -26,11 +29,12 @@ export default class ToolbarSubmenuItem extends Component {
role="button"
color={'default'}
size={'md'}
label={this.props.label}
icon={this.props.icon}
customIcon={this.props.customIcon}
label={label}
aria-label={label}
icon={icon}
customIcon={customIcon}
onClick={this.handleItemClick}
className={this.props.className}
className={className}
/>
</div>
);

103
bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-toolbar/toolbar-submenu/component.jsx
View File

@ -3,8 +3,89 @@ import PropTypes from 'prop-types';
import cx from 'classnames';
import styles from '../styles';
import ToolbarSubmenuItem from '../toolbar-submenu-item/component';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import _ from 'lodash';
export default class ToolbarSubmenu extends Component {
const intlMessages = defineMessages({
toolHand: {
id: 'app.whiteboard.toolbar.tools.hand',
description: 'Tool submenu hand item'
},
toolPencil: {
id: 'app.whiteboard.toolbar.tools.pencil',
description: 'Tool submenu pencil annotation'
},
toolRectangle: {
id: 'app.whiteboard.toolbar.tools.rectangle',
description: 'Tool submenu rectangle annotation'
},
toolTriangle: {
id: 'app.whiteboard.toolbar.tools.triangle',
description: 'Tool submenu triangle annotation'
},
toolEllipse: {
id: 'app.whiteboard.toolbar.tools.ellipse',
description: 'Tool submenu ellipse annotation'
},
toolLine: {
id: 'app.whiteboard.toolbar.tools.line',
description: 'Tool submenu line annotation'
},
toolText: {
id: 'app.whiteboard.toolbar.tools.text',
description: 'Tool submenu text annotation'
},
colorBlack: {
id: 'app.whiteboard.toolbar.color.black',
description: 'Color submenu black color'
},
colorWhite: {
id: 'app.whiteboard.toolbar.color.white',
description: 'Color submenu white color'
},
colorRed: {
id: 'app.whiteboard.toolbar.color.red',
description: 'Color submenu red color'
},
colorOrange: {
id: 'app.whiteboard.toolbar.color.orange',
description: 'Color submenu orange color'
},
colorEletricLime: {
id: 'app.whiteboard.toolbar.color.eletricLime',
description: 'Color submenu eletric lime color'
},
colorLime: {
id: 'app.whiteboard.toolbar.color.lime',
description: 'Color submenu lime color'
},
colorCyan: {
id: 'app.whiteboard.toolbar.color.cyan',
description: 'Color submenu cyan color'
},
colorDodgerBlue: {
id: 'app.whiteboard.toolbar.color.dodgerBlue',
description: 'Color submenu dodger blue color'
},
colorBlue: {
id: 'app.whiteboard.toolbar.color.blue',
description: 'Color submenu blue color'
},
colorViolet: {
id: 'app.whiteboard.toolbar.color.violet',
description: 'Color submenu violet color'
},
colorMagenta: {
id: 'app.whiteboard.toolbar.color.magenta',
description: 'Color submenu magenta color'
},
colorSilver: {
id: 'app.whiteboard.toolbar.color.silver',
description: 'Color submenu silver color'
},
});
class ToolbarSubmenu extends Component {
static getCustomIcon(type, obj) {
if (type === 'color') {
return (
@ -68,6 +149,22 @@ export default class ToolbarSubmenu extends Component {
}
}
formatSubmenuLabel(type, obj) {
const { intl } = this.props
if (type === 'annotations') {
let intlLabel = 'tool' + _.upperFirst(obj.value);
return intl.formatMessage(intlMessages[intlLabel]);
}
if (type === 'color') {
let intlLabel = 'color' + _.upperFirst(obj.label);
return intl.formatMessage(intlMessages[intlLabel]);
}
return (obj.label || obj.value);
}
render() {
const { type, objectsToRender, objectSelected, label, customIcon } = this.props;
@ -80,7 +177,7 @@ export default class ToolbarSubmenu extends Component {
{objectsToRender ? objectsToRender.map(obj =>
(
<ToolbarSubmenuItem
label={label}
label={this.formatSubmenuLabel(type, obj)}
icon={!customIcon ? obj.icon : null}
customIcon={customIcon ? ToolbarSubmenu.getCustomIcon(type, obj) : null}
onItemClick={this.onItemClick}
@ -132,3 +229,5 @@ ToolbarSubmenu.propTypes = {
label: PropTypes.string.isRequired,
customIcon: PropTypes.bool.isRequired,
};
export default injectIntl(ToolbarSubmenu);

38
bigbluebutton-html5/private/config/public/whiteboard.yaml
View File

@ -8,18 +8,30 @@ whiteboard:
end: 'DRAW_END'
toolbar:
colors:
- value: '#000000'
- value: '#ffffff'
- value: '#ff0000'
- value: '#ff8800'
- value: '#ccff00'
- value: '#00ff00'
- value: '#00ffff'
- value: '#0088ff'
- value: '#0000ff'
- value: '#8800ff'
- value: '#ff00ff'
- value: '#c0c0c0'
- value: '#000000' #black
label: 'black'
- value: '#ffffff' #white
label: 'white'
- value: '#ff0000' #red
label: 'red'
- value: '#ff8800' #orange
label: 'orange'
- value: '#ccff00' #electric lime
label: 'eletricLime'
- value: '#00ff00' #lime
label: 'lime'
- value: '#00ffff' #aqua/cyan
label: 'cyan'
- value: '#0088ff' #dodger blue
label: 'dodgerBlue'
- value: '#0000ff' #blue
label: 'blue'
- value: '#8800ff' #violet/indigo
label: 'violet'
- value: '#ff00ff' #magenta/fuchsia
label: 'magenta'
- value: '#c0c0c0' #silver
label: 'silver'
thickness:
- value: 14
- value: 12
@ -28,7 +40,7 @@ whiteboard:
- value: 6
- value: 4
- value: 2
font_sizes:
font_sizes:
- value: 36
- value: 32
- value: 28

29
bigbluebutton-html5/private/locales/en.json
View File

@ -260,5 +260,32 @@
"app.toast.chat.singular":"you have {0} new message in {1}",
"app.toast.chat.plural":"you have {0} new messages in {1}",
"app.notification.recordingStart": "This session is now being recorded",
"app.notification.recordingStop": "This session is not being recorded anymore"
"app.notification.recordingStop": "This session is not being recorded anymore",
"app.whiteboard.toolbar.tools": "Tools",
"app.whiteboard.toolbar.tools.hand": "Hand",
"app.whiteboard.toolbar.tools.pencil": "Pencil",
"app.whiteboard.toolbar.tools.rectangle": "Rectangle",
"app.whiteboard.toolbar.tools.triangle": "Triangle",
"app.whiteboard.toolbar.tools.ellipse": "Ellipse",
"app.whiteboard.toolbar.tools.line": "Line",
"app.whiteboard.toolbar.tools.text": "Text",
"app.whiteboard.toolbar.thickness": "Thickness List",
"app.whiteboard.toolbar.color": "Color List",
"app.whiteboard.toolbar.color.black": "Black",
"app.whiteboard.toolbar.color.white": "White",
"app.whiteboard.toolbar.color.red": "Red",
"app.whiteboard.toolbar.color.orange": "Orange",
"app.whiteboard.toolbar.color.eletricLime": "Eletric Lime",
"app.whiteboard.toolbar.color.lime": "Lime",
"app.whiteboard.toolbar.color.cyan": "Cyan",
"app.whiteboard.toolbar.color.dodgerBlue": "Dodger Blue",
"app.whiteboard.toolbar.color.blue": "Blue",
"app.whiteboard.toolbar.color.violet": "Violet",
"app.whiteboard.toolbar.color.magenta": "Magenta",
"app.whiteboard.toolbar.color.silver": "Silver",
"app.whiteboard.toolbar.undo": "Undo Annotation",
"app.whiteboard.toolbar.clear": "Clear All Annotations",
"app.whiteboard.toolbar.multiUserOn": "Turn multi-user mode on",
"app.whiteboard.toolbar.multiUserOff": "Turn multi-user mode off",
"app.whiteboard.toolbar.fontSize": "Font Size List"
}