From 1a654a22edaa154f692d98785b875cf867bbfda3 Mon Sep 17 00:00:00 2001
From: DD <liudi08@gmail.com>
Date: Wed, 1 Nov 2017 11:15:13 -0400
Subject: [PATCH] Move copy/paste to mode tools

---
 .../icons/copy.svg                            |  0
 .../mode-tools/{ => icons}/curved-point.svg   |  0
 .../{ => icons}/flip-horizontal.svg           |  0
 .../mode-tools/{ => icons}/flip-vertical.svg  |  0
 .../icons/paste.svg                           |  0
 .../mode-tools/{ => icons}/straight-point.svg |  0
 src/components/mode-tools/mode-tools.css      | 10 ++++
 src/components/mode-tools/mode-tools.jsx      | 59 ++++++++++++++-----
 src/components/paint-editor/paint-editor.jsx  | 26 --------
 9 files changed, 55 insertions(+), 40 deletions(-)
 rename src/components/{paint-editor => mode-tools}/icons/copy.svg (100%)
 rename src/components/mode-tools/{ => icons}/curved-point.svg (100%)
 mode change 100755 => 100644
 rename src/components/mode-tools/{ => icons}/flip-horizontal.svg (100%)
 mode change 100755 => 100644
 rename src/components/mode-tools/{ => icons}/flip-vertical.svg (100%)
 mode change 100755 => 100644
 rename src/components/{paint-editor => mode-tools}/icons/paste.svg (100%)
 rename src/components/mode-tools/{ => icons}/straight-point.svg (100%)
 mode change 100755 => 100644

diff --git a/src/components/paint-editor/icons/copy.svg b/src/components/mode-tools/icons/copy.svg
similarity index 100%
rename from src/components/paint-editor/icons/copy.svg
rename to src/components/mode-tools/icons/copy.svg
diff --git a/src/components/mode-tools/curved-point.svg b/src/components/mode-tools/icons/curved-point.svg
old mode 100755
new mode 100644
similarity index 100%
rename from src/components/mode-tools/curved-point.svg
rename to src/components/mode-tools/icons/curved-point.svg
diff --git a/src/components/mode-tools/flip-horizontal.svg b/src/components/mode-tools/icons/flip-horizontal.svg
old mode 100755
new mode 100644
similarity index 100%
rename from src/components/mode-tools/flip-horizontal.svg
rename to src/components/mode-tools/icons/flip-horizontal.svg
diff --git a/src/components/mode-tools/flip-vertical.svg b/src/components/mode-tools/icons/flip-vertical.svg
old mode 100755
new mode 100644
similarity index 100%
rename from src/components/mode-tools/flip-vertical.svg
rename to src/components/mode-tools/icons/flip-vertical.svg
diff --git a/src/components/paint-editor/icons/paste.svg b/src/components/mode-tools/icons/paste.svg
similarity index 100%
rename from src/components/paint-editor/icons/paste.svg
rename to src/components/mode-tools/icons/paste.svg
diff --git a/src/components/mode-tools/straight-point.svg b/src/components/mode-tools/icons/straight-point.svg
old mode 100755
new mode 100644
similarity index 100%
rename from src/components/mode-tools/straight-point.svg
rename to src/components/mode-tools/icons/straight-point.svg
diff --git a/src/components/mode-tools/mode-tools.css b/src/components/mode-tools/mode-tools.css
index 7e319b00..e053bd9a 100644
--- a/src/components/mode-tools/mode-tools.css
+++ b/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 */
+}
diff --git a/src/components/mode-tools/mode-tools.jsx b/src/components/mode-tools/mode-tools.jsx
index ef6dad32..7c5fbc7b 100644
--- a/src/components/mode-tools/mode-tools.jsx
+++ b/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}
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 038d813e..6ea036a1 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/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>