Templating: updated template editor view & form

public/app/partials/templating_editor.html

@@ -57,118 +57,207 @@
 
 		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
 			<div class="editor-row">
-				<div class="section">
-					<h5>General</h5>
-					<div class="editor-row">
-						<div class="editor-option">
-							<label class="small">Variable name</label>
-							<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
-						</div>
-						<div class="editor-option">
-							<label class="small">Type</label>
-							<select class="input-small" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
-						</div>
-						<div class="editor-option" ng-show="current.type === 'query'">
-							<label class="small">Datasource</label>
-							<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
-						</div>
+				<div class="tight-form-section">
+					<h5>Variable</h5>
+					<div class="tight-form last">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 100px">
+								Name
+							</li>
+							<li>
+								<input type="text" class="input-xlarge tight-form-input" placeholder="name" ng-model='current.name'></input>
+							</li>
+							<li class="tight-form-item">
+								Type
+							</li>
+							<li>
+								<select class="input-small tight-form-input" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
+							</li>
+							<li class="tight-form-item" ng-show="current.type === 'query'">
+								Data source
+							</li>
+							<li ng-show="current.type === 'query'">
+								<select class="input input-medium tight-form-input last" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
 					</div>
+				</div>
+			</div>
+
+			<div class="editor-row">
+				<div class="tight-form-section">
+					<h5>Value Options</h5>
 
 					<div ng-show="current.type === 'interval'">
-						<div class="editor-row">
-							<div class="editor-option">
-								<label class="small">Values</label>
-								<input type="text" class="input-large" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input>
-							</div>
-							<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
-							<div class="editor-option" ng-show="current.auto">
-								<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
-								<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
-							</div>
+						<div class="tight-form">
+							<ul class="tight-form-list">
+								<li class="tight-form-item" style="width: 160px">
+									Values
+								</li>
+								<li>
+									<input type="text" style="width: 345px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
+								</li>
+							</ul>
+							<div class="clearfix"></div>
+						</div>
+						<div class="tight-form last">
+							<ul class="tight-form-list">
+								<li class="tight-form-item" style="width: 160px">
+									Include auto interval &nbsp;
+									<input class="cr1" id="current.auto" type="checkbox" ng-model="current.auto" ng-checked="current.auto" ng-change="runQuery()">
+									<label for="current.auto" class="cr1"></label>
+								</li>
+								<li class="tight-form-item" ng-show="current.auto">
+									Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip>
+								</li>
+								<li>
+									<select class="input-mini tight-form-input last" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
+								</li>
+							</ul>
+							<div class="clearfix"></div>
 						</div>
 					</div>
 
 					<div ng-show="current.type === 'custom'">
-						<div class="editor-row">
-							<div class="editor-option">
-								<label class="small">Values seperated by comma</label>
-								<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
-							</div>
+						<div class="tight-form last">
+							<ul class="tight-form-list">
+								<li class="tight-form-item" style="width: 180px">
+									Values seperated by comma
+								</li>
+								<li>
+									<input type="text" class="input tight-form-input last" style="width: 325px;" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
+								</li>
+							</ul>
+							<div class="clearfix"></div>
 						</div>
 					</div>
 
 					<div ng-show="current.type === 'query'">
-						<h5>Values Query</h5>
-						<div class="editor-row">
-							<div class="editor-option form-inline">
-								<label class="small">Variable values query</label>
-								<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
-								<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
-							</div>
+
+						<div class="tight-form">
+							<ul class="tight-form-list">
+								<li class="tight-form-item" style="width: 100px">
+									Query
+								</li>
+								<li>
+									<input type="text" style="width: 646px" class="input-xxlarge tight-form-input last" placeholder="name" ng-model='current.query' placeholder="apps.servers.*" ng-model-onblur ng-change="runQuery()"></input>
+								</li>
+							</ul>
+							<div class="clearfix"></div>
+						</div>
+						<div class="tight-form">
+							<ul class="tight-form-list">
+								<li class="tight-form-item" style="width: 100px;">
+									Regex
+									<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
+								</li>
+								<li>
+									<input type="text" style="width: 646px" class="input tight-form-input last" ng-model='current.regex' placeholder="/.*-(.*)-.*/" ng-model-onblur ng-change="runQuery()"></input>
+								</li>
+							</ul>
+							<div class="clearfix"></div>
 						</div>
 
-						<div class="editor-row" style="margin: 15px 0">
-							<div class="editor-option form-inline">
-								<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
-								<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
-								<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button>
-							</div>
+						<div class="tight-form">
+							<ul class="tight-form-list">
+								<li class="tight-form-item" style="width: 100px;">
+									All value &nbsp;
+									<input class="cr1" id="current.includeAll" type="checkbox" ng-model="current.includeAll" ng-checked="current.includeAll" ng-change="runQuery()">
+									<label for="current.includeAll" class="cr1"></label>
+								</li>
+								<li ng-show="current.includeAll">
+									<input type="text" class="input-xlarge tight-form-input" style="width:422px" ng-model='current.options[0].value'></input>
+								</li>
+								<li class="tight-form-item" ng-show="current.includeAll">
+									All format
+								</li>
+								<li ng-show="current.includeAll">
+									<select class="input-medium tight-form-input last" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
+								</li>
+							</ul>
+							<div class="clearfix"></div>
 						</div>
 
-						<div class="editor-row" style="margin: 15px 0">
-							<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
-								tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
-								model="current.refresh"></editor-opt-bool>
-
-							<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
-							<div class="editor-option" ng-show="current.includeAll">
-								<label class="small">All format</label>
-								<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
-							</div>
-							<div class="editor-option" ng-show="current.includeAll">
-								<label class="small">All value</label>
-								<input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
-							</div>
+						<div class="tight-form last">
+							<ul class="tight-form-list">
+								<li class="tight-form-item" style="width: 100px;">
+									Refresh on load
+								</li>
+								<li class="tight-form-item">
+									<input class="cr1" id="current.refresh" type="checkbox" ng-model="current.refresh" ng-checked="current.refresh">
+									<label for="current.refresh" class="cr1"></label>
+									<tip>Check if you want values to be updated on dashboard load, will slow down dashboard load time</tip>
+								</li>
+							</ul>
+							<div class="clearfix"></div>
 						</div>
 					</div>
 				</div>
+			</div>
 
-				<div class="section">
-					<div class="section">
-						<h5>Display options</h5>
-						<div class="editor-option">
-							<label class="small">Variable label</label>
-							<input type="text" class="input-medium" ng-model='current.label' placeholder=""></input>
-						</div>
-						<editor-opt-bool text="Hide Label" model="current.hideLabel"></editor-opt-bool>
+			<div class="editor-row">
+				<div class="tight-form-section" ng-hide="current.type === 'interval'">
+					<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
+					<div class="tight-form last">
+						<ul class="tight-form-list">
+							<li class="tight-form-item last" style="width: 100px;">
+								Enable &nbsp;
+								<input class="cr1" id="current.multi" type="checkbox" ng-model="current.multi" ng-checked="current.multi" ng-change="runQuery()">
+								<label for="current.multi" class="cr1"></label>
+							</li>
+							<li class="tight-form-item" ng-show="current.multi">
+								Multi format
+							</li>
+							<li ng-show="current.multi">
+								<select class="input-small tight-form-input last" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values']"></select>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
 					</div>
+				</div>
 
-					<div class="section">
-						<h5>Multi-value selection <tip>Enables multiple values to be selected at the same time</tip></h5>
-						<editor-opt-bool text="Enable" model="current.multi"></editor-opt-bool>
-						<div class="editor-option" ng-show="current.multi">
-							<label class="small">Multi value format</label>
-							<select class="input-medium" ng-model="current.multiFormat" ng-options="f for f in ['glob', 'regex values']"></select>
-						</div>
+				<div class="tight-form-section">
+					<h5>Display options</h5>
+					<div class="tight-form last">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" style="width: 100px">
+								Variable Label
+							</li>
+							<li>
+								<input type="text" class="input-medium tight-form-input" ng-model='current.label' placeholder=""></input>
+							</li>
+							<li class="tight-form-item last">
+								Hide label &nbsp;
+								<input class="cr1" id="current.hideLabel" type="checkbox" ng-model="current.hideLabel" ng-checked="current.hideLabel" change="runQuery()">
+								<label for="current.hideLabel" class="cr1"></label>
+							</li>
+						</ul>
+						<div class="clearfix"></div>
 					</div>
+				</div>
+			</div>
 
-					<div class="editor-row" style="margin: 15px 0">
-						<div class="editor-option" >
-							<label class="small">Variable values (shows max 20)</label>
-							<ul class="grafana-options-list">
-								<li ng-repeat="option in current.options | limitTo: 20">
-									{{option.text}}
-								</li>
-							</ul>
-						</div>
+			<div class="editor-row">
+				<div class="tight-form-section">
+					<h5>Preview of values (shows max 20)</h5>
+					<div class="tight-form last">
+						<ul class="tight-form-list">
+							<li class="tight-form-item" ng-repeat="option in current.options | limitTo: 20">
+								{{option.text}}
+							</li>
+						</ul>
+						<div class="clearfix"></div>
 					</div>
 				</div>
 			</div>
+		</div>
 
-			<button type="button" class="btn btn-success pull-right" ng-show="editor.index === 2" ng-click="update();">Update</button>
-			<button type="button" class="btn btn-success pull-right" ng-show="editor.index === 1" ng-click="add();">Add</button>
-
-			<div class="clearfix"></div>
+		<div class="editor-row" style="margin-top: 20px">
+			<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
+			<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
 		</div>
+
 	</div>
+</div>
 

public/css/less/forms.less

@@ -18,10 +18,12 @@ input[type="checkbox"].cr1 {
 
 label.cr1 {
   display: inline-block;
-  height: 19px;
+  height: 18px;
+  position: relative;
+  top: -2px;
   clear: none;
   text-indent: 2px;
-  margin: 0 0 1px 0;
+  margin: 0 0 0px 0;
   padding: 0 0 0 20px;
   vertical-align:middle;
   background: url(@checkboxImageUrl) left top no-repeat;

public/css/less/tightform.less

@@ -3,7 +3,6 @@
   border-left: 1px solid @grafanaTargetBorder;
   border-right: 1px solid @grafanaTargetBorder;
   background: @grafanaTargetBackground;
-  width: 100%;
 
   &:last-child, &.last {
     border-bottom: 1px solid @grafanaTargetBorder;
@@ -44,7 +43,7 @@
 }
 
 .tight-form-btn {
-  padding: 8px 12px;
+  padding: 7px 12px;
 }
 
 .tight-form-list {
@@ -206,3 +205,14 @@ select.tight-form-input {
     display: inline;
   }
 }
+
+.tight-form-section {
+  margin-bottom: 20px;
+  margin-right: 40px;
+  vertical-align: top;
+  display: inline-block;
+  .tight-form {
+    margin-left: 20px;
+  }
+}
+

public/css/less/variables.dark.less

@@ -70,7 +70,7 @@
 
 @headingsFontFamily:    inherit; // empty to use BS default, @baseFontFamily
 @headingsFontWeight:    bold;    // instead of browser default, bold
-@headingsColor:         @white; // empty to use BS default, @textColor
+@headingsColor:         @textColor; // empty to use BS default, @textColor
 @inputText:             @black;
 
 

public/test/test-main.js

@@ -29,7 +29,7 @@ require.config({
     crypto:                   '../vendor/crypto.min',
     spectrum:                 '../vendor/spectrum',
 
-    jquery:                   '../vendor/jquery/jquery-2.1.1.min',
+    jquery:                   '../vendor/jquery/jquery-2.1.3',
 
     bootstrap:                '../vendor/bootstrap/bootstrap',
     'bootstrap-tagsinput':    '../vendor/tagsinput/bootstrap-tagsinput',