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

Polish moving dates UI

pull/10616/head
Alex P 2017-07-21 12:21:18 -07:00
parent 0295b9e17e
commit 342f088378
2 changed files with 61 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,16 +41,42 @@ class CustomTimeRange extends Component {
return (
<div className="custom-time--container">
<div className="custom-time--moving-dates">
<div onClick={this.handleMovingTimeRange('pastWeek')}>Past week</div>
<div onClick={this.handleMovingTimeRange('pastMonth')}>
Past month
<div
className="custom-time--moving-date"
onClick={this.handleMovingTimeRange('pastWeek')}
>
Past Week
</div>
<div onClick={this.handleMovingTimeRange('pastYear')}>Past year</div>
<div onClick={this.handleMovingTimeRange('thisWeek')}>This week</div>
<div onClick={this.handleMovingTimeRange('thisMonth')}>
This month
<div
className="custom-time--moving-date"
onClick={this.handleMovingTimeRange('pastMonth')}
>
Past Month
</div>
<div
className="custom-time--moving-date"
onClick={this.handleMovingTimeRange('pastYear')}
>
Past Year
</div>
<div
className="custom-time--moving-date"
onClick={this.handleMovingTimeRange('thisWeek')}
>
This Week
</div>
<div
className="custom-time--moving-date"
onClick={this.handleMovingTimeRange('thisMonth')}
>
This Month
</div>
<div
className="custom-time--moving-date"
onClick={this.handleMovingTimeRange('thisYear')}
>
This Year
</div>
<div onClick={this.handleMovingTimeRange('thisYear')}>This year</div>
</div>
<div className="custom-time--wrap">
<div className="custom-time--dates">

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

@ -7,22 +7,27 @@
position: relative;
}
.custom-time--container {
display: flex;
display: none;
position: absolute;
flex-direction: row;
align-items: center;
align-items: stretch;
top: 35px;
right: 0;
background: $g5-pepper;
border-radius: $radius;
padding: 8px;
z-index: 1000;
box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
}
.custom-time--wrap {
.custom-time--wrap,
.custom-time--moving-dates {
display: flex;
flex-direction: column;
}
.custom-time--wrap {
padding: 8px;
align-items: center;
border-radius: 0 $radius $radius 0;
background: $g5-pepper;
}
.custom-time--dates {
display: flex;
align-items: flex-start;
@ -35,10 +40,24 @@
margin-left: 4px;
}
.custom-time--moving-dates {
flex: 1;
width: 80px;
> div {
@include no-user-select();
align-items: stretch;
background-color: $g6-smoke;
border-radius: $radius 0 0 $radius;
}
.custom-time--moving-date {
white-space: nowrap;
padding: 8px 16px;
transition:
color 0.25s ease,
background-color 0.25s ease;
color: $g13-mist;
font-weight: 600;
&:hover {
cursor: pointer;
background-color: $g7-graphite;
color: $g17-whisper;
}
}