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

Add "shortcuts" header and rename styles

pull/10616/head
Alex P 2017-08-07 15:20:30 -07:00
parent 0dc6c57e85
commit 91e0b7dfaf
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() {
return (
<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
className="custom-time--moving-date"
className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('pastWeek')}
>
Past Week
</div>
<div
className="custom-time--moving-date"
className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('pastMonth')}
>
Past Month
</div>
<div
className="custom-time--moving-date"
className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('pastYear')}
>
Past Year
</div>
<div
className="custom-time--moving-date"
className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('thisWeek')}
>
This Week
</div>
<div
className="custom-time--moving-date"
className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('thisMonth')}
>
This Month
</div>
<div
className="custom-time--moving-date"
className="custom-time--shortcut"
onClick={this.handleMovingTimeRange('thisYear')}
>
This Year

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

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