ux: dashboard settings progress

public/app/features/annotations/editor_ctrl.ts

@@ -26,7 +26,7 @@ export class AnnotationsEditorCtrl {
   ];
 
   /** @ngInject */
-  constructor(private $scope, private datasourceSrv) {
+  constructor($scope, private datasourceSrv) {
     $scope.ctrl = this;
 
     this.mode = 'list';
@@ -62,7 +62,6 @@ export class AnnotationsEditorCtrl {
   update() {
     this.reset();
     this.mode = 'list';
-    this.$scope.broadcastRefresh();
   }
 
   setupNew() {
@@ -74,28 +73,16 @@ export class AnnotationsEditorCtrl {
     this.annotations.push(this.currentAnnotation);
     this.reset();
     this.mode = 'list';
-    this.$scope.broadcastRefresh();
-    this.$scope.dashboard.updateSubmenuVisibility();
   }
 
   removeAnnotation(annotation) {
     var index = _.indexOf(this.annotations, annotation);
     this.annotations.splice(index, 1);
-    this.$scope.dashboard.updateSubmenuVisibility();
-    this.$scope.broadcastRefresh();
   }
 
   onColorChange(newColor) {
     this.currentAnnotation.iconColor = newColor;
   }
-
-  annotationEnabledChange() {
-    this.$scope.broadcastRefresh();
-  }
-
-  annotationHiddenChanged() {
-    this.$scope.dashboard.updateSubmenuVisibility();
-  }
 }
 
 coreModule.controller('AnnotationsEditorCtrl', AnnotationsEditorCtrl);

public/app/features/dashboard/settings/settings.ts

@@ -20,9 +20,9 @@ export class SettingsCtrl {
   ];
 
   /** @ngInject */
-  constructor($scope, private $location, private $rootScope) {
+  constructor(private $scope, private $location, private $rootScope) {
     // temp hack
-    $scope.dashboard = this.dashboard;
+    this.$scope.dashboard = this.dashboard;
 
     const params = this.$location.search();
     const url = $location.path();
@@ -35,6 +35,11 @@ export class SettingsCtrl {
 
     this.viewId = params.editview;
     $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
+
+    this.$scope.$on('$destroy', () => {
+      this.dashboard.updateSubmenuVisibility();
+      this.$rootScope.$broadcast("refresh");
+    });
   }
 
   onRouteUpdated() {

public/app/features/templating/editor_ctrl.ts

-///<reference path="../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import {variableTypes} from './variable';
@@ -45,6 +43,10 @@ export class VariableEditorCtrl {
       });
     };
 
+    $scope.setMode = function(mode) {
+      $scope.mode = mode;
+    };
+
     $scope.add = function() {
       if ($scope.isValid()) {
         variableSrv.addVariable($scope.current);

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

-<h3 class="dashboard-settings__header">Variables</h3>
-
 <div ng-controller="VariableEditorCtrl" ng-init="init()">
+
+	<h3 class="dashboard-settings__header">
+		<a ng-click="setMode('list')">Variables</a>
+		<span ng-show="mode === 'new'">&gt; New</span>
+		<span ng-show="mode === 'edit'">&gt; Edit</span>
+	</h3>
+
 	<div ng-if="mode === 'list'">
 
 		<div ng-if="variables.length === 0">
 			<div class="empty-list-cta">
 				<div class="empty-list-cta__title">There are no template variables added yet</div>
-				<a ng-click="mode = 'new';" class="empty-list-cta__button btn btn-xlarge btn-success">
+				<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-success">
 					<i class="gicon gicon-dashboard-new"></i>
 					Add variable
 				</a>
 				<div class="grafana-info-box">
-					<h5>
-						What does variables do?
-					</h5>
+					<h5>What does variables do?</h5>
 					<p>Variables enables more interactive and dynamic dashboards. Instead of hard-coding things like server or sensor names
 					in your metric queries you can use variables in their place. Variables are shown as dropdown select boxes at the top of
 					the dashboard. These dropdowns make it easy to change the data being displayed in your dashboard.
@@ -29,7 +32,7 @@
 		<div ng-if="variables.length">
 			<div class="page-action-bar">
 				<div class="page-action-bar__spacer"></div>
-				<a type="button" class="btn btn-success" ng-click="mode = 'new';"><i class="fa fa-plus" ></i> New</a>
+				<a type="button" class="btn btn-success" ng-click="setMode('new');"><i class="fa fa-plus" ></i> New</a>
 			</div>
 
 			<table class="filter-table filter-table--hover">
@@ -50,7 +53,6 @@
 						<td style="max-width: 200px;" ng-click="edit(variable)" class="pointer max-width">
 							{{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%">
@@ -70,7 +72,7 @@
 	</div>
 
 	<form ng-if="mode === 'edit' || mode === 'new'" name="ctrl.form">
-		<h5 class="section-heading">Variable</h5>
+		<h5 class="section-heading">General</h5>
 		<div class="gf-form-group">
 			<div class="gf-form-inline">
 				<div class="gf-form max-width-19">

public/sass/_variables.scss

@@ -199,11 +199,11 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www
 // Try to avoid customizing these :)
 $zindex-dropdown:          1000;
 $zindex-navbar-fixed:      1020;
+$zindex-sidemenu:          1025;
 $zindex-tooltip:           1030;
 $zindex-modal-backdrop:    1040;
 $zindex-modal:             1050;
 $zindex-typeahead:         1060;
-$zindex-sidemenu:          $zindex-navbar-fixed;
 
 // Buttons
 //

public/sass/components/_empty_list_cta.scss

 .empty-list-cta {
   background-color: $search-filter-box-bg;
   text-align: center;
-  padding: 2rem 2rem 1rem 2rem;
+  padding: 2rem;
   border-radius: $border-radius;
+
+  .grafana-info-box {
+    max-width: 700px;
+    margin: 0 auto;
+  }
 }
 
 .empty-list-cta__title {
@@ -14,10 +19,6 @@
   margin-bottom: 50px;
 }
 
-.empty-list-cta__pro-tip {
-  padding-bottom: 1rem;
-}
-
 .empty-list-cta__pro-tip-link {
   margin-left: 5px;
 }

public/sass/components/_navbar.scss

@@ -147,7 +147,8 @@
 
   .sidemenu-open {
     .navbar {
-      margin-left: 15px;
+      padding-left: 15px;
+      margin-left: 0;
     }
   }