From 1a5d8082a8c8b19f4248e77995a8da10fff10b26 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Wed, 8 Nov 2017 09:54:01 -0500 Subject: [PATCH 1/4] Add question and answer components. --- src/components/question/question.css | 56 ++++++++++++++++++++++++++++ src/components/question/question.jsx | 47 +++++++++++++++++++++++ src/components/stage/stage.jsx | 11 ++++++ src/containers/question.jsx | 45 ++++++++++++++++++++++ src/containers/stage.jsx | 19 +++++++++- 5 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 src/components/question/question.css create mode 100644 src/components/question/question.jsx create mode 100644 src/containers/question.jsx diff --git a/src/components/question/question.css b/src/components/question/question.css new file mode 100644 index 000000000..0637d9d46 --- /dev/null +++ b/src/components/question/question.css @@ -0,0 +1,56 @@ +@import "../../css/units.css"; +@import "../../css/colors.css"; + +.question-wrapper { + position: absolute; + bottom: 0; + left: 0; + width: 100%; +} + +.question-container { + margin: $space; + border: 1px solid $form-border; + border-radius: $space; + border-width: 2px; + padding: 1rem; + background: white; +} + +.question-label { + font-size: 0.75rem; + font-weight: bold; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + color: $text-primary; + padding-bottom: $space; +} + +.question-input { + display: flex; /* Keeps the input from going outside this container */ + position: relative; +} + +.question-submit-button { + position: absolute; + top: calc($space / 2); + right: calc($space / 2); + + width: calc(2rem - $space); + height: calc(2rem - $space); + + border: none; + border-radius: 100%; + + color: white; + background: $motion-primary; +} + +/* Input overrides: width, font-weight and focus outline */ +.question-input > input { + width: 100%; + font-weight: normal; +} + +.question-input > input:focus { + box-shadow: 0px 0px 0px 3px $motion-transparent; +} diff --git a/src/components/question/question.jsx b/src/components/question/question.jsx new file mode 100644 index 000000000..11927bf96 --- /dev/null +++ b/src/components/question/question.jsx @@ -0,0 +1,47 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import styles from './question.css'; +import Input from '../forms/input.jsx'; + +const QuestionComponent = props => { + const { + answer, + question, + onChange, + onClick, + onKeyPress + } = props; + return ( +
+
+ {question ? ( +
{question}
+ ) : null} +
+ + +
+
+
+ ); +}; + +QuestionComponent.propTypes = { + answer: PropTypes.string, + onChange: PropTypes.func.isRequired, + onClick: PropTypes.func.isRequired, + onKeyPress: PropTypes.func.isRequired, + question: PropTypes.string +}; + +export default QuestionComponent; diff --git a/src/components/stage/stage.jsx b/src/components/stage/stage.jsx index 7a23c099d..ae5ff92a6 100644 --- a/src/components/stage/stage.jsx +++ b/src/components/stage/stage.jsx @@ -5,6 +5,7 @@ import classNames from 'classnames'; import Box from '../box/box.jsx'; import Loupe from '../loupe/loupe.jsx'; import MonitorList from '../../containers/monitor-list.jsx'; +import Question from '../../containers/question.jsx'; import styles from './stage.css'; const StageComponent = props => { @@ -15,6 +16,8 @@ const StageComponent = props => { colorInfo, onDeactivateColorPicker, isColorPicking, + question, + onQuestionAnswered, ...boxProps } = props; return ( @@ -40,6 +43,12 @@ const StageComponent = props => { ) : null} + {question === null ? null : ( + + )} {isColorPicking ? ( + ); + } +} + +Question.propTypes = { + onQuestionAnswered: PropTypes.func.isRequired, + question: PropTypes.string +}; + +export default Question; diff --git a/src/containers/stage.jsx b/src/containers/stage.jsx index 1de93d23d..fcff811bf 100644 --- a/src/containers/stage.jsx +++ b/src/containers/stage.jsx @@ -24,12 +24,14 @@ class Stage extends React.Component { 'cancelMouseDownTimeout', 'detachMouseEvents', 'handleDoubleClick', + 'handleQuestionAnswered', 'onMouseUp', 'onMouseMove', 'onMouseDown', 'onStartDrag', 'onStopDrag', 'updateRect', + 'questionListener', 'setCanvas' ]); this.state = { @@ -38,7 +40,8 @@ class Stage extends React.Component { isDragging: false, dragOffset: null, dragId: null, - colorInfo: null + colorInfo: null, + question: null }; } componentDidMount () { @@ -47,12 +50,14 @@ class Stage extends React.Component { this.updateRect(); this.renderer = new Renderer(this.canvas); this.props.vm.attachRenderer(this.renderer); + this.props.vm.runtime.addListener('QUESTION', this.questionListener); } shouldComponentUpdate (nextProps, nextState) { return this.props.width !== nextProps.width || this.props.height !== nextProps.height || this.props.isColorPicking !== nextProps.isColorPicking || - this.state.colorInfo !== nextState.colorInfo; + this.state.colorInfo !== nextState.colorInfo || + this.state.question !== nextState.question; } componentDidUpdate (prevProps) { if (this.props.isColorPicking && !prevProps.isColorPicking) { @@ -66,6 +71,14 @@ class Stage extends React.Component { this.detachRectEvents(); this.stopColorPickingLoop(); } + questionListener (question) { + this.setState({question: question}); + } + handleQuestionAnswered (answer) { + this.setState({question: null}, () => { + this.props.vm.runtime.emit('ANSWER', answer); + }); + } startColorPickingLoop () { this.intervalId = setInterval(() => { this.setState({colorInfo: this.getColorInfo(this.pickX, this.pickY)}); @@ -251,7 +264,9 @@ class Stage extends React.Component { ); From 72dbf9f9979f0727f6e811efe4569cb4f9011674 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Fri, 10 Nov 2017 11:20:55 -0500 Subject: [PATCH 2/4] Give fixed ID to ask and wait in palette --- src/lib/make-toolbox-xml.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/make-toolbox-xml.js b/src/lib/make-toolbox-xml.js index 1c3843a09..54fddfc4a 100644 --- a/src/lib/make-toolbox-xml.js +++ b/src/lib/make-toolbox-xml.js @@ -382,7 +382,7 @@ const sensing = ` ${blockSeparator} - + What's your name? From 00d523a519f8278905932e6d7b6556db57433a0e Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Fri, 10 Nov 2017 11:22:49 -0500 Subject: [PATCH 3/4] Fix text in input below button. --- src/components/question/question.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/question/question.css b/src/components/question/question.css index 0637d9d46..7c6e672a9 100644 --- a/src/components/question/question.css +++ b/src/components/question/question.css @@ -45,9 +45,10 @@ background: $motion-primary; } -/* Input overrides: width, font-weight and focus outline */ +/* Input overrides: width, font-weight, focus outline and padding */ .question-input > input { width: 100%; + padding: 0 2rem 0 0.75rem; /* To make room for the submit button */ font-weight: normal; } From 0e4b0995ba90e2c3dc8594fd418641cc26fb76d3 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Fri, 10 Nov 2017 11:25:32 -0500 Subject: [PATCH 4/4] Add fixed IDs to other blocks that can be glowed in the toolbox. Prevent switching tabs while one of these blocks is glowing from crashing because it is given a new ID. --- src/lib/make-toolbox-xml.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/make-toolbox-xml.js b/src/lib/make-toolbox-xml.js index 54fddfc4a..315e1388c 100644 --- a/src/lib/make-toolbox-xml.js +++ b/src/lib/make-toolbox-xml.js @@ -336,12 +336,12 @@ const control = ` - + ${blockSeparator} - - + + ${blockSeparator} ${blockSeparator}