From f97e3f51eef8415e2bf6d81b9301ecba84ccbd61 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Tue, 3 Nov 2015 18:45:38 -0500 Subject: [PATCH 01/11] Add Spinner component Using one found on http://tobiasahlin.com/spinkit/ for now. @carljbowman please help --- package.json | 1 + src/components/spinner/spinner.jsx | 20 +++++++++++++ src/components/spinner/spinner.scss | 45 +++++++++++++++++++++++++++++ src/views/components/components.jsx | 3 ++ 4 files changed, 69 insertions(+) create mode 100644 src/components/spinner/spinner.jsx create mode 100644 src/components/spinner/spinner.scss diff --git a/package.json b/package.json index 5892c780a..f0c56c070 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "lodash.clone": "3.0.3", "lodash.defaultsdeep": "3.10.0", "lodash.omit": "3.1.0", + "lodash.range": "3.0.1", "minilog": "2.0.8", "node-sass": "3.3.3", "po2icu": "git://github.com/LLK/po2icu.git#develop", diff --git a/src/components/spinner/spinner.jsx b/src/components/spinner/spinner.jsx new file mode 100644 index 000000000..68fab1950 --- /dev/null +++ b/src/components/spinner/spinner.jsx @@ -0,0 +1,20 @@ +var range = require('lodash.range'); +var React = require('react'); + +require('./spinner.scss'); + +var Spinner = React.createClass({ + // Adapted from http://tobiasahlin.com/spinkit/ + type: 'Spinner', + render: function () { + return ( +
+ {range(1,13).map(function (id) { + return
; + })} +
+ ); + } +}); + +module.exports = Spinner; diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss new file mode 100644 index 000000000..46cef57b8 --- /dev/null +++ b/src/components/spinner/spinner.scss @@ -0,0 +1,45 @@ +.spinner { + width: 20px; + height: 20px; + position: relative; + + .circle { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + + &:before { + content: ''; + display: block; + margin: 0 auto; + width: 15%; + height: 15%; + background-color: #333; + border-radius: 100%; + -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both; + animation: circleFadeDelay 1.2s infinite ease-in-out both; + } + } + + @for $i from 1 through 12 { + $rotation: 30deg * ($i - 1); + $delay: -1.3s + $i * .1; + .circle#{$i} { + -webkit-transform: rotate($rotation); + -ms-transform: rotate($rotation); + transform: rotate($rotation); + } + .circle#{$i}:before { + -webkit-animation-delay: $delay; + animation-delay: $delay; + } + } + +} + +@keyframes circleFadeDelay { + 0%, 39%, 100% { opacity: 0; } + 40% { opacity: 1; } +} \ No newline at end of file diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx index e00415db3..bf075de8b 100644 --- a/src/views/components/components.jsx +++ b/src/views/components/components.jsx @@ -6,6 +6,7 @@ var Box = require('../../components/box/box.jsx'); var Button = require('../../components/forms/button.jsx'); var Carousel = require('../../components/carousel/carousel.jsx'); var Input = require('../../components/forms/input.jsx'); +var Spinner = require('../../components/spinner/spinner.jsx'); require('./components.scss'); @@ -37,6 +38,8 @@ var Components = React.createClass({

{'Nothing!!!'}

+

This is a Spinner

+ ); } From 1304f9e7bab3ce317ec1b96b6cd838a0f0b3d63b Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Tue, 3 Nov 2015 18:46:44 -0500 Subject: [PATCH 02/11] Use a Spinner to convey activity when logging in Resolves GH-195 --- src/components/login/login.jsx | 30 +++++++++++++++++++----- src/components/login/login.scss | 6 +++++ src/components/navigation/navigation.jsx | 3 ++- 3 files changed, 32 insertions(+), 7 deletions(-) diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx index 65860fc65..4dac048db 100644 --- a/src/components/login/login.jsx +++ b/src/components/login/login.jsx @@ -2,8 +2,11 @@ var React = require('react'); var ReactDOM = require('react-dom'); var FormattedMessage = require('react-intl').FormattedMessage; +var log = require('../../lib/log.js'); + var Input = require('../forms/input.jsx'); var Button = require('../forms/button.jsx'); +var Spinner = require('../spinner/spinner.jsx'); require('./login.scss'); @@ -13,12 +16,21 @@ var Login = React.createClass({ onLogIn: React.PropTypes.func, error: React.PropTypes.string }, + getInitialState: function () { + return { + waiting: false + }; + }, handleSubmit: function (event) { event.preventDefault(); + this.setState({waiting: true}); this.props.onLogIn({ 'username': ReactDOM.findDOMNode(this.refs.username).value, 'password': ReactDOM.findDOMNode(this.refs.password).value - }); + }, function (err) { + if (err) log.error(err); + this.setState({waiting: false}); + }.bind(this)); }, render: function () { var error; @@ -40,11 +52,17 @@ var Login = React.createClass({ defaultMessage={'Password'} /> - + {this.state.waiting ? [ + + ] : [ + + ]} Date: Tue, 3 Nov 2015 19:02:28 -0500 Subject: [PATCH 03/11] Lint --- src/components/spinner/spinner.scss | 26 ++++++++++++++------------ 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss index 46cef57b8..fd645b65a 100644 --- a/src/components/spinner/spinner.scss +++ b/src/components/spinner/spinner.scss @@ -1,25 +1,27 @@ +@import "../../colors"; + .spinner { + position: relative; width: 20px; height: 20px; - position: relative; .circle { + position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; - position: absolute; - left: 0; - top: 0; &:before { - content: ''; display: block; + animation: circleFadeDelay 1.2s infinite ease-in-out both; margin: 0 auto; + border-radius: 100%; + background-color: $overlay-gray; width: 15%; height: 15%; - background-color: #333; - border-radius: 100%; + content: ""; -webkit-animation: circleFadeDelay 1.2s infinite ease-in-out both; - animation: circleFadeDelay 1.2s infinite ease-in-out both; } } @@ -27,13 +29,13 @@ $rotation: 30deg * ($i - 1); $delay: -1.3s + $i * .1; .circle#{$i} { - -webkit-transform: rotate($rotation); - -ms-transform: rotate($rotation); transform: rotate($rotation); + -ms-transform: rotate($rotation); + -webkit-transform: rotate($rotation); } .circle#{$i}:before { - -webkit-animation-delay: $delay; animation-delay: $delay; + -webkit-animation-delay: $delay; } } @@ -42,4 +44,4 @@ @keyframes circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } -} \ No newline at end of file +} From 0420457bdc8cc3df86b4866f54335dd0b7b0f7cb Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Wed, 4 Nov 2015 14:30:58 -0500 Subject: [PATCH 04/11] Use blue for the spinner color. H/t @carljbowman --- src/components/spinner/spinner.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss index fd645b65a..f021901d6 100644 --- a/src/components/spinner/spinner.scss +++ b/src/components/spinner/spinner.scss @@ -17,7 +17,7 @@ animation: circleFadeDelay 1.2s infinite ease-in-out both; margin: 0 auto; border-radius: 100%; - background-color: $overlay-gray; + background-color: darken($ui-blue, 8%); width: 15%; height: 15%; content: ""; From 5dc6cd220de2f0f5bb9e3263029da8b9c9b7fc91 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Fri, 6 Nov 2015 11:36:35 -0500 Subject: [PATCH 05/11] Quiet warnings about keys in Activity component --- src/components/activity/activity.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/activity/activity.jsx b/src/components/activity/activity.jsx index b8d247a2e..a42bcb5eb 100644 --- a/src/components/activity/activity.jsx +++ b/src/components/activity/activity.jsx @@ -34,7 +34,7 @@ var Activity = React.createClass({ title={formatMessage(defaultMessages.whatsHappening)}> {this.props.items && this.props.items.length > 0 ? [ -
    +
      {this.props.items.map(function (item) { if (item.message.replace(/\s/g, '')) { var actorProfileUrl = '/users/' + item.actor.username + '/'; @@ -60,7 +60,7 @@ var Activity = React.createClass({ })}
    ] : [ -
    +

    Date: Fri, 6 Nov 2015 17:08:50 -0500 Subject: [PATCH 06/11] Log Javascript errors to Sentry --- server/config.js | 3 +++ server/template.html | 6 ++++++ static/js/lib/raven.min.js | 3 +++ 3 files changed, 12 insertions(+) create mode 100644 static/js/lib/raven.min.js diff --git a/server/config.js b/server/config.js index 6c273e946..b166764a9 100644 --- a/server/config.js +++ b/server/config.js @@ -18,6 +18,9 @@ module.exports = { // Analytics & Monitoring ga_tracker: process.env.GA_TRACKER || '', + // Error handling + sentry_dsn: process.env.SENTRY_DSN || '', + // Use minified JS libraries min: (process.env.NODE_ENV === 'production') ? '.min' : '' }; diff --git a/server/template.html b/server/template.html index 0caa161cd..318c8a329 100644 --- a/server/template.html +++ b/server/template.html @@ -48,10 +48,16 @@ + + + +