ux(): varios tweaks and polish

public/app/features/annotations/partials/editor.html

@@ -88,13 +88,12 @@
 			</rebuild-on-change>
 
 			<div class="gf-form">
-				<div class="gf-form-button-row">
+				<div class="gf-form-button-row p-y-0">
 					<button ng-show="mode === 'new'" type="button" class="btn gf-form-button btn-success" ng-click="add()">Add</button>
 					<button ng-show="mode === 'edit'" type="button" class="btn btn-success pull-left" ng-click="update()">Update</button>
 				</div>
 			</div>
 		</div>
 
-
 	</div>
 </div>

public/app/features/templating/partials/editor.html

@@ -71,29 +71,34 @@
 		</div>
 
 		<div ng-if="mode === 'edit' || mode === 'new'">
-			<h5>Variable</h5>
+			<h5 class="section-heading">Variable</h5>
 			<div class="gf-form-group">
 				<div class="gf-form-inline">
 					<div class="gf-form">
-					<span class="gf-form-label width-7">Name</span>
-					<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
-				</div>
-				<div class="gf-form">
-					<span class="gf-form-label width-7">Type</span>
-					<div class="gf-form-select-wrapper max-width-10">
-						<select class="gf-form-input  max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
+						<span class="gf-form-label width-7">Name</span>
+						<input type="text" class="gf-form-input max-width-14" placeholder="name" ng-model='current.name'></input>
+					</div>
+					<div class="gf-form">
+						<span class="gf-form-label width-7">Type</span>
+						<div class="gf-form-select-wrapper max-width-10">
+							<select class="gf-form-input  max-width-10" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
+						</div>
+					</div>
+					<div class="gf-form">
+						<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
+						<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
+							<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
+						</div>
 					</div>
 				</div>
 				<div class="gf-form">
-					<span class="gf-form-label width-7" ng-show="current.type === 'query'">Data source</span>
-					<div class="gf-form-select-wrapper" ng-show="current.type === 'query'">
-						<select class="gf-form-input max-width-14" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
-					</div>
+					<span class="gf-form-label width-7">Label</span>
+					<input type="text" class="gf-form-input max-width-14" ng-model='current.label' placeholder="optional display name"></input>
+					<editor-checkbox class="width-13" text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
 				</div>
 			</div>
 
-			<h5>Value Options</h5>
-
+			<h5 class="section-heading">Value Options</h5>
 			<div ng-show="current.type === 'interval'" class="gf-form-group">
 				<div class="gf-form">
 					<span class="gf-form-label width-7">Values</span>
@@ -116,16 +121,16 @@
 					<input type="text" class="gf-form-input max-width-22" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
 				</div>
 				<div class="gf-form ">
-          <editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
-          <input ng-show="current.includeAll" type="text" class="gf-form-input max-width-22" ng-model='current.options[0].value' style="margin-left: 4px;"></input>
-        </div>
-        <div class="gf-form">
-          <span class="gf-form-label width-13" ng-show="current.includeAll">All format</span>
-          <div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
-          	<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
-          </div>
-        </div>
-      </div>
+					<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
+					<input ng-show="current.includeAll" type="text" class="gf-form-input max-width-22" ng-model='current.options[0].value' style="margin-left: 4px;"></input>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label width-13" ng-show="current.includeAll">All format</span>
+					<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
+						<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
+					</div>
+				</div>
+			</div>
 
 			<div ng-show="current.type === 'query'" class="gf-form-group">
 				<div class="gf-form">
@@ -140,42 +145,35 @@
 					<input type="text" class="gf-form-input" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
 				</div>
 				<div class="gf-form">
-					<editor-checkbox class="width-13" text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
-					<input ng-show="current.includeAll" type="text" class="gf-form-input" ng-model='current.options[0].value'></input>
-					<span class="gf-form-label" ng-show="current.includeAll">All format</span>
-					<div class="gf-form-select-wrapper max-width-10" ng-show="current.includeAll">
-						<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
+					<span class="gf-form-label width-7">All value</span>
+					<editor-checkbox class="width-13" text="Enable" model="current.includeAll" change="runQuery()"></editor-checkbox>
+				</div>
+				<div class="gf-form-inline" ng-show="current.includeAll">
+					<div class="gf-form">
+						<span class="gf-form-label width-7">All format</span>
+						<div class="gf-form-select-wrapper">
+							<select class="gf-form-input" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values', 'lucene', 'pipe']"></select>
+						</div>
+					</div>
+					<div class="gf-form max-width-30">
+						<span class="gf-form-label width-7">All value</span>
+						<input type="text" class="gf-form-input" ng-model='current.options[0].value'></input>
 					</div>
 				</div>
-
 				<div class="gf-form">
-					<editor-checkbox class="width-13" text="Refresh on load" model="current.refresh"></editor-checkbox>
+					<span class="gf-form-label width-7">Update</span>
+					<editor-checkbox text="On Dashboard Load" model="current.refresh"></editor-checkbox>
 					<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
 				</div>
 			</div>
 
-			<div class="row">
-				<div class="col-md-6">
-					<div class="gf-form-group">
-						<h5>Display options</h5>
-						<div class="gf-form">
-							<span class="gf-form-label width-8">Variable Label</span>
-							<input type="text" class="gf-form-input max-width-12" ng-model='current.label' placeholder=""></input>
-							<editor-checkbox class="width-13" text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
-						</div>
-					</div>
-				</div>
-				<div class="col-md-6" ng-hide="current.type === 'interval'">
-					<div class="gf-form-group" >
-						<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
-						<div class="gf-form">
-							<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
-
-							<span class="gf-form-label" ng-show="current.multi">Multi format</span>
-							<div class="gf-form-select-wrapper max-width-10" ng-show="current.multi">
-								<select class="gf-form-input" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
-							</div>
-						</div>
+			<div class="gf-form-group" >
+				<h5 class="section-heading">Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
+				<div class="gf-form">
+					<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
+					<span class="gf-form-label" ng-show="current.multi">Multi format</span>
+					<div class="gf-form-select-wrapper max-width-10" ng-show="current.multi">
+						<select class="gf-form-input" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
 					</div>
 				</div>
 			</div>
@@ -205,7 +203,7 @@
 			</div>
 		</div>
 
-		<div class="gf-form-button-row" style="margin-top: 20px">
+		<div class="gf-form-button-row p-y-0">
 			<button type="button" class="btn btn-success" ng-show="mode === 'edit'" ng-click="update();">Update</button>
 			<button type="button" class="btn btn-success" ng-show="mode === 'new'" ng-click="add();">Add</button>
 		</div>

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

@@ -1,13 +1,13 @@
 
-<h6>Query</h6>
+<h5 class="section-heading">Query</h5>
 <div class="gf-form-group">
 	<div class="gf-form">
 		<input type="text" class="gf-form-input" ng-model='ctrl.annotation.query' placeholder="select text from events where $timeFilter"></input>
 	</div>
 </div>
 
+<h5 class="section-heading">Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h5>
 <div class="gf-form-group">
-	<h6>Column mappings <tip>If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.</tip></h6>
 	<div class="gf-form-inline">
 		<div class="gf-form">
 			<span class="gf-form-label width-4">Title</span>

public/app/plugins/datasource/prometheus/partials/annotations.editor.html

@@ -1,28 +1,27 @@
+
+<h5 class="section-heading">Search expression</h6>
 <div class="gf-form-group">
-	<div class="gf-form-inline">
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Search expression</span>
-			<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
-		</div>
+	<div class="gf-form">
+		<input type="text" class="gf-form-input" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input>
 	</div>
 </div>
+
 <div class="gf-form-group">
-	<h6>Field formats</h6>
-  <div class="gf-form-inline">
+	<h5 class="section-heading">Field formats</h6>
+	<div class="gf-form-inline">
 		<div class="gf-form">
-			<span class="gf-form-label width-10">Title</span>
-			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
+			<span class="gf-form-label width-5">Title</span>
+			<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input>
 		</div>
-
 		<div class="gf-form">
-			<span class="gf-form-label width-10">Tags</span>
-			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
+			<span class="gf-form-label width-5">Tags</span>
+			<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input>
 		</div>
-	</div>
-	<div class="gf-form-inline">
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Text</span>
-			<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
+		<div class="gf-form-inline">
+			<div class="gf-form">
+				<span class="gf-form-label width-5">Text</span>
+				<input type="text" class="gf-form-input max-width-9" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input>
+			</div>
 		</div>
 	</div>
 </div>

public/sass/components/_gf-form.scss

@@ -30,7 +30,7 @@ $gf-form-label-margin: 0.25rem;
 }
 
 .gf-form-button-row {
-  margin-top: $spacer * 1.5;
+  padding-top: $spacer * 1.5;
   a, button {
     margin-right: $spacer;
   }