Trying get rid of modals, new better design for dashboard settings and modals

src/app/controllers/annotationsEditorCtrl.js

@@ -63,9 +63,13 @@ function (angular, app, _) {
   });
 
   module.controller('EditViewCtrl', function($scope) {
-    //$scope.editPanelSrc = 'app/partials/test.html';
+    $scope.editPanelSrc = 'app/partials/dasheditor.html';
 
     $scope.onAppEvent('show-edit-panel', function(evt, payload) {
+      if (payload.src === $scope.editPanelSrc) {
+        $scope.dismiss();
+        return;
+      }
       $scope.editPanelSrc = payload.src;
     });
 

src/app/directives/bodyClass.js

@@ -3,7 +3,7 @@ define([
   'app',
   'lodash'
 ],
-function (angular, app, _) {
+function (angular) {
   'use strict';
 
   angular

src/app/directives/configModal.js

@@ -20,7 +20,7 @@ function (angular, _, $) {
               scope.exitFullscreen();
               scope.emitAppEvent('show-edit-panel', {src: partial});
             });
-            return;
+            //return;
 
             if ($(id).length) {
               elem.attr('data-target', id).attr('data-toggle', 'modal');

src/app/panels/filtering/module.html

@@ -1,48 +0,0 @@
-<div ng-controller='filtering' ng-init="init()">
-
-    <div ng-repeat="filter in filter.templateParameters" class="small filter-panel-filter">
-        <ul class="unstyled">
-          <li ng-if="filter.name" class="dropdown">
-            {{filter.name}} :
-            <a class="dropdown-toggle" data-toggle="dropdown">
-              {{filter.current.text}}
-            </a>
-              <ul class="dropdown-menu">
-                <li ng-repeat="option in filter.options">
-                  <a ng-click="filterOptionSelected(filter, option)">{{option.text}}</a>
-                </li>
-              </ul>
-          </li>
-        </ul>
-		</div>
-
-		<div class="submenu-control-edit">
-			<i class="icon-cog pointer" config-modal="app/panels/filtering/editor.html" bs-tooltip="'Edit'" ></i>
-		</div>
-
-</div>
-
-  <!--     <form ng&#45;show="filter.editing"> -->
-  <!--       <ul class="unstyled"> -->
-  <!--         <li> -->
-  <!--           <strong>name</strong>:<br/> -->
-  <!--           <input type='text' ng&#45;model="filter.name"> -->
-  <!--         </li> -->
-  <!--         <li> -->
-  <!--           <strong>filter.query</strong>:<br/> -->
-  <!--           <input type='text' ng&#45;model="filter.query"> -->
-  <!--         </li> -->
-  <!--         <li> -->
-  <!--           <label for="includeAll">Include all:</label> -->
-  <!--           <input id="includeAll" type='checkbox' ng&#45;model="filter.includeAll"> -->
-  <!--         </li> -->
-  <!--       </ul> -->
-  <!--       <div> -->
-  <!--         <input type="submit" value="Update" ng&#45;click="applyFilter(filter)" class="filter&#45;apply btn btn&#45;success btn&#45;mini" bs&#45;tooltip="'Update and refresh'"/> -->
-  <!--         <button ng&#45;click="filter.editing=undefined" class="filter&#45;apply btn btn&#45;mini" bs&#45;tooltip="'Save without refresh'">Close</button> -->
-  <!--       </div> -->
-  <!--     </form> -->
-  <!--   </div> -->
-  <!--   <i class="pointer icon&#45;plus&#45;sign add&#45;filter&#45;action" ng&#45;click="add()" bs&#45;tooltip="'Add metric filter / param'" data&#45;placement="right"></i> -->
-  <!-- </div> -->
-</div>

src/app/panels/filtering/module.js

@@ -1,47 +0,0 @@
-/*
-
-  ## filtering
-
-*/
-define([
-  'angular',
-  'app',
-  'lodash'
-],
-function (angular, app, _) {
-  'use strict';
-
-  var module = angular.module('grafana.panels.filtering', []);
-  app.useModule(module);
-
-  module.controller('filtering', function($scope, datasourceSrv, $rootScope, $timeout, $q) {
-
-    $scope.panelMeta = {
-      status  : "Stable",
-      description : "graphite target filters"
-    };
-
-    // Set and populate defaults
-    var _d = {
-    };
-    _.defaults($scope.panel,_d);
-
-    $scope.init = function() {
-      // empty. Don't know if I need the function then.
-    };
-
-    $scope.remove = function(templateParameter) {
-      $scope.filter.removeTemplateParameter(templateParameter);
-    };
-
-    $scope.add = function() {
-      $scope.filter.addTemplateParameter({
-        type      : 'filter',
-        name      : 'filter name',
-        editing   : true,
-        query     : 'metric.path.query.*',
-      });
-    };
-
-  });
-});

src/app/partials/dashboard.html

@@ -9,7 +9,7 @@
   <div class="clearfix"></div>
 
 	<div ng-controller="EditViewCtrl">
-		<div ng-if="editPanelSrc" ng-include="editPanelSrc">
+		<div class="dashboard-edit-view" ng-if="editPanelSrc" ng-include="editPanelSrc">
 		</div>
 	</div>
 

src/app/partials/dasheditor.html

@@ -1,108 +1,119 @@
-<div class="modal-body">
-  <div class="pull-right editor-title">Dashboard settings</div>
+<div class="dashboard-editor-header">
+	<div class="dashboard-editor-title">
+		<i class="icon icon-cogs"></i>
+		Dashboard settings
+	</div>
 
-  <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-    <div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
-    </div>
-    <div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
-    </div>
-  </div>
+	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+		<div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
+		</div>
+		<div ng-repeat="tab in dashboard.nav" data-title="{{tab.type}}">
+		</div>
+	</div>
 
-  <div ng-if="editor.index == 0">
-    <div class="editor-row">
-      <div class="section">
-        <div class="editor-option">
-          <label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
-        </div>
-        <div class="editor-option">
-          <label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
-        </div>
-        <div class="editor-option">
-          <label class="small">Time correction</label>
-          <select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
-        </div>
-        <div class="editor-option">
-          <label class="small">Hide controls (CTRL+H)</label>
-          <input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
-        </div>
-     </div>
-    </div>
-     <div class="editor-row">
-      <div class="section">
-        <div class="editor-option">
-          <label class="small">Tags</label>
-          <bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
-          </bootstrap-tagsinput>
-          <tip>Press enter to a add tag</tip>
-        </div>
-      </div>
-    </div>
-  </div>
+</div>
 
-  <div ng-if="editor.index == 1">
-    <div class="editor-row">
-      <div class="span8">
-        <h4>Rows</h4>
-        <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>
-          </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>
-      </div>
-    </div>
-  </div>
+<div class="dashboard-editor-body">
 
-  <div ng-if="editor.index == 2">
-    <div class="editor-row">
-			<div class="section">
-				<h5>Feature toggles</h5>
-				<div class="editor-option" ng-repeat="pulldown in dashboard.pulldowns">
-					<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+		<div ng-if="editor.index == 0">
+			<div class="editor-row">
+				<div class="section">
+					<div class="editor-option">
+						<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
+					</div>
+					<div class="editor-option">
+						<label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
+					</div>
+					<div class="editor-option">
+						<label class="small">Time correction</label>
+						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
+					</div>
+					<div class="editor-option">
+						<label class="small">Hide controls (CTRL+H)</label>
+						<input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
+					</div>
 				</div>
-				<div class="editor-option" ng-repeat="pulldown in dashboard.nav">
-					<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+			</div>
+			<div class="editor-row">
+				<div class="section">
+					<div class="editor-option">
+						<label class="small">Tags</label>
+						<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
+						</bootstrap-tagsinput>
+						<tip>Press enter to a add tag</tip>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div ng-if="editor.index == 1">
+			<div class="editor-row">
+				<div class="span8">
+					<h4>Rows</h4>
+					<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>
+						</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>
 			</div>
 		</div>
-	</div>
 
-	<div ng-if="editor.index == 3">
-    <ng-include src="'app/partials/import.html'"></ng-include>
-  </div>
+		<div ng-if="editor.index == 2">
+			<div class="editor-row">
+				<div class="section">
+					<h5>Feature toggles</h5>
+					<div class="editor-option" ng-repeat="pulldown in dashboard.pulldowns">
+						<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+					</div>
+					<div class="editor-option" ng-repeat="pulldown in dashboard.nav">
+						<label class="small" style="text-transform:capitalize;">{{pulldown.type}}</label><input type="checkbox" ng-model="pulldown.enable" ng-checked="pulldown.enable">
+					</div>
+				</div>
+			</div>
+		</div>
 
-  <div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index">
-    <ng-include ng-show="pulldown.enable" src="edit_path(pulldown.type)"></ng-include>
-    <button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
-  </div>
+		<div ng-if="editor.index == 3">
+			<ng-include src="'app/partials/import.html'"></ng-include>
+		</div>
 
+		<div ng-repeat="pulldown in dashboard.nav" ng-controller="SubmenuCtrl" ng-show="editor.index == 4+$index">
+			<ng-include ng-show="pulldown.enable" src="edit_path(pulldown.type)"></ng-include>
+			<button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
+		</div>
+
+	</div>
+
+	<div class="clearfix"></div>
 </div>
 
-<div class="modal-footer">
-  <div class="pull-left grafana-version-footer" ng-if="editor.index == 0">
-    <span class="editor-option small">
-      Grafana version: {{grafanaVersion}}
-    </span>
+<div class="dashboard-editor-footer">
+	<div class="pull-left grafana-version-footer" ng-if="editor.index == 0">
+		<span class="editor-option small">
+			Grafana version: {{grafanaVersion}}
+		</span>
 		<span> | <a ng-click="toggleConsole()" ng-show="!consoleEnabled">enable console</a> <a ng-click="toggleConsole()" ng-show="consoleEnabled">disable console</a></span>
-    <div class="small" grafana-version-check>
-    </div>
-  </div>
+		<div class="small" grafana-version-check>
+		</div>
+	</div>
 
-  <button ng-click="add_row(dashboard,row); reset_row();" class="btn btn-success" ng-show="editor.index == 1">Create Row</button>
-  <button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
+	<button type="button" class="btn btn-info pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
 </div>

src/app/partials/import.html

@@ -1,4 +1,4 @@
-<div ng-controller="GraphiteImportCtrl" ng-init="init()" style="height: 400px">
+<div ng-controller="GraphiteImportCtrl" ng-init="init()">
   <h5>Import dashboards from graphite web</h5>
 
   <div class="editor-row">
@@ -12,7 +12,7 @@
           </li>
         </ul>
       </div>
-      <button ng-click="listAll()" class="btn btn-primary">List all dashboards</button>
+      <button ng-click="listAll()" class="btn btn-success">List all dashboards</button>
     </div>
   </div>
 

src/app/partials/templating_editor.html

@@ -1,15 +1,51 @@
-<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
-	<div class="modal-body">
-		<div class="pull-right editor-title">Templating</div>
+<div class="dashboard-editor-header">
+	<div class="dashboard-editor-title">
+		<i class="icon icon-cogs"></i>
+		Dashboard settings
+	</div>
 
-		<div class="editor-row">
+	<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
+		<div ng-repeat="tab in ['General', 'Rows', 'Controls', 'Import']" data-title="{{tab}}">
 		</div>
-
 	</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>
+
+<div class="dashboard-editor-body">
+
+		<div ng-if="editor.index == 0">
+			<div class="editor-row">
+				<div class="section">
+					<div class="editor-option">
+						<label class="small">Title</label><input type="text" class="input-large" ng-model='dashboard.title'></input>
+					</div>
+					<div class="editor-option">
+						<label class="small">Theme</label><select class="input-small" ng-model="dashboard.style" ng-options="f for f in ['dark','light']" ng-change="styleUpdated()"></select>
+					</div>
+					<div class="editor-option">
+						<label class="small">Time correction</label>
+						<select ng-model="dashboard.timezone" class='input-small' ng-options="f for f in ['browser','utc']"></select>
+					</div>
+					<div class="editor-option">
+						<label class="small">Hide controls (CTRL+H)</label>
+						<input type="checkbox" ng-model="dashboard.hideControls" ng-checked="dashboard.hideControls">
+					</div>
+				</div>
+			</div>
+			<div class="editor-row">
+				<div class="section">
+					<div class="editor-option">
+						<label class="small">Tags</label>
+						<bootstrap-tagsinput ng-model="dashboard.tags" tagclass="label label-tag" placeholder="add tags">
+						</bootstrap-tagsinput>
+						<tip>Press enter to a add tag</tip>
+					</div>
+				</div>
+			</div>
+		</div>
+
+</div>
+
+<div class="dashboard-editor-footer">
+		<button type="button" class="btn btn-info" ng-click="editor.index=0;dismiss();">Close</button>
 </div>

src/css/less/bootswatch.dark.less

@@ -221,8 +221,9 @@ div.subnav {
 	li > a:hover,
 	li.active > a,
 	li.active > a:hover {
-		border-color: transparent;
-		background-color: @blue;
+	  border-color: transparent;
+	  background-color: transparent;
+		border-bottom: 1px solid @blueDark;
 		color: @white;
 	}
 

src/css/less/grafana.less

@@ -203,15 +203,23 @@
       margin: 0;
       background: @fullEditTabsBackground;
       border-top: 1px solid @fullEditTabsBorder;
+      border-bottom: 1px solid @fullEditTabsBorder
     }
 
     .tab-content {
       display: none;
     }
   }
+
   .tab-content {
     overflow: visible;
     padding: 15px;
+    background-color: @grafanaPanelBackground;
+    border-top: 1px solid @fullEditBorder;
+  }
+
+  .nav-tabs > li {
+    margin-bottom: 0;
   }
 
   .nav-tabs > li > a {
@@ -546,3 +554,43 @@ select.grafana-target-segment-input {
   max-width: 400px;
 }
 
+.dashboard-edit-view {
+  padding: 20px;
+  background-color: @grafanaPanelBackground;
+}
+
+.dashboard-editor-body {
+  padding: 20px 10px;
+  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 {
+  padding-right: 20px;
+  float: left;
+  color: @linkColor;
+  font-size: 20px;
+  font-weight: normal;
+  line-height: 34px;
+  margin: 0;
+  .icon {
+    padding: 0 8px 0 5px;
+    color: @textColor;
+  }
+}
+

src/css/less/variables.dark.less

@@ -35,9 +35,9 @@
 
 // Tabs
 @fullEditTabsBackground:  @grayDark;
-@fullEditBorder:          @black;
+@fullEditBorder:          #555;
 @fullEditBackground:      transparent;
-@fullEditTabsBorder:      #555;
+@fullEditTabsBorder:      @black;
 
 // Graphite Target Editor
 @grafanaTargetBorder:         @black;
@@ -134,12 +134,10 @@
 @btnInverseBackgroundHighlight:     darken(@black, 5%);
 
 
-
-
 // Forms
 // -------------------------
-@inputBackground:               lighten(@grayDark,10%);
-@inputBorder:                   lighten(@grayDark,20%);
+@inputBackground:               lighten(@grayDark,0%);
+@inputBorder:                   lighten(@grayDark,5%);
 @inputBorderRadius:             @baseBorderRadius;
 @inputDisabledBackground:       #555;
 @formActionsBackground:         transparent;