From b8aadc3c5461a72f3068be97bb4b17c8a75cf7db Mon Sep 17 00:00:00 2001
From: Paul Kaplan <pkaplan@media.mit.edu>
Date: Thu, 26 Oct 2017 17:33:33 -0400
Subject: [PATCH] Disable fill or outline indicators for brush, line and pen
 mode.

---
 src/components/fill-color-indicator.jsx    | 2 +-
 src/components/input-group/input-group.css | 6 ++++++
 src/components/input-group/input-group.jsx | 4 +++-
 src/components/stroke-color-indicator.jsx  | 2 +-
 src/components/stroke-width-indicator.jsx  | 3 ++-
 src/containers/fill-color-indicator.jsx    | 3 +++
 src/containers/stroke-color-indicator.jsx  | 3 +++
 src/containers/stroke-width-indicator.jsx  | 4 ++++
 8 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/components/fill-color-indicator.jsx b/src/components/fill-color-indicator.jsx
index 1e696ea5..e3aa63d4 100644
--- a/src/components/fill-color-indicator.jsx
+++ b/src/components/fill-color-indicator.jsx
@@ -17,7 +17,7 @@ const messages = defineMessages({
 });
 
 const FillColorIndicatorComponent = props => (
-    <InputGroup>
+    <InputGroup disabled={props.disabled}>
         <Popover
             body={
                 <ColorPicker
diff --git a/src/components/input-group/input-group.css b/src/components/input-group/input-group.css
index 80fdba7a..66905a2a 100644
--- a/src/components/input-group/input-group.css
+++ b/src/components/input-group/input-group.css
@@ -3,3 +3,9 @@
 .input-group + .input-group {
     margin-left: calc(3 * $grid-unit);
 }
+
+.disabled {
+    opacity: 0.3;
+    /* Prevent any user actions */
+    pointer-events: none;
+}
diff --git a/src/components/input-group/input-group.jsx b/src/components/input-group/input-group.jsx
index 423dc5e7..87d33a78 100644
--- a/src/components/input-group/input-group.jsx
+++ b/src/components/input-group/input-group.jsx
@@ -5,7 +5,9 @@ import PropTypes from 'prop-types';
 import styles from './input-group.css';
 
 const InputGroup = props => (
-    <div className={classNames(props.className, styles.inputGroup)}>
+    <div className={classNames(props.className, styles.inputGroup, {
+        [styles.disabled]: props.disabled
+    })}>
         {props.children}
     </div>
 );
diff --git a/src/components/stroke-color-indicator.jsx b/src/components/stroke-color-indicator.jsx
index 5a3cfae0..af427722 100644
--- a/src/components/stroke-color-indicator.jsx
+++ b/src/components/stroke-color-indicator.jsx
@@ -17,7 +17,7 @@ const messages = defineMessages({
 });
 
 const StrokeColorIndicatorComponent = props => (
-    <InputGroup>
+    <InputGroup disabled={props.disabled}>
         <Popover
             body={
                 <ColorPicker
diff --git a/src/components/stroke-width-indicator.jsx b/src/components/stroke-width-indicator.jsx
index fe5267c0..a5bcd395 100644
--- a/src/components/stroke-width-indicator.jsx
+++ b/src/components/stroke-width-indicator.jsx
@@ -9,8 +9,9 @@ import {MAX_STROKE_WIDTH} from '../reducers/stroke-width';
 
 const BufferedInput = BufferedInputHOC(Input);
 const StrokeWidthIndicatorComponent = props => (
-    <InputGroup>
+    <InputGroup disabled={props.disabled}>
         <BufferedInput
+            disabled={props.disabled}
             small
             max={MAX_STROKE_WIDTH}
             min="0"
diff --git a/src/containers/fill-color-indicator.jsx b/src/containers/fill-color-indicator.jsx
index ab7a5d8a..73757694 100644
--- a/src/containers/fill-color-indicator.jsx
+++ b/src/containers/fill-color-indicator.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import {changeFillColor} from '../reducers/fill-color';
 import {openFillColor, closeFillColor} from '../reducers/modals';
+import Modes from '../modes/modes';
 
 import FillColorIndicatorComponent from '../components/fill-color-indicator.jsx';
 import {applyFillColorToSelection} from '../helper/style-path';
@@ -30,6 +31,7 @@ class FillColorIndicator extends React.Component {
 }
 
 const mapStateToProps = state => ({
+    disabled: state.scratchPaint.mode === Modes.PEN,
     fillColor: state.scratchPaint.color.fillColor,
     fillColorModalVisible: state.scratchPaint.modals.fillColor
 });
@@ -47,6 +49,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 FillColorIndicator.propTypes = {
+    disabled: PropTypes.bool.isRequired,
     fillColor: PropTypes.string,
     onChangeFillColor: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired
diff --git a/src/containers/stroke-color-indicator.jsx b/src/containers/stroke-color-indicator.jsx
index 88d681c4..240be3ee 100644
--- a/src/containers/stroke-color-indicator.jsx
+++ b/src/containers/stroke-color-indicator.jsx
@@ -4,6 +4,7 @@ import React from 'react';
 import bindAll from 'lodash.bindall';
 import {changeStrokeColor} from '../reducers/stroke-color';
 import {openStrokeColor, closeStrokeColor} from '../reducers/modals';
+import Modes from '../modes/modes';
 
 import StrokeColorIndicatorComponent from '../components/stroke-color-indicator.jsx';
 import {applyStrokeColorToSelection} from '../helper/style-path';
@@ -30,6 +31,7 @@ class StrokeColorIndicator extends React.Component {
 }
 
 const mapStateToProps = state => ({
+    disabled: state.scratchPaint.mode === Modes.BRUSH,
     strokeColor: state.scratchPaint.color.strokeColor,
     strokeColorModalVisible: state.scratchPaint.modals.strokeColor
 });
@@ -47,6 +49,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 StrokeColorIndicator.propTypes = {
+    disabled: PropTypes.bool.isRequired,
     onChangeStrokeColor: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired,
     strokeColor: PropTypes.string
diff --git a/src/containers/stroke-width-indicator.jsx b/src/containers/stroke-width-indicator.jsx
index fe836b8a..14e717e1 100644
--- a/src/containers/stroke-width-indicator.jsx
+++ b/src/containers/stroke-width-indicator.jsx
@@ -5,6 +5,7 @@ import bindAll from 'lodash.bindall';
 import {changeStrokeWidth} from '../reducers/stroke-width';
 import StrokeWidthIndicatorComponent from '../components/stroke-width-indicator.jsx';
 import {applyStrokeWidthToSelection} from '../helper/style-path';
+import Modes from '../modes/modes';
 
 class StrokeWidthIndicator extends React.Component {
     constructor (props) {
@@ -20,6 +21,7 @@ class StrokeWidthIndicator extends React.Component {
     render () {
         return (
             <StrokeWidthIndicatorComponent
+                disabled={this.props.disabled}
                 strokeWidth={this.props.strokeWidth}
                 onChangeStrokeWidth={this.handleChangeStrokeWidth}
             />
@@ -28,6 +30,7 @@ class StrokeWidthIndicator extends React.Component {
 }
 
 const mapStateToProps = state => ({
+    disabled: state.scratchPaint.mode === Modes.BRUSH,
     strokeWidth: state.scratchPaint.color.strokeWidth
 });
 const mapDispatchToProps = dispatch => ({
@@ -37,6 +40,7 @@ const mapDispatchToProps = dispatch => ({
 });
 
 StrokeWidthIndicator.propTypes = {
+    disabled: PropTypes.bool.isRequired,
     onChangeStrokeWidth: PropTypes.func.isRequired,
     onUpdateSvg: PropTypes.func.isRequired,
     strokeWidth: PropTypes.number