From f97e3f51eef8415e2bf6d81b9301ecba84ccbd61 Mon Sep 17 00:00:00 2001 From: Ray Schamp Date: Tue, 3 Nov 2015 18:45:38 -0500 Subject: [PATCH 1/4] 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 5892c780a67..f0c56c070b6 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 00000000000..68fab1950f5 --- /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 00000000000..46cef57b8ae --- /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 e00415db34c..bf075de8b0a 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 2/4] 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 65860fc65dd..4dac048db03 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 3/4] 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 46cef57b8ae..fd645b65a45 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 { - width: 100%; - height: 100%; position: absolute; - left: 0; top: 0; + left: 0; + width: 100%; + height: 100%; &: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 4/4] 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 fd645b65a45..f021901d663 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: "";