Skip to content

N
nexpie-grafana-theme
Commit 84618a60 by Torkel Ödegaard
Options

Style and layout changes for InfluxDB 0.9 editor #1525

parent b61f30de
Showing with 71 additions and 30 deletions
public/app/plugins/datasource/influxdb/partials/query.editor.html
<div class="editor-row"> <div class="editor-row">
<div ng-repeat="target in panel.targets" <div ng-repeat="target in panel.targets" ng-controller="InfluxQueryCtrl" ng-init="init()" ng-class="{'tight-form-disabled': target.hide}" class="tight-form-container-no-item-borders" style="margin-bottom: 10px">
class="tight-form" <div class="tight-form">
ng-class="{'tight-form-disabled': target.hide}" <ul class="tight-form-list pull-right">
ng-controller="InfluxQueryCtrl" <li ng-show="parserError" class="tight-form-item">
ng-init="init()"> <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<ul class="tight-form-list pull-right"> <i class="fa fa-warning"></i>
<li ng-show="parserError" class="tight-form-item"> </a>
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem"> </li>
<i class="fa fa-warning"></i> <li class="tight-form-item">
</a> <a class="pointer" tabindex="1" ng-click="toggleQueryMode()">
</li> <i class="fa fa-pencil"></i>
<li class="tight-form-item"> </a>
<a class="pointer" tabindex="1" ng-click="toggleQueryMode()"> </li>
<i class="fa fa-pencil"></i> <li class="tight-form-item">
</a>
</li>
<li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
<a class="pointer dropdown-toggle" <a class="pointer dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
...@@ -62,11 +59,10 @@ ...@@ -62,11 +59,10 @@
</li> </li>
</ul> </ul>
<input type="text" class="tight-form-clear-input span10" ng-model="target.query" focus-me="target.rawQuery" <input type="text" class="tight-form-clear-input span10" ng-model="target.query" focus-me="target.rawQuery" spellcheck='false' ng-model-onblur ng-change="targetTextChanged()" ng-show="target.rawQuery" />
spellcheck='false' ng-model-onblur ng-change="targetTextChanged()" ng-show="target.rawQuery" />
<ul class="tight-form-list" role="menu" ng-hide="target.rawQuery"> <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<li class="tight-form-item query-keyword"> <li class="tight-form-item query-keyword" style="width: 75px;">
SELECT SELECT
</li> </li>
<li class="dropdown tight-form-item"> <li class="dropdown tight-form-item">
...@@ -74,22 +70,58 @@ ...@@ -74,22 +70,58 @@
{{target.function}}<span>(value)</span> {{target.function}}<span>(value)</span>
</a> </a>
</li> </li>
<li class="tight-form-item query-keyword"> </ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-hide="target.rawQuery">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item query-keyword" style="width: 75px;">
FROM FROM
</li> </li>
<li> <li>
<metric-segment segment="measurementSegment" get-alt-segments="getMeasurements()" on-value-changed="measurementChanged()"></metric-segment> <metric-segment segment="measurementSegment" get-alt-segments="getMeasurements()" on-value-changed="measurementChanged()"></metric-segment>
</li> </li>
<li class="tight-form-item query-keyword"> </ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-hide="target.rawQuery">
<ul class="tight-form-list">
<li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item query-keyword" style="width: 75px;">
WHERE WHERE
</li> </li>
<li ng-repeat="segment in tagSegments"> <li ng-repeat="segment in tagSegments">
<metric-segment segment="segment" get-alt-segments="getTagsOrValues(segment, $index)" on-value-changed="tagSegmentUpdated(segment, $index)"></metric-segment> <metric-segment segment="segment" get-alt-segments="getTagsOrValues(segment, $index)" on-value-changed="tagSegmentUpdated(segment, $index)"></metric-segment>
</li> </li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-hide="target.rawQuery">
<ul class="tight-form-list">
<li class="tight-form-item"> <li class="tight-form-item">
<i class="fa fa-eye invisible"></i>
</li>
<li class="tight-form-item" >
<span class="query-keyword">GROUP BY</span> <span class="query-keyword">GROUP BY</span>
</li>
<li class="tight-form-item">
time($interval) time($interval)
</li> </li>
<li ng-repeat="segment in groupBySegments"> <li ng-repeat="segment in groupBySegments">
<metric-segment segment="segment" get-alt-segments="getGroupByTagSegments(segment, 0)" on-value-changed="groupByTagUpdated(segment, $index)"></metric-segment> <metric-segment segment="segment" get-alt-segments="getGroupByTagSegments(segment, 0)" on-value-changed="groupByTagUpdated(segment, $index)"></metric-segment>
</li> </li>
...@@ -107,15 +139,16 @@ ...@@ -107,15 +139,16 @@
<li><a ng-click="target.fill = 'null'">fill (null)</a></li> <li><a ng-click="target.fill = 'null'">fill (null)</a></li>
<li><a ng-click="target.fill = '0'">fill (0)</a></li> <li><a ng-click="target.fill = '0'">fill (0)</a></li>
</ul> </ul>
</li> </li>
</ul>
</ul> <div class="clearfix"></div>
</div>
<div class="clearfix"></div> </div>
</div>
</div> </div>
<div class="editor-row"> <div class="editor-row">
<div class="pull-left" style="margin-top: 30px;"> <div class="pull-left" style="margin-top: 30px;">
</div> </div>
</div> </div>
public/app/plugins/datasource/influxdb/queryCtrl.js
...@@ -266,7 +266,7 @@ function (angular, _, InfluxQueryBuilder) { ...@@ -266,7 +266,7 @@ function (angular, _, InfluxQueryBuilder) {
}; };
MetricSegment.newPlusButton = function() { MetricSegment.newPlusButton = function() {
return new MetricSegment({fake: true, html: '<i class="fa fa-plus"></i>', type: 'plus-button' }); return new MetricSegment({fake: true, html: '<i class="fa fa-plus "></i>', type: 'plus-button' });
}; };
MetricSegment.newSelectTagValue = function() { MetricSegment.newSelectTagValue = function() {
......
public/css/less/tightform.less
...@@ -20,6 +20,14 @@ ...@@ -20,6 +20,14 @@
} }
} }
.tight-form-container-no-item-borders {
border: 1px solid @grafanaTargetBorder;
.tight-form, .tight-form-item {
border: none;
}
}
.spaced-form { .spaced-form {
.tight-form { .tight-form {
margin: 7px 0; margin: 7px 0;
...@@ -85,9 +93,9 @@ ...@@ -85,9 +93,9 @@
&.last { &.last {
border-right: none; border-right: none;
} }
} }
.tight-form-item-icon { .tight-form-item-icon {
i { i {
width: 15px; width: 15px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment