ux(templating): tight-form -> gf-form

public/app/core/directives/dash_edit_link.js

@@ -45,7 +45,6 @@ function ($, coreModule) {
           if (editview) {
             scope.contextSrv.editview = editViewMap[editview];
             payload.src = scope.contextSrv.editview.src;
-            payload.cssClass = "tabbed-view";
           }
 
           if (lastEditor === payload.src) {
@@ -74,12 +73,7 @@ function ($, coreModule) {
           };
 
           var src = "'" + payload.src + "'";
-          var cssClass = payload.cssClass || 'gf-box';
-          var view = $('<div class="' + cssClass + '" ng-include="' + src + '"></div>');
-
-          if (payload.cssClass) {
-            view.addClass(payload.cssClass);
-          }
+          var view = $('<div class="tabbed-view" ng-include="' + src + '"></div>');
 
           elem.append(view);
           $compile(elem.contents())(editorScope);

public/app/features/annotations/partials/editor.html

@@ -30,33 +30,31 @@
 
 	<div class="tabbed-view-body">
 		<div class="editor-row row" ng-if="mode === 'list'">
-			<div class="span6">
-				<div ng-if="annotations.length === 0">
-					<em>No annotations defined</em>
-				</div>
-				<table class="grafana-options-table">
-					<tr ng-repeat="annotation in annotations">
-						<td style="width:90%">
-							<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i> &nbsp;
-							{{annotation.name}}
-						</td>
-						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
-						<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
-
-						<td style="width: 1%">
-							<a ng-click="edit(annotation)" class="btn btn-inverse btn-mini">
-								<i class="fa fa-edit"></i>
-								Edit
-							</a>
-						</td>
-						<td style="width: 1%">
-							<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
-								<i class="fa fa-remove"></i>
-							</a>
-						</td>
-					</tr>
-				</table>
+			<div ng-if="annotations.length === 0">
+				<em>No annotations defined</em>
 			</div>
+			<table class="grafana-options-table">
+				<tr ng-repeat="annotation in annotations">
+					<td style="width:90%">
+						<i class="fa fa-bolt" style="color:{{annotation.iconColor}}"></i> &nbsp;
+						{{annotation.name}}
+					</td>
+					<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
+					<td style="width: 1%"><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
+
+					<td style="width: 1%">
+						<a ng-click="edit(annotation)" class="btn btn-inverse btn-mini">
+							<i class="fa fa-edit"></i>
+							Edit
+						</a>
+					</td>
+					<td style="width: 1%">
+						<a ng-click="removeAnnotation(annotation)" class="btn btn-danger btn-mini">
+							<i class="fa fa-remove"></i>
+						</a>
+					</td>
+				</tr>
+			</table>
 		</div>
 
 		<div class="annotations-basic-settings" ng-if="mode === 'edit' || mode === 'new'">

public/app/features/templating/partials/editor.html

@@ -1,41 +1,38 @@
 <div ng-controller="TemplateEditorCtrl" ng-init="init()">
-	<div class="gf-box-header">
-		<div class="gf-box-title">
-			<i class="fa fa-code"></i>
+	<div class="tabbed-view-header">
+		<h2 class="tabbed-view-title">
 			Templating
-		</div>
-
-		<div class="tabs">
-			<ul class="nav nav-tabs">
-				<li ng-class="{active: mode === 'list'}">
-					<a ng-click="mode = 'list';">Variables</a>
-				</li>
-
-				<li ng-class="{active: mode === 'edit'}" ng-show="mode === 'edit'">
-					<a>{{current.name}}</a>
-				</li>
-
-				<li ng-class="{active: mode === 'new'}">
-					<a ng-click="mode = 'new';">
-						<i class="fa fa-plus"></i>
-						New
-					</a>
-				</li>
-			</ul>
-		</div>
-
-		<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
+		</h2>
+
+		<ul class="gf-tabs">
+			<li class="gf-tabs-item" >
+				<a class="gf-tabs-link" ng-click="mode = 'list';" ng-class="{active: mode === 'list'}">
+					Variables
+				</a>
+			</li>
+			<li class="gf-tabs-item" ng-show="mode === 'edit'">
+				<a class="gf-tabs-link" ng-class="{active: mode === 'edit'}">
+					{{current.name}}
+				</a>
+			</li>
+			<li class="gf-tabs-item" >
+				<a class="gf-tabs-link" ng-click="mode = 'new';" ng-class="{active: mode === 'new'}">
+					<i class="fa fa-plus"></i>
+					New
+				</a>
+			</li>
+		</ul>
+
+		<button class="tabbed-view-close-btn" ng-click="dismiss();dashboard.refresh();">
 			<i class="fa fa-remove"></i>
 		</button>
-
 	</div>
 
-	<div class="gf-box-body">
+	<div class="tabbed-view-body">
 
 		<div ng-if="mode === 'list'">
 
 			<div class="editor-row row">
-				<div style="max-width: 1024px">
 					<div ng-if="variables.length === 0">
 						<em>No template variables defined</em>
 					</div>
@@ -49,27 +46,27 @@
 							<td class="max-width" style="max-width: 200px;">
 								{{variable.query}}
 							</td>
+
+							<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
+							<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
+							<td style="width: 1%">
+                <a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
+                  Duplicate
+                </a>
+              </td>
 							<td style="width: 1%">
-								<a ng-click="edit(variable)" class="btn btn-inverse btn-small">
+								<a ng-click="edit(variable)" class="btn btn-inverse btn-mini">
 									<i class="fa fa-edit"></i>
 									Edit
 								</a>
 							</td>
-              <td style="width: 1%">
-                <a ng-click="duplicate(variable)" class="btn btn-inverse btn-small">
-                  Duplicate
-                </a>
-              </td>
-							<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
-							<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
 							<td style="width: 1%">
-								<a ng-click="removeVariable(variable)" class="btn btn-danger btn-small">
+								<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
 									<i class="fa fa-remove"></i>
 								</a>
 							</td>
 						</tr>
 					</table>
-				</div>
 			</div>
 		</div>
 

public/app/partials/edit_json.html

@@ -1,16 +1,15 @@
 <div ng-controller="JsonEditorCtrl">
-	<div class="gf-box-header">
-		<div class="gf-box-title">
-			<i class="fa fa-edit"></i>
-		  JSON
-		</div>
+	<div class="tabbed-view-header">
+		<h2 class="tabbed-view-title">
+			JSON
+		</h2>
 
-		<button class="gf-box-header-close-btn" ng-click="dismiss();">
+		<button class="tabbed-view-close-btn" ng-click="dismiss()">
 			<i class="fa fa-remove"></i>
 		</button>
 	</div>
 
-	<div class="gf-box-body json-box-body">
+	<div class="tabbed-view-body">
 		<div class="gf-form">
 			<textarea class="gf-form-input" ng-model="json" rows="20" spellcheck="false"></textarea>
 		</div>

public/sass/components/_dashboard.scss

@@ -280,7 +280,3 @@ div.flot-text {
     padding: 1.2rem .5rem .4rem .5rem;
   }
 }
-
-.json-box-body {
-  min-height: 500px;
-}