From 41b775561a677f57024ca75d9cac5000bf279dbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 16 Feb 2016 07:57:58 +0100
Subject: [PATCH] ux(): datasource form tweaks

---
 .../datasources/partials/http_settings.html   |  4 +-
 .../features/profile/partials/password.html   | 20 ++---
 .../elasticsearch/partials/config.html        | 86 +++++++------------
 public/sass/_grafana.scss                     |  2 -
 public/sass/_variables.dark.scss              |  2 +-
 .../{_grid-variables.scss => _variables.scss} |  0
 public/sass/grafana.dark.scss                 |  5 +-
 public/sass/grafana.light.scss                |  5 +-
 8 files changed, 48 insertions(+), 76 deletions(-)
 rename public/sass/{_grid-variables.scss => _variables.scss} (100%)

diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html
index ffbba17865e..f12e3b4e4c7 100644
--- a/public/app/features/datasources/partials/http_settings.html
+++ b/public/app/features/datasources/partials/http_settings.html
@@ -1,7 +1,8 @@
 
-<h3>Http settings</h3>
 
 <div class="gf-form-group">
+	<h3>Http settings</h3>
+
 	<div class="gf-form">
 		<span class="gf-form-label gf-size-xs">Url</span>
 		<input class="gf-form-input gf-size-max-xxl" type="text" ng-model='current.url' placeholder="http://my.server.com:8080" ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
@@ -13,7 +14,6 @@
 		</span>
 		<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
 	</div>
-	<br>
 
 	<div class="gf-form">
 		<span class="gf-form-label gf-size-xs">
diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html
index fd5aaa82065..fda68d2751d 100644
--- a/public/app/features/profile/partials/password.html
+++ b/public/app/features/profile/partials/password.html
@@ -2,27 +2,25 @@
 </navbar>
 
 <div class="page-container">
-
-	<h1>Change password</h1>
+	<div class="page-header">
+		<h1>Change password</h1>
+	</div>
 
 	<form name="userForm" class="gf-form-group">
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-m">Old Password</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-model="command.oldPassword">
+			<span class="gf-form-label gf-size-md">Old Password</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="command.oldPassword">
 		</div>
-		<br>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-m">New Password</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-minlength="4"  ng-model="command.newPassword">
+			<span class="gf-form-label gf-size-md">New Password</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.newPassword">
 		</div>
-		<br>
 
 		<div class="gf-form">
-			<span class="gf-form-label gf-size-m">Confirm Password</span>
-			<input class="gf-form-input gf-size-xxl" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
+			<span class="gf-form-label gf-size-md">Confirm Password</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-minlength="4"  ng-model="command.confirmNew">
 		</div>
-		<br>
 
 		<div class="gf-form-button-row">
 			<button type="submit" class="btn btn-success" ng-click="changePassword()">Change Password</button>
diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html
index 05df80143e3..6190ee8ebe6 100644
--- a/public/app/plugins/datasource/elasticsearch/partials/config.html
+++ b/public/app/plugins/datasource/elasticsearch/partials/config.html
@@ -1,64 +1,38 @@
 <datasource-http-settings current="ctrl.current">
 </datasource-http-settings>
 
-<h4>Elasticsearch details</h4>
+<div class="gf-form-group">
+	<h3>Elasticsearch details</h3>
+
+	<div class="gf-form-inline">
+		<div class="gf-form gf-size-max-xxxl">
+			<span class="gf-form-label gf-size-md">Index name</span>
+			<input class="gf-form-input" type="text" ng-model='ctrl.current.database' placeholder="" required></input>
+		</div>
+
+		<div class="gf-form gf-size-xl">
+			<span class="gf-form-label gf-size-md">Pattern</span>
+			<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
+		</div>
+	</div>
+
+	<div class="gf-form gf-size-max-xxxl">
+		<span class="gf-form-label gf-size-md">Time field name</span>
+		<input class="gf-form-input" type="text"  ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></input>
+	</div>
+
+	<div class="gf-form">
+		<span class="gf-form-label gf-size-md">Version</span>
+		<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
+	</div>
 
-<div class="tight-form">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 144px">
-			Index name
-		</li>
-		<li>
-			<input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.database' placeholder="" required></input>
-		</li>
-		<li class="tight-form-item">
-			Pattern
-		</li>
-		<li>
-			<select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.interval" ng-options="f.value as f.name for f in ctrl.indexPatternTypes" ng-change="ctrl.indexPatternTypeChanged()" ></select>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
-</div>
-<div class="tight-form">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 144px">
-			Time field name
-		</li>
-		<li>
-			<input type="text" class="tight-form-input input-xlarge" ng-model='ctrl.current.jsonData.timeField' placeholder="" required ng-init=""></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: 144px">
-			Version
-		</li>
-		<li>
-			<select class="input-medium tight-form-input" ng-model="ctrl.current.jsonData.esVersion" ng-options="f.value as f.name for f in ctrl.esVersions"></select>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
 </div>
 
-<br>
+<div class="gf-form-group">
+	<h4>Default query settings</h4>
 
-<h4>Default query settings</h4>
-
-<div class="tight-form last">
-	<ul class="tight-form-list">
-		<li class="tight-form-item" style="width: 200px">
-			Group by time interval
-		</li>
-		<li>
-			<input type="text" class="input-medium tight-form-input input-xlarge" ng-model="ctrl.current.jsonData.timeInterval"
-			spellcheck='false' placeholder="example: >10s">
-		</li>
-		<li class="tight-form-item">
-			<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >10s'" data-placement="right"></i>
-		</li>
-	</ul>
-	<div class="clearfix"></div>
+	<div class="gf-form">
+		<span class="gf-form-label">Group by time interval</span>
+		<input class="gf-form-input gf-size-max-md" type="text" ng-model="ctrl.current.jsonData.timeInterval" spellcheck='false' placeholder="example: >10s">
+	</div>
 </div>
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 40e6eeb78d0..ddc27cf352e 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -1,5 +1,3 @@
-@import "grid-variables";
-
 // MIXINS
 @import "mixins/mixins";
 @import "mixins/buttons";
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 4268b6147f0..fd8f4327dac 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -34,7 +34,7 @@ $critical:              #ed2e18;
 // grafana Variables
 // -------------------------
 $grafanaPanelBackground: 	$grayDarker;
-$grafanaPanelBorder: 		solid 1px $grayDark;
+$grafanaPanelBorder: 		  solid 1px $grayDark;
 $grafanaTriggerBorder:		solid 1px #555;
 
 // Graphite Target Editor
diff --git a/public/sass/_grid-variables.scss b/public/sass/_variables.scss
similarity index 100%
rename from public/sass/_grid-variables.scss
rename to public/sass/_variables.scss
diff --git a/public/sass/grafana.dark.scss b/public/sass/grafana.dark.scss
index 24341125549..53193d213e6 100644
--- a/public/sass/grafana.dark.scss
+++ b/public/sass/grafana.dark.scss
@@ -1,2 +1,3 @@
-@import "_variables.dark.scss";
-@import "_grafana.scss";
+@import "variables";
+@import "variables.dark";
+@import "grafana";
diff --git a/public/sass/grafana.light.scss b/public/sass/grafana.light.scss
index f44df3ec9a0..e03d24470e6 100644
--- a/public/sass/grafana.light.scss
+++ b/public/sass/grafana.light.scss
@@ -1,2 +1,3 @@
-@import "_variables.light.scss";
-@import "_grafana.scss";
+@import "variables";
+@import "variables.light";
+@import "grafana";