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

Fix positioning of query editor list headers 

measurements filter, group by time, and accept/reject
pull/856/head
Alex P 2017-02-09 09:14:07 -08:00
parent 232633da8f
commit b2a3b8ce89
3 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/data_explorer/components/MeasurementList.js
View File

@ -74,7 +74,7 @@ const MeasurementList = React.createClass({
<div className="query-builder--column"> <div className="query-builder--column">
<div className="query-builder--column-heading">Measurements</div> <div className="query-builder--column-heading">Measurements</div>
{this.props.query.database ? <div className="qeditor--list-header"> {this.props.query.database ? <div className="qeditor--list-header">
<input className="qeditor--filter" ref="filterText" placeholder="Filter Measurements..." type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} /> <input className="qeditor--filter" ref="filterText" placeholder="Filter" type="text" value={this.state.filterText} onChange={this.handleFilterText} onKeyUp={this.handleEscape} />
<span className="icon search"></span> <span className="icon search"></span>
</div> : null } </div> : null }
{this.renderList()} {this.renderList()}

23
ui/src/style/pages/data-explorer/query-builder.scss
View File

@ -15,7 +15,7 @@
// Tabs // Tabs
.query-builder--tabs { .query-builder--tabs {
display: flex; display: flex;
width: 190px; width: 250px;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
@include gradient-v($g3-castle,$g1-raven); @include gradient-v($g3-castle,$g1-raven);
@ -23,7 +23,7 @@
} }
.query-builder--tabs-heading { .query-builder--tabs-heading {
height: 60px; height: 60px;
padding: 0 9px; padding: 0 9px 0 16px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -45,7 +45,7 @@
background: transparent; background: transparent;
height: 30px; height: 30px;
cursor: pointer; cursor: pointer;
padding: 0 8px; padding: 0 8px 0 16px;
transition: transition:
color 0.25s ease, color 0.25s ease,
background-color 0.25s ease; background-color 0.25s ease;
@ -141,9 +141,10 @@
Tab Contents Tab Contents
------------------------------------------- -------------------------------------------
*/ */
$query-builder--column-heading-height: 60px;
.query-builder--tab-contents { .query-builder--tab-contents {
width: 100%; width: 100%;
background-color: $g5-pepper; background-color: $g4-onyx;
border-radius: 0 $radius $radius 0; border-radius: 0 $radius $radius 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -163,7 +164,7 @@
} }
.query-builder--column-heading { .query-builder--column-heading {
width: 100%; width: 100%;
height: 30px; height: $query-builder--column-heading-height;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -171,8 +172,8 @@
font-weight: 600; font-weight: 600;
color: $g13-mist; color: $g13-mist;
padding: 0 9px; padding: 0 9px;
line-height: 30px; line-height: $query-builder--column-heading-height;
border-bottom: 2px solid $g6-smoke; border-bottom: 2px solid $g5-pepper;
} }
.query-builder--column { .query-builder--column {
position: absolute; position: absolute;
@ -182,16 +183,16 @@
.qeditor--list { .qeditor--list {
position: absolute; position: absolute;
top: 30px; top: $query-builder--column-heading-height;
height: calc(100% - 30px); height: calc(100% - #{$query-builder--column-heading-height});
width: 100%; width: 100%;
left: 0; left: 0;
padding: 0; padding: 0;
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
@include custom-scrollbar($g5-pepper,$c-pool); @include custom-scrollbar($g4-onyx,$c-pool);
background-color: $g5-pepper; background-color: $g4-onyx;
} }
} }
.query-builder--column:nth-of-type(1) { left: 0; } .query-builder--column:nth-of-type(1) { left: 0; }

27
ui/src/style/pages/data-explorer/query-editor.scss
View File

@ -96,15 +96,15 @@ $query-editor-height: 250px;
background-color 0.25s ease; background-color 0.25s ease;
&:hover { &:hover {
background-color: $g4-onyx; background-color: $g6-smoke;
color: $g17-whisper; color: $g15-platinum;
cursor: pointer; cursor: pointer;
} }
} }
&-radio { &-radio {
&.active { &.active {
color: $g20-white; color: $g20-white;
background-color: $g4-onyx; background-color: $g6-smoke;
font-weight: 700; font-weight: 700;
} }
} }
@ -169,11 +169,18 @@ $query-editor-height: 250px;
} }
} }
} }
&-header {
position: relative;
background-color: $query-editor-tab-active;
padding: 8px 18px 0px 18px;
} }
.qeditor--list-header {
position: absolute;
top: 15px;
right: 16px;
width: calc(60% - 16px);
height: 30px;
padding: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: flex-end;
} }
// List empty state // List empty state
@ -209,7 +216,7 @@ $query-editor-height: 250px;
height: 30px; height: 30px;
border-radius: 15px; border-radius: 15px;
font-size: 13px; font-size: 13px;
padding-left: 38px; padding-left: 28px;
outline: none; outline: none;
color: $g20-white; color: $g20-white;
font-weight: 700; font-weight: 700;
@ -243,8 +250,8 @@ $query-editor-height: 250px;
} }
+ .icon { + .icon {
position: absolute; position: absolute;
top: calc(50% + 5px); top: 50%;
left: calc(19px * 2); left: 11px;
transform: translateY(-50%); transform: translateY(-50%);
color: $g10-wolf; color: $g10-wolf;
transition: color 0.25s ease; transition: color 0.25s ease;