From ed604a21d4dbb7c82d9e2e9272cf59a96a5e59df Mon Sep 17 00:00:00 2001 From: Linda Date: Fri, 7 Sep 2018 09:26:11 -0400 Subject: [PATCH 1/7] add studio buttons animation on preview page, need fixing --- .../modal/addtostudio/animate-hoc.jsx | 34 +++++++++ src/components/modal/addtostudio/modal.scss | 75 ++++++++++++++----- .../modal/addtostudio/studio-button.jsx | 33 +++++--- 3 files changed, 114 insertions(+), 28 deletions(-) create mode 100644 src/components/modal/addtostudio/animate-hoc.jsx diff --git a/src/components/modal/addtostudio/animate-hoc.jsx b/src/components/modal/addtostudio/animate-hoc.jsx new file mode 100644 index 000000000..02f436f8c --- /dev/null +++ b/src/components/modal/addtostudio/animate-hoc.jsx @@ -0,0 +1,34 @@ +const React = require('react'); +const PropTypes = require('prop-types'); + +/** + * Higher-order component for building an animated studio button + * @param {React.Component} Component a studio button component + * @return {React.Component} a wrapped studio button component + */ + +const AnimateHOC = ({ + Component +}) => { + class WrappedComponent extends React.Component { + constructor(props) { + super(props); + let wasClicked = false; + } + onClick () { + this.wasClicked = true; // BUT PROPS ARE READONLY? + } + render () { + return (); + } + } + + return WrappedComponent; +}; + +AnimateHOC.propTypes = { + Component: PropTypes.element +}; diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss index 4ec0bc71b..f4914d45b 100644 --- a/src/components/modal/addtostudio/modal.scss +++ b/src/components/modal/addtostudio/modal.scss @@ -89,7 +89,6 @@ pointer-events: none; /* pass clicks through to buttons underneath */ } - .studio-selector-button { display: flex; position: relative; @@ -102,6 +101,7 @@ height: 2.5rem; box-sizing: border-box; justify-content: space-between; + transition: all .5s; } .studio-selector-button-text { @@ -164,30 +164,67 @@ background-color: $ui-blue; } -.studio-status-icon-plus-img { - width: 1.4rem; - height: 1.4rem; +.studio-status-icon-plus-img, .studio-status-icon-checkmark-img, .studio-status-icon-spinner { + width: 1.4rem; + height: 1.4rem; + transform-origin: center; + animation-direction: normal; } -.studio-status-icon--img { - width: 1.4rem; - height: 1.4rem; +.studio-status-icon-with-animation { + animation-duration: .25s; + animation-name: bump; + animation-iteration-count: 1; + animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3); } -.action-button-text .spinner-smooth { - margin: .2125rem auto; - width: 1.875rem; - height: 1rem; +.studio-status-icon-spinner { + animation-name: bump, spin; + -webkit-animation-name: bump, spin; + animation-duration: .25s, .5s; + -webkit-animation-duration: .25s, .5s; + animation-iteration-count: 1, infinite; + -webkit-animation-iteration-count: 1, infinite; + animation-delay: 0s, .25s; + -webkit-animation-delay: 0s, .25s; + animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), ease-in-out; + -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), ease-in-out; } -.studio-status-icon .spinner-smooth { - position: unset; /* don't understand why neither relative nor absolute work */ +@keyframes intro { + 0% { + transform: scale(0); + -webkit-transform: scale(0); + opacity: 0; + } + 100% { + transform: scale(1); + -webkit-transform: scale(1); + opacity: 1; + } } -.studio-status-icon .spinner-smooth .circle { - /* overlay spinner on circle */ - position: absolute; - margin: .1875rem; /* stay within boundaries of circle */ - width: 75%; /* stay within boundaries of circle */ - height: 75%; /* stay within boundaries of circle */ +@keyframes bump { + 0% { + transform: scale(0); + -webkit-transform: scale(0); + opacity: 0; + } + 100% { + transform: scale(1); + -webkit-transform: scale(1); + opacity: 1; + } +} + +@keyframes spin { + 0% { + transform: rotate(0); + -webkit-transform: rotate(0); + } + + 100% { + transform: rotate(359deg); + -webkit-transform: rotate(359deg); + } } diff --git a/src/components/modal/addtostudio/studio-button.jsx b/src/components/modal/addtostudio/studio-button.jsx index 3a19ac5de..05d1af17b 100644 --- a/src/components/modal/addtostudio/studio-button.jsx +++ b/src/components/modal/addtostudio/studio-button.jsx @@ -1,7 +1,7 @@ const PropTypes = require('prop-types'); const React = require('react'); const classNames = require('classnames'); -const Spinner = require('../../spinner/spinner.jsx'); +const AnimateHOC = require('./animate-hoc'); require('./modal.scss'); @@ -10,19 +10,33 @@ const StudioButton = ({ id, includesProject, title, - onToggleStudio + onToggleStudio, + wasClicked }) => { const checkmark = ( checkmark-icon ); + const spinner = ( + loading animation + ); const plus = ( plus-icon ); @@ -45,16 +59,16 @@ const StudioButton = ({ )} title={title} > - {title} + {title}{wasClicked}
{(hasRequestOutstanding ? - () : + spinner : (includesProject ? checkmark : plus))}
@@ -66,7 +80,8 @@ StudioButton.propTypes = { id: PropTypes.number, includesProject: PropTypes.bool, onToggleStudio: PropTypes.func, - title: PropTypes.string + title: PropTypes.string, + wasClicked: PropTypes.bool }; -module.exports = StudioButton; +module.exports = AnimateHOC(StudioButton); From ab4f8a09ceddf2093305c79ed6e1ebae0c1cb97f Mon Sep 17 00:00:00 2001 From: Linda Date: Fri, 7 Sep 2018 16:11:37 -0400 Subject: [PATCH 2/7] the animation now works --- .../modal/addtostudio/animate-hoc.jsx | 36 +++++++++++++------ src/components/modal/addtostudio/modal.scss | 4 +-- .../modal/addtostudio/presentation.jsx | 2 +- .../modal/addtostudio/studio-button.jsx | 17 ++++----- src/views/preview/preview.jsx | 4 +-- 5 files changed, 39 insertions(+), 24 deletions(-) diff --git a/src/components/modal/addtostudio/animate-hoc.jsx b/src/components/modal/addtostudio/animate-hoc.jsx index 02f436f8c..2dc77afdc 100644 --- a/src/components/modal/addtostudio/animate-hoc.jsx +++ b/src/components/modal/addtostudio/animate-hoc.jsx @@ -7,28 +7,42 @@ const PropTypes = require('prop-types'); * @return {React.Component} a wrapped studio button component */ -const AnimateHOC = ({ - Component -}) => { +const AnimateHOC = Component => { class WrappedComponent extends React.Component { - constructor(props) { + constructor (props) { super(props); - let wasClicked = false; + + this.state = { + wasClicked: false + }; + + this.handleClick = this.handleClick.bind(this); } - onClick () { - this.wasClicked = true; // BUT PROPS ARE READONLY? + handleClick () { + if (this.state.wasClicked) { + this.props.onClick(this.props.id); + } else { + this.setState({ + wasClicked: true + }, () => this.props.onClick(this.props.id)); + } } render () { + const {wasClicked} = this.state; return (); } } + WrappedComponent.propTypes = { + id: PropTypes.number, + onClick: PropTypes.func + }; + return WrappedComponent; }; -AnimateHOC.propTypes = { - Component: PropTypes.element -}; +module.exports = AnimateHOC; diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss index f4914d45b..ee45d644c 100644 --- a/src/components/modal/addtostudio/modal.scss +++ b/src/components/modal/addtostudio/modal.scss @@ -179,8 +179,8 @@ } .studio-status-icon-spinner { - animation-name: bump, spin; - -webkit-animation-name: bump, spin; + animation-name: intro, spin; + -webkit-animation-name: intro, spin; animation-duration: .25s, .5s; -webkit-animation-duration: .25s, .5s; animation-iteration-count: 1, infinite; diff --git a/src/components/modal/addtostudio/presentation.jsx b/src/components/modal/addtostudio/presentation.jsx index 29e8eedcc..79d405662 100644 --- a/src/components/modal/addtostudio/presentation.jsx +++ b/src/components/modal/addtostudio/presentation.jsx @@ -31,7 +31,7 @@ const AddToStudioModalPresentation = ({ includesProject={studio.includesProject} key={studio.id} title={studio.title} - onToggleStudio={onToggleStudio} + onClick={onToggleStudio} /> )); diff --git a/src/components/modal/addtostudio/studio-button.jsx b/src/components/modal/addtostudio/studio-button.jsx index 05d1af17b..aab9659f3 100644 --- a/src/components/modal/addtostudio/studio-button.jsx +++ b/src/components/modal/addtostudio/studio-button.jsx @@ -1,7 +1,8 @@ const PropTypes = require('prop-types'); const React = require('react'); const classNames = require('classnames'); -const AnimateHOC = require('./animate-hoc'); + +const AnimateHOC = require('./animate-hoc.jsx'); require('./modal.scss'); @@ -10,15 +11,15 @@ const StudioButton = ({ id, includesProject, title, - onToggleStudio, + onClick, wasClicked }) => { const checkmark = ( checkmark-icon @@ -34,8 +35,8 @@ const StudioButton = ({ plus-icon @@ -49,7 +50,7 @@ const StudioButton = ({ includesProject && !hasRequestOutstanding} )} data-id={id} - onClick={onToggleStudio} + onClick={onClick} >
Date: Fri, 7 Sep 2018 16:19:49 -0400 Subject: [PATCH 3/7] added comments and improved spin animation a little --- src/components/modal/addtostudio/animate-hoc.jsx | 10 +++++++--- src/components/modal/addtostudio/modal.scss | 9 +++++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/modal/addtostudio/animate-hoc.jsx b/src/components/modal/addtostudio/animate-hoc.jsx index 2dc77afdc..6706b6a2f 100644 --- a/src/components/modal/addtostudio/animate-hoc.jsx +++ b/src/components/modal/addtostudio/animate-hoc.jsx @@ -3,6 +3,10 @@ const PropTypes = require('prop-types'); /** * Higher-order component for building an animated studio button + * it is used to decorate the onToggleStudio function with noticing + * when the button has first been clicked. + * This is needed so the buttons don't play the animation when they are + * first rendered but when they are first clicked. * @param {React.Component} Component a studio button component * @return {React.Component} a wrapped studio button component */ @@ -19,12 +23,12 @@ const AnimateHOC = Component => { this.handleClick = this.handleClick.bind(this); } handleClick () { - if (this.state.wasClicked) { + if (this.state.wasClicked) { // if the button has been clicked before this.props.onClick(this.props.id); } else { - this.setState({ + this.setState({ // else tell the state that the button has been clicked wasClicked: true - }, () => this.props.onClick(this.props.id)); + }, () => this.props.onClick(this.props.id)); // callback after state has been updated } } render () { diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss index ee45d644c..d886dc572 100644 --- a/src/components/modal/addtostudio/modal.scss +++ b/src/components/modal/addtostudio/modal.scss @@ -179,6 +179,8 @@ } .studio-status-icon-spinner { + /* This class can be used on an icon that should spin. + It first plays the intro animation, then spins forever. */ animation-name: intro, spin; -webkit-animation-name: intro, spin; animation-duration: .25s, .5s; @@ -187,8 +189,8 @@ -webkit-animation-iteration-count: 1, infinite; animation-delay: 0s, .25s; -webkit-animation-delay: 0s, .25s; - animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), ease-in-out; - -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), ease-in-out; + animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear; + -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear; } @keyframes intro { @@ -204,6 +206,9 @@ } } +/* intro and bump look the same but for some reason, +I need two keyframes and if I don't make two separate ones the +animations don't get called. */ @keyframes bump { 0% { transform: scale(0); From 7313f265303768a0175931ad9648dc376f9d4dcb Mon Sep 17 00:00:00 2001 From: Linda Date: Fri, 7 Sep 2018 16:45:17 -0400 Subject: [PATCH 4/7] fixed linting errors --- src/components/modal/addtostudio/modal.scss | 91 +++++++++++---------- 1 file changed, 47 insertions(+), 44 deletions(-) diff --git a/src/components/modal/addtostudio/modal.scss b/src/components/modal/addtostudio/modal.scss index d886dc572..a4db308ab 100644 --- a/src/components/modal/addtostudio/modal.scss +++ b/src/components/modal/addtostudio/modal.scss @@ -92,6 +92,7 @@ .studio-selector-button { display: flex; position: relative; + transition: all .5s; margin: .21875rem .21875rem; border-radius: .5rem; background-color: $ui-white; @@ -101,7 +102,7 @@ height: 2.5rem; box-sizing: border-box; justify-content: space-between; - transition: all .5s; + } .studio-selector-button-text { @@ -164,72 +165,74 @@ background-color: $ui-blue; } -.studio-status-icon-plus-img, .studio-status-icon-checkmark-img, .studio-status-icon-spinner { - width: 1.4rem; - height: 1.4rem; - transform-origin: center; - animation-direction: normal; +.studio-status-icon-plus-img, +.studio-status-icon-checkmark-img, +.studio-status-icon-spinner { + animation-direction: normal; + width: 1.4rem; + height: 1.4rem; + transform-origin: center; } .studio-status-icon-with-animation { - animation-duration: .25s; - animation-name: bump; - animation-iteration-count: 1; - animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3); + animation-name: bump; + animation-duration: .25s; + animation-timing-function: cubic-bezier(.3, -3, .6, 3); + animation-iteration-count: 1; } .studio-status-icon-spinner { /* This class can be used on an icon that should spin. It first plays the intro animation, then spins forever. */ animation-name: intro, spin; - -webkit-animation-name: intro, spin; animation-duration: .25s, .5s; - -webkit-animation-duration: .25s, .5s; - animation-iteration-count: 1, infinite; - -webkit-animation-iteration-count: 1, infinite; + animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear; animation-delay: 0s, .25s; + animation-iteration-count: 1, infinite; + -webkit-animation-name: intro, spin; + -webkit-animation-duration: .25s, .5s; + -webkit-animation-iteration-count: 1, infinite; -webkit-animation-delay: 0s, .25s; - animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear; - -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), linear; + -webkit-animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear; } @keyframes intro { - 0% { - transform: scale(0); - -webkit-transform: scale(0); - opacity: 0; - } - 100% { - transform: scale(1); - -webkit-transform: scale(1); - opacity: 1; - } + 0% { + transform: scale(0); + opacity: 0; + -webkit-transform: scale(0); + } + 100% { + transform: scale(1); + opacity: 1; + -webkit-transform: scale(1); + } } /* intro and bump look the same but for some reason, I need two keyframes and if I don't make two separate ones the animations don't get called. */ @keyframes bump { - 0% { - transform: scale(0); - -webkit-transform: scale(0); - opacity: 0; - } - 100% { - transform: scale(1); - -webkit-transform: scale(1); - opacity: 1; - } + 0% { + transform: scale(0); + opacity: 0; + -webkit-transform: scale(0); + } + 100% { + transform: scale(1); + opacity: 1; + -webkit-transform: scale(1); + } } @keyframes spin { - 0% { - transform: rotate(0); - -webkit-transform: rotate(0); - } + 0% { + transform: rotate(0); + -webkit-transform: rotate(0); + } - 100% { - transform: rotate(359deg); - -webkit-transform: rotate(359deg); - } + 100% { + transform: rotate(359deg); + -webkit-transform: rotate(359deg); + } } From 1cee3c68fccfede85d7e4bd1f9895bb20e5293a6 Mon Sep 17 00:00:00 2001 From: Linda Date: Tue, 11 Sep 2018 17:18:09 -0400 Subject: [PATCH 5/7] removed some leftovers --- src/components/modal/addtostudio/animate-hoc.jsx | 10 +++------- src/components/modal/addtostudio/studio-button.jsx | 5 +---- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/src/components/modal/addtostudio/animate-hoc.jsx b/src/components/modal/addtostudio/animate-hoc.jsx index 6706b6a2f..f9454ae5d 100644 --- a/src/components/modal/addtostudio/animate-hoc.jsx +++ b/src/components/modal/addtostudio/animate-hoc.jsx @@ -23,13 +23,9 @@ const AnimateHOC = Component => { this.handleClick = this.handleClick.bind(this); } handleClick () { - if (this.state.wasClicked) { // if the button has been clicked before - this.props.onClick(this.props.id); - } else { - this.setState({ // else tell the state that the button has been clicked - wasClicked: true - }, () => this.props.onClick(this.props.id)); // callback after state has been updated - } + this.setState({ // else tell the state that the button has been clicked + wasClicked: true + }, () => this.props.onClick(this.props.id)); // callback after state has been updated } render () { const {wasClicked} = this.state; diff --git a/src/components/modal/addtostudio/studio-button.jsx b/src/components/modal/addtostudio/studio-button.jsx index aab9659f3..6b86afecb 100644 --- a/src/components/modal/addtostudio/studio-button.jsx +++ b/src/components/modal/addtostudio/studio-button.jsx @@ -8,7 +8,6 @@ require('./modal.scss'); const StudioButton = ({ hasRequestOutstanding, - id, includesProject, title, onClick, @@ -49,7 +48,6 @@ const StudioButton = ({ {'studio-selector-button-selected': includesProject && !hasRequestOutstanding} )} - data-id={id} onClick={onClick} >
- {title}{wasClicked} + {title}
Date: Wed, 12 Sep 2018 14:54:15 -0400 Subject: [PATCH 6/7] replaced old spinner with new svg to work everywhere where spinner is used --- src/components/login/login.jsx | 5 +- src/components/login/login.scss | 2 +- src/components/modal/addtostudio/modal.scss | 46 +----- .../modal/addtostudio/presentation.jsx | 2 +- .../modal/addtostudio/studio-button.jsx | 9 +- src/components/modal/report/modal.jsx | 2 +- src/components/spinner/spinner.jsx | 33 ++--- src/components/spinner/spinner.scss | 140 +++++------------- src/views/components/components.jsx | 6 +- .../studentcompleteregistration.jsx | 4 +- static/svgs/modal/spinner-blue.svg | 10 ++ .../svgs/modal/spinner-transparent-gray.svg | 10 ++ static/svgs/modal/spinner-white.svg | 10 ++ static/svgs/modal/spinner.svg | 1 - 14 files changed, 94 insertions(+), 186 deletions(-) create mode 100644 static/svgs/modal/spinner-blue.svg create mode 100644 static/svgs/modal/spinner-transparent-gray.svg create mode 100644 static/svgs/modal/spinner-white.svg delete mode 100644 static/svgs/modal/spinner.svg diff --git a/src/components/login/login.jsx b/src/components/login/login.jsx index 58586e5e5..2f4180398 100644 --- a/src/components/login/login.jsx +++ b/src/components/login/login.jsx @@ -75,7 +75,10 @@ class Login extends React.Component { key="submitButton" type="submit" > - + ] : [ diff --git a/src/components/modal/addtostudio/studio-button.jsx b/src/components/modal/addtostudio/studio-button.jsx index 6b86afecb..151e246fc 100644 --- a/src/components/modal/addtostudio/studio-button.jsx +++ b/src/components/modal/addtostudio/studio-button.jsx @@ -2,6 +2,7 @@ const PropTypes = require('prop-types'); const React = require('react'); const classNames = require('classnames'); +const Spinner = require('../../spinner/spinner.jsx'); const AnimateHOC = require('./animate-hoc.jsx'); require('./modal.scss'); @@ -23,13 +24,7 @@ const StudioButton = ({ src="/svgs/modal/confirm.svg" /> ); - const spinner = ( - loading animation - ); + const spinner = ; const plus = ( plus-icon {isWaiting ? (
- +
) : ( diff --git a/src/components/spinner/spinner.jsx b/src/components/spinner/spinner.jsx index 694f5a18e..6d207e200 100644 --- a/src/components/spinner/spinner.jsx +++ b/src/components/spinner/spinner.jsx @@ -1,29 +1,26 @@ -const range = require('lodash.range'); -const PropTypes = require('prop-types'); const React = require('react'); +const PropTypes = require('prop-types'); +const classNames = require('classnames'); require('./spinner.scss'); // Adapted from http://tobiasahlin.com/spinkit/ -const Spinner = ({ - mode -}) => { - const spinnerClassName = (mode === 'smooth' ? 'spinner-smooth' : 'spinner'); - const spinnerDivCount = (mode === 'smooth' ? 24 : 12); - return ( -
- {range(1, spinnerDivCount + 1).map(id => ( -
- ))} -
- ); +// Available colors right now are white, blue and transparent-gray +const Spinner = props => ( + loading animation +); + +Spinner.defaultProps = { + color: 'white' }; Spinner.propTypes = { - mode: PropTypes.string + className: PropTypes.string, + color: PropTypes.string }; module.exports = Spinner; diff --git a/src/components/spinner/spinner.scss b/src/components/spinner/spinner.scss index 2707d02cf..4aba6ad98 100644 --- a/src/components/spinner/spinner.scss +++ b/src/components/spinner/spinner.scss @@ -1,118 +1,44 @@ -@import "../../colors"; - -.spinner { - position: relative; - margin: 0 auto; - width: 20px; - height: 20px; - - .circle { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - &:before { - display: block; - animation: circleFadeDelay 1.2s infinite ease-in-out both; - margin: 0 auto; - border-radius: 100%; - background-color: $ui-gray; - width: 15%; - height: 15%; - content: ""; - - .white & { - background-color: $ui-blue-dark; - } - } - } - - @for $i from 1 through 12 { - $rotation: 30deg * ($i - 1); - $delay: -1.3s + $i * .1; - - .circle#{$i} { - transform: rotate($rotation); - - &:before { - animation-delay: $delay; - } - } - - } - +.studio-status-icon-spinner { + /* This class can be used on an icon that should spin. + It first plays the intro animation, then spins forever. */ + animation-name: intro, spin; + animation-duration: .25s, .5s; + animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear; + animation-delay: 0s, .25s; + animation-iteration-count: 1, infinite; + animation-direction: normal; + width: 1.4rem; /* standard is 1.4 rem but can be overwritten by parent */ + height: 1.4rem; + -webkit-animation-name: intro, spin; + -webkit-animation-duration: .25s, .5s; + -webkit-animation-iteration-count: 1, infinite; + -webkit-animation-delay: 0s, .25s; + -webkit-animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear; + transform-origin: center; } -@keyframes circleFadeDelay { - 0%, - 39%, +@keyframes intro { + 0% { + transform: scale(0); + opacity: 0; + -webkit-transform: scale(0); + } + 100% { - opacity: 0; - } - - 40% { + transform: scale(1); opacity: 1; + -webkit-transform: scale(1); } } - -/*********************/ -/* type === "smooth" */ -/*********************/ - -.spinner-smooth { - position: relative; - margin: 0 auto; - width: 20px; - height: 20px; - - .circle { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - - &:before { - display: block; - animation: circleFadeDelaySmooth 1.8s infinite ease-in-out both; - margin: 0 auto; - border-radius: 100%; - background-color: $ui-white; - width: 30%; - height: 20%; - content: ""; - - .white & { - background-color: darken($ui-blue, 8%); - } - } +@keyframes spin { + 0% { + transform: rotate(0); + -webkit-transform: rotate(0); } - @for $i from 1 through 24 { - $rotation: 15deg * ($i - 1); - $delay: -1.9s + $i * .075; - - .circle#{$i} { - transform: rotate($rotation); - - &:before { - animation-delay: $delay; - } - } - - } - -} - -@keyframes circleFadeDelaySmooth { - 0%, - 35% { - opacity: 0; - }, - 40% { - opacity: 1; + 100% { + transform: rotate(359deg); + -webkit-transform: rotate(359deg); } } diff --git a/src/views/components/components.jsx b/src/views/components/components.jsx index 3196d93ea..1e01bc4cc 100644 --- a/src/views/components/components.jsx +++ b/src/views/components/components.jsx @@ -35,8 +35,10 @@ const Components = () => ( -

This is a Spinner

- +

This is a blue Spinner

+

Colors

$ui-blue diff --git a/src/views/studentcompleteregistration/studentcompleteregistration.jsx b/src/views/studentcompleteregistration/studentcompleteregistration.jsx index 6724ac87b..c5f3fc104 100644 --- a/src/views/studentcompleteregistration/studentcompleteregistration.jsx +++ b/src/views/studentcompleteregistration/studentcompleteregistration.jsx @@ -75,7 +75,7 @@ class StudentCompleteRegistration extends React.Component { } handleRegister (formData) { this.setState({waiting: true}); - + formData = defaults({}, formData || {}, this.state.formData); const submittedData = { birth_month: formData.user.birth.month, @@ -87,7 +87,7 @@ class StudentCompleteRegistration extends React.Component { if (this.props.must_reset_password) { submittedData.password = formData.user.password; } - + api({ host: '', uri: '/classes/student_update_registration/', diff --git a/static/svgs/modal/spinner-blue.svg b/static/svgs/modal/spinner-blue.svg new file mode 100644 index 000000000..effd69142 --- /dev/null +++ b/static/svgs/modal/spinner-blue.svg @@ -0,0 +1,10 @@ + + + + spinner-blue + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/modal/spinner-transparent-gray.svg b/static/svgs/modal/spinner-transparent-gray.svg new file mode 100644 index 000000000..e12923e26 --- /dev/null +++ b/static/svgs/modal/spinner-transparent-gray.svg @@ -0,0 +1,10 @@ + + + + spinner-transparent-gray + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/modal/spinner-white.svg b/static/svgs/modal/spinner-white.svg new file mode 100644 index 000000000..547b591dc --- /dev/null +++ b/static/svgs/modal/spinner-white.svg @@ -0,0 +1,10 @@ + + + + spinner-white + Created with Sketch. + + + + + \ No newline at end of file diff --git a/static/svgs/modal/spinner.svg b/static/svgs/modal/spinner.svg deleted file mode 100644 index b6a2b26f1..000000000 --- a/static/svgs/modal/spinner.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 497aae2a3cb857f57c99302607dc57fedfa9e516 Mon Sep 17 00:00:00 2001 From: Linda Date: Thu, 13 Sep 2018 11:04:14 -0400 Subject: [PATCH 7/7] convention fixes --- src/components/modal/addtostudio/studio-button.jsx | 3 +-- src/components/spinner/spinner.jsx | 12 +++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/modal/addtostudio/studio-button.jsx b/src/components/modal/addtostudio/studio-button.jsx index 151e246fc..bfeb35147 100644 --- a/src/components/modal/addtostudio/studio-button.jsx +++ b/src/components/modal/addtostudio/studio-button.jsx @@ -24,7 +24,6 @@ const StudioButton = ({ src="/svgs/modal/confirm.svg" /> ); - const spinner = ; const plus = ( plus-icon {(hasRequestOutstanding ? - spinner : + : (includesProject ? checkmark : plus))}
diff --git a/src/components/spinner/spinner.jsx b/src/components/spinner/spinner.jsx index 6d207e200..cf723ba6c 100644 --- a/src/components/spinner/spinner.jsx +++ b/src/components/spinner/spinner.jsx @@ -5,12 +5,14 @@ const classNames = require('classnames'); require('./spinner.scss'); // Adapted from http://tobiasahlin.com/spinkit/ -// Available colors right now are white, blue and transparent-gray -const Spinner = props => ( +const Spinner = ({ + className, + color +}) => ( loading animation ); @@ -20,7 +22,7 @@ Spinner.defaultProps = { Spinner.propTypes = { className: PropTypes.string, - color: PropTypes.string + color: PropTypes.oneOf(['white', 'blue', 'transparent-gray']) }; module.exports = Spinner;