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;
float: left;
font-weight: 600;
margin-right: 8px;
margin-right: 1px;
}
.selector .items {
display: block;
@ -107,13 +107,7 @@
}
.selector li {
display: inline-block;
color: #aaa;
cursor: pointer;
margin-right: 8px;
}
.selector li.active {
color: #000;
cursor: default;
margin: 0 0 0 5px;
}
.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="144x144" href="/images/favicon_128.png">
<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/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/opensans.css">
<!-- <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,600"> -->
</head>
<body></body>
<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">
<ReactRouter.Link to="org"
params={{org: org.login}}
query={this.getQuery()}>
query={this.getQuery()}
className="state-button">
{org.login}
</ReactRouter.Link>
</li>
@ -18,7 +19,8 @@ var Menu = React.createClass({
<li key={'team-'+ team.name} className="nav team">
<ReactRouter.Link to="team"
params={{org: this.getParams().org, team: team.name}}
query={this.getQuery()}>
query={this.getQuery()}
className="state-button">
{team.name}
</ReactRouter.Link>
</li>

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

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