ux(templating): tight-form -> gf-form

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

@@ -8,15 +8,11 @@
 		<div class="tabs">
 			<ul class="nav nav-tabs">
 				<li ng-class="{active: mode === 'list'}">
-					<a ng-click="mode = 'list';">
-						Variables
-					</a>
+					<a ng-click="mode = 'list';">Variables</a>
 				</li>
 
 				<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
-					<a>
-						{{current.name}}
-					</a>
+					<a>{{current.name}}</a>
 				</li>
 
 				<li ng-class="{active: mode === 'new'}">
@@ -78,249 +74,144 @@
 		</div>
 
 		<div ng-if="mode === 'edit' || mode === 'new'">
-			<div class="editor-row">
-				<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-large 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>
+			<h5>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>
+					</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="editor-row">
-				<div class="tight-form-section">
-					<h5>Value Options</h5>
+			<h5>Value Options</h5>
 
-					<div ng-show="current.type === 'interval'">
-						<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">
-									<editor-checkbox text="Include auto interval" model="current.auto" change="runQuery()"></editor-checkbox>
-								</li>
-								<li class="tight-form-item" ng-show="current.auto">
-									Auto interval steps <tip>How many times should the current time range be divided to calculate the value</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 ng-show="current.type === 'interval'" class="gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Values</span>
+					<input type="text" class="gf-form-input max-width-28" placeholder="name" ng-model='current.query' placeholder="1m,10m,1h,6h,1d,7d" ng-model-onblur ng-change="runQuery()"></input>
+				</div>
+				<div class="gf-form">
+					<editor-checkbox text="Include auto interval" model="current.auto" change="runQuery()"></editor-checkbox>
+					<span class="gf-form-label" ng-show="current.auto">
+						Auto interval steps <tip>How many times should the current time range be divided to calculate the value</tip>
+					</span>
+					<div class="gf-form-select-wrapper max-width-10">
+						<select class="gf-form-input" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
 					</div>
+				</div>
+			</div>
 
-					<div ng-show="current.type === 'custom'">
-						<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 class="tight-form">
-              <ul class="tight-form-list">
-                <li class="tight-form-item" style="width: 100px;">
-                  <editor-checkbox text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
-                </li>
-                <li ng-show="current.includeAll">
-                  <input type="text" class="input-xlarge tight-form-input" style="width:364px" 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', 'lucene', 'pipe']"></select>
-                </li>
-              </ul>
-              <div class="clearfix"></div>
-            </div>
+			<div ng-show="current.type === 'custom'" class="gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label width-13">Values seperated by comma</span>
+					<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>
+
+			<div ng-show="current.type === 'query'" class="gf-form-group">
+				<div class="gf-form">
+					<span class="gf-form-label width-7">Query</span>
+					<input type="text" class="gf-form-input" ng-model='current.query' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
+				</div>
+				<div class="gf-form">
+					<span class="gf-form-label width-7">
+						Regex
+						<tip>Optional, if you want to extract part of a series name or metric node segment</tip>
+					</span>
+					<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>
 					</div>
+				</div>
 
-					<div ng-show="current.type === 'query'">
-
-						<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: 588px" class="input-xxlarge tight-form-input last" ng-model='current.query' placeholder="metric name or tags query" 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: 588px" 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="tight-form">
-							<ul class="tight-form-list">
-								<li class="tight-form-item" style="width: 100px;">
-									<editor-checkbox text="All value" model="current.includeAll" change="runQuery()"></editor-checkbox>
-								</li>
-								<li ng-show="current.includeAll">
-									<input type="text" class="input-xlarge tight-form-input" style="width:364px" 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', 'lucene', 'pipe']"></select>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-
-						<div class="tight-form last">
-							<ul class="tight-form-list">
-								<li class="tight-form-item last">
-									<editor-checkbox text="Refresh on 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>
-								</li>
-							</ul>
-							<div class="clearfix"></div>
-						</div>
-					</div>
+				<div class="gf-form">
+					<editor-checkbox class="width-13" text="Refresh on 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="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;">
-								<editor-checkbox text="Enable" model="current.multi" change="runQuery()"></editor-checkbox>
-							</li>
-							<li class="tight-form-item" ng-show="current.multi">
-								Multi format
-							</li>
-							<li ng-show="current.multi">
-								<select class="input-medium tight-form-input last" ng-model="current.multiFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'regex values', 'lucene', 'pipe']"></select>
-							</li>
-						</ul>
-						<div class="clearfix"></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="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">
-								<editor-checkbox text="Hide label" model="current.hideLabel" change="runQuery()"></editor-checkbox>
-							</li>
-						</ul>
-						<div class="clearfix"></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>
 				</div>
 			</div>
 
-			<div class="editor-row" ng-if="current.type === 'query'">
-				<div class="tight-form-section">
-					<h5>Value groups/tags (Experimental feature)</h5>
-					<div class="tight-form last" ng-if="current.useTags">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 135px">
-								Tags query
-							</li>
-							<li>
-								<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form" ng-if="current.useTags">
-						<ul class="tight-form-list">
-							<li class="tight-form-item" style="width: 135px;">
-								Tag values query
-							</li>
-							<li>
-								<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
-					<div class="tight-form">
-						<ul class="tight-form-list">
-							<li class="tight-form-item last">
-								<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
-							</li>
-						</ul>
-						<div class="clearfix"></div>
-					</div>
+			<div class="gf-form-group" ng-if="current.type === 'query'">
+				<h5>Value groups/tags (Experimental feature)</h5>
+				<div class="gf-form">
+					<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
+				</div>
+				<div class="gf-form last" ng-if="current.useTags">
+					<span class="gf-form-label width-10">Tags query</span>
+					<input type="text" class="gf-form-input" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur></input>
+				</div>
+				<div class="gf-form" ng-if="current.useTags">
+					<li class="gf-form-label width-10">Tag values query</li>
+					<input type="text" class="gf-form-input" ng-model='current.tagValuesQuery' placeholder="apps.$tag.*" ng-model-onblur></input>
 				</div>
 			</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 class="gf-form-group">
+				<h5>Preview of values (shows max 20)</h5>
+				<div class="gf-form">
+					<span class="gf-form-label" ng-repeat="option in current.options | limitTo: 20">
+						{{option.text}}
+					</span>
 				</div>
 			</div>
 		</div>
 
-		<div class="editor-row" style="margin-top: 20px">
+		<div class="gf-form-button-row" style="margin-top: 20px">
 			<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>
-
 	</div>
 </div>