mirror of
https://github.com/scratchfoundation/scratch-paint.git
synced 2024-12-22 21:42:30 -05:00
Bring in buffered input from GUI
This commit is contained in:
parent
09dad3df7d
commit
4c6898657b
11 changed files with 286 additions and 48 deletions
60
src/components/forms/buffered-input-hoc.jsx
Normal file
60
src/components/forms/buffered-input-hoc.jsx
Normal file
|
@ -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;
|
||||||
|
}
|
42
src/components/forms/input.css
Normal file
42
src/components/forms/input.css
Normal file
|
@ -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;
|
||||||
|
}
|
27
src/components/forms/input.jsx
Normal file
27
src/components/forms/input.jsx
Normal file
|
@ -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;
|
19
src/components/forms/label.css
Normal file
19
src/components/forms/label.css
Normal file
|
@ -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;
|
||||||
|
}
|
25
src/components/forms/label.jsx
Normal file
25
src/components/forms/label.jsx
Normal file
|
@ -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;
|
|
@ -1,35 +1,5 @@
|
||||||
$ui-pane-border: #D9D9D9;
|
@import "../css/colors.css";
|
||||||
$ui-pane-gray: #F9F9F9;
|
@import "../css/units.css";
|
||||||
$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);
|
|
||||||
|
|
||||||
|
|
||||||
.editor-container {
|
.editor-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -43,6 +13,12 @@ $form-radius: calc($space / 2);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.top-align-row {
|
||||||
|
padding-top:20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
.row + .row {
|
.row + .row {
|
||||||
margin-top: calc(2 * $space);
|
margin-top: calc(2 * $space);
|
||||||
}
|
}
|
||||||
|
@ -143,3 +119,18 @@ $border-radius: 0.25rem;
|
||||||
.button:disabled > img {
|
.button:disabled > img {
|
||||||
opacity: 0.25;
|
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;
|
||||||
|
}
|
|
@ -6,8 +6,32 @@ import EraserMode from '../containers/eraser-mode.jsx';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import LineMode from '../containers/line-mode.jsx';
|
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';
|
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 {
|
class PaintEditorComponent extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -26,10 +50,13 @@ class PaintEditorComponent extends React.Component {
|
||||||
<div className={styles.row}>
|
<div className={styles.row}>
|
||||||
{/* Name field */}
|
{/* Name field */}
|
||||||
<div className={styles.inputGroup}>
|
<div className={styles.inputGroup}>
|
||||||
{/* Todo use Label and BufferedInput from Gui */}
|
<Label text={this.props.intl.formatMessage(messages.costume)}>
|
||||||
<label>Costume
|
<BufferedInput
|
||||||
<input value="meow" />
|
tabIndex="1"
|
||||||
</label>
|
type="text"
|
||||||
|
value="meow"
|
||||||
|
/>
|
||||||
|
</Label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Undo/Redo */}
|
{/* Undo/Redo */}
|
||||||
|
@ -81,19 +108,23 @@ class PaintEditorComponent extends React.Component {
|
||||||
<div className={styles.row}>
|
<div className={styles.row}>
|
||||||
{/* To be fill */}
|
{/* To be fill */}
|
||||||
<div className={styles.inputGroup}>
|
<div className={styles.inputGroup}>
|
||||||
<button
|
<Label text={this.props.intl.formatMessage(messages.fill)}>
|
||||||
className={styles.button}
|
<BufferedInput
|
||||||
>
|
tabIndex="1"
|
||||||
Fill
|
type="text"
|
||||||
</button>
|
value="meow"
|
||||||
|
/>
|
||||||
|
</Label>
|
||||||
</div>
|
</div>
|
||||||
{/* To be stroke */}
|
{/* To be stroke */}
|
||||||
<div className={styles.inputGroup}>
|
<div className={styles.inputGroup}>
|
||||||
<button
|
<Label text={this.props.intl.formatMessage(messages.outline)}>
|
||||||
className={styles.button}
|
<BufferedInput
|
||||||
>
|
tabIndex="1"
|
||||||
Stroke
|
type="text"
|
||||||
</button>
|
value="meow"
|
||||||
|
/>
|
||||||
|
</Label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.inputGroup}>
|
<div className={styles.inputGroup}>
|
||||||
|
@ -101,7 +132,7 @@ class PaintEditorComponent extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.row}>
|
<div className={styles.topAlignRow}>
|
||||||
{/* Modes */}
|
{/* Modes */}
|
||||||
{this.state.canvas ? (
|
{this.state.canvas ? (
|
||||||
<div className={styles.modeSelector}>
|
<div className={styles.modeSelector}>
|
||||||
|
@ -136,10 +167,11 @@ class PaintEditorComponent extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
PaintEditorComponent.propTypes = {
|
PaintEditorComponent.propTypes = {
|
||||||
|
intl: intlShape,
|
||||||
onUpdateSvg: PropTypes.func.isRequired,
|
onUpdateSvg: PropTypes.func.isRequired,
|
||||||
rotationCenterX: PropTypes.number,
|
rotationCenterX: PropTypes.number,
|
||||||
rotationCenterY: PropTypes.number,
|
rotationCenterY: PropTypes.number,
|
||||||
svg: PropTypes.string
|
svg: PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
export default PaintEditorComponent;
|
export default injectIntl(PaintEditorComponent);
|
||||||
|
|
7
src/containers/paper-canvas.css
Normal file
7
src/containers/paper-canvas.css
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
.paper-canvas {
|
||||||
|
width: 500px;
|
||||||
|
height: 400px;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
|
@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import paper from 'paper';
|
import paper from 'paper';
|
||||||
|
|
||||||
|
import styles from './paper-canvas.css';
|
||||||
|
|
||||||
class PaperCanvas extends React.Component {
|
class PaperCanvas extends React.Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -60,7 +62,10 @@ class PaperCanvas extends React.Component {
|
||||||
render () {
|
render () {
|
||||||
return (
|
return (
|
||||||
<canvas
|
<canvas
|
||||||
|
className={styles.paperCanvas}
|
||||||
|
height="400px"
|
||||||
ref={this.setCanvas}
|
ref={this.setCanvas}
|
||||||
|
width="500px"
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
19
src/css/colors.css
Normal file
19
src/css/colors.css
Normal file
|
@ -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;
|
11
src/css/units.css
Normal file
11
src/css/units.css
Normal file
|
@ -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);
|
Loading…
Reference in a new issue