ux(forms): major simplification of norm-form markup and css

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

@@ -5,64 +5,48 @@
 </navbar>
 
 <div class="page-container">
-	<div class="page">
-		<h1 ng-show="isNew">Add data source</h1>
-		<h1 ng-show="!isNew">Edit data source</h1>
-		<p class="small" ng-show="isNew">This text will only appear on Add Data Source</p>
+	<h1 ng-show="isNew">Add data source</h1>
+	<h1 ng-show="!isNew">Edit data source</h1>
 
-		<form name="editForm">
-			<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 norm-form-input" ng-model="current.name" placeholder="My data source name" required>
-						</li>
-					</li>
-					<li class="norm-form-item trans">
-						<input class="cr1" id="current.isDefault" type="checkbox" ng-model="current.isDefault" ng-checked="current.isDefault">
-						<label for="current.isDefault" class="cr1">Default</label>
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+	<form name="editForm">
+		<div class="gf-form-group">
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">Name</span>
+				<input class="gf-form-input gf-size-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
 			</div>
-			<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 norm-form-input norm-form-auto" 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 class="gf-form">
+				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>
+			<br>
 
-			<rebuild-on-change property="datasourceMeta.id">
-				<plugin-component type="datasource-config-ctrl">
-				</plugin-component>
-			</rebuild-on-change>
-
-			<div ng-if="testing" style="margin-top: 25px">
-				<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-				<h5 ng-show="testing.done">Test results</h5>
-				<div class="alert-{{testing.status}} alert">
-					<div class="alert-title">{{testing.title}}</div>
-					<div ng-bind='testing.message'></div>
-				</div>
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">Type</span>
+				<select class="gf-form-input gf-size-auto" ng-model="current.type" ng-options="k as v.name for (k, v) in types" ng-change="typeChanged()"></select>
 			</div>
+		</div>
+
+		<rebuild-on-change property="datasourceMeta.id">
+			<plugin-component type="datasource-config-ctrl">
+			</plugin-component>
+		</rebuild-on-change>
 
-			<div class="" style="margin-top: 35px">
-				<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
-				<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
-				<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
-					Test Connection
-				</button>
-				<a class="btn-text" href="datasources">Cancel</a>
+		<div ng-if="testing" style="margin-top: 25px">
+			<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
+			<h5 ng-show="testing.done">Test results</h5>
+			<div class="alert-{{testing.status}} alert">
+				<div class="alert-title">{{testing.title}}</div>
+				<div ng-bind='testing.message'></div>
 			</div>
-			<br>
-		</form>
-	</div>
+		</div>
+
+		<div class="" style="margin-top: 35px">
+			<button type="submit" class="btn btn-success" ng-show="isNew" ng-click="saveChanges()">Add</button>
+			<button type="submit" class="btn btn-success" ng-show="!isNew" ng-click="saveChanges()">Save</button>
+			<button type="submit" class="btn btn-primary" ng-show="!isNew" ng-click="saveChanges(true)">
+				Test Connection
+			</button>
+			<a class="btn-text" href="datasources">Cancel</a>
+		</div>
+		<br>
+	</form>
 </div>

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

@@ -1,64 +1,47 @@
-<br>
+
 <h3>Http settings</h3>
-<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="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>
-		</ul>
-		<div class="clearfix"></div>
+
+<div class="gf-form-group">
+	<div class="gf-form">
+		<span class="gf-form-label gf-size-s">Url</span>
+		<input class="gf-form-input gf-size-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>
 	</div>
-	<div class="norm-form">
-		<ul class="norm-form-list">
-			<li class="norm-form-item" style="width: 80px">
-				Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
-			</li>
-			<li>
-				<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>
+	<br>
+
+	<div class="gf-form">
+		<span class="gf-form-label gf-size-s">
+			Access <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</tip>
+		</span>
+		<select class="gf-form-input gf-size-auto" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
 	</div>
-	<div class="norm-form">
-		<ul class="norm-form-list">
-			<li class="norm-form-item" style="width: 80px">
-				Http Auth
-			</li>
-			<li class="norm-form-item trans">
-				<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
-			</li>
-			<li class="norm-form-item trans">
-				<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox><tip>Tip for with credentials</tip>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
+	<br>
+
+	<div class="gf-form">
+		<span class="gf-form-label gf-size-s">
+			Http Auth
+		</span>
 	</div>
-	<div class="norm-form" ng-if="current.basicAuth">
-		<ul class="norm-form-list">
-			<li class="norm-form-item small" style="width: 80px">
-				User
-			</li>
-			<li ng-if="current.basicAuth">
-				<input type="text" class="input-xlarge norm-form-input" ng-model='current.basicAuthUser' placeholder="user" required></input>
-			</li>
-		</ul>
-	<div class="clearfix"></div>
+	<span class="gf-form">
+		<editor-checkbox text="Basic Auth" model="current.basicAuth"></editor-checkbox>
+	</span>
+	<span class="gf-form">
+		<editor-checkbox text="With Credentials" model="current.withCredentials"></editor-checkbox><tip>Tip for with credentials</tip>
+	</span>
+	<br>
+
+	<div class="gf-form" ng-if="current.basicAuth">
+		<span class="gf-form-label gf-size-s">
+			User
+		</span>
+		<input class="gf-form-input gf-size-xl" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
 	</div>
-	<div class="norm-form" ng-if="current.basicAuth">
-		<ul class="norm-form-list">
-			<li class="norm-form-item small" style="width: 80px" ng-if="current.basicAuth">
-				Password
-			</li>
-			<li ng-if="current.basicAuth">
-				<input type="password" class="input-xlarge norm-form-input" ng-model='current.basicAuthPassword' placeholder="password" required></input>
-			</li>
-		</ul>
-		<div class="clearfix"></div>
+	<br>
+
+	<div class="gf-form" ng-if="current.basicAuth">
+		<span class="gf-form-label gf-size-s">
+			Passord
+		</span>
+		<input class="gf-form-input gf-size-xl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
 	</div>
 </div>
 
-<br>

public/app/features/org/partials/orgDetails.html

@@ -6,91 +6,58 @@
 
 		<h1>Preferences</h1>
 
-		<form name="orgForm">
-			<div class="norm-form last">
-				<ul class="norm-form-list">
-					<li class="norm-form-item" style="width: 100px">
-						Name
-					</li>
-					<li>
-						<input type="text" required ng-model="org.name" class="norm-form-input last" style="width: 475px">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+		<form name="orgForm" class="gf-form-group">
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">Name</span>
+				<input class="gf-form-input gf-size-xxl" type="text" required ng-model="org.name">
 			</div>
 
-			<br>
-			<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
-			<br>
+			<div class="gf-form-button-row">
+				<button type="submit" class="btn btn-success" ng-click="update()">Update</button>
+			</div>
 		</form>
 
-		<section class="simple-box">
-			<h3 class="">Address</h3>
-		</section>
+		<h3>Address</h3>
 
-		<form name="addressForm">
-			<div class="norm-form">
-				<ul class="norm-form-list">
-					<li class="norm-form-item" style="width: 100px">
-						Address 1
-					</li>
-					<li>
-						<input type="text" ng-model="address.address1" class="norm-form-input" style="width:193px">
-					</li>
-					<li class="norm-form-item" style="width: 75px">
-						Address 2
-					</li>
-					<li>
-						<input type="text" ng-model="address.address2" class="norm-form-input last" style="width:193px">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
-			</div>
-			<div class="norm-form">
-				<ul class="norm-form-list">
-					<li class="norm-form-item" style="width: 100px">
-						City
-					</li>
-					<li>
-						<input type="text" ng-model="address.city" class="norm-form-input" style="width: 193px">
-					</li>
-					<li class="norm-form-item" style="width: 75px">
-						Postal code
-					</li>
-					<li>
-						<input type="text" ng-model="address.zipCode" class="input-medium norm-form-input last" style="width: 193px">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+		<form name="addressForm" class="gf-form-group">
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">Address1</span>
+				<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address1">
 			</div>
-			<div class="norm-form last">
-				<ul class="norm-form-list">
-					<li class="norm-form-item" style="width: 100px">
-						State
-					</li>
-					<li>
-						<input type="text" ng-model="address.state" class="norm-form-input" style="width: 193px">
-					</li>
-					<li class="norm-form-item" style="width: 75px">
-						Country
-					</li>
-					<li>
-						<input type="text" ng-model="address.country" class="norm-form-input last" style="width: 193px">
-					</li>
-				</ul>
-				<div class="clearfix"></div>
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">Address2</span>
+				<input class="gf-form-input gf-size-xl" type="text" ng-model="address.address2">
 			</div>
-
 			<br>
-			<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
+
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">City</span>
+				<input class="gf-form-input gf-size-xl" type="text" ng-model="address.city">
+			</div>
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">Postal code</span>
+				<input class="gf-form-input gf-size-xl" type="text" ng-model="address.zipCode">
+			</div>
 			<br>
+
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">State</span>
+				<input class="gf-form-input gf-size-xl" type="text" ng-model="address.state">
+			</div>
+			<div class="gf-form">
+				<span class="gf-form-label gf-size-s">Country</span>
+				<input class="gf-form-input gf-size-xl" type="text" ng-model="address.country">
+			</div>
+
+			<div class="gf-form-button-row">
+				<button type="submit" class="btn btn-success" ng-click="updateAddress()">Update</button>
+			</div>
 		</form>
 	</div>
 
 	<h3>Org. Users</h3>
 	<a href="org/users" class="btn btn-inverse">Manage</a>
 
-
 </div>
 
 

public/less/bootswatch.dark.less

@@ -103,64 +103,6 @@ hr {
 	}
 }
 
-@media (max-width: @navbarCollapseWidth) {
-
-	.navbar .nav-collapse {
-
-		.nav li > a {
-			border: none;
-			color: @grayLighter;
-			font-weight: normal;
-			text-shadow: none;
-
-			&:hover {
-				border: none;
-				background-color: @blue;
-			}
-		}
-
-		.nav .active > a {
-			border: none;
-			background-color: @blue;
-		}
-
-		.dropdown-menu a:hover {
-			background-color: @blue;
-		}
-
-		.navbar-form,
-		.navbar-search {
-			border-top: none;
-			border-bottom: none;
-		}
-
-		.nav-header {
-			color: rgba(128, 128, 128, 0.6);
-		}
-	}
-
-	.navbar-inverse .nav-collapse {
-
-		.nav li > a:hover {
-			background-color: #111;
-		}
-
-		.nav .active > a {
-			background-color: #111;
-		}
-
-		.nav li.dropdown.open > .dropdown-toggle,
-		.nav li.dropdown.active > .dropdown-toggle,
-		.nav li.dropdown.open.active > .dropdown-toggle {
-			background-color: #111;
-		}
-	}
-}
-
-.dropdown-menu {
-	.border-radius(0);
-}
-
 
 div.subnav {
 

public/less/forms.less

@@ -33,14 +33,6 @@ input[type="checkbox"]:checked+label {
   background: url(@checkboxImageUrl) 0px -21px no-repeat;
 }
 
-.gf-form {
-  padding-bottom: 10px;
-  .checkbox-label {
-    padding-left: 7px;
-    display: inline;
-  }
-}
-
 .gf-fluid-input {
   border: none;
   display: block;

public/less/normform.less

@@ -1,214 +1,68 @@
-.norm-form {
-  border-top: 3px solid @pageBackground;
-  // border-left: 3px solid @pageBackground;
-  // border-right: 3px solid @pageBackground;
-  background: transparent;
-
-  &.last {
-    border-bottom: 1px solid @pageBackground;
-  }
-
-  &.borderless {
-    background: transparent;
-    border: none;
-  }
+.gf-form {
+  margin-top: 3px;
+  margin-right: 3px;
+  display: inline-block;
 
   .checkbox-label {
     display: inline;
-    padding-right: 4px;
-    margin-bottom: 0;
-    margin-left: 5px;
+    padding: 8px 7px 8px 4px;
   }
-}
-
-.norm-form-container-no-item-borders {
-  border: 1px solid @pageBackground;
-  border-bottom: none;
-
-  .norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input  {
-    border: none;
+  .cr1 {
+    margin-left: 8px;
   }
 }
 
-
-.spaced-form {
-  .norm-form {
-    margin: 7px 0;
-  }
+.gf-form-group {
+  margin-bottom: 20px;
 }
 
-.borderless {
-  .norm-form-item,
-  .norm-form-input {
-    border: none;
-  }
+.gf-form-button-row {
+  margin-top: 15px;
+  margin-bottom: 10px;
 }
 
-.norm-form-container {
-  border-bottom: 1px solid @pageBackground;
-}
-
-.norm-form-btn {
-  padding: 7px 12px;
-}
-
-.norm-form-list {
-  list-style: none;
-  margin: 0;
-  >li {
-    float: left;
-    background: @labelBackground;
-  }
-  & .trans {
-    background: transparent;
-  }
-}
-
-.norm-form-flex-wrapper {
-  display: flex;
-  flex-direction: row;
-  float: none !important;
-}
-
-.grafana-metric-options {
-  margin-top: 25px;
-}
-
-.norm-form-item {
-  padding: 8px 7px;
+.gf-form-label {
+  background-color: @labelBackground;
   display: inline-block;
-  font-weight: normal;
-  border-right: 3px solid @pageBackground;
-  color: @grayLighter;
-  display: inline-block;
-  .small;
-
-  .has-open-function & {
-    padding-top: 25px;
-  }
-
-  .norm-form-disabled & {
-    color: @grafanaTargetColorHide;
-  }
-
-  &:hover, &:focus {
-    text-decoration: none;
-  }
-
-  &a:hover {
-    background: @grafanaTargetFuncBackground;
-  }
-
-  &.last {
-    border-right: none;
-  }
-}
-
-
-.norm-form-item-icon {
-  i {
-    width: 15px;
-    text-align: center;
-    display: inline-block;
-  }
-}
-
-.norm-form-func {
-  background: @grafanaTargetFuncBackground;
-  > a {
-    color: @grafanaTargetColor;
-  }
-  > a:hover {
-    color: @linkColor;
-  }
-
-  &.show-function-controls {
-    padding-top: 5px;
-    min-width: 100px;
-    text-align: center;
-  }
-}
-
-input[type=text].norm-form-func-param {
-  background: transparent;
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-input[type=text].norm-form-clear-input {
   padding: 8px 7px;
-  border: none;
-  margin: 0px;
-  background: transparent;
-  color: @grafanaTargetColor;
-  border-radius: 0;
-  border-right: 2px solid @pageBackground;
+  .small;
 }
 
 [type=text],
 [type=email],
 [type=number],
 [type=password], {
-  &.norm-form-input {
+  &.gf-form-input {
     border: none;
-    border-right: 3px solid @pageBackground;
     margin: 0px;
     border-radius: 0;
     padding: 8px 6px;
     height: 100%;
     box-sizing: border-box;
     font-size: 15px;
-    &.last {
-      border-right: none;
-    }
   }
 }
 
-input[type=checkbox].norm-form-checkbox {
+input[type=checkbox].gf-form-checkbox {
   margin: 0;
 }
 
-.norm-form-textarea {
-  height: 200px;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-select.norm-form-input {
+select.gf-form-input {
   border: none;
-  border-right: 3px solid @pageBackground;
   margin: 0px;
   border-radius: 0;
   height: 36px;
-  padding: 9px 3px;    
+  padding: 9px 3px;
   font-size: 15px;
-  &.last {
-    border-right: none;
-  }
-}
-
-.norm-form-radio {
-  input[type=radio] {
-    margin: 0;
-  }
-  label {
-    display: inline;
-  }
 }
-.norm-form-item-large { width: 115px; }
-.norm-form-item-xlarge { width: 150px; }
-.norm-form-item-xxlarge { width: 200px; }
 
-.norm-form-input.norm-form-item-xxlarge {
-  width: 215px;
-}
+.gf-size-xs { width: 60px;}
+.gf-size-s { width: 80px;}
+.gf-size-ms { width: 100px;}
+.gf-size-m { width: 120px; }
+.gf-size-l { width: 150px; }
+.gf-size-xl { width: 200px; }
+.gf-size-xxl { width: 300px; }
+.gf-size-xxxl { width: 400px; }
 
-.norm-form-auto {
-  width: auto;
-}
-
-.norm-form-inner-box {
-  margin: 20px 0 20px 148px;
-  display: inline-block;
-}
+.gf-size-auto { width: auto; }

public/less/overrides.less

@@ -1,12 +1,3 @@
-// Media queries
-// ---------------------
-@media (max-width: 767px) {
-  div.panel {
-    width: 100% !important;
-    padding: 0px !important;
-  }
-}
-
 // Containers
 // ---------------------
 .container-fluid {

public/less/page.less

@@ -25,8 +25,7 @@
 .page-container {
   background-color: @pageBackground;
   position: relative;
-  padding: 25px 56px;
-  padding: 25px 56px;
+  padding: 25px 56px 10px 56px;
   max-width: 1060px;
   margin-left: 0;
   height: 100%;

public/less/variables.light.less

@@ -91,7 +91,7 @@
 
 @headingsFontFamily:    inherit; // inherit. empty to use BS default, @baseFontFamily
 @headingsFontWeight:    normal;    // instead of browser default, bold
-@headingsFontStyle:    	italic;
+@headingsFontStyle:    	normal;
 @headingsColor:         @textColor; // empty to use BS default, @textColor
 
 

public/vendor/bootstrap/less/responsive-767px-max.less

@@ -5,23 +5,6 @@
 
 @media (max-width: 767px) {
 
-  // Padding to set content in a bit
-  body {
-    padding-left: 20px;
-    padding-right: 20px;
-  }
-  // Negative indent the now static "fixed" navbar
-  .navbar-fixed-top,
-  .navbar-fixed-bottom,
-  .navbar-static-top {
-    margin-left: -20px;
-    margin-right: -20px;
-  }
-  // Remove padding on container given explicit padding set on body
-  .container-fluid {
-    padding: 0;
-  }
-
   // TYPOGRAPHY
   // ----------
   // Reset horizontal dl