From 84464a8118e33f6ce20a417711cf1ba22241a156 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Fri, 18 Nov 2016 03:01:36 -0500 Subject: [PATCH 1/6] Add className prop to Icon --- js/component/common.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/js/component/common.js b/js/component/common.js index 41a10c97b..40906d467 100644 --- a/js/component/common.js +++ b/js/component/common.js @@ -4,9 +4,11 @@ var Icon = React.createClass({ propTypes: { style: React.PropTypes.object, fixed: React.PropTypes.bool, + className: React.PropTypes.string, }, render: function() { - var className = 'icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon; + var className = ('icon ' + ('fixed' in this.props ? 'icon-fixed-width ' : '') + this.props.icon + ' ' + + (this.props.className || '')); return } }); From 498b75c688510cd2e958f1a76a3aec097a82db92 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Fri, 18 Nov 2016 03:05:28 -0500 Subject: [PATCH 2/6] Convert form hints to separate component with better style --- js/component/form.js | 40 ++++++++++++++++++++++------------ scss/_gui.scss | 51 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 77 insertions(+), 14 deletions(-) diff --git a/js/component/form.js b/js/component/form.js index 7e4b26094..4cad409e5 100644 --- a/js/component/form.js +++ b/js/component/form.js @@ -1,8 +1,3 @@ -var requiredFieldWarningStyle = { - color: '#cc0000', - transition: 'opacity 400ms ease-in', -}; - var FormField = React.createClass({ _type: null, _element: null, @@ -55,24 +50,41 @@ var FormField = React.createClass({ return this.refs.field.options[this.refs.field.selectedIndex]; }, render: function() { - var warningStyle = Object.assign({}, requiredFieldWarningStyle); - if (this.state.warningState == 'fading') { - warningStyle.opacity = '0'; - } - // Pass all unhandled props to the field element var otherProps = Object.assign({}, this.props); delete otherProps.type; delete otherProps.hidden; return ( - - + {this.props.children} - This field is required - + This field is required + + ); + } +}); + +var FormFieldAdvice = React.createClass({ + propTypes: { + state: React.PropTypes.string.isRequired, + }, + render: function() { + return ( + this.props.state != 'hidden' + ?
+
+ +
+ + {this.props.children} + +
+
+
+ : null ); } }); diff --git a/scss/_gui.scss b/scss/_gui.scss index 184bf68b5..34c6ca210 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -234,6 +234,57 @@ input[type="text"], input[type="search"] } } +.form-field-container { + display: inline-block; +} + +.form-field-advice-container { + position: relative; + width: 100%; +} + +.form-field-advice { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + + display: flex; + flex-direction: column; + justify-content: center; + + white-space: nowrap; + + transition: opacity 400ms ease-in; +} + +.form-field-advice--fading { + opacity: 0; +} + +.form-field-advice__arrow { + font-size: 22px; + line-height: 0.3; + color: darken($color-primary, 5%); +} + + +.form-field-advice__content-container { + display: inline-block; + + text-align: center; +} + +.form-field-advice__content { + display: inline-block; + + padding: 5px; + border-radius: 2px; + + background-color: darken($color-primary, 5%); + color: #fff; +} + .modal-overlay { position: fixed; From f6f4d452b0374f8f38f435f14681ec3922025a36 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Fri, 18 Nov 2016 03:43:28 -0500 Subject: [PATCH 3/6] Add FormField.showAdvice() for displaying arbitrary form hints Also modifies FormField.warnRequired() to use this new method --- js/component/form.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/js/component/form.js b/js/component/form.js index 4cad409e5..8bc9ecc78 100644 --- a/js/component/form.js +++ b/js/component/form.js @@ -1,4 +1,5 @@ var FormField = React.createClass({ + _fieldRequiredText: 'This field is required', _type: null, _element: null, @@ -8,7 +9,8 @@ var FormField = React.createClass({ }, getInitialState: function() { return { - warningState: 'hidden', + adviceState: 'hidden', + adviceText: null, } }, componentWillMount: function() { @@ -20,22 +22,26 @@ var FormField = React.createClass({ this._element = this.props.type; } }, - warnRequired: function() { + showAdvice: function(text) { this.setState({ - warningState: 'shown', + adviceState: 'shown', + adviceText: text, }); setTimeout(() => { this.setState({ - warningState: 'fading', + adviceState: 'fading', }); setTimeout(() => { this.setState({ - warningState: 'hidden', + adviceState: 'hidden', }); }, 450); }, 5000); }, + warnRequired: function() { + this.showAdvice(this._fieldRequiredText); + }, focus: function() { this.refs.field.focus(); }, @@ -61,7 +67,7 @@ var FormField = React.createClass({ {...otherProps}> {this.props.children} - This field is required + {this.state.adviceText} ); } From b73399f4e67586cd03e7bfb4d31f6c961539e1b4 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Fri, 18 Nov 2016 06:48:16 -0500 Subject: [PATCH 4/6] Publish: prevent submit and notify user if file is not fully processed --- js/page/publish.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/js/page/publish.js b/js/page/publish.js index 03cda29cf..eddc00106 100644 --- a/js/page/publish.js +++ b/js/page/publish.js @@ -38,7 +38,14 @@ var PublishPage = React.createClass({ } } - if (missingFieldFound) { + let fileProcessing = false; + if (this.state.fileInfo && !this.state.tempFileReady) { + this.refs.file.showAdvice('Your file is still processing.'); + this.refs.file.focus(); + fileProcessing = true; + } + + if (missingFieldFound || fileProcessing) { this.setState({ submitting: false, }); From 8b13f341b61e7972264b1125914732a857c36cdc Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Tue, 22 Nov 2016 00:24:29 -0500 Subject: [PATCH 5/6] Don't render hidden form fields --- js/component/form.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/js/component/form.js b/js/component/form.js index 8bc9ecc78..70cb3beb0 100644 --- a/js/component/form.js +++ b/js/component/form.js @@ -62,13 +62,15 @@ var FormField = React.createClass({ delete otherProps.hidden; return ( -
- - {this.props.children} - - {this.state.adviceText} -
+ !this.props.hidden + ?
+ + {this.props.children} + + {this.state.adviceText} +
+ : null ); } }); From 96afd8a840fcfeb855791a19dc35e0903d7ee1a0 Mon Sep 17 00:00:00 2001 From: Alex Liebowitz Date: Tue, 22 Nov 2016 00:46:42 -0500 Subject: [PATCH 6/6] Left justify form hints --- scss/_gui.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/scss/_gui.scss b/scss/_gui.scss index 34c6ca210..291afd375 100644 --- a/scss/_gui.scss +++ b/scss/_gui.scss @@ -240,18 +240,15 @@ input[type="text"], input[type="search"] .form-field-advice-container { position: relative; - width: 100%; } .form-field-advice { position: absolute; top: 0px; left: 0px; - width: 100%; display: flex; flex-direction: column; - justify-content: center; white-space: nowrap; @@ -263,6 +260,9 @@ input[type="text"], input[type="search"] } .form-field-advice__arrow { + text-align: left; + padding-left: 18px; + font-size: 22px; line-height: 0.3; color: darken($color-primary, 5%); @@ -271,8 +271,6 @@ input[type="text"], input[type="search"] .form-field-advice__content-container { display: inline-block; - - text-align: center; } .form-field-advice__content {