diff --git a/package.json b/package.json index a2e6b6fe..ebf7172a 100644 --- a/package.json +++ b/package.json @@ -67,6 +67,7 @@ "react-intl-redux": "0.6.0", "react-popover": "0.5.4", "react-redux": "5.0.5", + "react-responsive": "^3.0.0", "react-test-renderer": "^16.0.0", "redux": "3.7.0", "redux-mock-store": "^1.2.3", diff --git a/src/components/dropdown/dropdown-caret.svg b/src/components/dropdown/dropdown-caret.svg new file mode 100644 index 00000000..42ef29f4 --- /dev/null +++ b/src/components/dropdown/dropdown-caret.svg @@ -0,0 +1,12 @@ + + + + dropdown-caret + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css new file mode 100644 index 00000000..c9574cb7 --- /dev/null +++ b/src/components/dropdown/dropdown.css @@ -0,0 +1,30 @@ +@import '../../css/colors.css'; + +$arrow-border-width: 14px; + +.dropdown { + border: 1px solid $form-border; + border-radius: 5px; + overflow: visible; + min-width: 3.5rem; + color: $motion-primary; + padding: .5rem; +} + +.mod-open { + background-color: $form-border; +} + +.dropdown-icon { + width: .5rem; + height: .5rem; + margin-left: .5rem; + vertical-align: middle; + padding-bottom: .2rem; +} + +.mod-caret-up { + transform: rotate(180deg); + padding-bottom: 0; + padding-top: .2rem; +} diff --git a/src/components/dropdown/dropdown.jsx b/src/components/dropdown/dropdown.jsx new file mode 100644 index 00000000..94abe611 --- /dev/null +++ b/src/components/dropdown/dropdown.jsx @@ -0,0 +1,69 @@ +import bindAll from 'lodash.bindall'; +import classNames from 'classnames'; +import Popover from 'react-popover'; +import PropTypes from 'prop-types'; +import React from 'react'; + +import Button from '../button/button.jsx'; + +import styles from './dropdown.css'; + +import dropdownIcon from './dropdown-caret.svg'; + +class Dropdown extends React.Component { + constructor (props) { + super(props); + bindAll(this, [ + 'closePopover', + 'toggleOpenState' + ]); + this.state = { + isOpen: false + }; + } + closePopover () { + this.setState({ + isOpen: false + }); + } + toggleOpenState () { + this.setState({ + isOpen: !this.state.isOpen + }); + } + render () { + return ( + +
+ {this.props.children} + +
+ + ); + } +} + +Dropdown.propTypes = { + children: PropTypes.node.isRequired, + className: PropTypes.string, + popoverContent: PropTypes.node.isRequired +}; + +export default Dropdown; diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css index 5d28c5cc..dfd139f3 100644 --- a/src/components/paint-editor/paint-editor.css +++ b/src/components/paint-editor/paint-editor.css @@ -33,6 +33,10 @@ padding-right: calc(3 * $grid-unit); } +.mod-unselect { + user-select: none; +} + .mod-labeled-icon-height { height: 2.85rem; /* for the second row so the dashed borders are equal in size */ } @@ -72,6 +76,42 @@ $border-radius: 0.25rem; vertical-align: middle; } +.mod-context-menu { + display: flex; + flex-direction: column; +} + +.mod-top-divider { + border-top: 1px solid $ui-pane-border; +} + +.mod-menu-item { + display: flex; + margin: 0 -$grid-unit; + min-width: 6.25rem; + padding: calc(3 * $grid-unit); + white-space: nowrap; + cursor: pointer; + transition: 0.1s ease; + align-items: center; +} + +.mod-disabled { + cursor: auto; +} + +.mod-menu-item:hover { + background: $motion-transparent; +} + +.mod-disabled:hover { + background-color: transparent; +} + +.menu-item-icon { + margin-right: calc(2* $grid-unit); +} + .mod-mode-tools { margin-left: calc(3 * $grid-unit); } @@ -89,7 +129,7 @@ $border-radius: 0.25rem; .mode-selector { display: flex; margin-right: calc(2 * $grid-unit); - max-width: 5.5rem; + max-width: 6rem; flex-direction: row; flex-wrap: wrap; align-items: flex-start; @@ -101,3 +141,10 @@ $border-radius: 0.25rem; display: flex; flex-direction: row-reverse; } + +@media only screen and (max-width: 1095px) { + .mode-selector { + flex-direction: column; + justify-content: flex-start; + } +} diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx index c010102a..581a2b2a 100644 --- a/src/components/paint-editor/paint-editor.jsx +++ b/src/components/paint-editor/paint-editor.jsx @@ -1,6 +1,7 @@ import bindAll from 'lodash.bindall'; import classNames from 'classnames'; import {defineMessages, injectIntl, intlShape} from 'react-intl'; +import MediaQuery from 'react-responsive'; import React from 'react'; import PropTypes from 'prop-types'; @@ -13,6 +14,7 @@ import Button from '../button/button.jsx'; import ButtonGroup from '../button-group/button-group.jsx'; import BrushMode from '../../containers/brush-mode.jsx'; import BufferedInputHOC from '../forms/buffered-input-hoc.jsx'; +import Dropdown from '../dropdown/dropdown.jsx'; import EraserMode from '../../containers/eraser-mode.jsx'; import FillColorIndicatorComponent from '../../containers/fill-color-indicator.jsx'; import Input from '../forms/input.jsx'; @@ -28,10 +30,12 @@ import SelectMode from '../../containers/select-mode.jsx'; import StrokeColorIndicatorComponent from '../../containers/stroke-color-indicator.jsx'; import StrokeWidthIndicatorComponent from '../../containers/stroke-width-indicator.jsx'; +import layout from '../../lib/layout-constants'; import styles from './paint-editor.css'; import groupIcon from './icons/group.svg'; import redoIcon from './icons/redo.svg'; +import rotationPointIcon from './icons/rotation-point.svg'; import sendBackIcon from './icons/send-back.svg'; import sendBackwardIcon from './icons/send-backward.svg'; import sendForwardIcon from './icons/send-forward.svg'; @@ -88,6 +92,11 @@ const messages = defineMessages({ defaultMessage: 'Back', description: 'Label for the `Send to back of canvas` button', id: 'paint.paintEditor.back' + }, + more: { + defaultMessage: 'More', + description: 'Label for dropdown to access more action buttons', + id: 'paint.paintEditor.more' } }); @@ -197,31 +206,83 @@ class PaintEditorComponent extends React.Component { /> - {/* Front/Back */} - - - + + + - {/* To be rotation point */} - {/* - - */} + {/* To be rotation point */} + {/* + + */} + + + + + + + {/* To be rotation point */} + {/* */} + + } + tipSize={.01} + > + {this.props.intl.formatMessage(messages.more)} + + + {/* Second Row */} @@ -247,10 +308,7 @@ class PaintEditorComponent extends React.Component { /> - + @@ -342,9 +400,7 @@ PaintEditorComponent.propTypes = { canUndo: PropTypes.func.isRequired, intl: intlShape, name: PropTypes.string, - onCopyToClipboard: PropTypes.func.isRequired, onGroup: PropTypes.func.isRequired, - onPasteFromClipboard: PropTypes.func.isRequired, onRedo: PropTypes.func.isRequired, onSendBackward: PropTypes.func.isRequired, onSendForward: PropTypes.func.isRequired, diff --git a/src/components/tool-select-base/tool-select-base.css b/src/components/tool-select-base/tool-select-base.css index fdfb3aa5..ce601ccd 100644 --- a/src/components/tool-select-base/tool-select-base.css +++ b/src/components/tool-select-base/tool-select-base.css @@ -4,6 +4,7 @@ $border-radius: .25rem; .mod-tool-select { display: inline-block; + margin: .25rem; border: none; border-radius: $border-radius; outline: none; diff --git a/src/lib/layout-constants.js b/src/lib/layout-constants.js new file mode 100644 index 00000000..fa583248 --- /dev/null +++ b/src/lib/layout-constants.js @@ -0,0 +1,3 @@ +export default { + fullSizeMinWidth: 1096 +};