converting more modals to edit panels

src/app/controllers/annotationsEditorCtrl.js

@@ -1,14 +1,15 @@
 define([
   'angular',
   'app',
-  'lodash'
+  'lodash',
+  'jquery'
 ],
-function (angular, app, _) {
+function (angular, app, _, $) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
 
-  module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv) {
+  module.controller('AnnotationsEditorCtrl', function($scope, datasourceSrv, $timeout) {
     var annotationDefaults = {
       name: '',
       datasource: null,
@@ -22,12 +23,20 @@ function (angular, app, _) {
     $scope.init = function() {
       $scope.currentAnnotation = angular.copy(annotationDefaults);
       $scope.currentIsNew = true;
+      $scope.editor = { index: 0 };
       $scope.datasources = datasourceSrv.getAnnotationSources();
       $scope.annotations = $scope.dashboard.annotations.list;
 
       if ($scope.datasources.length > 0) {
         $scope.currentDatasource = $scope.datasources[0];
       }
+
+      $scope.$watch('editor.index', function(newVal) {
+        console.log("value", newVal);
+        if (newVal !== 2) {
+          $scope.reset();
+        }
+      });
     };
 
     $scope.setDatasource = function() {
@@ -42,9 +51,12 @@ function (angular, app, _) {
       if (!$scope.currentDatasource) {
         $scope.currentDatasource = $scope.datasources[0];
       }
+
+      $scope.editor.index = 2;
+      $(".tooltip.in").remove();
     };
 
-    $scope.update = function() {
+    $scope.reset = function() {
       $scope.currentAnnotation = angular.copy(annotationDefaults);
       $scope.currentIsNew = true;
     };
@@ -62,21 +74,4 @@ function (angular, app, _) {
 
   });
 
-  module.controller('EditViewCtrl', function($scope) {
-    $scope.editPanelSrc = null;
-
-    $scope.onAppEvent('show-edit-panel', function(evt, payload) {
-      if (payload.src === $scope.editPanelSrc) {
-        $scope.dismiss();
-        return;
-      }
-      $scope.editPanelSrc = payload.src;
-    });
-
-    $scope.dismiss = function() {
-      $scope.editPanelSrc = null;
-    };
-
-  });
-
 });

src/app/directives/bootstrap-tagsinput.js

@@ -102,7 +102,7 @@ function (angular, $) {
           var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' +
             '<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? ' ng-click="' + item.click + '"' : '') +
               (item.target ? ' target="' + item.target + '"' : '') + (item.method ? ' data-method="' + item.method + '"' : '') +
-              (item.configModal ? ' config-modal="' + item.configModal + '"' : "") +
+              (item.configModal ? ' dash-editor-link="' + item.configModal + '"' : "") +
               '>' + (item.text || '') + '</a>';
 
           if (item.submenu && item.submenu.length) {
@@ -131,4 +131,4 @@ function (angular, $) {
         }
       };
     });
-});
+});

src/app/directives/dashEditLink.js

@@ -32,13 +32,16 @@ function (angular, $) {
           var editorScope;
           var lastEditor;
 
-
           scope.onAppEvent('show-dash-editor', function(evt, payload) {
             if (lastEditor === payload.src) {
               editorScope.dismiss();
               return;
             }
 
+            if (lastEditor) {
+              editorScope.dismiss();
+            }
+
             lastEditor = payload.src;
             editorScope = payload.scope.$new();
             editorScope.dismiss = function() {

src/app/partials/annotations_editor.html

@@ -1,67 +1,72 @@
 <div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
-	<div class="modal-body">
-  <div class="pull-right editor-title">Annotations</div>
 
-  <div class="editor-row">
-    <table class="table table-striped annotation-editor-table" style="width: 700px">
-      <thead>
-        <th width="90%">Name</th>
-        <th width="1%"></th>
-        <th width="1%"></th>
-        <th width="1%"></th>
-      </thead>
-      <tr ng-repeat="annotation in annotations">
-        <td>
-          <a ng-click="edit(annotation)" bs-tooltip="'Click to edit'">
-            <i class="icon-cog"></i>
-            {{annotation.name}}
-          </a>
-        </td>
-        <td><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
-        <td><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
-        <td><i ng-click="removeAnnotation(annotation)" class="pointer icon-remove"></i></td>
-      </tr>
-    </table>
-  </div>
+	<div class="dashboard-editor-header">
+		<div class="dashboard-editor-title">
+			<i class="icon icon-bolt"></i>
+			Annotations
+		</div>
 
-  <div class="editor-row">
-    <h4 ng-show="currentIsNew">Add Annotation</h4>
-    <h4 ng-show="!currentIsNew">Edit Annotation</h4>
+		<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+			<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
+			</div>
+		</div>
 
-    <div class="editor-option">
-      <label class="small">Name</label>
-      <input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
-    </div>
-    <div class="editor-option">
-      <label class="small">Datasource</label>
-      <select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
-    </div>
-    <div class="editor-option">
-      <label class="small">Icon color</label>
-       <spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
-    </div>
-     <div class="editor-option">
-      <label class="small">Icon size</label>
-      <select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
-    </div>
-    <div class="editor-option">
-      <label class="small">Grid line</label>
-      <input type="checkbox" ng-model="currentAnnotation.showLine" ng-checked="currentAnnotation.showLine">
-    </div>
-    <div class="editor-option">
-      <label class="small">Line color</label>
-       <spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
-    </div>
-  </div>
+	</div>
 
-  <div ng-include src="currentDatasource.editorSrc">
-  </div>
+	<div class="dashboard-editor-body">
 
-</div>
+		<div class="editor-row" ng-if="editor.index == 0">
+			<table class="table table-striped annotation-editor-table" style="width: 700px">
+				<tr ng-repeat="annotation in annotations">
+					<td style="width:90%">
+						<a ng-click="edit(annotation)" bs-tooltip="'Click to edit'" data-placement="right">
+							<i class="icon-bolt"></i>
+							{{annotation.name}}
+						</a>
+					</td>
+					<td><i ng-click="_.move(annotations,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
+					<td><i ng-click="_.move(annotations,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
+					<td><i ng-click="removeAnnotation(annotation)" class="pointer icon-remove"></i></td>
+				</tr>
+			</table>
+		</div>
 
-<div class="modal-footer">
-  <button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
-  <button ng-show="!currentIsNew" type="button" class="btn btn-success" ng-click="update()">Update</button>
-  <button type="button" class="btn btn-danger" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
-</div>
+		<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
+			<div class="editor-row">
+				<div class="editor-option">
+					<label class="small">Name</label>
+					<input type="text" class="input-medium" ng-model='currentAnnotation.name' placeholder="name"></input>
+				</div>
+				<div class="editor-option">
+					<label class="small">Datasource</label>
+					<select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
+				</div>
+				<div class="editor-option">
+					<label class="small">Icon color</label>
+					<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
+				</div>
+				<div class="editor-option">
+					<label class="small">Icon size</label>
+					<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
+				</div>
+				<div class="editor-option">
+					<label class="small">Grid line</label>
+					<input type="checkbox" ng-model="currentAnnotation.showLine" ng-checked="currentAnnotation.showLine">
+				</div>
+				<div class="editor-option">
+					<label class="small">Line color</label>
+					<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
+				</div>
+			</div>
+
+			<div ng-include src="currentDatasource.editorSrc">
+			</div>
+
+			<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add annotation</button>
+		</div>
+	</div>
+
+	<div class="dashboard-editor-footer">
+		<button type="button" class="btn btn-success pull-right" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
+	</div>
 </div>

src/app/partials/dasheditor.html

@@ -49,30 +49,31 @@
 		<div ng-if="editor.index == 1">
 			<div class="editor-row">
 				<div class="span8">
-					<h4>Rows</h4>
+					<h5>Rows</h5>
 					<table class="table table-striped">
-						<thead>
-							<th width="1%"></th>
-							<th width="1%"></th>
-							<th width="1%"></th>
-							<th width="97%">Title</th>
-						</thead>
 						<tr ng-repeat="row in dashboard.rows">
 							<td><i ng-click="_.move(dashboard.rows,$index,$index-1)" ng-hide="$first" class="pointer icon-arrow-up"></i></td>
 							<td><i ng-click="_.move(dashboard.rows,$index,$index+1)" ng-hide="$last" class="pointer icon-arrow-down"></i></td>
 							<td><i ng-click="dashboard.rows = _.without(dashboard.rows,row)" class="pointer icon-remove"></i></td>
-							<td>{{row.title}}</td>
+							<td style="width: 97%">{{row.title}}</td>
 						</tr>
 					</table>
 				</div>
 				<div class="span4">
-					<h4>Add Row</h4>
-					<label class="small">Title</label>
-					<input type="text" class="input-normal" ng-model='row.title' placeholder="New row"></input>
-					<label class="small">Height</label>
-					<input type="text" class="input-mini" ng-model='row.height'></input>
-					<br>
-					<button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success">Create Row</button>
+					<div class="editor-row">
+						<div class="section">
+							<h5>Add Row</h5>
+							<div class="editor-option">
+								<label class="small">Title</label>
+								<input type="text" class="input-normal" ng-model='row.title' placeholder="New row"></input>
+							</div>
+							<div class="editor-option">
+								<label class="small">Height</label>
+								<input type="text" class="input-mini" ng-model='row.height'></input>
+							</div>
+						</div>
+						<button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success">Create Row</button>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -115,5 +116,5 @@
 		</div>
 	</div>
 
-	<button type="button" class="btn btn-info pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
+	<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
 </div>

src/app/partials/paneleditor.html

@@ -1,23 +1,30 @@
-<div bindonce class="modal-body">
-  <div class="pull-right editor-title" bo-text="panel.type+' settings'"></div>
-  <div ng-model="editor.index" bs-tabs>
-    <div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
-    </div>
-  </div>
-  <div ng-show="editorTabs[editor.index] == 'General'">
-    <div ng-include src="'app/partials/panelgeneral.html'"></div>
-  </div>
+<div bindonce class="dashboard-editor-header">
+	<div class="dashboard-editor-title">
+		<i class="icon icon-text-width"></i>
+		<span bo-text="panel.type+' settings'"></span>
+	</div>
 
-  <div ng-show="editorTabs[editor.index] == 'Panel'">
-    <div ng-include src="edit_path(panel.type)"></div>
-  </div>
+	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+		<div ng-repeat="tab in setEditorTabs(panelMeta)" data-title="{{tab}}">
+		</div>
+	</div>
 
-  <div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
-    <div ng-include src="tab.src"></div>
-  </div>
 </div>
 
-<div class="modal-footer">
-  <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
-  <button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss()">Close</button>
-</div>
+<div class="dashboard-editor-body">
+	<div ng-show="editorTabs[editor.index] == 'General'">
+		<div ng-include src="'app/partials/panelgeneral.html'"></div>
+	</div>
+
+	<div ng-show="editorTabs[editor.index] == 'Panel'">
+		<div ng-include src="edit_path(panel.type)"></div>
+	</div>
+
+	<div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
+		<div ng-include src="tab.src"></div>
+	</div>
+</div>
+
+<div class="dashboard-editor-footer">
+	<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss()">Close</button>
+</div>

src/app/partials/roweditor.html

@@ -1,12 +1,19 @@
-<div class="modal-body">
-  <div class="pull-right editor-title">Row settings</div>
+<div class="dashboard-editor-header">
+	<div class="dashboard-editor-title">
+		<i class="icon icon-th-list"></i>
+		Row settings
+	</div>
 
-  <div ng-model="editor.index" bs-tabs>
+	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
     <div ng-repeat="tab in ['General','Panels']" data-title="{{tab}}">
-    </div>
-  </div>
+		</div>
+	</div>
 
-  <div class="editor-row" ng-if="editor.index == 0">
+</div>
+
+<div class="dashboard-editor-body">
+
+ <div class="editor-row" ng-if="editor.index == 0">
     <div class="editor-option">
       <label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input>
     </div>
@@ -44,8 +51,7 @@
     </div>
   </div>
 </div>
-<div class="modal-footer">
-  <button ng-show="editor.index == 1" ng-click="editor.index = 2;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
-  <button ng-show="panel.type && editor.index == 2" ng-click="add_panel(panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
+
+<div class="dashboard-editor-footer">
   <button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
 </div>

src/app/partials/submenu.html

@@ -10,8 +10,8 @@
 									<i class="icon-cog"></i>
 								</a>
 								<ul class="dropdown-menu">
-									<li><a class="pointer" config-modal="app/partials/templating_editor.html">Templating</a></li>
-									<li><a class="pointer" config-modal="app/partials/annotations_editor.html">Annotations</a></li>
+									<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
+									<li><a class="pointer" dash-editor-link="app/partials/annotations_editor.html">Annotations</a></li>
 								</ul>
 							</div>
 						</li>

src/css/less/bootswatch.dark.less

@@ -223,7 +223,7 @@ div.subnav {
 	li.active > a:hover {
 	  border-color: transparent;
 	  background-color: transparent;
-		border-bottom: 1px solid @blueDark;
+		border-bottom: 2px solid @blue;
 		color: @white;
 	}
 
@@ -545,7 +545,7 @@ a:hover {
 .modal {
  	.border-radius(1px);
 	border-top: solid 1px lighten(@grayDark, 5%);
-	background-color: @grayDark;
+	background-color: @grafanaPanelBackground;
 }
 
 .modal-header {
@@ -553,7 +553,7 @@ a:hover {
 }
 
 .modal-footer {
-	background-color: @grayDark;
+	background-color: @grafanaPanelBackground;
 	border-top: 1px solid @grayDark;
 	.border-radius(0 0 0px 0px);
 	.box-shadow(none);

src/css/less/grafana.less

@@ -564,29 +564,29 @@ select.grafana-target-segment-input {
   min-height: 100px;
   overflow: hidden;
 }
+
 .dashboard-editor-footer {
   overflow: hidden;
 }
 
 .dashboard-editor-header {
   overflow: hidden;
-  border-bottom: 1px solid @fullEditBorder;
   .tabs {
     float: left;
   }
-
   .nav {
     margin: 0;
   }
 }
 
 .dashboard-editor-title {
+  border-bottom: 1px solid @grayDark;
   padding-right: 20px;
   float: left;
   color: @linkColor;
   font-size: 20px;
   font-weight: normal;
-  line-height: 34px;
+  line-height: 38px;
   margin: 0;
   .icon {
     padding: 0 8px 0 5px;