Implement gradient outlines

src/components/fill-color-indicator.jsx → src/components/color-indicator.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Popover from 'react-popover';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
 
 import ColorButton from './color-button/color-button.jsx';
 import ColorPicker from '../containers/color-picker.jsx';
@@ -10,61 +9,55 @@ import Label from './forms/label.jsx';
 
 import GradientTypes from '../lib/gradient-types';
 
-const messages = defineMessages({
-    fill: {
-        id: 'paint.paintEditor.fill',
-        description: 'Label for the color picker for the fill color',
-        defaultMessage: 'Fill'
-    }
-});
-
-const FillColorIndicatorComponent = props => (
+const ColorIndicatorComponent = props => (
     <InputGroup
         className={props.className}
         disabled={props.disabled}
     >
         <Popover
             body={
                 <ColorPicker
-                    color={props.fillColor}
-                    color2={props.fillColor2}
+                    color={props.color}
+                    color2={props.color2}
                     gradientType={props.gradientType}
                     shouldShowGradientTools={props.shouldShowGradientTools}
-                    onChangeColor={props.onChangeFillColor}
+                    onChangeColor={props.onChangeColor}
                     onChangeGradientType={props.onChangeGradientType}
                     onSwap={props.onSwap}
                 />
             }
-            isOpen={props.fillColorModalVisible}
+            isOpen={props.colorModalVisible}
             preferPlace="below"
-            onOuterAction={props.onCloseFillColor}
+            onOuterAction={props.onCloseColor}
         >
-            <Label text={props.intl.formatMessage(messages.fill)}>
+            <Label text={props.label}>
                 <ColorButton
-                    color={props.fillColor}
-                    color2={props.fillColor2}
+                    color={props.color}
+                    color2={props.color2}
                     gradientType={props.gradientType}
-                    onClick={props.onOpenFillColor}
+                    onClick={props.onOpenColor}
+                    outline={props.outline}
                 />
             </Label>
         </Popover>
     </InputGroup>
 );
 
-FillColorIndicatorComponent.propTypes = {
+ColorIndicatorComponent.propTypes = {
     className: PropTypes.string,
     disabled: PropTypes.bool.isRequired,
-    fillColor: PropTypes.string,
-    fillColor2: PropTypes.string,
-    fillColorModalVisible: PropTypes.bool.isRequired,
+    color: PropTypes.string,
+    color2: PropTypes.string,
+    colorModalVisible: PropTypes.bool.isRequired,
     gradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
-    intl: intlShape,
-    onChangeFillColor: PropTypes.func.isRequired,
+    label: PropTypes.string.isRequired,
+    onChangeColor: PropTypes.func.isRequired,
     onChangeGradientType: PropTypes.func.isRequired,
-    onCloseFillColor: PropTypes.func.isRequired,
-    onOpenFillColor: PropTypes.func.isRequired,
+    onCloseColor: PropTypes.func.isRequired,
+    onOpenColor: PropTypes.func.isRequired,
     onSwap: PropTypes.func.isRequired,
+    outline: PropTypes.bool.isRequired,
     shouldShowGradientTools: PropTypes.bool.isRequired
 };
 
-export default injectIntl(FillColorIndicatorComponent);
+export default ColorIndicatorComponent;

src/containers/bit-brush-mode.jsx

@@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 import {MIXED} from '../helper/style-path';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 import {clearSelection} from '../helper/selection';
-import {clearGradient} from '../reducers/selection-gradient-type';
 
 import BitBrushModeComponent from '../components/bit-brush-mode/bit-brush-mode.jsx';
 import BitBrushTool from '../helper/bit-tools/brush-tool';
@@ -94,15 +93,15 @@ BitBrushMode.propTypes = {
 
 const mapStateToProps = state => ({
     bitBrushSize: state.scratchPaint.bitBrushSize,
-    color: state.scratchPaint.color.fillColor,
+    color: state.scratchPaint.color.fillColor.primary,
     isBitBrushModeActive: state.scratchPaint.mode === Modes.BIT_BRUSH
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.BIT_BRUSH));

src/containers/bit-fill-mode.jsx

@@ -7,8 +7,7 @@ import GradientTypes from '../lib/gradient-types';
 
 import FillModeComponent from '../components/bit-fill-mode/bit-fill-mode.jsx';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
-import {changeFillColor2} from '../reducers/fill-color-2';
+import {changeFillColor, changeFillColor2, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 import {changeGradientType} from '../reducers/fill-mode-gradient-type';
@@ -66,10 +65,10 @@ class BitFillMode extends React.Component {
             this.props.onChangeFillColor(DEFAULT_COLOR, 0);
         }
         const gradientType = this.props.fillModeGradientType ?
-            this.props.fillModeGradientType : this.props.selectModeGradientType;
+            this.props.fillModeGradientType : this.props.styleGradientType;
         let color2 = this.props.color2;
-        if (gradientType !== this.props.selectModeGradientType) {
-            if (this.props.selectModeGradientType === GradientTypes.SOLID) {
+        if (gradientType !== this.props.styleGradientType) {
+            if (this.props.styleGradientType === GradientTypes.SOLID) {
                 color2 = getRotatedColor(color);
                 this.props.onChangeFillColor(color2, 1);
             }
@@ -105,20 +104,20 @@ BitFillMode.propTypes = {
     clearSelectedItems: PropTypes.func.isRequired,
     color: PropTypes.string,
     color2: PropTypes.string,
+    styleGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired,
     fillModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)),
     handleMouseDown: PropTypes.func.isRequired,
     isFillModeActive: PropTypes.bool.isRequired,
     onChangeFillColor: PropTypes.func.isRequired,
-    onUpdateImage: PropTypes.func.isRequired,
-    selectModeGradientType: PropTypes.oneOf(Object.keys(GradientTypes)).isRequired
+    onUpdateImage: PropTypes.func.isRequired
 };
 
 const mapStateToProps = state => ({
     fillModeGradientType: state.scratchPaint.fillMode.gradientType, // Last user-selected gradient type
-    color: state.scratchPaint.color.fillColor,
-    color2: state.scratchPaint.color.fillColor2,
-    isFillModeActive: state.scratchPaint.mode === Modes.BIT_FILL,
-    selectModeGradientType: state.scratchPaint.color.gradientType
+    color: state.scratchPaint.color.fillColor.primary,
+    color2: state.scratchPaint.color.fillColor.secondary,
+    styleGradientType: state.scratchPaint.color.fillColor.gradientType,
+    isFillModeActive: state.scratchPaint.mode === Modes.BIT_FILL
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {

src/containers/bit-line-mode.jsx

@@ -5,11 +5,10 @@ import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 import {MIXED} from '../helper/style-path';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, clearFillGradient, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems} from '../reducers/selected-items';
 import {clearSelection} from '../helper/selection';
-import {clearGradient} from '../reducers/selection-gradient-type';
 
 import BitLineModeComponent from '../components/bit-line-mode/bit-line-mode.jsx';
 import BitLineTool from '../helper/bit-tools/line-tool';
@@ -94,15 +93,15 @@ BitLineMode.propTypes = {
 
 const mapStateToProps = state => ({
     bitBrushSize: state.scratchPaint.bitBrushSize,
-    color: state.scratchPaint.color.fillColor,
+    color: state.scratchPaint.color.fillColor.primary,
     isBitLineModeActive: state.scratchPaint.mode === Modes.BIT_LINE
 });
 const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {
         dispatch(clearSelectedItems());
     },
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     handleMouseDown: () => {
         dispatch(changeMode(Modes.BIT_LINE));

src/containers/bit-oval-mode.jsx

@@ -4,12 +4,12 @@ import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
+import ColorStyleProptype from '../lib/color-style-proptype';
 import {MIXED} from '../helper/style-path';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {clearSelection, getSelectedLeafItems} from '../helper/selection';
@@ -62,9 +62,8 @@ class BitOvalMode extends React.Component {
     }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
-        this.props.clearGradient();
         // Force the default brush color if fill is MIXED or transparent
-        const fillColorPresent = this.props.color !== MIXED && this.props.color !== null;
+        const fillColorPresent = this.props.color.primary !== MIXED && this.props.color.primary !== null;
         if (!fillColorPresent) {
             this.props.onChangeFillColor(DEFAULT_COLOR);
         }
@@ -95,9 +94,8 @@ class BitOvalMode extends React.Component {
 }
 
 BitOvalMode.propTypes = {
-    clearGradient: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
-    color: PropTypes.string,
+    color: ColorStyleProptype,
     filled: PropTypes.bool,
     handleMouseDown: PropTypes.func.isRequired,
     isOvalModeActive: PropTypes.bool.isRequired,
@@ -122,9 +120,6 @@ const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {
         dispatch(clearSelectedItems());
     },
-    clearGradient: () => {
-        dispatch(clearGradient());
-    },
     setCursor: cursorString => {
         dispatch(setCursor(cursorString));
     },

src/containers/bit-rect-mode.jsx

@@ -4,12 +4,12 @@ import React from 'react';
 import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
+import ColorStyleProptype from '../lib/color-style-proptype';
 import {MIXED} from '../helper/style-path';
 
-import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-color';
+import {changeFillColor, DEFAULT_COLOR} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {clearSelection, getSelectedLeafItems} from '../helper/selection';
@@ -62,9 +62,8 @@ class BitRectMode extends React.Component {
     }
     activateTool () {
         clearSelection(this.props.clearSelectedItems);
-        this.props.clearGradient();
         // Force the default brush color if fill is MIXED or transparent
-        const fillColorPresent = this.props.color !== MIXED && this.props.color !== null;
+        const fillColorPresent = this.props.color.primary !== MIXED && this.props.color.primary !== null;
         if (!fillColorPresent) {
             this.props.onChangeFillColor(DEFAULT_COLOR);
         }
@@ -95,9 +94,8 @@ class BitRectMode extends React.Component {
 }
 
 BitRectMode.propTypes = {
-    clearGradient: PropTypes.func.isRequired,
     clearSelectedItems: PropTypes.func.isRequired,
-    color: PropTypes.string,
+    color: ColorStyleProptype,
     filled: PropTypes.bool,
     handleMouseDown: PropTypes.func.isRequired,
     isRectModeActive: PropTypes.bool.isRequired,
@@ -122,9 +120,6 @@ const mapDispatchToProps = dispatch => ({
     clearSelectedItems: () => {
         dispatch(clearSelectedItems());
     },
-    clearGradient: () => {
-        dispatch(clearGradient());
-    },
     setCursor: cursorString => {
         dispatch(setCursor(cursorString));
     },

src/containers/bit-select-mode.jsx

@@ -5,9 +5,9 @@ import {connect} from 'react-redux';
 import bindAll from 'lodash.bindall';
 import Modes from '../lib/modes';
 
+import {clearFillGradient} from '../reducers/fill-style';
 import {changeMode} from '../reducers/modes';
 import {clearSelectedItems, setSelectedItems} from '../reducers/selected-items';
-import {clearGradient} from '../reducers/selection-gradient-type';
 import {setCursor} from '../reducers/cursor';
 
 import {getSelectedLeafItems} from '../helper/selection';
@@ -88,7 +88,7 @@ const mapStateToProps = state => ({
 });
 const mapDispatchToProps = dispatch => ({
     clearGradient: () => {
-        dispatch(clearGradient());
+        dispatch(clearFillGradient());
     },
     clearSelectedItems: () => {
         dispatch(clearSelectedItems());