Merge pull request #240 from mewtaylor/issue/gui-830

Finish GUI-830: Add "coming soon" for bitmap, text tool
2025-03-13 22:50:01 -04:00 · 2017-12-26 12:04:02 -05:00 · 2017-12-26 12:04:02 -05:00 · 7ee2c7e6b7
commit 7ee2c7e6b7
parent 01d8ff736f bb7e66d26b
19 changed files with 429 additions and 100 deletions
--- 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",
--- 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;
--- a/src/components/coming-soon/aww-cat.png
+++ b/src/components/coming-soon/aww-cat.png
--- a/src/components/coming-soon/coming-soon.css
+++ 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;
+}
--- a/src/components/coming-soon/coming-soon.jsx
+++ 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
+};
--- a/src/components/coming-soon/cool-cat.png
+++ b/src/components/coming-soon/cool-cat.png
--- 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,
--- 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
 };

--- 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;
 }
--- 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>
--- 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>
--- a/src/components/paint-editor/icons/bitmap.svg
+++ 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>
--- 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;
--- 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>
--- 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,
--- a/src/components/text-mode/text-mode.jsx
+++ 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;
--- a/src/components/text-mode/text.svg
+++ 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>
--- 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,
--- 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;