From d98a493954ba113f14b63d3c9aefd79986c685f7 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 26 Oct 2017 15:52:37 -0400 Subject: [PATCH 1/7] Add initial transparent and mixed icons for color buttons and swatch --- src/components/color-button/color-button.css | 5 ++++ src/components/color-button/color-button.jsx | 24 ++++++++++++++++++-- src/components/color-button/mixed-fill.svg | 16 +++++++++++++ src/components/color-button/no-fill.svg | 12 ++++++++++ src/components/color-picker/color-picker.css | 4 ++++ src/components/color-picker/color-picker.jsx | 5 +++- 6 files changed, 63 insertions(+), 3 deletions(-) create mode 100644 src/components/color-button/mixed-fill.svg create mode 100644 src/components/color-button/no-fill.svg diff --git a/src/components/color-button/color-button.css b/src/components/color-button/color-button.css index 1fd2e0c0..e09a64a3 100644 --- a/src/components/color-button/color-button.css +++ b/src/components/color-button/color-button.css @@ -30,3 +30,8 @@ color: #575e75; font-size: 0.75rem; } + +.swatch-icon { + width: 1.75rem; + margin: auto; +} diff --git a/src/components/color-button/color-button.jsx b/src/components/color-button/color-button.jsx index 9a7087e5..f36bdb66 100644 --- a/src/components/color-button/color-button.jsx +++ b/src/components/color-button/color-button.jsx @@ -1,8 +1,16 @@ import React from 'react'; import PropTypes from 'prop-types'; +import {MIXED} from '../../helper/style-path'; + +import noFillIcon from './no-fill.svg'; +import mixedFillIcon from './mixed-fill.svg'; import styles from './color-button.css'; +const colorToBackground = (color) => { + return color === MIXED || color === null ? 'white' : color +}; + const ColorButtonComponent = props => (
(
+ > + {props.color === null ? ( + + ) : ((props.color === MIXED ? ( + + ) : null))} +
▾
); diff --git a/src/components/color-button/mixed-fill.svg b/src/components/color-button/mixed-fill.svg new file mode 100644 index 00000000..7a4fbcde --- /dev/null +++ b/src/components/color-button/mixed-fill.svg @@ -0,0 +1,16 @@ + + + + mixed-fill + Created with Sketch. + + + + + + + + + + + diff --git a/src/components/color-button/no-fill.svg b/src/components/color-button/no-fill.svg new file mode 100644 index 00000000..d955dda1 --- /dev/null +++ b/src/components/color-button/no-fill.svg @@ -0,0 +1,12 @@ + + + + no-fill + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/color-picker/color-picker.css b/src/components/color-picker/color-picker.css index 5ef9b537..3a796cff 100644 --- a/src/components/color-picker/color-picker.css +++ b/src/components/color-picker/color-picker.css @@ -48,3 +48,7 @@ border: 1px solid #4C97FF; box-shadow: 0px 0px 0px 3px hsla(215, 100%, 65%, 0.2); } + +.swatch > img { + max-width: 100%; +} diff --git a/src/components/color-picker/color-picker.jsx b/src/components/color-picker/color-picker.jsx index ab54a986..1317a510 100644 --- a/src/components/color-picker/color-picker.jsx +++ b/src/components/color-picker/color-picker.jsx @@ -9,6 +9,7 @@ import {MIXED} from '../../helper/style-path'; import Slider from '../forms/slider.jsx'; import styles from './color-picker.css'; +import noFillIcon from '../color-button/no-fill.svg'; const colorStringToHsv = hexString => { const hsv = parseColor(hexString).hsv; @@ -179,7 +180,9 @@ class ColorPickerComponent extends React.Component { [styles.activeSwatch]: this.props.color === null })} onClick={this.handleTransparent} - /> + > + + From 40ec57fbf11a9816c8156dc041cfa7d1fb1dcf90 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 26 Oct 2017 17:09:44 -0400 Subject: [PATCH 2/7] Force a real color when activating brush, pen and line mode. --- src/containers/brush-mode.jsx | 15 +++++++++++++++ src/containers/line-mode.jsx | 19 +++++++++++++++++-- src/containers/pen-mode.jsx | 13 +++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) diff --git a/src/containers/brush-mode.jsx b/src/containers/brush-mode.jsx index f525deab..a9401f38 100644 --- a/src/containers/brush-mode.jsx +++ b/src/containers/brush-mode.jsx @@ -4,7 +4,9 @@ import {connect} from 'react-redux'; import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; import Blobbiness from '../helper/blob-tools/blob'; +import {MIXED} from '../helper/style-path'; +import {changeFillColor} from '../reducers/fill-color'; import {changeBrushSize} from '../reducers/brush-mode'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; @@ -13,6 +15,9 @@ import {clearSelection} from '../helper/selection'; import BrushModeComponent from '../components/brush-mode/brush-mode.jsx'; class BrushMode extends React.Component { + static get DEFAULT_COLOR () { + return '#9966FF'; + } constructor (props) { super(props); bindAll(this, [ @@ -49,6 +54,12 @@ class BrushMode extends React.Component { // analogous to how selection works with eraser clearSelection(this.props.clearSelectedItems); + // Force the default brush color if fill is MIXED or transparent + const {fillColor} = this.props.colorState; + if (fillColor === MIXED || fillColor === null) { + this.props.onChangeFillColor(BrushMode.DEFAULT_COLOR); + } + // TODO: This is temporary until a component that provides the brush size is hooked up this.props.canvas.addEventListener('mousewheel', this.onScroll); this.blob.activateTool({ @@ -93,6 +104,7 @@ BrushMode.propTypes = { }).isRequired, handleMouseDown: PropTypes.func.isRequired, isBrushModeActive: PropTypes.bool.isRequired, + onChangeFillColor: PropTypes.func.isRequired, onUpdateSvg: PropTypes.func.isRequired }; @@ -110,6 +122,9 @@ const mapDispatchToProps = dispatch => ({ }, handleMouseDown: () => { dispatch(changeMode(Modes.BRUSH)); + }, + onChangeFillColor: fillColor => { + dispatch(changeFillColor(fillColor)); } }); diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index e9d5c592..3716b619 100644 --- a/src/containers/line-mode.jsx +++ b/src/containers/line-mode.jsx @@ -8,8 +8,10 @@ import {clearSelection} from '../helper/selection'; import {endPointHit, touching} from '../helper/snapping'; import {drawHitPoint, removeHitPoint} from '../helper/guides'; import {stylePath} from '../helper/style-path'; +import {changeStrokeColor} from '../reducers/stroke-color'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; +import {MIXED} from '../helper/style-path'; import LineModeComponent from '../components/line-mode/line-mode.jsx'; @@ -17,6 +19,9 @@ class LineMode extends React.Component { static get SNAP_TOLERANCE () { return 6; } + static get DEFAULT_COLOR () { + return '#000000'; + } constructor (props) { super(props); bindAll(this, [ @@ -46,8 +51,15 @@ class LineMode extends React.Component { } activateTool () { clearSelection(this.props.clearSelectedItems); + + // Force the default line color if stroke is MIXED or transparent + const {strokeColor} = this.props.colorState; + if (strokeColor === MIXED || strokeColor === null) { + this.props.onChangeStrokeColor(LineMode.DEFAULT_COLOR); + } + this.tool = new paper.Tool(); - + this.path = null; this.hitResult = null; @@ -182,7 +194,7 @@ class LineMode extends React.Component { removeHitPoint(); this.hitResult = null; } - + if (this.path) { this.props.onUpdateSvg(); this.path = null; @@ -233,6 +245,9 @@ const mapDispatchToProps = dispatch => ({ }, handleMouseDown: () => { dispatch(changeMode(Modes.LINE)); + }, + onChangeStrokeColor: strokeColor => { + dispatch(changeStrokeColor(strokeColor)); } }); diff --git a/src/containers/pen-mode.jsx b/src/containers/pen-mode.jsx index d971f496..32ca4bc8 100644 --- a/src/containers/pen-mode.jsx +++ b/src/containers/pen-mode.jsx @@ -4,14 +4,19 @@ import {connect} from 'react-redux'; import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; +import {changeStrokeColor} from '../reducers/stroke-color'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; +import {MIXED} from '../helper/style-path'; import {clearSelection} from '../helper/selection'; import PenTool from '../helper/tools/pen-tool'; import PenModeComponent from '../components/pen-mode/pen-mode.jsx'; class PenMode extends React.Component { + static get DEFAULT_COLOR () { + return '#000000'; + } constructor (props) { super(props); bindAll(this, [ @@ -42,6 +47,11 @@ class PenMode extends React.Component { } activateTool () { clearSelection(this.props.clearSelectedItems); + // Force the default pen color if stroke is MIXED or transparent + const {strokeColor} = this.props.colorState; + if (strokeColor === MIXED || strokeColor === null) { + this.props.onChangeStrokeColor(PenMode.DEFAULT_COLOR) + } this.tool = new PenTool( this.props.clearSelectedItems, this.props.onUpdateSvg @@ -89,6 +99,9 @@ const mapDispatchToProps = dispatch => ({ dispatch(changeMode(Modes.PEN)); }, deactivateTool () { + }, + onChangeStrokeColor: strokeColor => { + dispatch(changeStrokeColor(strokeColor)); } }); From b8aadc3c5461a72f3068be97bb4b17c8a75cf7db Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 26 Oct 2017 17:33:33 -0400 Subject: [PATCH 3/7] 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 => ( - + ( -
+
{props.children}
); 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 => ( - + ( - + ({ + 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 ( @@ -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 From ab3b4e45551f236ac264e6c4f0e8039270662188 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 26 Oct 2017 17:42:15 -0400 Subject: [PATCH 4/7] Force a stroke width on pen and line mode --- src/containers/line-mode.jsx | 10 +++++++++- src/containers/pen-mode.jsx | 8 ++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/containers/line-mode.jsx b/src/containers/line-mode.jsx index 3716b619..a7e226c8 100644 --- a/src/containers/line-mode.jsx +++ b/src/containers/line-mode.jsx @@ -9,6 +9,7 @@ import {endPointHit, touching} from '../helper/snapping'; import {drawHitPoint, removeHitPoint} from '../helper/guides'; import {stylePath} from '../helper/style-path'; import {changeStrokeColor} from '../reducers/stroke-color'; +import {changeStrokeWidth} from '../reducers/stroke-width'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; import {MIXED} from '../helper/style-path'; @@ -57,7 +58,11 @@ class LineMode extends React.Component { if (strokeColor === MIXED || strokeColor === null) { this.props.onChangeStrokeColor(LineMode.DEFAULT_COLOR); } - + // Force a minimum stroke width + console.log(this.props.colorState.strokeWidth) + if (!this.props.colorState.strokeWidth) { + this.props.onChangeStrokeWidth(1); + } this.tool = new paper.Tool(); this.path = null; @@ -248,6 +253,9 @@ const mapDispatchToProps = dispatch => ({ }, onChangeStrokeColor: strokeColor => { dispatch(changeStrokeColor(strokeColor)); + }, + onChangeStrokeWidth: strokeWidth => { + dispatch(changeStrokeWidth(strokeWidth)); } }); diff --git a/src/containers/pen-mode.jsx b/src/containers/pen-mode.jsx index 32ca4bc8..b1132538 100644 --- a/src/containers/pen-mode.jsx +++ b/src/containers/pen-mode.jsx @@ -5,6 +5,7 @@ import bindAll from 'lodash.bindall'; import Modes from '../modes/modes'; import {changeStrokeColor} from '../reducers/stroke-color'; +import {changeStrokeWidth} from '../reducers/stroke-width'; import {changeMode} from '../reducers/modes'; import {clearSelectedItems} from '../reducers/selected-items'; import {MIXED} from '../helper/style-path'; @@ -52,6 +53,10 @@ class PenMode extends React.Component { if (strokeColor === MIXED || strokeColor === null) { this.props.onChangeStrokeColor(PenMode.DEFAULT_COLOR) } + // Force a minimum stroke width + if (!this.props.colorState.strokeWidth) { + this.props.onChangeStrokeWidth(1); + } this.tool = new PenTool( this.props.clearSelectedItems, this.props.onUpdateSvg @@ -102,6 +107,9 @@ const mapDispatchToProps = dispatch => ({ }, onChangeStrokeColor: strokeColor => { dispatch(changeStrokeColor(strokeColor)); + }, + onChangeStrokeWidth: strokeWidth => { + dispatch(changeStrokeWidth(strokeWidth)); } }); From 68c6f69211f0847df5f73a026d027fb12c7e32c5 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 26 Oct 2017 18:09:27 -0400 Subject: [PATCH 5/7] Add box to make outline different from fill button --- src/components/color-button/color-button.css | 16 ++++++++++++++++ src/components/color-button/color-button.jsx | 10 +++++++++- src/components/stroke-color-indicator.jsx | 1 + 3 files changed, 26 insertions(+), 1 deletion(-) diff --git a/src/components/color-button/color-button.css b/src/components/color-button/color-button.css index e09a64a3..5ef6744d 100644 --- a/src/components/color-button/color-button.css +++ b/src/components/color-button/color-button.css @@ -5,6 +5,7 @@ } .color-button-swatch { + position: relative; display: flex; flex-basis: 2rem; flex-shrink: 0; @@ -34,4 +35,19 @@ .swatch-icon { width: 1.75rem; margin: auto; + /* Make sure it appears above the outline box */ + z-index: 2; +} + +.outline-swatch:after { + content: ""; + position: absolute; + top: calc(0.5rem + 1px); + left: calc(0.5rem + 1px); + width: 0.75rem; + height: 0.75rem; + background: white; + border: 1px solid rgba(0, 0, 0, 0.25); + /* Make sure it appears below the transparent icon */ + z-index: 1; } diff --git a/src/components/color-button/color-button.jsx b/src/components/color-button/color-button.jsx index f36bdb66..8346154b 100644 --- a/src/components/color-button/color-button.jsx +++ b/src/components/color-button/color-button.jsx @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import classNames from 'classnames'; import {MIXED} from '../../helper/style-path'; @@ -17,7 +18,9 @@ const ColorButtonComponent = props => ( onClick={props.onClick} >
( ); ColorButtonComponent.propTypes = { + outline: PropTypes.bool.isRequired, color: PropTypes.string, onClick: PropTypes.func.isRequired }; +ColorButtonComponent.defaultProps = { + outline: false +}; + export default ColorButtonComponent; diff --git a/src/components/stroke-color-indicator.jsx b/src/components/stroke-color-indicator.jsx index af427722..dc671fda 100644 --- a/src/components/stroke-color-indicator.jsx +++ b/src/components/stroke-color-indicator.jsx @@ -31,6 +31,7 @@ const StrokeColorIndicatorComponent = props => ( >