From 2bae8ed71ac34e5f7ea4b8462e0772552cb2e13c Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Fri, 9 Feb 2018 09:32:00 -0500
Subject: [PATCH] Mark all clickable images as not draggable.

When using images as clickable elements (within buttons or alone) you
need to mark them as not draggable. They are draggable by default and
starting a drag prevents the onClick from being handled, messing up the
clickable behavior.
---
 src/components/color-button/color-button.jsx           |  2 ++
 src/components/color-picker/color-picker.jsx           | 10 ++++++++--
 src/components/dropdown/dropdown.jsx                   |  1 +
 .../labeled-icon-button/labeled-icon-button.jsx        |  1 +
 src/components/mode-tools/mode-tools.jsx               |  2 ++
 src/components/paint-editor/paint-editor.jsx           |  9 +++++++++
 src/components/tool-select-base/tool-select-base.jsx   |  1 +
 7 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/color-button/color-button.jsx b/src/components/color-button/color-button.jsx
index 51b0c81d..af636369 100644
--- a/src/components/color-button/color-button.jsx
+++ b/src/components/color-button/color-button.jsx
@@ -29,11 +29,13 @@ const ColorButtonComponent = props => (
             {props.color === null ? (
                 <img
                     className={styles.swatchIcon}
+                    draggable={false}
                     src={noFillIcon}
                 />
             ) : ((props.color === MIXED ? (
                 <img
                     className={styles.swatchIcon}
+                    draggable={false}
                     src={mixedFillIcon}
                 />
             ) : null))}
diff --git a/src/components/color-picker/color-picker.jsx b/src/components/color-picker/color-picker.jsx
index c732eb0c..e3239a54 100644
--- a/src/components/color-picker/color-picker.jsx
+++ b/src/components/color-picker/color-picker.jsx
@@ -114,7 +114,10 @@ class ColorPickerComponent extends React.Component {
                             })}
                             onClick={this.props.onTransparent}
                         >
-                            <img src={noFillIcon} />
+                            <img
+                                draggable={false}
+                                src={noFillIcon}
+                            />
                         </div>
                     </div>
                     <div className={styles.swatches}>
@@ -125,7 +128,10 @@ class ColorPickerComponent extends React.Component {
                             })}
                             onClick={this.props.onActivateEyeDropper}
                         >
-                            <img src={eyeDropperIcon} />
+                            <img
+                                draggable={false}
+                                src={eyeDropperIcon}
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/src/components/dropdown/dropdown.jsx b/src/components/dropdown/dropdown.jsx
index 31d2ba6d..497d4e89 100644
--- a/src/components/dropdown/dropdown.jsx
+++ b/src/components/dropdown/dropdown.jsx
@@ -50,6 +50,7 @@ class Dropdown extends React.Component {
                         className={classNames(styles.dropdownIcon, {
                             [styles.modCaretUp]: this.state.isOpen
                         })}
+                        draggable={false}
                         src={dropdownIcon}
                     />
                 </div>
diff --git a/src/components/labeled-icon-button/labeled-icon-button.jsx b/src/components/labeled-icon-button/labeled-icon-button.jsx
index 45555f36..332f0dca 100644
--- a/src/components/labeled-icon-button/labeled-icon-button.jsx
+++ b/src/components/labeled-icon-button/labeled-icon-button.jsx
@@ -26,6 +26,7 @@ const LabeledIconButton = ({
         <img
             alt={imgAlt}
             className={styles.editFieldIcon}
+            draggable={false}
             src={imgSrc}
         />
         <span className={styles.editFieldTitle}>{title}</span>
diff --git a/src/components/mode-tools/mode-tools.jsx b/src/components/mode-tools/mode-tools.jsx
index e2b9b3ec..fd788ba3 100644
--- a/src/components/mode-tools/mode-tools.jsx
+++ b/src/components/mode-tools/mode-tools.jsx
@@ -80,6 +80,7 @@ const ModeToolsComponent = props => {
                     <img
                         alt={props.intl.formatMessage(messages.brushSize)}
                         className={styles.modeToolsIcon}
+                        draggable={false}
                         src={brushIcon}
                     />
                 </div>
@@ -101,6 +102,7 @@ const ModeToolsComponent = props => {
                     <img
                         alt={props.intl.formatMessage(messages.eraserSize)}
                         className={styles.modeToolsIcon}
+                        draggable={false}
                         src={eraserIcon}
                     />
                 </div>
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index a39016b9..413a2449 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -160,6 +160,7 @@ const PaintEditorComponent = props => {
                                     <img
                                         alt={props.intl.formatMessage(messages.undo)}
                                         className={styles.buttonGroupButtonIcon}
+                                        draggable={false}
                                         src={undoIcon}
                                     />
                                 </Button>
@@ -178,6 +179,7 @@ const PaintEditorComponent = props => {
                                     <img
                                         alt={props.intl.formatMessage(messages.redo)}
                                         className={styles.buttonGroupButtonIcon}
+                                        draggable={false}
                                         src={redoIcon}
                                     />
                                 </Button>
@@ -258,6 +260,7 @@ const PaintEditorComponent = props => {
                                             >
                                                 <img
                                                     className={styles.menuItemIcon}
+                                                    draggable={false}
                                                     src={sendFrontIcon}
                                                 />
                                                 <span>{props.intl.formatMessage(messages.front)}</span>
@@ -271,6 +274,7 @@ const PaintEditorComponent = props => {
                                             >
                                                 <img
                                                     className={styles.menuItemIcon}
+                                                    draggable={false}
                                                     src={sendBackIcon}
                                                 />
                                                 <span>{props.intl.formatMessage(messages.back)}</span>
@@ -283,6 +287,7 @@ const PaintEditorComponent = props => {
                                             >
                                                 <img
                                                     className={styles.menuItemIcon}
+                                                    draggable={false}
                                                     src={rotationPointIcon}
                                                 />
                                                 <span>{'Rotation Point'}</span>
@@ -398,6 +403,7 @@ const PaintEditorComponent = props => {
                             <div className={styles.bitmapButton}>
                                 <img
                                     className={styles.bitmapButtonIcon}
+                                    draggable={false}
                                     src={bitmapIcon}
                                 />
                                 <span>
@@ -415,6 +421,7 @@ const PaintEditorComponent = props => {
                                     <img
                                         alt="Zoom Out"
                                         className={styles.buttonGroupButtonIcon}
+                                        draggable={false}
                                         src={zoomOutIcon}
                                     />
                                 </Button>
@@ -425,6 +432,7 @@ const PaintEditorComponent = props => {
                                     <img
                                         alt="Zoom Reset"
                                         className={styles.buttonGroupButtonIcon}
+                                        draggable={false}
                                         src={zoomResetIcon}
                                     />
                                 </Button>
@@ -435,6 +443,7 @@ const PaintEditorComponent = props => {
                                     <img
                                         alt="Zoom In"
                                         className={styles.buttonGroupButtonIcon}
+                                        draggable={false}
                                         src={zoomInIcon}
                                     />
                                 </Button>
diff --git a/src/components/tool-select-base/tool-select-base.jsx b/src/components/tool-select-base/tool-select-base.jsx
index 1c27268e..846b4dce 100644
--- a/src/components/tool-select-base/tool-select-base.jsx
+++ b/src/components/tool-select-base/tool-select-base.jsx
@@ -24,6 +24,7 @@ const ToolSelectComponent = props => (
                 id: props.imgDescriptor.id
             })}
             className={styles.toolSelectIcon}
+            draggable={false}
             src={props.imgSrc}
         />
     </Button>