Add coming soon for bitmap, text tool

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",

src/components/button/button.css

@@ -11,7 +11,7 @@
 
 :local(.mod-disabled) {
     cursor: auto;
-    opacity: .3;
+    opacity: .5;
 }
 :local(.mod-disabled:active) {
     background: none;

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;
+}

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
+};

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>

src/components/paint-editor/paint-editor.css

@@ -157,6 +157,32 @@ $border-radius: 0.25rem;
     overflow: hidden;
 }
 
+.canvas-controls {
+    display: flex;
+    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;

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'
     }
 });
 
@@ -350,6 +358,8 @@ const PaintEditorComponent = props => {
                         <RectMode
                             onUpdateSvg={props.onUpdateSvg}
                         />
+                        {/* text tool, coming soon */}
+                        <TextModeComponent />
                     </div>
                 ) : null}
 
@@ -379,6 +389,22 @@ const PaintEditorComponent = props => {
                             </Box>
                         ) : null
                     }
+                    <div className={styles.canvasControls}>
+                        <ComingSoonTooltip
+                            className={styles.bitmapTooltip}
+                            place="top"
+                            tooltipId="bitmap-converter"
+                        >
+                            <div className={styles.bitmapButton}>
+                                <img
+                                    className={styles.bitmapButtonIcon}
+                                    src={bitmapIcon}
+                                />
+                                <span>
+                                    {props.intl.formatMessage(messages.bitmap)}
+                                </span>
+                            </div>
+                        </ComingSoonTooltip>
                         {/* Zoom controls */}
                         <InputGroup className={styles.zoomControls}>
                             <ButtonGroup>
@@ -417,6 +443,7 @@ const PaintEditorComponent = props => {
                     </div>
                 </div>
             </div>
+        </div>
     );
 };
 

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 () {}}
+        />
+    </ComingSoonTooltip>
+);
+
+export default TextModeComponent;

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>

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,

src/css/colors.css

@@ -20,4 +20,6 @@ $sound-tertiary: #A63FA6;
 
 $control-primary: #FFAB19;
 
+$data-primary: #FF8C1A;
+
 $form-border: #E9EEF2;