ux(): trying out flexbox for new form styles

public/app/core/directives/misc.js

@@ -69,7 +69,8 @@ function (angular, coreModule, kbn) {
           ' <label for="' + scope.$id + model + '" class="cr1"></label>';
 
         template = template + label;
-        elem.replaceWith($compile(angular.element(template))(scope));
+        elem.addClass('gf-form-checkbox');
+        elem.html($compile(angular.element(template))(scope));
       }
     };
   });

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

@@ -13,16 +13,13 @@
 	<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="gf-form">
+				<span class="gf-form-label gf-size-xs">Name</span>
+				<input class="gf-form-input gf-size-max-xxl" type="text" ng-model="current.name" placeholder="My data source name" required>
 				<editor-checkbox text="Default" model="current.isDefault"></editor-checkbox>
 			</div>
-			<br>
 
 			<div class="gf-form">
-				<span class="gf-form-label gf-size-s">Type</span>
+				<span class="gf-form-label gf-size-xs">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>

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

@@ -3,13 +3,12 @@
 
 <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>
+		<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>
 	</div>
-	<br>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-s">
+		<span class="gf-form-label gf-size-sx">
 			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>
@@ -17,31 +16,25 @@
 	<br>
 
 	<div class="gf-form">
-		<span class="gf-form-label gf-size-s">
+		<span class="gf-form-label gf-size-xs">
 			Http Auth
 		</span>
-	</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>
 
 	<div class="gf-form" ng-if="current.basicAuth">
-		<span class="gf-form-label gf-size-s">
+		<span class="gf-form-label gf-size-xs">
 			User
 		</span>
-		<input class="gf-form-input gf-size-xl" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
+		<input class="gf-form-input gf-size-max-xxl" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
 	</div>
-	<br>
 
 	<div class="gf-form" ng-if="current.basicAuth">
-		<span class="gf-form-label gf-size-s">
+		<span class="gf-form-label gf-size-xs">
 			Passord
 		</span>
-		<input class="gf-form-input gf-size-xl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
+		<input class="gf-form-input gf-size-max-xxl" type="password" ng-model='current.basicAuthPassword' placeholder="password" required></input>
 	</div>
 </div>
 

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

@@ -8,8 +8,8 @@
 
 	<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">
+			<span class="gf-form-label gf-size-xs">Name</span>
+			<input class="gf-form-input gf-size-max-xxl" type="text" required ng-model="org.name">
 		</div>
 
 		<div class="gf-form-button-row">
@@ -20,33 +20,37 @@
 	<h3>Address</h3>
 
 	<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="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 class="gf-form-inline">
+			<div class="gf-form gf-size-max-xxxl">
+				<span class="gf-form-label gf-size-sm">Address1</span>
+				<input class="gf-form-input" type="text" ng-model="address.address1">
+			</div>
+			<div class="gf-form gf-size-max-xxxl">
+				<span class="gf-form-label gf-size-sm">Address2</span>
+				<input class="gf-form-input" type="text" ng-model="address.address2">
+			</div>
 		</div>
-		<br>
 
-		<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 class="gf-form-inline">
+			<div class="gf-form gf-size-max-xxxl">
+				<span class="gf-form-label gf-size-sm">City</span>
+				<input class="gf-form-input" type="text" ng-model="address.city">
+			</div>
+			<div class="gf-form gf-size-max-xxxl">
+				<span class="gf-form-label gf-size-sm">Postal code</span>
+				<input class="gf-form-input" type="text" ng-model="address.zipCode">
+			</div>
 		</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 class="gf-form-inline">
+			<div class="gf-form gf-size-max-xxxl">
+				<span class="gf-form-label gf-size-sm">State</span>
+				<input class="gf-form-input" type="text" ng-model="address.state">
+			</div>
+			<div class="gf-form gf-size-max-xxxl">
+				<span class="gf-form-label gf-size-sm">Country</span>
+				<input class="gf-form-input" type="text" ng-model="address.country">
+			</div>
 		</div>
 
 		<div class="gf-form-button-row">

public/sass/_grid-variables.scss

@@ -34,3 +34,13 @@ $grid-gutter-width: 30px !default;
 
 $enable-flex: false;
 
+$form-sizes: (
+  xs: 60px,
+  sm: 80px,
+  md: 120px,
+  lg: 150px,
+  xl: 200px,
+  xxl: 300px,
+  xxxl: 400px
+) !default;
+

public/sass/_old_responsive.scss

@@ -34,12 +34,6 @@
 
 // form styles
 @include media-breakpoint-up(md) {
-  .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; }
-
   .dashnav-dashboards-btn a {
     max-width: 180px;
   }

public/sass/base/_forms.scss

@@ -54,7 +54,6 @@ textarea {
 // Identify controls by their labels
 label {
   display: block;
-  margin-bottom: 5px;
 }
 
 // Form controls

public/sass/components/_gf-form.scss

@@ -1,12 +1,18 @@
+$gf-form-margin: 4px;
+
 .gf-form {
-  margin-top: 3px;
-  margin-right: 3px;
-  display: inline-block;
+  margin-top: $gf-form-margin;
+  margin-right: $gf-form-margin;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 
   .checkbox-label {
     display: inline;
+    cursor: pointer;
     padding: 8px 7px 8px 4px;
   }
+
   .cr1 {
     margin-left: 8px;
   }
@@ -16,9 +22,15 @@
   margin-bottom: 20px;
 }
 
-.gf-form-flow {
-  float: left;
-  margin-right: 20px;
+.gf-form-inline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: flex-start;
+
+  .gf-form {
+    flex-grow: 1;
+  }
 }
 
 .gf-form-button-row {
@@ -27,10 +39,16 @@
 }
 
 .gf-form-label {
+  flex-shrink: 0;
   background-color: $labelBackground;
-  display: inline-block;
+  display: block;
   padding: 8px 7px;
   font-size: $fontSizeSmall;
+  margin-right: $gf-form-margin;
+}
+
+.gf-form-checkbox {
+  flex-shrink: 0;
 }
 
 [type=text],
@@ -45,6 +63,9 @@
     height: 100%;
     box-sizing: border-box;
     font-size: 15px;
+    display: block;
+    width: 100%;
+    margin-right: $gf-form-margin;
   }
 }
 
@@ -56,16 +77,20 @@ select.gf-form-input {
   padding: 2px 3px;
   font-size: 15px;
   box-sizing: content-box;
+  display: block;
+  width: 100%;
+  margin-right: $gf-form-margin;
+}
+
+@each $size, $value in $form-sizes {
+  .gf-size-#{$size} { width: $value; }
+
+  .gf-size-max-#{$size} {
+    max-width: $value;
+  }
 }
 
-.gf-size-xs { width: 60px; }
-.gf-size-s { width: 80px; }
-.gf-size-ms { width: 100px;}
-.gf-size-m { width: 110px; }
-.gf-size-l { width: 120px; }
-.gf-size-xl { width: 150px; }
-.gf-size-xxl { width: 200px; }
-.gf-size-xxxl { width: 300px; }
 .gf-size-auto { width: auto; }
+.gf-size-max { width: 100%; }