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

Merge branch 'feature/1685-moving-time-ranges' of github.com:influxdata/chronograf into feature/1685-moving-time-ranges

pull/10616/head
Hunter Trujillo 2017-08-07 16:47:25 -07:00
parent 68fd8621b7 91e0b7dfaf
commit 42e0da2c96
3 changed files with 21 additions and 14 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

4
ui/src/shared/components/TimeRangeDropdown.js
View File

@ -88,7 +88,7 @@ class TimeRangeDropdown extends Component {
return (
<div className="time-range-dropdown">
<div className={classnames('dropdown dropdown-160', {open: isOpen})}>
<div className={classnames('dropdown dropdown-290', {open: isOpen})}>
<div
className="btn btn-sm btn-default dropdown-toggle"
onClick={() => this.toggleMenu()}
@ -116,7 +116,7 @@ class TimeRangeDropdown extends Component {
}
>
<a href="#" onClick={this.showCustomTimeRange}>
Custom Time Range
Date Picker
</a>
</li>}
{timeRanges.map(item => {

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;