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

Style custom time range component

pull/10616/head
Alex P 2017-03-29 16:03:32 -07:00 committed by Andrew Watkins
parent 18a04d6964
commit 30514a3d32
2 changed files with 232 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -51,10 +51,12 @@ class CustomTimeRange extends Component {
{`${moment(lower).format('MMM Do HH:mm')} — ${moment(upper).format('MMM Do HH:mm')}`} {`${moment(lower).format('MMM Do HH:mm')} — ${moment(upper).format('MMM Do HH:mm')}`}
<span className="caret"></span> <span className="caret"></span>
</button> </button>
<div className="custom-time-container"> <div className="custom-time--container">
<div className="time-lower" ref={(r) => this.lower = r} /> <div className="custom-time--dates">
<div className="time-upper" ref={(r) => this.upper = r} /> <div className="custom-time--lower" ref={(r) => this.lower = r} />
<div className="apply-time button" onClick={this.handleClick}>Apply</div> <div className="custom-time--upper" ref={(r) => this.upper = r} />
</div>
<div className="custom-time--apply btn btn-sm btn-primary" onClick={this.handleClick}>Apply</div>
</div> </div>
</div> </div>
) )

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

@ -12,28 +12,243 @@
.caret { .caret {
position: absolute; position: absolute;
right: 9px; right: 9px;
top: 50%; top: calc(50% + 1px);
transform: translateY(-50%); transform: translateY(-50%);
} }
} }
.custom-time-container { .custom-time--container {
display: none; display: none;
position: absolute; position: absolute;
top: 40px; flex-direction: column;
align-items: center;
top: 35px;
right: 0; right: 0;
background: red; background: $g5-pepper;
border-radius: $radius;
padding: 8px;
z-index: 1000; z-index: 1000;
box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
} }
.custom-time-range.show { .custom-time--dates {
.custom-time-container { display: flex;
display: block; align-items: flex-start;
justify-content: space-between;
}
.custom-time--lower {
margin-right: 4px;
}
.custom-time--upper {
margin-left: 4px;
}
$custom-time-arrow: 28px;
$rd-cell-size: 30px;
.rd-container {
display: flex !important;
flex-direction: column;
align-items: center;
}
.rd-date {
position: relative;
}
.rd-back,
.rd-next,
.rd-month-label {
position: absolute;
top: 0;
height: $custom-time-arrow;
line-height: $custom-time-arrow;
}
.rd-back,
.rd-next {
outline: none;
width: $custom-time-arrow;
border: 0;
background-color: transparent;
border-radius: 50%;
color: $g15-platinum;
transition:
background-color 0.25s ease,
color 0.25s ease;
&:after {
font-family: 'icomoon' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
color: inherit;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
font-size: 16px;
} }
.custom-time-range--btn { &:hover {
color: $g20-white;
background-color: $g6-smoke; background-color: $g6-smoke;
color: $g20-white;
}
}
.rd-back {
left: 0;
&:after {
left: calc(50% - 1px);
content: "\e90c";
}
}
.rd-next {
left: calc(100% - #{$custom-time-arrow});
&:after {
left: calc(50% + 1px);
content: "\e911";
}
}
.rd-month-label {
font-weight: 600;
color: $g15-platinum;
left: $custom-time-arrow;
text-align: center;
@include no-user-select();
width: calc(100% - #{($custom-time-arrow * 2)});
}
.rd-days {
margin-top: ($custom-time-arrow + 8px);
background-color: transparent;
border-radius: $radius-small;
/* Cancel out default table styles */
tr:hover {
background-color: transparent !important;
color: inherit !important;
}
thead.rd-days-head th.rd-day-head,
tbody.rd-days-body td.rd-day-body {
padding: 0 !important;
min-height: $rd-cell-size !important;
height: $rd-cell-size !important;
max-height: $rd-cell-size !important;
min-width: $rd-cell-size !important;
width: $rd-cell-size !important;
max-width: $rd-cell-size !important;
vertical-align: middle;
text-align: center;
border: 2px solid $g5-pepper !important;
}
thead.rd-days-head th.rd-day-head {
color: $g15-platinum !important;
background-color: $g5-pepper !important;
}
tbody.rd-days-body td.rd-day-body {
@include no-user-select();
letter-spacing: -1px;
font-family: $code-font;
transition:
background-color 0.25s ease,
color 0.25s ease;
color: $g13-mist !important;
background-color: $g3-castle;
border-radius: 5px;
&:hover {
cursor: $cc-pointer;
color: $g20-white !important;
background-color: $g6-smoke;
}
&.rd-day-next-month,
&.rd-day-prev-month {
cursor: $cc-default;
color: $g8-storm !important;
background-color: $g5-pepper !important;
}
&.rd-day-selected {
background-color: $c-pool !important;
color: $g20-white !important;
}
} }
} }
.rd-day-selected {
background: blue; .rd-time {
margin: 0 2px;
width: calc(100% - 4px);
height: 30px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
} }
.rd-time-selected {
@include no-user-select();
height: 28px;
line-height: 28px;
background-color: $g3-castle;
border-radius: $radius-small;
width: 100%;
letter-spacing: -1px;
font-family: $code-font;
color: $g13-mist;
display: inline-block;
transition:
color 0.25s ease,
background-color 0.25s ease;
text-align: center;
&:hover {
color: $g20-white;
background-color: $g6-smoke;
cursor: $cc-pointer;
}
}
.rd-time-list {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 200px;
transform: translate(-50%,-50%);
overflow: auto;
overflow-x: hidden;
overflow-y: scroll;
@include custom-scrollbar-round($c-pool, $c-laser);
@include gradient-h($c-ocean, $c-pool);
border-radius: $radius;
box-shadow: 0 2px 5px 0.6px rgba(15, 14, 21, 0.2);
}
.rd-time-option {
width: 100%;
height: 24px;
line-height: 24px;
padding-left: $scrollbar-width;
text-align: center;
@include no-user-select();
font-family: $code-font;
color: $c-yeti;
letter-spacing: -1px;
&:hover,
&:active,
&:focus {
color: $g20-white;
cursor: $cc-pointer;
outline: none;
@include gradient-h($c-laser, $c-pool);
}
}
.custom-time--apply {
margin-top: 8px;
width: 120px;
}
/* Show State */
.custom-time-range.show {
.custom-time--container {
display: flex;
}
.custom-time-range--btn {
color: $g20-white !important;
background-color: $g6-smoke;
}
}