localhots
/
empact
1
0
Fork 0
Code Releases Activity

New selected item highlighting and transition

This commit is contained in:
Gregory Eremin 2015-03-27 20:31:14 +07:00
parent d315f272c7
commit de7b9a7b80
5 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/css/button.css Normal file
View File

@ -0,0 +1,32 @@
.state-button {
margin-left: -10px;
color: #aaa;
cursor: pointer;
-webkit-transition: all 350ms;
transition: all 350ms;
}
.state-button.active {
color: #000;
cursor: default;
-webkit-transition: all 350ms;
transition: all 350ms;
}
.state-button:before {
content: '';
display: inline-block;
width: 6px;
height: 1px;
background-color: #f39d41;
margin: 0 4px 5px 0;
border-radius: 5px;
opacity: .4;
-webkit-transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
}
.state-button.active:before {
margin-bottom: 2px;
height: 6px;
opacity: 1;
-webkit-transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
transition: all 350ms cubic-bezier(0.86, 0, 0.07, 1);
}

10
app/css/charts.css
View File

@ -97,7 +97,7 @@
width: auto; width: auto;
float: left; float: left;
font-weight: 600; font-weight: 600;
margin-right: 8px; margin-right: 1px;
} }
.selector .items { .selector .items {
display: block; display: block;
@ -107,13 +107,7 @@
} }
.selector li { .selector li {
display: inline-block; display: inline-block;
color: #aaa; margin: 0 0 0 5px;
cursor: pointer;
margin-right: 8px;
}
.selector li.active {
color: #000;
cursor: default;
} }
.whatsgoingon { .whatsgoingon {

6
app/index.html
View File

@ -9,11 +9,13 @@
<link rel="apple-touch-icon" sizes="72x72" href="/images/favicon_128.png"> <link rel="apple-touch-icon" sizes="72x72" href="/images/favicon_128.png">
<link rel="apple-touch-icon" sizes="144x144" href="/images/favicon_128.png"> <link rel="apple-touch-icon" sizes="144x144" href="/images/favicon_128.png">
<link rel="stylesheet" href="/bower_components/normalize.css/normalize.css"> <link rel="stylesheet" href="/bower_components/normalize.css/normalize.css">
<link rel="stylesheet" href="/css/logo.css">
<link rel="stylesheet" href="/css/menu.css">
<link rel="stylesheet" href="/css/app.css"> <link rel="stylesheet" href="/css/app.css">
<link rel="stylesheet" href="/css/logo.css">
<link rel="stylesheet" href="/css/button.css">
<link rel="stylesheet" href="/css/menu.css">
<link rel="stylesheet" href="/css/charts.css"> <link rel="stylesheet" href="/css/charts.css">
<link rel="stylesheet" href="/css/opensans.css"> <link rel="stylesheet" href="/css/opensans.css">
<!-- <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,600"> -->
</head> </head>
<body></body> <body></body>
<script src="/bower_components/react/react.js"></script> <script src="/bower_components/react/react.js"></script>

6
app/jsx/app/menu.jsx
View File

@ -7,7 +7,8 @@ var Menu = React.createClass({
<li key={'org-'+ org.login} className="nav org"> <li key={'org-'+ org.login} className="nav org">
<ReactRouter.Link to="org" <ReactRouter.Link to="org"
params={{org: org.login}} params={{org: org.login}}
query={this.getQuery()}> query={this.getQuery()}
className="state-button">
{org.login} {org.login}
</ReactRouter.Link> </ReactRouter.Link>
</li> </li>
@ -18,7 +19,8 @@ var Menu = React.createClass({
<li key={'team-'+ team.name} className="nav team"> <li key={'team-'+ team.name} className="nav team">
<ReactRouter.Link to="team" <ReactRouter.Link to="team"
params={{org: this.getParams().org, team: team.name}} params={{org: this.getParams().org, team: team.name}}
query={this.getQuery()}> query={this.getQuery()}
className="state-button">
{team.name} {team.name}
</ReactRouter.Link> </ReactRouter.Link>
</li> </li>

2
app/jsx/charts/selector.jsx
View File

@ -8,7 +8,7 @@ var Selector = React.createClass({
}, },
renderItem: function(item, i) { renderItem: function(item, i) {
var itemClass = (item === this.props.value ? 'active' : ''), var itemClass = (item === this.props.value ? 'active state-button' : 'state-button'),
clickEvent = null; clickEvent = null;
if (this.props.onChange) { if (this.props.onChange) {
clickEvent = this.props.onChange.bind(this, i); clickEvent = this.props.onChange.bind(this, i);