Move copy/paste to mode tools

src/components/mode-tools/mode-tools.css

@@ -1,3 +1,4 @@
+@import "../../css/colors.css";
 @import "../../css/units.css";
 
 .mode-tools {
@@ -11,3 +12,12 @@
     width: 2rem;
     height: 2rem;
 }
+
+.mod-dashed-border {
+    border-right: 1px dashed $ui-pane-border;
+    padding-right: calc(3 * $grid-unit);
+}
+
+.mod-labeled-icon-height {
+    height: 2.85rem; /* for the second row so the dashed borders are equal in size */
+}

src/components/mode-tools/mode-tools.jsx

@@ -7,32 +7,49 @@ import {changeBrushSize} from '../../reducers/brush-mode';
 import {changeBrushSize as changeEraserSize} from '../../reducers/eraser-mode';
 
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
-import {injectIntl, intlShape} from 'react-intl';
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
 import Input from '../forms/input.jsx';
+import InputGroup from '../input-group/input-group.jsx';
+import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
 // import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx';
 import Modes from '../../modes/modes';
 import styles from './mode-tools.css';
 
+import copyIcon from './icons/copy.svg';
+import pasteIcon from './icons/paste.svg';
+
 import brushIcon from '../brush-mode/brush.svg';
 // import curvedPointIcon from './curved-point.svg';
 import eraserIcon from '../eraser-mode/eraser.svg';
-// import flipHorizontalIcon from './flip-horizontal.svg';
-// import flipVerticalIcon from './flip-vertical.svg';
+// import flipHorizontalIcon from './icons/flip-horizontal.svg';
+// import flipVerticalIcon from './icons/flip-vertical.svg';
 // import straightPointIcon from './straight-point.svg';
 
 import {MAX_STROKE_WIDTH} from '../../reducers/stroke-width';
 
 const BufferedInput = BufferedInputHOC(Input);
 const ModeToolsComponent = props => {
-    const brushMessage = props.intl.formatMessage({
-        defaultMessage: 'Brush',
-        description: 'Label for the brush tool',
-        id: 'paint.brushMode.brush'
-    });
-    const eraserMessage = props.intl.formatMessage({
-        defaultMessage: 'Eraser',
-        description: 'Label for the eraser tool',
-        id: 'paint.eraserMode.eraser'
+    const messages = defineMessages({
+        brushSize: {
+            defaultMessage: 'Brush size',
+            description: 'Label for the brush size input',
+            id: 'paint.modeTools.brushSize'
+        },
+        eraserSize: {
+            defaultMessage: 'Eraser size',
+            description: 'Label for the eraser size input',
+            id: 'paint.modeTools.eraserSize'
+        },
+        copy: {
+            defaultMessage: 'Copy',
+            description: 'Label for the copy button',
+            id: 'paint.modeTools.copy'
+        },
+        paste: {
+            defaultMessage: 'Paste',
+            description: 'Label for the paste button',
+            id: 'paint.modeTools.paste'
+        }
     });
 
     switch (props.mode) {
@@ -41,7 +58,7 @@ const ModeToolsComponent = props => {
             <div className={classNames(props.className, styles.modeTools)}>
                 <div>
                     <img
-                        alt={brushMessage}
+                        alt={props.intl.formatMessage(messages.brushSize)}
                         className={styles.modeToolsIcon}
                         src={brushIcon}
                     />
@@ -61,7 +78,7 @@ const ModeToolsComponent = props => {
             <div className={classNames(props.className, styles.modeTools)}>
                 <div>
                     <img
-                        alt={eraserMessage}
+                        alt={props.intl.formatMessage(messages.eraserSize)}
                         className={styles.modeToolsIcon}
                         src={eraserIcon}
                     />
@@ -96,6 +113,20 @@ const ModeToolsComponent = props => {
     case Modes.SELECT:
         return (
             <div className={classNames(props.className, styles.modeTools)}>
+                <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
+                    <LabeledIconButton
+                        disabled
+                        imgSrc={copyIcon}
+                        title={props.intl.formatMessage(messages.copy)}
+                        onClick={function () {}}
+                    />
+                    <LabeledIconButton
+                        disabled
+                        imgSrc={pasteIcon}
+                        title={props.intl.formatMessage(messages.paste)}
+                        onClick={function () {}}
+                    />
+                </InputGroup>
                 {/* <LabeledIconButton
                     imgAlt="Flip Horizontal Icon"
                     imgSrc={flipHorizontalIcon}

src/components/paint-editor/paint-editor.jsx

@@ -30,9 +30,7 @@ import StrokeWidthIndicatorComponent from '../../containers/stroke-width-indicat
 
 import styles from './paint-editor.css';
 
-import copyIcon from './icons/copy.svg';
 import groupIcon from './icons/group.svg';
-import pasteIcon from './icons/paste.svg';
 import redoIcon from './icons/redo.svg';
 import sendBackIcon from './icons/send-back.svg';
 import sendBackwardIcon from './icons/send-backward.svg';
@@ -90,16 +88,6 @@ const messages = defineMessages({
         defaultMessage: 'Back',
         description: 'Label for the `Send to back of canvas` button',
         id: 'paint.paintEditor.back'
-    },
-    copy: {
-        defaultMessage: 'Copy',
-        description: 'Label for the copy button',
-        id: 'paint.paintEditor.copy'
-    },
-    paste: {
-        defaultMessage: 'Paste',
-        description: 'Label for the paste button',
-        id: 'paint.paintEditor.paste'
     }
 });
 
@@ -258,20 +246,6 @@ class PaintEditorComponent extends React.Component {
                                     onUpdateSvg={this.props.onUpdateSvg}
                                 />
                             </InputGroup>
-                            <InputGroup className={classNames(styles.modDashedBorder, styles.modLabeledIconHeight)}>
-                                <LabeledIconButton
-                                    disabled
-                                    imgSrc={copyIcon}
-                                    title={this.props.intl.formatMessage(messages.copy)}
-                                    onClick={function () {}}
-                                />
-                                <LabeledIconButton
-                                    disabled
-                                    imgSrc={pasteIcon}
-                                    title={this.props.intl.formatMessage(messages.paste)}
-                                    onClick={function () {}}
-                                />
-                            </InputGroup>
                             <InputGroup className={styles.modModeTools}>
                                 <ModeToolsComponent />
                             </InputGroup>