Add locale to whiteboard toolbox items

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

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

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

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

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

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

bigbluebutton-html5/private/config/public/whiteboard.yaml

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

bigbluebutton-html5/private/locales/en.json

@@ -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"
 }