Localize tool tooltips (#573)

* Create messages.js for all tooltips as many are shared between the bitmap and vector editors:
  * Brush Translation
  * Eraser Translation
  * Fill Translation
  * Line Translation
  * Oval Translation
  * Rect Translation
  * Reshape Translation
  * RoundedRect Translation
  * Select Translation
  * Text Translation

src/components/bit-brush-mode/bit-brush-mode.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+import messages from '../../lib/messages.js';
 
 import brushIcon from './brush.svg';
 
 const BitBrushModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Brush',
-            description: 'Label for the brush tool',
-            id: 'paint.brushMode.brush'
-        }}
+        imgDescriptor={messages.brush}
         imgSrc={brushIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/bit-eraser-mode/bit-eraser-mode.jsx

@@ -1,17 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import messages from '../../lib/messages.js';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
 
 import eraserIcon from './eraser.svg';
 
 const BitEraserComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Eraser',
-            description: 'Label for the eraser tool',
-            id: 'paint.eraserMode.eraser'
-        }}
+        imgDescriptor={messages.eraser}
         imgSrc={eraserIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/bit-fill-mode/bit-fill-mode.jsx

@@ -2,16 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import fillIcon from './fill.svg';
 
 const BitFillComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Fill',
-            description: 'Label for the fill tool',
-            id: 'paint.fillMode.fill'
-        }}
+        imgDescriptor={messages.fill}
         imgSrc={fillIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/bit-line-mode/bit-line-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import lineIcon from './line.svg';
 
 const BitLineComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Line',
-            description: 'Label for the line tool, which draws straight line segments',
-            id: 'paint.lineMode.line'
-        }}
+        imgDescriptor={messages.line}
         imgSrc={lineIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/bit-oval-mode/bit-oval-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import ovalIcon from './oval.svg';
 
 const BitOvalComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Circle',
-            description: 'Label for the oval-drawing tool',
-            id: 'paint.ovalMode.oval'
-        }}
+        imgDescriptor={messages.oval}
         imgSrc={ovalIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/bit-rect-mode/bit-rect-mode.jsx

@@ -2,16 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import rectIcon from './rectangle.svg';
 
 const BitRectComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Rectangle',
-            description: 'Label for the rectangle tool',
-            id: 'paint.rectMode.rect'
-        }}
+        imgDescriptor={messages.rect}
         imgSrc={rectIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/bit-select-mode/bit-select-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import selectIcon from './marquee.svg';
 
 const BitSelectComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Select',
-            description: 'Label for the select tool, which allows selecting, moving, and resizing shapes',
-            id: 'paint.selectMode.select'
-        }}
+        imgDescriptor={messages.select}
         imgSrc={selectIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/bit-text-mode/bit-text-mode.jsx

@@ -2,16 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import textIcon from './text.svg';
 
 const BitTextComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Text',
-            description: 'Label for the text tool',
-            id: 'paint.textMode.text'
-        }}
+        imgDescriptor={messages.text}
         imgSrc={textIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/brush-mode/brush-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import brushIcon from './brush.svg';
 
 const BrushModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Brush',
-            description: 'Label for the brush tool',
-            id: 'paint.brushMode.brush'
-        }}
+        imgDescriptor={messages.brush}
         imgSrc={brushIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/eraser-mode/eraser-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import eraserIcon from './eraser.svg';
 
 const EraserModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Eraser',
-            description: 'Label for the eraser tool',
-            id: 'paint.eraserMode.eraser'
-        }}
+        imgDescriptor={messages.eraser}
         imgSrc={eraserIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/fill-mode/fill-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import fillIcon from './fill.svg';
 
 const FillModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Fill',
-            description: 'Label for the fill tool',
-            id: 'paint.fillMode.fill'
-        }}
+        imgDescriptor={messages.fill}
         imgSrc={fillIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/line-mode/line-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import lineIcon from './line.svg';
 
 const LineModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Line',
-            description: 'Label for the line tool, which draws straight line segments',
-            id: 'paint.lineMode.line'
-        }}
+        imgDescriptor={messages.line}
         imgSrc={lineIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/oval-mode/oval-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import ovalIcon from './oval.svg';
 
 const OvalModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Circle',
-            description: 'Label for the oval-drawing tool',
-            id: 'paint.ovalMode.oval'
-        }}
+        imgDescriptor={messages.oval}
         imgSrc={ovalIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/rect-mode/rect-mode.jsx

@@ -1,16 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
-
+import messages from '../../lib/messages.js';
 import rectIcon from './rectangle.svg';
 
 const RectModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Rectangle',
-            description: 'Label for the rectangle tool',
-            id: 'paint.rectMode.rect'
-        }}
+        imgDescriptor={messages.rect}
         imgSrc={rectIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/reshape-mode/reshape-mode.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import messages from '../../lib/messages.js';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
 
 import reshapeIcon from './reshape.svg';
 
 const ReshapeModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Reshape',
-            description: 'Label for the reshape tool, which allows changing the points in the lines of the vectors',
-            id: 'paint.reshapeMode.reshape'
-        }}
+        imgDescriptor={messages.reshape}
         imgSrc={reshapeIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/rounded-rect-mode/rounded-rect-mode.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import messages from '../../lib/messages.js';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
 
 import roundedRectIcon from './rounded-rectangle.svg';
 
 const RoundedRectModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Rounded Rectangle',
-            description: 'Label for the rounded rectangle tool',
-            id: 'paint.roundedRectMode.roundedRect'
-        }}
+        imgDescriptor={messages.roundedRect}
         imgSrc={roundedRectIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/select-mode/select-mode.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import messages from '../../lib/messages.js';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
 
 import selectIcon from './select.svg';
 
 const SelectModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Select',
-            description: 'Label for the select tool, which allows selecting, moving, and resizing shapes',
-            id: 'paint.selectMode.select'
-        }}
+        imgDescriptor={messages.select}
         imgSrc={selectIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/components/text-mode/text-mode.jsx

@@ -1,16 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import messages from '../../lib/messages.js';
 import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
 
 import textIcon from './text.svg';
 
 const TextModeComponent = props => (
     <ToolSelectComponent
-        imgDescriptor={{
-            defaultMessage: 'Text',
-            description: 'Label for the text tool',
-            id: 'paint.textMode.text'
-        }}
+        imgDescriptor={messages.text}
         imgSrc={textIcon}
         isSelected={props.isSelected}
         onMouseDown={props.onMouseDown}

src/lib/messages.js

@@ -0,0 +1,56 @@
+import {defineMessages} from 'react-intl';
+
+const messages = defineMessages({
+    brush: {
+        defaultMessage: 'Brush',
+        description: 'Label for the brush tool',
+        id: 'paint.brushMode.brush'
+    },
+    eraser: {
+        defaultMessage: 'Eraser',
+        description: 'Label for the eraser tool',
+        id: 'paint.eraserMode.eraser'
+    },
+    fill: {
+        defaultMessage: 'Fill',
+        description: 'Label for the fill tool',
+        id: 'paint.fillMode.fill'
+    },
+    line: {
+        defaultMessage: 'Line',
+        description: 'Label for the line tool',
+        id: 'paint.lineMode.line'
+    },
+    oval: {
+        defaultMessage: 'Circle',
+        description: 'Label for the oval-drawing tool',
+        id: 'paint.ovalMode.oval'
+    },
+    rect: {
+        defaultMessage: 'Rectangle',
+        description: 'Label for the rectangle tool',
+        id: 'paint.rectMode.rect'
+    },
+    reshape: {
+        defaultMessage: 'Reshape',
+        description: 'Label for the reshape tool, which allows changing the points in the lines of the vectors',
+        id: 'paint.reshapeMode.reshape'
+    },
+    roundedRect: {
+        defaultMessage: 'Rounded Rectangle',
+        description: 'Label for the rounded rectangle tool',
+        id: 'paint.roundedRectMode.roundedRect'
+    },
+    select: {
+        defaultMessage: 'Select',
+        description: 'Label for the select tool, which allows selecting, moving, and resizing shapes',
+        id: 'paint.selectMode.select'
+    },
+    text: {
+        defaultMessage: 'Text',
+        description: 'Label for the text tool',
+        id: 'paint.textMode.text'
+    }
+});
+
+export default messages;