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", "morgan": "^1.6.1",
"react": "^0.13.x", "react": "^0.13.x",
"react-document-title": "^1.0.2", "react-document-title": "^1.0.2",
"react-motion": "^0.3.0",
"react-router": "^0.13.x", "react-router": "^0.13.x",
"reflux": "^0.2.9", "reflux": "^0.2.9",
"run-sequence": "^1.1.1", "run-sequence": "^1.1.1",

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

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

2
src/utils/i18n.js
View File

@ -1,4 +1,4 @@
import MessageFormat from 'messageformat'; import MessageFormat from 'messageformat';
import CommonStore from 'stores/common-store'; import CommonStore from 'stores/common-store';
import i18nData from 'data/i18n-data'; import i18nData from 'data/i18n-data';