localhots
/
empact
1
0
Fork 0
Code Releases Activity

New time selector proto

This commit is contained in:
Gregory Eremin 2015-03-16 17:46:18 +07:00
parent fe4cc7b845
commit 5a716f8338
6 changed files with 31 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/scripts/src/app.jsx
View File

@ -77,7 +77,6 @@ var App = React.createClass({
<Menu orgs={this.state.orgs} teams={this.state.teams} /> <Menu orgs={this.state.orgs} teams={this.state.teams} />
<Router.RouteHandler /> <Router.RouteHandler />
</div> </div>
<WeekIntervalSelector />
</div> </div>
); );
} }
@ -112,7 +111,7 @@ var Menu = React.createClass({
return ( return (
<div className="menu"> <div className="menu">
<ul> <ul>
<li key="empact"> <li className="empact">
<Link to="org" params={this.getParams()} className="logo-button"> <Link to="org" params={this.getParams()} className="logo-button">
<div className="logo e">e</div> <div className="logo e">e</div>
<div className="logo m">m</div> <div className="logo m">m</div>
@ -122,9 +121,9 @@ var Menu = React.createClass({
<div className="logo t">t</div> <div className="logo t">t</div>
</Link> </Link>
</li> </li>
<li key="orgs-header" className="nav header">Organizations:</li> <li className="nav header">Organizations:</li>
{this.props.orgs.map(renderOrg)} {this.props.orgs.map(renderOrg)}
<li key="teams-header" className="nav header">Teams:</li> <li className="nav header">Teams:</li>
{this.props.teams.map(renderTeam)} {this.props.teams.map(renderTeam)}
</ul> </ul>
</div> </div>

2
app/scripts/src/charts/bar_chart.jsx
View File

@ -120,7 +120,7 @@ var BarChart = React.createClass({
return ( return (
<div className="barchart-container"> <div className="barchart-container">
<div className="whatsgoingon"> <div className="whatsgoingon">
This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em>W11, Mar 9</em> to <em>W18, Apr 27</em> This bar chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em className="date">Mar 9</em> to <em className="date">Apr 27</em>
</div> </div>
<div className="filters"> <div className="filters">
<Selector thing="sort" <Selector thing="sort"

2
app/scripts/src/charts/stacked_area_chart.jsx
View File

@ -196,7 +196,7 @@ var StackedAreaChart = React.createClass({
return ( return (
<div className="sachart-container"> <div className="sachart-container">
<div className="whatsgoingon"> <div className="whatsgoingon">
This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em>W11, Mar 9</em> to <em>W18, Apr 27</em> This stacked area chart represents <em>{words.items[this.state.item]}</em> {words.actions[this.state.item]} <em>{who}</em> {words.item[subject]} from <em className="date">Mar 9</em> to <em className="date">Apr 27</em>
</div> </div>
<div className="filters"> <div className="filters">
<Selector thing="sort" <Selector thing="sort"

14
app/styles/app.css
View File

@ -21,13 +21,13 @@
.info-block { .info-block {
width: 100%; width: 100%;
height: 50px; height: 40px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.info-block .img { .info-block .img {
float: left; float: left;
width: 50px; width: 40px;
height: 50px; height: 40px;
background-color: #ddd; background-color: #ddd;
background-position: center; background-position: center;
background-size: 100% auto; background-size: 100% auto;
@ -36,8 +36,8 @@
} }
.info-block h1 { .info-block h1 {
font-size: 32px; font-size: 30px;
line-height: 50px; line-height: 40px;
margin: 0; margin: 0;
font-weight: 400; font-weight: 400;
} }
@ -46,8 +46,8 @@
position: absolute; position: absolute;
top: 20px; top: 20px;
right: 20px; right: 20px;
font-size: 32px; font-size: 30px;
line-height: 50px; line-height: 40px;
color: #666; color: #666;
} }
.week-selector .week { .week-selector .week {

15
app/styles/charts.css
View File

@ -100,6 +100,19 @@
font-style: normal; font-style: normal;
margin: 3px 0 0; margin: 3px 0 0;
padding: 3px 6px; padding: 3px 6px;
background-color: #eaeaea; background-color: #f0f0f0;
border-radius: 2px; border-radius: 2px;
} }
.whatsgoingon em.date {
background-color: #d0f0f0;
}
.whatsgoingon em.date:before {
content: '';
display: inline-block;
margin: 0 3px -1px 0;
width: 14px;
height: 14px;
background-size: 14px 14px;
/* Source: https://github.com/github/octicons/blob/master/svg/calendar.svg */
background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMjQiIHdpZHRoPSIxMDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxwYXRoIGQ9Ik03MDQgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNTEyaC02NHYxMjhoNjRWNTEyek03MDQgMzIwaC02NHYxMjhoNjRWMzIwek04MzIgNTEyaC02NHYxMjhoNjRWNTEyek01NzYgNzA0aC02NHYxMjhoNjRWNzA0ek03NjggMGgtNjR2MTI4aDY0VjB6TTI1NiAwaC02NHYxMjhoNjRWMHpNODMyIDMyMGgtNjR2MTI4aDY0VjMyMHpNNTc2IDMyMGgtNjR2MTI4aDY0VjMyMHpNMzIwIDcwNGgtNjR2MTI4aDY0VjcwNHpNMTkyIDUxMmgtNjR2MTI4aDY0VjUxMnpNMzIwIDUxMmgtNjR2MTI4aDY0VjUxMnpNODMyIDY0djEyOEg2NDBWNjRIMzIwdjEyOEgxMjhWNjRIMHY4OTZoOTYwVjY0SDgzMnpNODk2IDg5Nkg2NFYyNTZoODMyVjg5NnpNMTkyIDcwNGgtNjR2MTI4aDY0VjcwNHpNNDQ4IDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDcwNGgtNjR2MTI4aDY0VjcwNHpNMzIwIDMyMGgtNjR2MTI4aDY0VjMyMHpNNDQ4IDUxMmgtNjR2MTI4aDY0VjUxMnpNNzA0IDcwNGgtNjR2MTI4aDY0VjcwNHoiIC8+Cjwvc3ZnPg==");
}

7
app/styles/menu.css
View File

@ -15,8 +15,10 @@
.menu .nav { .menu .nav {
margin-bottom: 5px; margin-bottom: 5px;
} }
.menu .nav.empact { .menu .empact {
font-weight: 600; height: 40px;
padding: 5px 0;
margin-bottom: 21px;
} }
.menu .nav.header { .menu .nav.header {
color: #444; color: #444;
@ -24,6 +26,7 @@
cursor: default; cursor: default;
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px; margin-bottom: 10px;
line-height: 24px;
} }
.menu .nav a { .menu .nav a {
display: inline-block; display: inline-block;