Influxdata
/
chronograf
mirror of https://github.com/influxdata/chronograf.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add "shortcuts" header and rename styles

pull/1744/head
Alex P 2017-08-07 15:20:30 -07:00
parent 5b2870fd5e
commit 0e81c288dd
2 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/shared/components/CustomTimeRange.js
View File

@ -40,39 +40,40 @@ class CustomTimeRange extends Component {
render() { render() {
return ( return (
<div className="custom-time--container"> <div className="custom-time--container">
<div className="custom-time--moving-dates"> <div className="custom-time--shortcuts">
<div className="custom-time--shortcuts-header">Shortcuts</div>
<div <div
className="custom-time--moving-date" className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('pastWeek')} onClick={this.handleMovingTimeRange('pastWeek')}
> >
Past Week Past Week
</div> </div>
<div <div
className="custom-time--moving-date" className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('pastMonth')} onClick={this.handleMovingTimeRange('pastMonth')}
> >
Past Month Past Month
</div> </div>
<div <div
className="custom-time--moving-date" className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('pastYear')} onClick={this.handleMovingTimeRange('pastYear')}
> >
Past Year Past Year
</div> </div>
<div <div
className="custom-time--moving-date" className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('thisWeek')} onClick={this.handleMovingTimeRange('thisWeek')}
> >
This Week This Week
</div> </div>
<div <div
className="custom-time--moving-date" className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('thisMonth')} onClick={this.handleMovingTimeRange('thisMonth')}
> >
This Month This Month
</div> </div>
<div <div
className="custom-time--moving-date" className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('thisYear')} onClick={this.handleMovingTimeRange('thisYear')}
> >
This Year This Year

16
ui/src/style/components/custom-time-range.scss
View File

@ -39,20 +39,26 @@
.custom-time--upper { .custom-time--upper {
margin-left: 4px; margin-left: 4px;
} }
.custom-time--moving-dates { .custom-time--shortcuts {
@include no-user-select(); @include no-user-select();
align-items: stretch; align-items: stretch;
background-color: $g6-smoke; background-color: $g6-smoke;
border-radius: $radius 0 0 $radius; border-radius: $radius 0 0 $radius;
} }
.custom-time--moving-date { .custom-time--shortcuts-header {
white-space: nowrap; white-space: nowrap;
padding: 8px 16px; padding: 16px;
color: $g15-platinum;
font-weight: 700;
}
.custom-time--shortcut {
white-space: nowrap;
padding: 6px 16px;
transition: transition:
color 0.25s ease, color 0.25s ease,
background-color 0.25s ease; background-color 0.25s ease;
color: $g13-mist; color: $g11-sidewalk;
font-weight: 600; font-weight: 500;
&:hover { &:hover {
cursor: pointer; cursor: pointer;