diff --git a/package.json b/package.json
index d94ad504..f1e98c5f 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
"react-responsive": "3.0.0",
"react-style-proptype": "3.1.0",
"react-test-renderer": "^16.0.0",
+ "react-tooltip": "3.4.0",
"redux": "3.7.0",
"redux-mock-store": "^1.2.3",
"redux-throttle": "0.1.1",
diff --git a/src/components/button/button.css b/src/components/button/button.css
index 1633ab18..9d331158 100644
--- a/src/components/button/button.css
+++ b/src/components/button/button.css
@@ -11,7 +11,7 @@
:local(.mod-disabled) {
cursor: auto;
- opacity: .3;
+ opacity: .5;
}
:local(.mod-disabled:active) {
background: none;
diff --git a/src/components/coming-soon/aww-cat.png b/src/components/coming-soon/aww-cat.png
new file mode 100644
index 00000000..bddfb8de
Binary files /dev/null and b/src/components/coming-soon/aww-cat.png differ
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
new file mode 100644
index 00000000..7f197577
--- /dev/null
+++ b/src/components/coming-soon/coming-soon.css
@@ -0,0 +1,72 @@
+/* DO NOT EDIT
+@todo This file is copied from GUI and should be pulled out into a shared library.
+See #13 */
+
+/*
+ * NOTE: the copious use of `important` is needed to overwrite
+ * the default tooltip styling, and is required by the 3rd party
+ * library being used, `react-tooltip`
+ */
+
+@import "../../css/colors.css";
+
+.coming-soon {
+ background-color: $data-primary !important;
+ border: 1px solid hsla(0, 0%, 0%, .1) !important;
+ border-radius: .25rem !important;
+ box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
+ padding: .75rem 1rem !important;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
+ font-size: 1rem !important;
+ line-height: 1.25rem !important;
+ z-index: 100 !important;
+}
+
+.coming-soon:after {
+ content: "";
+ border-top: 1px solid hsla(0, 0%, 0%, .1) !important;
+ border-left: 0 !important;
+ border-bottom: 0 !important;
+ border-right: 1px solid hsla(0, 0%, 0%, .1) !important;
+ border-radius: .25rem;
+ background-color: $data-primary !important;
+ height: 1rem !important;
+ width: 1rem !important;
+}
+
+.show,
+.show:before,
+.show:after {
+ opacity: 1 !important;
+}
+
+.left:after {
+ margin-top: -.5rem !important;
+ right: -.5rem !important;
+ transform: rotate(45deg) !important;
+}
+
+.right:after {
+ margin-top: -.5rem !important;
+ left: -.5rem !important;
+ transform: rotate(-135deg) !important;
+}
+
+.top:after {
+ margin-right: -.5rem !important;
+ bottom: -.5rem !important;
+ transform: rotate(135deg) !important;
+}
+
+.bottom:after {
+ margin-left: -.5rem !important;
+ top: -.5rem !important;
+ transform: rotate(-45deg) !important;
+}
+
+.coming-soon-image {
+ margin-left: .125rem;
+ width: 1.25rem;
+ height: 1.25rem;
+ vertical-align: middle;
+}
diff --git a/src/components/coming-soon/coming-soon.jsx b/src/components/coming-soon/coming-soon.jsx
new file mode 100644
index 00000000..fa9285b0
--- /dev/null
+++ b/src/components/coming-soon/coming-soon.jsx
@@ -0,0 +1,147 @@
+/* DO NOT EDIT
+@todo This file is copied from GUI and should be pulled out into a shared library.
+See #13 */
+
+import bindAll from 'lodash.bindall';
+import classNames from 'classnames';
+import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactTooltip from 'react-tooltip';
+
+import styles from './coming-soon.css';
+
+import awwCatIcon from './aww-cat.png';
+import coolCatIcon from './cool-cat.png';
+
+const messages = defineMessages({
+ message1: {
+ defaultMessage: 'Don\'t worry, we\'re on it {emoji}',
+ description: 'One of the "coming soon" random messages for yet-to-be-done features',
+ id: 'gui.comingSoon.message1'
+ },
+ message2: {
+ defaultMessage: 'Coming Soon...',
+ description: 'One of the "coming soon" random messages for yet-to-be-done features',
+ id: 'gui.comingSoon.message2'
+ },
+ message3: {
+ defaultMessage: 'We\'re working on it {emoji}',
+ description: 'One of the "coming soon" random messages for yet-to-be-done features',
+ id: 'gui.comingSoon.message3'
+ }
+});
+
+class ComingSoonContent extends React.Component {
+ constructor (props) {
+ super(props);
+ bindAll(this, [
+ 'setHide',
+ 'setShow',
+ 'getRandomMessage'
+ ]);
+ this.state = {
+ isShowing: false
+ };
+ }
+ setShow () {
+ // needed to set the opacity to 1, since the default is .9 on show
+ this.setState({isShowing: true});
+ }
+ setHide () {
+ this.setState({isShowing: false});
+ }
+ getRandomMessage () {
+ // randomly chooses a messages from `messages` to display in the tooltip.
+ const images = [awwCatIcon, coolCatIcon];
+ const messageNumber = Math.floor(Math.random() * Object.keys(messages).length) + 1;
+ const imageNumber = Math.floor(Math.random() * Object.keys(images).length);
+ return (
+ <FormattedMessage
+ {...messages[`message${messageNumber}`]}
+ values={{
+ emoji: (
+ <img
+ className={styles.comingSoonImage}
+ src={images[imageNumber]}
+ />
+ )
+ }}
+ />
+ );
+ }
+ render () {
+ return (
+ <ReactTooltip
+ afterHide={this.setHide}
+ afterShow={this.setShow}
+ className={classNames(
+ styles.comingSoon,
+ this.props.className,
+ {
+ [styles.show]: (this.state.isShowing),
+ [styles.left]: (this.props.place === 'left'),
+ [styles.right]: (this.props.place === 'right'),
+ [styles.top]: (this.props.place === 'top'),
+ [styles.bottom]: (this.props.place === 'bottom')
+ }
+ )}
+ getContent={this.getRandomMessage}
+ id={this.props.tooltipId}
+ />
+ );
+ }
+}
+
+ComingSoonContent.propTypes = {
+ className: PropTypes.string,
+ intl: intlShape,
+ place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+ tooltipId: PropTypes.string.isRequired
+};
+
+ComingSoonContent.defaultProps = {
+ place: 'bottom'
+};
+
+const ComingSoon = injectIntl(ComingSoonContent);
+
+const ComingSoonTooltip = props => (
+ <div className={props.className}>
+ <div
+ data-delay-hide={props.delayHide}
+ data-delay-show={props.delayShow}
+ data-effect="solid"
+ data-for={props.tooltipId}
+ data-place={props.place}
+ data-tip="tooltip"
+ >
+ {props.children}
+ </div>
+ <ComingSoon
+ className={props.tooltipClassName}
+ place={props.place}
+ tooltipId={props.tooltipId}
+ />
+ </div>
+);
+
+ComingSoonTooltip.propTypes = {
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ delayHide: PropTypes.number,
+ delayShow: PropTypes.number,
+ place: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+ tooltipClassName: PropTypes.string,
+ tooltipId: PropTypes.string.isRequired
+};
+
+ComingSoonTooltip.defaultProps = {
+ delayHide: 0,
+ delayShow: 0
+};
+
+export {
+ ComingSoon as ComingSoonComponent,
+ ComingSoonTooltip
+};
diff --git a/src/components/coming-soon/cool-cat.png b/src/components/coming-soon/cool-cat.png
new file mode 100644
index 00000000..15b2151e
Binary files /dev/null and b/src/components/coming-soon/cool-cat.png differ
diff --git a/src/components/fill-color-indicator.jsx b/src/components/fill-color-indicator.jsx
index c6891cc9..ad2dac80 100644
--- a/src/components/fill-color-indicator.jsx
+++ b/src/components/fill-color-indicator.jsx
@@ -17,7 +17,10 @@ const messages = defineMessages({
});
const FillColorIndicatorComponent = props => (
- <InputGroup disabled={props.disabled}>
+ <InputGroup
+ className={props.className}
+ disabled={props.disabled}
+ >
<Popover
body={
<ColorPicker
@@ -40,6 +43,7 @@ const FillColorIndicatorComponent = props => (
);
FillColorIndicatorComponent.propTypes = {
+ className: PropTypes.string,
disabled: PropTypes.bool.isRequired,
fillColor: PropTypes.string,
fillColorModalVisible: PropTypes.bool.isRequired,
diff --git a/src/components/forms/input.jsx b/src/components/forms/input.jsx
index 1c6d087a..95b46354 100644
--- a/src/components/forms/input.jsx
+++ b/src/components/forms/input.jsx
@@ -13,14 +13,19 @@ const Input = props => {
return (
<input
{...componentProps}
- className={classNames(styles.inputForm, {
- [styles.inputSmall]: small
- })}
+ className={classNames(
+ styles.inputForm,
+ props.className,
+ {
+ [styles.inputSmall]: small
+ }
+ )}
/>
);
};
Input.propTypes = {
+ className: PropTypes.string,
small: PropTypes.bool
};
diff --git a/src/components/labeled-icon-button/labeled-icon-button.css b/src/components/labeled-icon-button/labeled-icon-button.css
index f150fda6..d7ad6703 100644
--- a/src/components/labeled-icon-button/labeled-icon-button.css
+++ b/src/components/labeled-icon-button/labeled-icon-button.css
@@ -6,17 +6,17 @@ $border-radius: 0.25rem;
background: none;
border: none;
display: inline-block;
- padding: 0.25rem;
+ padding: .25rem .325rem;
outline: none;
border-radius: $border-radius;
- min-width: 2.5rem;
+ min-width: 3rem;
font-size: 0.85rem;
text-align: center;
}
.edit-field-icon {
- width: 1.25rem;
- height: 1.25rem;
+ width: 1.5rem;
+ height: 1.5rem;
flex-grow: 1;
vertical-align: middle;
}
diff --git a/src/components/mode-tools/icons/copy.svg b/src/components/mode-tools/icons/copy.svg
index 46a982ce..89010127 100644
--- a/src/components/mode-tools/icons/copy.svg
+++ b/src/components/mode-tools/icons/copy.svg
@@ -1,25 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
- <title>copy</title>
+ <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+ <title>copy v2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="copy">
- <g transform="translate(3.000000, 2.000000)">
+ <g id="copy-v2">
+ <g id="copy" transform="translate(3.000000, 2.000000)">
+ <polyline id="Path-3" stroke-opacity="0.5" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,2" points="0.503173828 3 0.503173828 15.5 13 15.5"></polyline>
<path d="M2,1.00684547 C2,0.450780073 2.45303631,0 2.99703014,0 L10,0 L10,2.34995317 C10,3.26124887 10.7336617,4 11.6500468,4 L14,4 L14,13.0046024 C14,13.5543453 13.544239,14 12.9975267,14 L3.00247329,14 C2.44882258,14 2,13.5500512 2,12.9931545 L2,1.00684547 Z" id="Rectangle-4" fill="#4C97FF"></path>
- <circle id="Oval" fill="#575E75" opacity="0.5" cx="0.5" cy="3.5" r="1"></circle>
- <circle id="Oval-Copy" fill="#575E75" opacity="0.5" cx="0.5" cy="5.5" r="1"></circle>
- <circle id="Oval-Copy-2" fill="#575E75" opacity="0.5" cx="0.5" cy="7.5" r="1"></circle>
- <circle id="Oval-Copy-3" fill="#575E75" opacity="0.5" cx="0.5" cy="9.5" r="1"></circle>
- <circle id="Oval-Copy-4" fill="#575E75" opacity="0.5" cx="0.5" cy="11.5" r="1"></circle>
- <circle id="Oval-Copy-5" fill="#575E75" opacity="0.5" cx="0.5" cy="13.5" r="1"></circle>
- <circle id="Oval-Copy-6" fill="#575E75" opacity="0.5" cx="0.5" cy="15.5" r="1"></circle>
- <circle id="Oval-Copy-7" fill="#575E75" opacity="0.5" cx="2.5" cy="15.5" r="1"></circle>
- <circle id="Oval-Copy-8" fill="#575E75" opacity="0.5" cx="4.5" cy="15.5" r="1"></circle>
- <circle id="Oval-Copy-9" fill="#575E75" opacity="0.5" cx="6.5" cy="15.5" r="1"></circle>
- <circle id="Oval-Copy-10" fill="#575E75" opacity="0.5" cx="8.5" cy="15.5" r="1"></circle>
- <circle id="Oval-Copy-11" fill="#575E75" opacity="0.5" cx="10.5" cy="15.5" r="1"></circle>
<path d="M11,0 L14,3 L11.9989566,3 C11.4472481,3 11,2.55733967 11,2.00104344 L11,0 Z" id="Rectangle-5" fill="#4C97FF"></path>
<path d="M9.8115942,9.1884058 L8.6884058,9.1884058 L8.6884058,10.3115942 C8.6884058,10.6859903 8.38647343,11 8,11 C7.61352657,11 7.3115942,10.6859903 7.3115942,10.3115942 L7.3115942,9.1884058 L6.1884058,9.1884058 C5.81400966,9.1884058 5.5,8.88647343 5.5,8.5 C5.5,8.11352657 5.81400966,7.8115942 6.1884058,7.8115942 L7.3115942,7.8115942 L7.3115942,6.6884058 C7.3115942,6.31280193 7.61352657,6 8,6 C8.38647343,6 8.6884058,6.31280193 8.6884058,6.6884058 L8.6884058,7.8115942 L9.8115942,7.8115942 C10.1859903,7.8115942 10.5,8.11352657 10.5,8.5 C10.5,8.88647343 10.1859903,9.1884058 9.8115942,9.1884058 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="0.25" fill="#FFFFFF"></path>
</g>
diff --git a/src/components/mode-tools/icons/paste.svg b/src/components/mode-tools/icons/paste.svg
index 18bc9c20..de9b64a4 100644
--- a/src/components/mode-tools/icons/paste.svg
+++ b/src/components/mode-tools/icons/paste.svg
@@ -1,25 +1,14 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
- <title>paste</title>
+ <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
+ <title>paste v2</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
- <g id="paste">
- <g transform="translate(3.000000, 2.000000)">
+ <g id="paste-v2">
+ <g id="paste" transform="translate(3.000000, 2.000000)">
+ <polyline id="Path-3" stroke-opacity="0.5" stroke="#575E75" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1,2" transform="translate(6.748413, 6.750000) scale(1, -1) translate(-6.748413, -6.750000) " points="0.5 0.5 0.5 13 12.9968262 13"></polyline>
<path d="M2,3.00684547 C2,2.45078007 2.45303631,2 2.99703014,2 L10,2 L10,4.34995317 C10,5.26124887 10.7336617,6 11.6500468,6 L14,6 L14,15.0046024 C14,15.5543453 13.544239,16 12.9975267,16 L3.00247329,16 C2.44882258,16 2,15.5500512 2,14.9931545 L2,3.00684547 Z" id="Rectangle-4" fill="#4C97FF"></path>
- <circle id="Oval" fill="#575E75" opacity="0.5" cx="0.5" cy="2.5" r="1"></circle>
- <circle id="Oval-Copy" fill="#575E75" opacity="0.5" cx="0.5" cy="4.5" r="1"></circle>
- <circle id="Oval-Copy-2" fill="#575E75" opacity="0.5" cx="0.5" cy="6.5" r="1"></circle>
- <circle id="Oval-Copy-3" fill="#575E75" opacity="0.5" cx="0.5" cy="8.5" r="1"></circle>
- <circle id="Oval-Copy-4" fill="#575E75" opacity="0.5" cx="0.5" cy="10.5" r="1"></circle>
- <circle id="Oval-Copy-5" fill="#575E75" opacity="0.5" cx="0.5" cy="12.5" r="1"></circle>
- <circle id="Oval-Copy-6" fill="#575E75" opacity="0.5" cx="0.5" cy="0.5" r="1"></circle>
- <circle id="Oval-Copy-7" fill="#575E75" opacity="0.5" cx="2.5" cy="0.5" r="1"></circle>
- <circle id="Oval-Copy-8" fill="#575E75" opacity="0.5" cx="4.5" cy="0.5" r="1"></circle>
- <circle id="Oval-Copy-9" fill="#575E75" opacity="0.5" cx="6.5" cy="0.5" r="1"></circle>
- <circle id="Oval-Copy-10" fill="#575E75" opacity="0.5" cx="8.5" cy="0.5" r="1"></circle>
- <circle id="Oval-Copy-11" fill="#575E75" opacity="0.5" cx="10.5" cy="0.5" r="1"></circle>
<path d="M11,2 L14,5 L11.9989566,5 C11.4472481,5 11,4.55733967 11,4.00104344 L11,2 Z" id="Rectangle-5" fill="#4C97FF"></path>
<path d="M8.34791833,12.8771885 C8.26180668,12.9633001 8.14699113,13.0063559 8.03217559,13.0063559 C7.9030081,13.0063559 7.78819256,12.9633001 7.70208091,12.8771885 L5.86503222,11.0401398 C5.73586474,10.8966203 5.69280891,10.7100451 5.76456862,10.5378218 C5.83632834,10.3655985 5.99419971,10.2651349 6.18077497,10.2651349 L6.92707599,10.2651349 L7.28587456,7.66743321 C7.31457845,7.46650601 7.41504205,7.27993075 7.57291342,7.16511521 C7.73078479,7.03594773 7.94606393,6.97853995 8.13263919,7.00724384 C8.47708582,7.06321642 8.74977273,7.33733852 8.79282856,7.66743321 L9.16597907,10.2651349 L9.86922427,10.2651349 C10.0557995,10.2651349 10.2136709,10.3799504 10.2854306,10.5521737 C10.3571903,10.7100451 10.3141345,10.9109723 10.184967,11.0401398 L8.34791833,12.8771885 Z" id="Fill-1" fill="#FFFFFF"></path>
</g>
diff --git a/src/components/paint-editor/icons/bitmap.svg b/src/components/paint-editor/icons/bitmap.svg
new file mode 100644
index 00000000..8b07f54e
--- /dev/null
+++ b/src/components/paint-editor/icons/bitmap.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
+ <title>bitmap</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="bitmap" fill="#575E75">
+ <path d="M4,3 L16,3 L16,4 L4,4 L4,3 Z M2,5 L3,5 L3,13 L2,13 L2,5 Z M17,5 L18,5 L18,13 L17,13 L17,5 Z M2,13 L18,13 L18,15 L2,15 L2,13 Z M4,12 L16,12 L16,13 L4,13 L4,12 Z M5,11 L8,11 L8,12 L5,12 L5,11 Z M6,10 L7,10 L7,11 L6,11 L6,10 Z M9,11 L16,11 L16,12 L9,12 L9,11 Z M10,10 L15,10 L15,11 L10,11 L10,10 Z M11,9 L14,9 L14,10 L11,10 L11,9 Z M12,8 L13,8 L13,9 L12,9 L12,8 Z M16,12 L17,12 L17,13 L16,13 L16,12 Z M3,15 L17,15 L17,16 L3,16 L3,15 Z M3,4 L4,4 L4,5 L3,5 L3,4 Z M16,4 L17,4 L17,5 L16,5 L16,4 Z M4,16 L16,16 L16,17 L4,17 L4,16 Z" id="Combined-Shape"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/paint-editor/paint-editor.css b/src/components/paint-editor/paint-editor.css
index ea1dc341..0b98f35f 100644
--- a/src/components/paint-editor/paint-editor.css
+++ b/src/components/paint-editor/paint-editor.css
@@ -28,6 +28,10 @@
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);
@@ -117,6 +121,10 @@ $border-radius: 0.25rem;
margin-left: calc(2 * $grid-unit);
}
+.mod-margin-right {
+ margin-right: calc(2 * $grid-unit);
+}
+
.canvas-container {
width: 480px;
height: 360px;
@@ -157,6 +165,33 @@ $border-radius: 0.25rem;
overflow: hidden;
}
+.canvas-controls {
+ display: flex;
+ margin-top: .25rem;
+ justify-content: space-between;
+}
+
+.bitmap-tooltip {
+ margin-left: $grid-unit;
+ max-width: 10rem;
+}
+
+.bitmap-button {
+ display: flex;
+ border-radius: 5px;
+ background-color: hsla(0, 0%, 0%, .25);
+ padding: calc(2 * $grid-unit);
+ line-height: 1.5rem;
+ font-size: calc(3 * $grid-unit);
+ font-weight: bold;
+ justify-content: center;
+ opacity: .5;
+}
+
+.bitmap-button-icon {
+ margin-right: calc(2 * $grid-unit);
+}
+
@media only screen and (max-width: $full-size-paint) {
.editor-container {
padding: calc(3 * $grid-unit) $grid-unit;
diff --git a/src/components/paint-editor/paint-editor.jsx b/src/components/paint-editor/paint-editor.jsx
index 92a40b29..8fc2020e 100644
--- a/src/components/paint-editor/paint-editor.jsx
+++ b/src/components/paint-editor/paint-editor.jsx
@@ -15,6 +15,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 {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
import Dropdown from '../dropdown/dropdown.jsx';
import EraserMode from '../../containers/eraser-mode.jsx';
import FillColorIndicatorComponent from '../../containers/fill-color-indicator.jsx';
@@ -32,10 +33,12 @@ import ReshapeMode from '../../containers/reshape-mode.jsx';
import SelectMode from '../../containers/select-mode.jsx';
import StrokeColorIndicatorComponent from '../../containers/stroke-color-indicator.jsx';
import StrokeWidthIndicatorComponent from '../../containers/stroke-width-indicator.jsx';
+import TextModeComponent from '../text-mode/text-mode.jsx';
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';
@@ -99,6 +102,11 @@ const messages = defineMessages({
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',
+ id: 'paint.paintEditor.bitmap'
}
});
@@ -117,6 +125,7 @@ const PaintEditorComponent = props => {
<MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
<Label text={props.intl.formatMessage(messages.costume)}>
<BufferedInput
+ className={styles.costumeInput}
type="text"
value={props.name}
onSubmit={props.onUpdateName}
@@ -125,6 +134,7 @@ const PaintEditorComponent = props => {
</MediaQuery>
<MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
<BufferedInput
+ className={styles.costumeInput}
type="text"
value={props.name}
onSubmit={props.onUpdateName}
@@ -207,32 +217,30 @@ const PaintEditorComponent = props => {
</InputGroup>
<MediaQuery minWidth={layout.fullSizeEditorMinWidth}>
- <div className={styles.row}>
- <InputGroup>
- <LabeledIconButton
- disabled={!shouldShowBringForward()}
- imgSrc={sendFrontIcon}
- title={props.intl.formatMessage(messages.front)}
- onClick={props.onSendToFront}
- />
- <LabeledIconButton
- disabled={!shouldShowSendBackward()}
- imgSrc={sendBackIcon}
- title={props.intl.formatMessage(messages.back)}
- onClick={props.onSendToBack}
- />
- </InputGroup>
+ <InputGroup className={styles.row}>
+ <LabeledIconButton
+ disabled={!shouldShowBringForward()}
+ imgSrc={sendFrontIcon}
+ title={props.intl.formatMessage(messages.front)}
+ onClick={props.onSendToFront}
+ />
+ <LabeledIconButton
+ disabled={!shouldShowSendBackward()}
+ imgSrc={sendBackIcon}
+ title={props.intl.formatMessage(messages.back)}
+ onClick={props.onSendToBack}
+ />
+ </InputGroup>
- {/* To be rotation point */}
- {/* <InputGroup>
- <LabeledIconButton
- imgAlt="Rotation Point"
- imgSrc={rotationPointIcon}
- title="Rotation Point"
- onClick={function () {}}
- />
- </InputGroup> */}
- </div>
+ {/* To be rotation point */}
+ {/* <InputGroup>
+ <LabeledIconButton
+ imgAlt="Rotation Point"
+ imgSrc={rotationPointIcon}
+ title="Rotation Point"
+ onClick={function () {}}
+ />
+ </InputGroup> */}
</MediaQuery>
<MediaQuery maxWidth={layout.fullSizeEditorMinWidth - 1}>
<InputGroup>
@@ -300,6 +308,7 @@ const PaintEditorComponent = props => {
>
{/* fill */}
<FillColorIndicatorComponent
+ className={styles.modMarginRight}
onUpdateSvg={props.onUpdateSvg}
/>
{/* stroke */}
@@ -349,6 +358,8 @@ const PaintEditorComponent = props => {
<RectMode
onUpdateSvg={props.onUpdateSvg}
/>
+ {/* text tool, coming soon */}
+ <TextModeComponent />
</div>
) : null}
@@ -378,41 +389,58 @@ const PaintEditorComponent = props => {
</Box>
) : null
}
- {/* Zoom controls */}
- <InputGroup className={styles.zoomControls}>
- <ButtonGroup>
- <Button
- className={styles.buttonGroupButton}
- onClick={props.onZoomOut}
- >
+ <div className={styles.canvasControls}>
+ <ComingSoonTooltip
+ className={styles.bitmapTooltip}
+ place="top"
+ tooltipId="bitmap-converter"
+ >
+ <div className={styles.bitmapButton}>
<img
- alt="Zoom Out"
- className={styles.buttonGroupButtonIcon}
- src={zoomOutIcon}
+ className={styles.bitmapButtonIcon}
+ src={bitmapIcon}
/>
- </Button>
- <Button
- className={styles.buttonGroupButton}
- onClick={props.onZoomReset}
- >
- <img
- alt="Zoom Reset"
- className={styles.buttonGroupButtonIcon}
- src={zoomResetIcon}
- />
- </Button>
- <Button
- className={styles.buttonGroupButton}
- onClick={props.onZoomIn}
- >
- <img
- alt="Zoom In"
- className={styles.buttonGroupButtonIcon}
- src={zoomInIcon}
- />
- </Button>
- </ButtonGroup>
- </InputGroup>
+ <span>
+ {props.intl.formatMessage(messages.bitmap)}
+ </span>
+ </div>
+ </ComingSoonTooltip>
+ {/* Zoom controls */}
+ <InputGroup className={styles.zoomControls}>
+ <ButtonGroup>
+ <Button
+ className={styles.buttonGroupButton}
+ onClick={props.onZoomOut}
+ >
+ <img
+ alt="Zoom Out"
+ className={styles.buttonGroupButtonIcon}
+ src={zoomOutIcon}
+ />
+ </Button>
+ <Button
+ className={styles.buttonGroupButton}
+ onClick={props.onZoomReset}
+ >
+ <img
+ alt="Zoom Reset"
+ className={styles.buttonGroupButtonIcon}
+ src={zoomResetIcon}
+ />
+ </Button>
+ <Button
+ className={styles.buttonGroupButton}
+ onClick={props.onZoomIn}
+ >
+ <img
+ alt="Zoom In"
+ className={styles.buttonGroupButtonIcon}
+ src={zoomInIcon}
+ />
+ </Button>
+ </ButtonGroup>
+ </InputGroup>
+ </div>
</div>
</div>
</div>
diff --git a/src/components/stroke-color-indicator.jsx b/src/components/stroke-color-indicator.jsx
index 170582bb..32720bcf 100644
--- a/src/components/stroke-color-indicator.jsx
+++ b/src/components/stroke-color-indicator.jsx
@@ -17,7 +17,10 @@ const messages = defineMessages({
});
const StrokeColorIndicatorComponent = props => (
- <InputGroup disabled={props.disabled}>
+ <InputGroup
+ className={props.className}
+ disabled={props.disabled}
+ >
<Popover
body={
<ColorPicker
@@ -41,6 +44,7 @@ const StrokeColorIndicatorComponent = props => (
);
StrokeColorIndicatorComponent.propTypes = {
+ className: PropTypes.string,
disabled: PropTypes.bool.isRequired,
intl: intlShape,
onChangeStrokeColor: PropTypes.func.isRequired,
diff --git a/src/components/text-mode/text-mode.jsx b/src/components/text-mode/text-mode.jsx
new file mode 100644
index 00000000..1ab29d09
--- /dev/null
+++ b/src/components/text-mode/text-mode.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import {ComingSoonTooltip} from '../coming-soon/coming-soon.jsx';
+import ToolSelectComponent from '../tool-select-base/tool-select-base.jsx';
+
+import textIcon from './text.svg';
+
+const TextModeComponent = () => (
+ <ComingSoonTooltip
+ place="right"
+ tooltipId="text-mode-select"
+ >
+ <ToolSelectComponent
+ disabled
+ imgDescriptor={{
+ defaultMessage: 'Text',
+ description: 'Label for the text tool',
+ id: 'paint.textMode.text'
+ }}
+ imgSrc={textIcon}
+ isSelected={false}
+ onMouseDown={function () {}} // eslint-disable-line react/jsx-no-bind
+ />
+ </ComingSoonTooltip>
+);
+
+export default TextModeComponent;
diff --git a/src/components/text-mode/text.svg b/src/components/text-mode/text.svg
new file mode 100644
index 00000000..847a903e
--- /dev/null
+++ b/src/components/text-mode/text.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+ <title>text</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="text" fill="#575E75">
+ <path d="M16,4.35294118 L16,6.85176471 C16,7.04941176 15.8447059,7.20470588 15.6470588,7.20470588 L14.8988235,7.20470588 C14.7576471,7.20470588 14.6164706,7.12 14.5741176,6.99294118 L14.2070588,6.11764706 L11.0588235,6.11764706 L11.0588235,14.2917647 L11.92,14.6164706 C12.0611765,14.6729412 12.16,14.8 12.16,14.9552941 L12.16,15.6470588 C12.16,15.8447059 11.9905882,16 11.8070588,16 L8.20705882,16 C8.02352941,16 7.85411765,15.8447059 7.85411765,15.6470588 L7.85411765,14.9552941 C7.85411765,14.8 7.95294118,14.6729412 8.08,14.6164706 L8.94117647,14.2917647 L8.94117647,6.11764706 L5.80705882,6.11764706 L5.44,6.99294118 C5.38352941,7.12 5.25647059,7.20470588 5.11529412,7.20470588 L4.35294118,7.20470588 C4.16941176,7.20470588 4,7.04941176 4,6.85176471 L4,4.35294118 C4,4.15529412 4.16941176,4 4.35294118,4 L15.6470588,4 C15.8447059,4 16,4.15529412 16,4.35294118" id="text-icon"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/src/components/tool-select-base/tool-select-base.jsx b/src/components/tool-select-base/tool-select-base.jsx
index b8e29169..1c27268e 100644
--- a/src/components/tool-select-base/tool-select-base.jsx
+++ b/src/components/tool-select-base/tool-select-base.jsx
@@ -14,6 +14,7 @@ const ToolSelectComponent = props => (
[styles.isSelected]: props.isSelected
})
}
+ disabled={props.disabled}
onClick={props.onMouseDown}
>
<img
@@ -30,6 +31,7 @@ const ToolSelectComponent = props => (
ToolSelectComponent.propTypes = {
className: PropTypes.string,
+ disabled: PropTypes.bool,
imgDescriptor: PropTypes.shape({
defaultMessage: PropTypes.string,
description: PropTypes.string,
diff --git a/src/css/colors.css b/src/css/colors.css
index 0fe15fca..14d539c4 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -20,4 +20,6 @@ $sound-tertiary: #A63FA6;
$control-primary: #FFAB19;
+$data-primary: #FF8C1A;
+
$form-border: #E9EEF2;