Skip to content

GitLab

S
scratch-www
Commit c54b7413 authored by Linda's avatar Linda
Browse files
Options

replaced old spinner with new svg to work everywhere where spinner is used

parent 1cee3c68
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 185 deletions
src/components/login/login.jsx
View file @ c54b7413
......@@ -75,7 +75,10 @@ class Login extends React.Component {
key="submitButton"
type="submit"
>
<Spinner />
<Spinner
className="spinner"
color="blue"
/>
</Button>
] : [
<Button
......
src/components/login/login.scss
View file @ c54b7413
......@@ -15,7 +15,7 @@
.spinner {
margin: 0 .8rem;
width: 1rem;
height: 1rem;
vertical-align: middle;
}
.submit-button {
......
src/components/modal/addtostudio/modal.scss
View file @ c54b7413
......@@ -166,8 +166,7 @@
}
.studio-status-icon-plus-img,
.studio-status-icon-checkmark-img,
.studio-status-icon-spinner {
.studio-status-icon-checkmark-img {
animation-direction: normal;
width: 1.4rem;
height: 1.4rem;
......@@ -181,37 +180,6 @@
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;
animation-duration: .25s, .5s;
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;
-webkit-animation-timing-function: cubic-bezier(.3, -3, .6, 3), linear;
}
@keyframes intro {
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);
......@@ -224,15 +192,3 @@ animations don't get called. */
-webkit-transform: scale(1);
}
}
@keyframes spin {
0% {
transform: rotate(0);
-webkit-transform: rotate(0);
}
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
}
}
src/components/modal/addtostudio/presentation.jsx
View file @ c54b7413
......@@ -83,7 +83,7 @@ const AddToStudioModalPresentation = ({
type="submit"
>
<div className="action-button-text">
<Spinner mode="smooth" />
<Spinner />
<FormattedMessage id="addToStudio.finishing" />
</div>
</Button>
......
src/components/modal/addtostudio/studio-button.jsx
View file @ c54b7413
......@@ -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 = (
<img
alt="loading animation"
className="studio-status-icon-spinner"
src="/svgs/modal/spinner.svg"
/>
);
const spinner = <Spinner />;
const plus = (
<img
alt="plus-icon"
......
src/components/modal/report/modal.jsx
View file @ c54b7413
......@@ -224,7 +224,7 @@ class ReportModal extends React.Component {
>
{isWaiting ? (
<div className="action-button-text">
<Spinner mode="smooth" />
<Spinner />
<FormattedMessage id="report.sending" />
</div>
) : (
......
src/components/spinner/spinner.jsx
View file @ c54b7413
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 (
<div className={spinnerClassName}>
{range(1, spinnerDivCount + 1).map(id => (
<div
className={`circle${id} circle`}
key={`circle${id}`}
/>
))}
</div>
);
// Available colors right now are white, blue and transparent-gray
const Spinner = props => (
<img
alt="loading animation"
className={classNames('studio-status-icon-spinner', props.className)}
src={`/svgs/modal/spinner-${props.color}.svg`}
/>
);
Spinner.defaultProps = {
color: 'white'
};
Spinner.propTypes = {
mode: PropTypes.string
className: PropTypes.string,
color: PropTypes.string
};
module.exports = Spinner;
src/components/spinner/spinner.scss
View file @ c54b7413
@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%,
100% {
@keyframes intro {
0% {
transform: scale(0);
opacity: 0;
-webkit-transform: scale(0);
}
40% {
100% {
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%);
}
}
}
@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 spin {
0% {
transform: rotate(0);
-webkit-transform: rotate(0);
}
}
@keyframes circleFadeDelaySmooth {
0%,
35% {
opacity: 0;
},
40% {
opacity: 1;
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
}
}
src/views/components/components.jsx
View file @ c54b7413
......@@ -35,8 +35,10 @@ const Components = () => (
<Box title="Carousel component in a box!">
<Carousel />
</Box>
<h1>This is a Spinner</h1>
<Spinner />
<h1>This is a blue Spinner</h1>
<Spinner
color="blue"
/>
<h1>Colors</h1>
<div className="colors">
<span className="ui-blue">$ui-blue</span>
......
src/views/studentcompleteregistration/studentcompleteregistration.jsx
View file @ c54b7413
......@@ -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/',
......
static/svgs/modal/spinner-blue.svg 0 → 100644
View file @ c54b7413
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>spinner-blue</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="spinner-blue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M15,10 C15,7.23857625 12.7614237,5 10,5 C7.23857625,5 5,7.23857625 5,10 C5,12.7614237 7.23857625,15 10,15" id="Oval-2" stroke="#4D97FF" stroke-width="2.5"></path>
</g>
</svg>
\ No newline at end of file
static/svgs/modal/spinner-transparent-gray.svg 0 → 100644
View file @ c54b7413
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>spinner-transparent-gray</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="spinner-transparent-gray" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.15">
<path d="M15,10 C15,7.23857625 12.7614237,5 10,5 C7.23857625,5 5,7.23857625 5,10 C5,12.7614237 7.23857625,15 10,15" id="Oval-2" stroke="#000000" stroke-width="2.5"></path>
</g>
</svg>
\ No newline at end of file
static/svgs/modal/spinner-white.svg 0 → 100644
View file @ c54b7413
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>spinner-white</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="spinner-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<path d="M15,10 C15,7.23857625 12.7614237,5 10,5 C7.23857625,5 5,7.23857625 5,10 C5,12.7614237 7.23857625,15 10,15" id="Oval-2" stroke="#FFFFFF" stroke-width="2.5"></path>
</g>
</svg>
\ No newline at end of file
static/svgs/modal/spinner.svg deleted 100644 → 0
View file @ 1cee3c68
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M15 10a5 5 0 1 0-5 5" stroke="#FFF" stroke-width="2.5" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"/></svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment