Bring in buffered input from GUI

src/components/forms/buffered-input-hoc.jsx

@@ -0,0 +1,60 @@
+import bindAll from 'lodash.bindall';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+/**
+ * Higher Order Component to manage inputs that submit on blur and <enter>
+ * @param {React.Component} Input text input that consumes onChange, onBlur, onKeyPress
+ * @returns {React.Component} Buffered input that calls onSubmit on blur and <enter>
+ */
+export default function (Input) {
+    class BufferedInput extends React.Component {
+        constructor (props) {
+            super(props);
+            bindAll(this, [
+                'handleChange',
+                'handleKeyPress',
+                'handleFlush'
+            ]);
+            this.state = {
+                value: null
+            };
+        }
+        handleKeyPress (e) {
+            if (e.key === 'Enter') {
+                this.handleFlush();
+                e.target.blur();
+            }
+        }
+        handleFlush () {
+            const isNumeric = typeof this.props.value === 'number';
+            const validatesNumeric = isNumeric ? !isNaN(this.state.value) : true;
+            if (this.state.value !== null && validatesNumeric) {
+                this.props.onSubmit(isNumeric ? Number(this.state.value) : this.state.value);
+            }
+            this.setState({value: null});
+        }
+        handleChange (e) {
+            this.setState({value: e.target.value});
+        }
+        render () {
+            const bufferedValue = this.state.value === null ? this.props.value : this.state.value;
+            return (
+                <Input
+                    {...this.props}
+                    value={bufferedValue}
+                    onBlur={this.handleFlush}
+                    onChange={this.handleChange}
+                    onKeyPress={this.handleKeyPress}
+                />
+            );
+        }
+    }
+
+    BufferedInput.propTypes = {
+        onSubmit: PropTypes.func.isRequired,
+        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    };
+
+    return BufferedInput;
+}

src/components/forms/input.css

@@ -0,0 +1,42 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+.input-form {
+    height: 2rem;
+    padding: 0 0.75rem;
+
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 0.625rem;
+    font-weight: bold;
+    color: $text-primary;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: $form-border;
+    border-radius: 2rem;
+
+    outline: none;
+    cursor: text;
+    transition: 0.25s ease-out; /* @todo: standardize with var */
+    box-shadow: none;
+
+    /*
+        For truncating overflowing text gracefully
+        Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text
+        @todo: move this out into a mixin or a helper component
+    */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+}
+
+.input-form:focus {
+    border-color: #4c97ff;
+    box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
+}
+
+.input-small {
+    width: 3rem; 
+    text-align: center;
+}

src/components/forms/input.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+
+import styles from './input.css';
+
+const Input = props => {
+    const {small, ...componentProps} = props;
+    return (
+        <input
+            {...componentProps}
+            className={classNames(styles.inputForm, {
+                [styles.inputSmall]: small
+            })}
+        />
+    );
+};
+
+Input.propTypes = {
+    small: PropTypes.bool
+};
+
+Input.defaultProps = {
+    small: false
+};
+
+export default Input;

src/components/forms/label.css

@@ -0,0 +1,19 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+.input-group {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.input-label, .input-label-secondary {
+    font-size: 0.625rem;
+    margin-right: calc($space / 2);
+    user-select: none;
+    cursor: default;
+}
+
+.input-label {
+    font-weight: bold;
+}

src/components/forms/label.jsx

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import styles from './label.css';
+
+const Label = props => (
+    <label className={styles.inputGroup}>
+        <span className={props.secondary ? styles.inputLabelSecondary : styles.inputLabel}>
+            {props.text}
+        </span>
+        {props.children}
+    </label>
+);
+
+Label.propTypes = {
+    children: PropTypes.node,
+    secondary: PropTypes.bool,
+    text: PropTypes.string.isRequired
+};
+
+Label.defaultProps = {
+    secondary: false
+};
+
+export default Label;

src/components/paint-editor.css

@@ -1,35 +1,5 @@
-$ui-pane-border: #D9D9D9;
-$ui-pane-gray: #F9F9F9;
-$ui-background-blue: #e8edf1;
-
-$text-primary: #575e75;
-
-$motion-primary: #4C97FF;
-$motion-tertiary: #3373CC;
-$motion-transparent: hsla(215, 100%, 65%, 0.20);
-
-$red-primary: #FF661A;
-$red-tertiary: #E64D00;
-
-$sound-primary: #CF63CF;
-$sound-tertiary: #A63FA6;
-
-$control-primary: #FFAB19;
-
-$form-border: #E9EEF2;
-
-$space: 0.5rem;
-
-$sprites-per-row: 5;
-
-$menu-bar-height: 3rem;
-$sprite-info-height: 6rem;
-$stage-menu-height: 2.75rem;
-
-$library-header-height: 4.375rem;
-
-$form-radius: calc($space / 2);
-
+@import "../css/colors.css";
+@import "../css/units.css";
 
 .editor-container {
     display: flex;
@@ -43,6 +13,12 @@ $form-radius: calc($space / 2);
     align-items: center;
 }
 
+.top-align-row {
+    padding-top:20px;
+    display: flex;
+    flex-direction: row;
+}
+
 .row + .row {
     margin-top: calc(2 * $space);
 }
@@ -143,3 +119,18 @@ $border-radius: 0.25rem;
 .button:disabled > img {
     opacity: 0.25;
 }
+
+.canvas-container {
+    width: 503px;
+    height: 403px;
+    background-color: #e8edf1;
+    border: 1px solid #e8edf1;
+    border-radius: 2px;
+    position: relative;
+    overflow: visible;
+}
+
+.mode-selector {
+    display: flex;
+    flex-direction: column;
+}

src/components/paint-editor.jsx

@@ -6,8 +6,32 @@ import EraserMode from '../containers/eraser-mode.jsx';
 import PropTypes from 'prop-types';
 import LineMode from '../containers/line-mode.jsx';
 
+import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import BufferedInputHOC from './forms/buffered-input-hoc.jsx';
+import Label from './forms/label.jsx';
+import Input from './forms/input.jsx';
+
 import styles from './paint-editor.css';
 
+const BufferedInput = BufferedInputHOC(Input);
+const messages = defineMessages({
+    costume: {
+        id: 'paint.paintEditor.costume',
+        description: 'Label for the name of a sound',
+        defaultMessage: 'Costume'
+    },
+    fill: {
+        id: 'paint.paintEditor.fill',
+        description: 'Label for the color picker for the fill color',
+        defaultMessage: 'Fill'
+    },
+    outline: {
+        id: 'paint.paintEditor.outline',
+        description: 'Label for the color picker for the outline color',
+        defaultMessage: 'Outline'
+    }
+});
+
 class PaintEditorComponent extends React.Component {
     constructor (props) {
         super(props);
@@ -26,10 +50,13 @@ class PaintEditorComponent extends React.Component {
                 <div className={styles.row}>
                     {/* Name field */}
                     <div className={styles.inputGroup}>
-                        {/* Todo use Label and BufferedInput from Gui */}
-                        <label>Costume
-                            <input value="meow" />
-                        </label>
+                        <Label text={this.props.intl.formatMessage(messages.costume)}>
+                            <BufferedInput
+                                tabIndex="1"
+                                type="text"
+                                value="meow"
+                            />
+                        </Label>
                     </div>
 
                     {/* Undo/Redo */}
@@ -81,19 +108,23 @@ class PaintEditorComponent extends React.Component {
                 <div className={styles.row}>
                     {/* To be fill */}
                     <div className={styles.inputGroup}>
-                        <button
-                            className={styles.button}
-                        >
-                            Fill
-                        </button>
+                        <Label text={this.props.intl.formatMessage(messages.fill)}>
+                            <BufferedInput
+                                tabIndex="1"
+                                type="text"
+                                value="meow"
+                            />
+                        </Label>
                     </div>
                     {/* To be stroke */}
                     <div className={styles.inputGroup}>
-                        <button
-                            className={styles.button}
-                        >
-                            Stroke
-                        </button>
+                        <Label text={this.props.intl.formatMessage(messages.outline)}>
+                            <BufferedInput
+                                tabIndex="1"
+                                type="text"
+                                value="meow"
+                            />
+                        </Label>
                     </div>
 
                     <div className={styles.inputGroup}>
@@ -101,7 +132,7 @@ class PaintEditorComponent extends React.Component {
                     </div>
                 </div>
 
-                <div className={styles.row}>
+                <div className={styles.topAlignRow}>
                     {/* Modes */}
                     {this.state.canvas ? (
                         <div className={styles.modeSelector}>
@@ -136,10 +167,11 @@ class PaintEditorComponent extends React.Component {
 }
 
 PaintEditorComponent.propTypes = {
+    intl: intlShape,
     onUpdateSvg: PropTypes.func.isRequired,
     rotationCenterX: PropTypes.number,
     rotationCenterY: PropTypes.number,
     svg: PropTypes.string
 };
 
-export default PaintEditorComponent;
+export default injectIntl(PaintEditorComponent);

src/containers/paper-canvas.css

@@ -0,0 +1,7 @@
+.paper-canvas {
+    width: 500px;
+    height: 400px;
+    margin: auto;  
+    position: relative;
+    background-color: #fff;
+}

src/containers/paper-canvas.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import paper from 'paper';
 
+import styles from './paper-canvas.css';
+
 class PaperCanvas extends React.Component {
     constructor (props) {
         super(props);
@@ -60,7 +62,10 @@ class PaperCanvas extends React.Component {
     render () {
         return (
             <canvas
+                className={styles.paperCanvas}
+                height="400px"
                 ref={this.setCanvas}
+                width="500px"
             />
         );
     }

src/css/colors.css

@@ -0,0 +1,19 @@
+$ui-pane-border: #D9D9D9;
+$ui-pane-gray: #F9F9F9;
+$ui-background-blue: #e8edf1;
+
+$text-primary: #575e75;
+
+$motion-primary: #4C97FF;
+$motion-tertiary: #3373CC;
+$motion-transparent: hsla(215, 100%, 65%, 0.20);
+
+$red-primary: #FF661A;
+$red-tertiary: #E64D00;
+
+$sound-primary: #CF63CF;
+$sound-tertiary: #A63FA6;
+
+$control-primary: #FFAB19;
+
+$form-border: #E9EEF2;

src/css/units.css

@@ -0,0 +1,11 @@
+$space: 0.5rem;
+
+$sprites-per-row: 5;
+
+$menu-bar-height: 3rem;
+$sprite-info-height: 6rem;
+$stage-menu-height: 2.75rem;
+
+$library-header-height: 4.375rem;
+
+$form-radius: calc($space / 2);