ux(): updated query editor test

public/app/core/directives/dropdown_typeahead.js

@@ -9,10 +9,10 @@ function (_, $, coreModule) {
   coreModule.default.directive('dropdownTypeahead', function($compile) {
 
     var inputTemplate = '<input type="text"'+
-      ' class="tight-form-input input-medium tight-form-input"' +
+      ' class="gf-form-input input-medium tight-form-input"' +
       ' spellcheck="false" style="display:none"></input>';
 
-    var buttonTemplate = '<a  class="tight-form-item tight-form-func dropdown-toggle"' +
+    var buttonTemplate = '<a  class="gf-form-label tight-form-func dropdown-toggle"' +
       ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
       ' data-placement="top"><i class="fa fa-plus"></i></a>';
 

public/app/core/directives/metric_segment.js

@@ -8,10 +8,10 @@ function (_, $, coreModule) {
 
   coreModule.default.directive('metricSegment', function($compile, $sce) {
     var inputTemplate = '<input type="text" data-provide="typeahead" ' +
-      ' class="tight-form-clear-input input-medium"' +
+      ' class="gf-form-input input-medium"' +
       ' spellcheck="false" style="display:none"></input>';
 
-    var buttonTemplate = '<a class="tight-form-item" ng-class="segment.cssClass" ' +
+    var buttonTemplate = '<a class="gf-form-label" ng-class="segment.cssClass" ' +
       'tabindex="1" give-focus="segment.focus" ng-bind-html="segment.html"></a>';
 
     return {

public/app/features/panel/partials/query_editor_row.html

@@ -1,4 +1,43 @@
-<div class="tight-form">
+<div class="gf-form-inline">
+	<div class="gf-form">
+		<label class="gf-form-label">
+			{{ctrl.target.refId}}
+		</label>
+		<label class="gf-form-label">
+			<a ng-click="ctrl.toggleHideQuery()" role="menuitem">
+				<i class="fa fa-eye"></i>
+			</a>
+		</label>
+	</div>
+	<div ng-transclude style="max-width: 100%; flex-grow: 10;">
+	</div>
+
+	<div class="gf-form">
+		<label class="gf-form-label">
+			<a class="pointer" tabindex="1" ng-click="ctrl.toggleEditorMode()">
+				<i class="fa fa-pencil"></i>
+			</a>
+		</label>
+		<label class="gf-form-label dropdown">
+			<a class="pointer dropdown-toggle" data-toggle="dropdown" tabindex="1">
+				<i class="fa fa-bars"></i>
+			</a>
+			<ul class="dropdown-menu pull-right" role="menu">
+				<li role="menuitem">
+					<a tabindex="1" ng-click="ctrl.duplicateQuery()">Duplicate</a>
+				</li>
+				<li role="menuitem">
+					<a tabindex="1" ng-click="ctrl.moveQuery(-1)">Move up</a>
+				</li>
+				<li role="menuitem">
+					<a tabindex="1" ng-click="ctrl.moveQuery(1)">Move down</a>
+				</li>
+			</ul>
+		</label>
+	</div>
+</div>
+
+<div class="tight-form" ng-if="false">
 	<ul class="tight-form-list pull-right">
 		<li ng-show="ctrl.error" class="tight-form-item">
 			<a bs-tooltip="ctrl.error" style="color: rgb(229, 189, 28)" role="menuitem">

public/app/partials/metrics.html

@@ -1,6 +1,6 @@
 <div class="editor-row">
 
-	<div class="tight-form-container">
+	<div class="query-editor-rows">
 		<div ng-repeat="target in ctrl.panel.targets" ng-class="{'tight-form-disabled': target.hide}">
 			<rebuild-on-change property="ctrl.panel.datasource || target.datasource" show-null="true">
 				<plugin-component type="query-ctrl">

public/app/plugins/datasource/influxdb/partials/query.editor.html

@@ -1,28 +1,48 @@
 <query-editor-row ctrl="ctrl">
-		<ul class="tight-form-list" ng-hide="ctrl.target.rawQuery">
-			<li class="tight-form-item query-keyword" style="width: 75px">
-				FROM
-			</li>
-			<li>
-				<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
-			</li>
-			<li>
-				<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
-			</li>
-			<li class="tight-form-item query-keyword" style="padding-left: 15px; padding-right: 15px;">
+		<div ng-hide="ctrl.target.rawQuery" class="gf-form-inline">
+			<label class="gf-form-label query-keyword width-6">FROM</label>
+
+			<metric-segment segment="ctrl.policySegment" get-options="ctrl.getPolicySegments()" on-change="ctrl.policyChanged()"></metric-segment>
+			<metric-segment segment="ctrl.measurementSegment" get-options="ctrl.getMeasurements()" on-change="ctrl.measurementChanged()"></metric-segment>
+
+			<label class="gf-form-label query-keyword">
 				WHERE
-			</li>
-			<li ng-repeat="segment in ctrl.tagSegments">
+			</label>
+
+			<div ng-repeat="segment in ctrl.tagSegments">
 				<metric-segment segment="segment" get-options="ctrl.getTagsOrValues(segment, $index)" on-change="ctrl.tagSegmentUpdated(segment, $index)"></metric-segment>
-			</li>
-		</ul>
+			</div>
+		</div>
 
-		<div class="tight-form-flex-wrapper" ng-show="ctrl.target.rawQuery">
-			<input type="text" class="tight-form-clear-input" ng-model="ctrl.target.query" spellcheck="false" style="width: 100%;" ng-blur="ctrl.refresh()"></input>
+		<div class="gf-form" ng-show="ctrl.target.rawQuery">
+			<input type="text" class="gf-form-input" ng-model="ctrl.target.query" spellcheck="false" ng-blur="ctrl.refresh()"></input>
 		</div>
 </query-editor-row>
 
 <div ng-hide="ctrl.target.rawQuery">
+	<div class="gf-form-inline query-editor-secondary-row" ng-repeat="selectParts in ctrl.queryModel.selectModels">
+		<div class="gf-form">
+			<label class="gf-form-label query-keyword width-6">
+				<span ng-show="$index === 0">SELECT</span>
+			</label>
+
+			<influx-query-part-editor
+					ng-repeat="part in selectParts"
+					class="gf-form-label tight-form-func"
+					part="part"
+					remove-action="ctrl.removeSelectPart(selectParts, part)"
+					part-updated="ctrl.selectPartUpdated(selectParts, part)"
+					get-options="ctrl.getPartOptions(part)">
+			</influx-query-part-editor>
+
+			<label class="dropdown"
+				dropdown-typeahead="ctrl.selectMenu"
+				dropdown-typeahead-on-select="ctrl.addSelectPart(selectParts, $item, $subItem)">
+			</label>
+	</div>
+</div>
+
+<div ng-hide="ctrl.target.rawQuery" ng-if="false">
 	<div class="tight-form" ng-repeat="selectParts in ctrl.queryModel.selectModels">
 		<ul class="tight-form-list">
 			<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
@@ -53,21 +73,16 @@
 	</div>
 </div>
 
-<div class="tight-form">
-	<ul class="tight-form-list">
-		<li class="tight-form-item query-keyword tight-form-align" style="width: 75px;">
-			ALIAS BY
-		</li>
-		<li>
-			<input type="text" class="tight-form-clear-input input-xlarge" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
-		</li>
-		<li class="tight-form-item">
-			Format as
-		</li>
-		<li>
-			<select class="input-small tight-form-input" style="width: 104px" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
+<div class="gf-form-inline query-editor-secondary-row">
+	<div class="gf-form max-width-30">
+		<label class="gf-form-label query-keyword">ALIAS BY</label>
+		<input type="text" class="gf-form-input" ng-model="ctrl.target.alias" spellcheck='false' placeholder="Naming pattern" ng-blur="ctrl.refresh()">
+	</div>
+	<div class="gf-form">
+		<label class="gf-form-label">Format as</label>
+		<div class="gf-form-select-wrapper">
+			<select class="gf-form-input gf-size-auto" ng-model="ctrl.target.resultFormat" ng-options="f.value as f.text for f in ctrl.resultFormats" ng-change="ctrl.refresh()"></select>
+		</div>
+	</div>
 </div>
 

public/sass/components/_gf-form.scss

@@ -3,7 +3,6 @@ $gf-form-label-margin: 0.25rem;
 
 .gf-form {
   margin-bottom: $gf-form-margin;
-  margin-right: $gf-form-margin;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -67,6 +66,7 @@ $gf-form-label-margin: 0.25rem;
   display: block;
   width: 100%;
   padding: $input-padding-y $input-padding-x;
+  margin-right: $gf-form-margin;
   font-size: $font-size-base;
   line-height: $input-line-height;
   color: $input-color;
@@ -139,8 +139,8 @@ $gf-form-label-margin: 0.25rem;
   }
 }
 
-.gf-form-select-wrapper + .gf-form-select-wrapper { 
-  margin-left: $gf-form-label-margin; 
+.gf-form-select-wrapper + .gf-form-select-wrapper {
+  margin-left: $gf-form-label-margin;
 }
 
 .gf-form-btn {
@@ -149,3 +149,8 @@ $gf-form-label-margin: 0.25rem;
   flex-shrink: 0;
   flex-grow: 0;
 }
+
+.query-editor-secondary-row {
+  margin-left: 5.2rem;
+
+}

public/sass/components/_query_editor.scss

@@ -4,13 +4,13 @@
 }
 
 .query-segment-key {
-  border-right: none;
-  padding-right: 1px;
+  //border-right: none;
+  //padding-right: 1px;
 }
 
 .query-segment-operator {
-  padding-right: 1px;
-  border-right: none;
+  //padding-right: 1px;
+  //border-right: none;
   color: $orange;
 }