diff --git a/src/components/fixed-tools/fixed-tools.css b/src/components/fixed-tools/fixed-tools.css new file mode 100644 index 00000000..be013461 --- /dev/null +++ b/src/components/fixed-tools/fixed-tools.css @@ -0,0 +1,93 @@ +@import "../../css/colors.css"; +@import "../../css/units.css"; + +.row { + display: flex; + flex-direction: row; + align-items: center; +} + +.costume-input { + width: 8rem; +} + +.mod-dashed-border { + border-right: 1px dashed $ui-pane-border; + padding-right: calc(2 * $grid-unit); +} + +.mod-unselect { + user-select: none; +} + +$border-radius: 0.25rem; + +.button-group-button { + display: inline-block; + border: 1px solid $ui-pane-border; + border-radius: 0; + border-left: none; + padding: .35rem; +} + +.button-group-button:last-of-type { + border-top-right-radius: $border-radius; + border-bottom-right-radius: $border-radius; +} + +.button-group-button:first-of-type { + border-left: 1px solid $ui-pane-border; + border-top-left-radius: $border-radius; + border-bottom-left-radius: $border-radius; +} + +.button-group-button.mod-left-border { + border-left: 1px solid $ui-pane-border; +} + +.button-group-button.mod-no-right-border { + border-right: none; +} + +.button-group-button-icon { + width: 1.25rem; + height: 1.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; + font-family: "Helvetica Neue", Helvetica, sans-serif; +} + +.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); +} diff --git a/src/components/fixed-tools/fixed-tools.jsx b/src/components/fixed-tools/fixed-tools.jsx new file mode 100644 index 00000000..0c1eeb45 --- /dev/null +++ b/src/components/fixed-tools/fixed-tools.jsx @@ -0,0 +1,309 @@ +import classNames from 'classnames'; +import {connect} from 'react-redux'; +import PropTypes from 'prop-types'; +import React from 'react'; +import MediaQuery from 'react-responsive'; + +import {shouldShowGroup, shouldShowUngroup} from '../../helper/group'; +import {shouldShowBringForward, shouldShowSendBackward} from '../../helper/order'; + +import BufferedInputHOC from '../forms/buffered-input-hoc.jsx'; +import Button from '../button/button.jsx'; +import ButtonGroup from '../button-group/button-group.jsx'; +import Dropdown from '../dropdown/dropdown.jsx'; +import {defineMessages, injectIntl, intlShape} from 'react-intl'; +import Formats from '../../lib/format'; +import Input from '../forms/input.jsx'; +import InputGroup from '../input-group/input-group.jsx'; +import Label from '../forms/label.jsx'; +import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx'; +import {isVector} from '../../lib/format'; +import layout from '../../lib/layout-constants'; +import styles from './fixed-tools.css'; + +import groupIcon from './icons/group.svg'; +import redoIcon from './icons/redo.svg'; +import sendBackIcon from './icons/send-back.svg'; +import sendBackwardIcon from './icons/send-backward.svg'; +import sendForwardIcon from './icons/send-forward.svg'; +import sendFrontIcon from './icons/send-front.svg'; +import undoIcon from './icons/undo.svg'; +import ungroupIcon from './icons/ungroup.svg'; + +const BufferedInput = BufferedInputHOC(Input); +const messages = defineMessages({ + costume: { + id: 'paint.paintEditor.costume', + description: 'Label for the name of a costume', + defaultMessage: 'Costume' + }, + group: { + defaultMessage: 'Group', + description: 'Label for the button to group shapes', + id: 'paint.paintEditor.group' + }, + ungroup: { + defaultMessage: 'Ungroup', + description: 'Label for the button to ungroup shapes', + id: 'paint.paintEditor.ungroup' + }, + undo: { + defaultMessage: 'Undo', + description: 'Alt to image for the button to undo an action', + id: 'paint.paintEditor.undo' + }, + redo: { + defaultMessage: 'Redo', + description: 'Alt to image for the button to redo an action', + id: 'paint.paintEditor.redo' + }, + forward: { + defaultMessage: 'Forward', + description: 'Label for the `Send forward on canvas` button', + id: 'paint.paintEditor.forward' + }, + backward: { + defaultMessage: 'Backward', + description: 'Label for the `Send backward on canvas` button', + id: 'paint.paintEditor.backward' + }, + front: { + defaultMessage: 'Front', + description: 'Label for the `Send to front of canvas` button', + id: 'paint.paintEditor.front' + }, + back: { + 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' + } +}); + +const FixedToolsComponent = props => { + const redoDisabled = !props.canRedo(); + const undoDisabled = !props.canUndo(); + + return ( +
+ {/* Name field */} + + + + + + + + + + {/* Undo/Redo */} + + + + + + + + {/* Group/Ungroup */} + {isVector(props.format) ? + + + + : null + } + + {/* Forward/Backward */} + {isVector(props.format) ? + + + + : null + } + + {isVector(props.format) ? + + + + + + + {/* To be rotation point */} + {/* + + */} + : null + } + {isVector(props.format) ? + + + + + + + {/* To be rotation point */} + {/* */} + + } + tipSize={.01} + > + {props.intl.formatMessage(messages.more)} + + + : null + } +
+ ); +}; + +FixedToolsComponent.propTypes = { + canRedo: PropTypes.func.isRequired, + canUndo: PropTypes.func.isRequired, + format: PropTypes.oneOf(Object.keys(Formats)), + intl: intlShape, + name: PropTypes.string, + onGroup: PropTypes.func.isRequired, + onRedo: PropTypes.func.isRequired, + onSendBackward: PropTypes.func.isRequired, + onSendForward: PropTypes.func.isRequired, + onSendToBack: PropTypes.func.isRequired, + onSendToFront: PropTypes.func.isRequired, + onUndo: PropTypes.func.isRequired, + onUngroup: PropTypes.func.isRequired, + onUpdateName: PropTypes.func.isRequired +}; + +const mapStateToProps = state => ({ + format: state.scratchPaint.format, + selectedItems: state.scratchPaint.selectedItems +}); + +export default connect( + mapStateToProps +)(injectIntl(FixedToolsComponent)); diff --git a/src/components/paint-editor/icons/group.svg b/src/components/fixed-tools/icons/group.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/group.svg rename to src/components/fixed-tools/icons/group.svg diff --git a/src/components/paint-editor/icons/redo.svg b/src/components/fixed-tools/icons/redo.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/redo.svg rename to src/components/fixed-tools/icons/redo.svg diff --git a/src/components/paint-editor/icons/send-back.svg b/src/components/fixed-tools/icons/send-back.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/send-back.svg rename to src/components/fixed-tools/icons/send-back.svg diff --git a/src/components/paint-editor/icons/send-backward.svg b/src/components/fixed-tools/icons/send-backward.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/send-backward.svg rename to src/components/fixed-tools/icons/send-backward.svg diff --git a/src/components/paint-editor/icons/send-forward.svg b/src/components/fixed-tools/icons/send-forward.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/send-forward.svg rename to src/components/fixed-tools/icons/send-forward.svg diff --git a/src/components/paint-editor/icons/send-front.svg b/src/components/fixed-tools/icons/send-front.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/send-front.svg rename to src/components/fixed-tools/icons/send-front.svg diff --git a/src/components/paint-editor/icons/undo.svg b/src/components/fixed-tools/icons/undo.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/undo.svg rename to src/components/fixed-tools/icons/undo.svg diff --git a/src/components/paint-editor/icons/ungroup.svg b/src/components/fixed-tools/icons/ungroup.svg old mode 100755 new mode 100644 similarity index 100% rename from src/components/paint-editor/icons/ungroup.svg rename to src/components/fixed-tools/icons/ungroup.svg diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css index 17768716..1b6415ff 100644 --- a/src/components/paint-editor/paint-editor.css +++ b/src/components/paint-editor/paint-editor.css @@ -28,19 +28,11 @@ margin-top: calc(2 * $grid-unit); } -.costume-input { - width: 8rem; -} - .mod-dashed-border { border-right: 1px dashed $ui-pane-border; padding-right: calc(2 * $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 */ } @@ -80,43 +72,6 @@ $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; - font-family: "Helvetica Neue", Helvetica, sans-serif; -} - -.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(2 * $grid-unit); } @@ -175,11 +130,6 @@ $border-radius: 0.25rem; justify-content: space-between; } -.bitmap-tooltip { - margin-left: $grid-unit; - max-width: 10rem; -} - .bitmap-button { display: flex; border-radius: 5px; diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx index f3becedb..387e2cb6 100644 --- a/src/components/paint-editor/paint-editor.jsx +++ b/src/components/paint-editor/paint-editor.jsx @@ -1,15 +1,11 @@ import paper from '@scratch/paper'; 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'; import PaperCanvas from '../../containers/paper-canvas.jsx'; -import {shouldShowGroup, shouldShowUngroup} from '../../helper/group'; -import {shouldShowBringForward, shouldShowSendBackward} from '../../helper/order'; - import BitBrushMode from '../../containers/bit-brush-mode.jsx'; import BitLineMode from '../../containers/bit-line-mode.jsx'; import BitOvalMode from '../../components/bit-oval-mode/bit-oval-mode.jsx'; @@ -22,17 +18,13 @@ import Box from '../box/box.jsx'; 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 FillMode from '../../containers/fill-mode.jsx'; -import Input from '../forms/input.jsx'; import InputGroup from '../input-group/input-group.jsx'; -import Label from '../forms/label.jsx'; -import LabeledIconButton from '../labeled-icon-button/labeled-icon-button.jsx'; import LineMode from '../../containers/line-mode.jsx'; import Loupe from '../loupe/loupe.jsx'; +import FixedToolsComponent from '../fixed-tools/fixed-tools.jsx'; import ModeToolsContainer from '../../containers/mode-tools.jsx'; import OvalMode from '../../containers/oval-mode.jsx'; import RectMode from '../../containers/rect-mode.jsx'; @@ -44,74 +36,14 @@ import TextMode from '../../containers/text-mode.jsx'; import Formats from '../../lib/format'; import {isBitmap, isVector} from '../../lib/format'; -import layout from '../../lib/layout-constants'; import styles from './paint-editor.css'; import bitmapIcon from './icons/bitmap.svg'; -import groupIcon from './icons/group.svg'; -import redoIcon from './icons/redo.svg'; -import sendBackIcon from './icons/send-back.svg'; -import sendBackwardIcon from './icons/send-backward.svg'; -import sendForwardIcon from './icons/send-forward.svg'; -import sendFrontIcon from './icons/send-front.svg'; -import undoIcon from './icons/undo.svg'; -import ungroupIcon from './icons/ungroup.svg'; import zoomInIcon from './icons/zoom-in.svg'; import zoomOutIcon from './icons/zoom-out.svg'; import zoomResetIcon from './icons/zoom-reset.svg'; -const BufferedInput = BufferedInputHOC(Input); const messages = defineMessages({ - costume: { - id: 'paint.paintEditor.costume', - description: 'Label for the name of a costume', - defaultMessage: 'Costume' - }, - group: { - defaultMessage: 'Group', - description: 'Label for the button to group shapes', - id: 'paint.paintEditor.group' - }, - ungroup: { - defaultMessage: 'Ungroup', - description: 'Label for the button to ungroup shapes', - id: 'paint.paintEditor.ungroup' - }, - undo: { - defaultMessage: 'Undo', - description: 'Alt to image for the button to undo an action', - id: 'paint.paintEditor.undo' - }, - redo: { - defaultMessage: 'Redo', - description: 'Alt to image for the button to redo an action', - id: 'paint.paintEditor.redo' - }, - forward: { - defaultMessage: 'Forward', - description: 'Label for the `Send forward on canvas` button', - id: 'paint.paintEditor.forward' - }, - backward: { - defaultMessage: 'Backward', - description: 'Label for the `Send backward on canvas` button', - id: 'paint.paintEditor.backward' - }, - front: { - defaultMessage: 'Front', - description: 'Label for the `Send to front of canvas` button', - id: 'paint.paintEditor.front' - }, - back: { - 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' - }, bitmap: { defaultMessage: 'Convert to Bitmap', description: 'Label for button that converts the paint editor to bitmap mode', @@ -124,200 +56,59 @@ const messages = defineMessages({ } }); -const PaintEditorComponent = props => { - const redoDisabled = !props.canRedo(); - const undoDisabled = !props.canUndo(); - - return ( -
- {props.canvas !== null ? ( // eslint-disable-line no-negated-condition -
- {/* First row */} +const PaintEditorComponent = props => ( +
+ {props.canvas !== null ? ( // eslint-disable-line no-negated-condition +
+ {/* First row */} +
+ +
+ {/* Second Row */} + {isVector(props.format) ?
- {/* Name field */} - - - - - - - - - - {/* Undo/Redo */} - - - - - - - - {/* Group/Ungroup */} - - + {/* fill */} + - + {/* stroke width */} + - - {/* Forward/Backward */} - - - + - - - - - - - - {/* To be rotation point */} - {/* - - */} - - - - - - - - {/* To be rotation point */} - {/* */} - - } - tipSize={.01} - > - {props.intl.formatMessage(messages.more)} - - - -
- - {/* Second Row */} - {isVector(props.format) ? +
: + isBitmap(props.format) ?
{ className={styles.modMarginRight} onUpdateImage={props.onUpdateImage} /> - {/* stroke */} - - {/* stroke width */} - -
: - isBitmap(props.format) ? -
- - {/* fill */} - - - - - -
: null - } +
: null + } +
+ ) : null} + +
+ {/* Modes */} + {props.canvas !== null ? ( // eslint-disable-line no-negated-condition +
+ + + + + + + + +
) : null} - -
- {/* Modes */} - {props.canvas !== null ? ( // eslint-disable-line no-negated-condition -
- - - - - - - - - -
- ) : null} - - {props.canvas !== null ? ( // eslint-disable-line no-negated-condition -
- - - - - - - - -
- ) : null} - -
- {/* Canvas */} -
- -