Some clean up and polish of data source edit view

src/app/features/org/partials/datasourceEdit.html

@@ -9,39 +9,63 @@
 <div class="page-container">
 	<div class="page">
 		<h2 ng-show="isNew">Add data source</h2>
-		<h2 ng-show="!isNew">Edit {{current.name}}</h2>
+		<h2 ng-show="!isNew">Edit data source</h2>
 
 		<form name="editForm">
-			<div class="editor-row">
-				<div class="editor-option">
-					<label class="small">Data source name</label>
-					<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input>
-				</div>
-				<div class="editor-option">
-					<label class="small">Type</label>
-					<select class="input-large" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
-				</div>
-				<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
+						Name
+					</li>
+					<li>
+						<li>
+							<input type="text" class="input-xlarge tight-form-input" ng-model="current.name" placeholder="my data source name" required>
+						</li>
+					</li>
+					<li class="tight-form-item">
+						Default&nbsp;
+						<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
+						<label for="current.isDefault" class="cr1"></label>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
-
-			<div class="editor-row">
-				<div class="editor-option">
-					<label class="small">Url</label>
-					<input type="text" style="width: 450px" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
-				</div>
-				<div class="editor-option">
-					<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
-					<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
-				</div>
+			<div class="tight-form">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
+						Type
+					</li>
+					<li>
+						<select class="input-xlarge tight-form-input" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="tight-form last">
+				<ul class="tight-form-list">
+					<li class="tight-form-item" style="width: 80px">
+						Url
+					</li>
+					<li>
+						<input type="text" class="tight-form-input input-xlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
+					</li>
+					<li class="tight-form-item">
+					  Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
+					</li>
+					<li>
+						<select class="input-medium tight-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
 
 			<div ng-include="datasourceMeta.partials.config" ng-if="datasourceMeta.partials.config"></div>
-
 			<br>
-
-			<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="add()">Add</button>
-			<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="update()">Update</button>
-			<a class="btn btn-inverse" ng-show="!isNew" href="account/datasources">Cancel</a>
+			<div class="pull-right">
+				<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="add()">Add</button>
+				<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="update()">Update</button>
+				<a class="btn btn-inverse" ng-show="!isNew" href="datasources">Cancel</a>
+			</div>
 			<br>
 		</form>
 	</div>

src/app/panels/graph/axisEditor.html

@@ -142,7 +142,7 @@
 
 <div class="editor-row">
 	<div class="section">
-		<div class="tight-form">
+		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 80px">
 					<strong>Legend</strong>
@@ -176,7 +176,7 @@
 		</div>
 	</div>
 	<div class="section">
-		<div class="tight-form">
+		<div class="tight-form last">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 100px">
 					<strong>Legend values</strong>

src/app/plugins/datasource/elasticsearch/partials/config.html

@@ -1,11 +1,15 @@
-<div class="editor-row">
-	<div class="section">
-		<h5>Elastic search details</h5>
-		<div class="editor-option">
-			<label class="small">Index name</label>
-			<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
-		</div>
-	</div>
+<h2>Elastic search details</h2>
+
+<div class="tight-form last">
+	<ul class="tight-form-list">
+		<li class="tight-form-item" style="width: 80px">
+			Index name
+		</li>
+		<li>
+			<input type="text" class="tight-form-input input-xxlarge last" ng-model='current.database' placeholder="" required></input>
+		</li>
+	</ul>
+	<div class="clearfix"></div>
 </div>
 
 

src/app/plugins/datasource/influxdb_08/funcEditor.js

@@ -8,7 +8,7 @@ function (angular, _, $) {
 
   angular
     .module('grafana.directives')
-    .directive('influxdbFuncEditor', function($compile) {
+    .directive('influxdbFuncEditor08', function($compile) {
 
       var funcSpanTemplate = '<a gf-dropdown="functionMenu" class="dropdown-toggle" ' +
                              'data-toggle="dropdown">{{target.function}}</a><span>(</span>';

src/app/plugins/datasource/influxdb_08/partials/config.html

@@ -1,19 +1,37 @@
-<div class="editor-row">
-	<div class="section">
-		<h5>InfluxDB Details</h5>
-		<div class="editor-option">
-			<label class="small">Database name</label>
-			<input type="text" class="input-medium" required ng-model='current.database' placeholder=""></input>
-		</div>
-		<div class="editor-option">
-			<label class="small">User</label>
-			<input type="text" class="input-medium" ng-model='current.user' placeholder=""></input>
-		</div>
-		<div class="editor-option">
-			<label class="small">Password</label>
-			<input type="password" class="input-medium" ng-model='current.password' placeholder=""></input>
-		</div>
-	</div>
+<h2>InfluxDB Details</h2>
+
+<div class="tight-form">
+	<ul class="tight-form-list">
+		<li class="tight-form-item" style="width: 80px">
+			Database
+		</li>
+		<li>
+			<input type="text" class="tight-form-input input-xxlarge last" ng-model='current.database' placeholder="" required></input>
+		</li>
+	</ul>
+	<div class="clearfix"></div>
+</div>
+<div class="tight-form">
+	<ul class="tight-form-list">
+		<li class="tight-form-item" style="width: 80px">
+			User
+		</li>
+		<li>
+			<input type="text" class="tight-form-input input-xxlarge last" ng-model='current.user' placeholder="" required></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: 80px">
+			Password
+		</li>
+		<li>
+			<input type="text" class="tight-form-input input-xxlarge last" ng-model='current.password' placeholder="" required></input>
+		</li>
+	</ul>
+	<div class="clearfix"></div>
 </div>
 
 

src/app/plugins/datasource/influxdb_08/partials/query.editor.html

@@ -117,7 +117,7 @@
 					select
 				</li>
 				<li class="dropdown">
-					<span influxdb-func-editor class="tight-form-item tight-form-func">
+					<span influxdb-func-editor08 class="tight-form-item tight-form-func">
 					</span>
 				</li>
 

src/css/less/tightform.less

@@ -19,6 +19,12 @@
   }
 }
 
+.spaced-form {
+  .tight-form {
+    margin: 7px 0;
+  }
+}
+
 .borderless {
   .tight-form-item,
   .tight-form-input {
@@ -140,13 +146,13 @@ input[type=text].tight-form-clear-input {
 [type=email],
 [type=number],
 [type=password] {
-
   &.tight-form-input {
     border: none;
     border-right: 1px solid @grafanaTargetSegmentBorder;
     margin: 0px;
     border-radius: 0;
-    padding: 8px 4px;
+    padding: 18px 6px;
+    box-sizing: border-box;
     &.last {
       border-right: none;
     }
@@ -163,7 +169,7 @@ select.tight-form-input {
   margin: 0px;
   border-radius: 0;
   height: 36px;
-  padding: 8px 5px;
+  padding: 8px 3px;
   &.last {
     border-right: none;
   }