From de7b9a7b80bad9553c90821dd2f0ad57957bfecb Mon Sep 17 00:00:00 2001 From: Gregory Eremin Date: Fri, 27 Mar 2015 20:31:14 +0700 Subject: [PATCH] New selected item highlighting and transition --- app/css/button.css | 32 ++++++++++++++++++++++++++++++++ app/css/charts.css | 10 ++-------- app/index.html | 6 ++++-- app/jsx/app/menu.jsx | 6 ++++-- app/jsx/charts/selector.jsx | 2 +- 5 files changed, 43 insertions(+), 13 deletions(-) create mode 100644 app/css/button.css diff --git a/app/css/button.css b/app/css/button.css new file mode 100644 index 0000000..c5f0a38 --- /dev/null +++ b/app/css/button.css @@ -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); +} diff --git a/app/css/charts.css b/app/css/charts.css index e83f69d..9f141f8 100644 --- a/app/css/charts.css +++ b/app/css/charts.css @@ -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 { diff --git a/app/index.html b/app/index.html index 251c717..7880e26 100644 --- a/app/index.html +++ b/app/index.html @@ -9,11 +9,13 @@ - - + + + + diff --git a/app/jsx/app/menu.jsx b/app/jsx/app/menu.jsx index 50e89f1..15f8bfa 100644 --- a/app/jsx/app/menu.jsx +++ b/app/jsx/app/menu.jsx @@ -7,7 +7,8 @@ var Menu = React.createClass({
  • + query={this.getQuery()} + className="state-button"> {org.login}
    • @@ -18,7 +19,8 @@ var Menu = React.createClass({
  • + query={this.getQuery()} + className="state-button"> {team.name}
    • diff --git a/app/jsx/charts/selector.jsx b/app/jsx/charts/selector.jsx index 6f3db49..bc07765 100644 --- a/app/jsx/charts/selector.jsx +++ b/app/jsx/charts/selector.jsx @@ -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);