Beginnings of form restyling, nowhere near merge yet

.bra.toml

@@ -3,7 +3,7 @@ init_cmds = [
   ["go", "build", "-o", "./bin/grafana-server"],
 	["./bin/grafana-server"]
 ]
-watch_all = true
+watch_all = false
 watch_dirs = [
 	"$WORKDIR/pkg",
 	"$WORKDIR/public/views",

package.json

@@ -32,6 +32,7 @@
     "grunt-git-describe": "~2.3.2",
     "grunt-karma": "~0.12.1",
     "grunt-ng-annotate": "^1.0.1",
+    "grunt-notify": "^0.4.3",
     "grunt-string-replace": "~1.2.1",
     "grunt-systemjs-builder": "^0.2.5",
     "grunt-tslint": "^3.0.1",

public/app/features/datasources/partials/edit.html

@@ -11,17 +11,17 @@
 		<h2 ng-show="!isNew">Edit data source</h2>
 
 		<form name="editForm">
-			<div class="tight-form">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 80px">
+			<div class="norm-form">
+				<ul class="norm-form-list">
+					<li class="norm-form-item small" 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>
+							<input type="text" class="input-xlarge norm-form-input" ng-model="current.name" placeholder="my data source name" required>
 						</li>
 					</li>
-					<li class="tight-form-item">
+					<li class="norm-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>
@@ -29,13 +29,13 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="tight-form last">
-				<ul class="tight-form-list">
-					<li class="tight-form-item" style="width: 80px">
+			<div class="norm-form last">
+				<ul class="norm-form-list">
+					<li class="norm-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>
+						<select class="input-xlarge norm-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>

public/app/features/datasources/partials/http_settings.html

@@ -1,53 +1,53 @@
 <br>
 <h4>Http settings</h4>
-<div class="tight-form-container">
-	<div class="tight-form">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 80px">
+<div class="norm-form-container">
+	<div class="norm-form">
+		<ul class="norm-form-list">
+			<li class="norm-form-item" style="width: 80px">
 				Url
 			</li>
 			<li>
-				<input type="text" class="tight-form-input input-xlarge" 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>
+				<input type="text" class="norm-form-input input-xlarge" 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>
 			</li>
-			<li class="tight-form-item">
+			<li class="norm-form-item">
 				Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
 			</li>
 			<li>
-				<select class="input-medium tight-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
+				<select class="input-medium norm-form-input" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
 			</li>
 		</ul>
 		<div class="clearfix"></div>
 	</div>
-	<div class="tight-form">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 80px">
+	<div class="norm-form">
+		<ul class="norm-form-list">
+			<li class="norm-form-item" style="width: 80px">
 				Http Auth
 			</li>
-			<li class="tight-form-item">
+			<li class="norm-form-item">
 				<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
 			</li>
-			<li class="tight-form-item">
+			<li class="norm-form-item">
 				<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox>
 			</li>
 		</ul>
 		<div class="clearfix"></div>
 	</div>
-	<div class="tight-form" ng-if="current.basicAuth">
-		<ul class="tight-form-list">
-			<li class="tight-form-item" style="width: 80px">
+	<div class="norm-form" ng-if="current.basicAuth">
+		<ul class="norm-form-list">
+			<li class="norm-form-item" style="width: 80px">
 				<i class="fa fa-remove invisible"></i>
 			</li>
-			<li class="tight-form-item">
+			<li class="norm-form-item">
 				User
 			</li>
 			<li ng-if="current.basicAuth">
-				<input type="text" class="tight-form-input input-medium" style="width: 136px" ng-model='current.basicAuthUser' placeholder="user" required></input>
+				<input type="text" class="norm-form-input input-medium" style="width: 136px" ng-model='current.basicAuthUser' placeholder="user" required></input>
 			</li>
-			<li class="tight-form-item" style="width: 66px" ng-if="current.basicAuth">
+			<li class="norm-form-item" style="width: 66px" ng-if="current.basicAuth">
 				Password
 			</li>
 			<li ng-if="current.basicAuth">
-				<input type="password" class="tight-form-input input-medium" ng-model='current.basicAuthPassword' placeholder="password" required></input>
+				<input type="password" class="norm-form-input input-medium" ng-model='current.basicAuthPassword' placeholder="password" required></input>
 			</li>
 		</ul>
 		<div class="clearfix"></div>

public/less/bootswatch.dark.less

@@ -33,7 +33,7 @@ body {
 	height: 100%;
 	//#gradient > .vertical (@bodyBackground, #252A30);
 	//background: @bodyBackground;
-	background: @bodyBackground;
+	background: @nonDashBodyBackground;
 	// url('../img/cubes.png') repeat right top;
 }
 

public/less/filter-table.less

@@ -18,8 +18,8 @@
 }
 
 .filter-table tr {
-  background: @grafanaPanelBackground;
-  border-bottom: 2px solid @bodyBackground;
+  background: @grafanaListBackground;
+  border-bottom: 2px solid @nonDashBodyBackground;
 }
 
 .filter-table th {

public/less/grafana.less

@@ -12,6 +12,7 @@
 @import "panel.less";
 @import "forms.less";
 @import "tightform.less";
+@import "normform.less";
 @import "sidemenu.less";
 @import "navbar.less";
 @import "gfbox.less";
@@ -405,6 +406,6 @@
     border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%);
     border-image-slice: 1;
     border-bottom: 2px solid transparent;
-    padding: 1.2rem 3rem 0.8rem 3rem;
+    padding: 1.2rem .2rem .4rem .2rem;
   }
 }

public/less/variables.dark.less

@@ -53,6 +53,7 @@
 // Scaffolding
 // -------------------------
 @bodyBackground:        rgb(22,22,22);
+@nonDashBodyBackground: @grayDarker;
 @textColor:             @grayLighter;
 
 // Links
@@ -156,6 +157,8 @@
 @inputDisabledBackground:       #555;
 @formActionsBackground:         transparent;
 @inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+@labelBackground:				@grayDark;
+
 
 // Sidemenu
 // -------------------------

public/less/variables.light.less

@@ -33,9 +33,9 @@
 
 // Status colors
 // -------------------------
-@online:                #10a345;
-@warn:                  #ffc03c;
-@critical:              #ed2e18;
+@online:                #01A64F;
+@warn:                  #F79520;
+@critical:              #EC2128;
 
 // grafana Variables
 // -------------------------
@@ -66,6 +66,7 @@
 // Scaffolding
 // -------------------------
 @bodyBackground:        #EFEFEF;
+@nonDashBodyBackground: @grayLighter;
 @textColor:             @gray;
 
 // Links
@@ -170,6 +171,8 @@
 @formActionsBackground:         #f5f5f5;
 @inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 @inputText:                     #020202;
+@labelBackground:				#f8f8f8;
+
 
 // Sidemenu
 // -------------------------