tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-07-31 01:35:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

[Ivan Diaz] - Add animation to login widget

Browse Source
This commit is contained in:
Ivan Diaz 2015-10-05 22:57:47 -03:00
parent 62e146febb
commit 673ccae39e
4 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -50,6 +50,7 @@
"morgan": "^1.6.1",
"react": "^0.13.x",
"react-document-title": "^1.0.2",
"react-motion": "^0.3.0",
"react-router": "^0.13.x",
"reflux": "^0.2.9",
"run-sequence": "^1.1.1",

10
src/app/main/main-home/main-home-page-login-widget.js
View File

@ -1,5 +1,6 @@
import React from 'react/addons';
import {ListenerMixin} from 'reflux';
import {Motion, spring} from 'react-motion';
import UserActions from 'actions/user-actions';
import UserStore from 'stores/user-store';
@ -9,11 +10,12 @@ import Widget from 'core-components/widget';
import Input from 'core-components/input';
import Button from 'core-components/button';
var MainHomePageLoginWidget = React.createClass({
render() {
return (
<Widget className="main-home-page--widget" title="Login">
<Motion defaultStyle={{animation: -90}} style={{animation: spring(0, [200,10])}}>
{({animation}) => (
<Widget className="main-home-page--widget" title="Login" style={{transform: `rotateY(${animation}deg)`}}>
<Form className="login-widget--form" onSubmit={this.handleSubmit}>
<div className="login-widget--inputs">
<Input placeholder="email" name="email" className="login-widget--input"/>
@ -21,8 +23,10 @@ var MainHomePageLoginWidget = React.createClass({
</div>
<Button type="primary">LOG IN</Button>
</Form>
<Button className="login-widget--forgot-password"type="link">{'Forgot your password?'}</Button>
<Button className="login-widget--forgot-password" type="link">{'Forgot your password?'}</Button>
</Widget>
)}
</Motion>
);
},

2
src/core-components/widget.js
View File

@ -15,7 +15,7 @@ var Widget = React.createClass({
render() {
return (
<div className={this.getClass()}>
<div {...this.props} className={this.getClass()}>
{this.renderTitle()}
{this.props.children}
</div>