started on dashboard settings refactor

public/app/core/directives/dash_class.js

@@ -34,6 +34,10 @@ function (_, $, coreModule) {
         $scope.$watch('ctrl.playlistSrv.isPlaying', function(newValue) {
           elem.toggleClass('playlist-active', newValue === true);
         });
+
+        $scope.$watch('ctrl.dashboardViewState.state.editView', function(newValue) {
+          elem.toggleClass('dashboard-settings-open', _.isString(newValue));
+        });
       }
     };
   });

public/app/core/directives/dash_edit_link.js

@@ -13,7 +13,6 @@ function ($, angular, coreModule, _) {
     'templating':  { src: 'public/app/features/templating/partials/editor.html'},
     'history':     { html: '<gf-dashboard-history dashboard="dashboard"></gf-dashboard-history>'},
     'timepicker':  { src: 'public/app/features/dashboard/timepicker/dropdown.html' },
-    'add-panel':    { html: '<add-panel></add-panel>' },
     'import':      { html: '<dash-import dismiss="dismiss()"></dash-import>', isModal: true },
     'permissions': { html: '<dash-acl-modal dismiss="dismiss()"></dash-acl-modal>', isModal: true },
     'new-folder':  {

public/app/features/dashboard/all.ts

@@ -27,8 +27,8 @@ import './acl/acl';
 import './folder_picker/picker';
 import './folder_modal/folder';
 import './move_to_folder_modal/move_to_folder';
-import coreModule from 'app/core/core_module';
+import './settings/settings';
 
+import coreModule from 'app/core/core_module';
 import {DashboardListCtrl} from './dashboard_list_ctrl';
-
 coreModule.controller('DashboardListCtrl', DashboardListCtrl);

public/app/features/dashboard/dashnav/dashnav.ts

@@ -1,5 +1,3 @@
-///<reference path="../../../headers/common.d.ts" />
-
 import _ from 'lodash';
 import moment from 'moment';
 import angular from 'angular';

public/app/features/dashboard/settings/settings.html

@@ -0,0 +1,27 @@
+<h2>Settings</h2>
+
+<div class="edit-tab-with-sidemenu">
+	<aside class="edit-sidemenu-aside">
+		<ul class="edit-sidemenu">
+			<li ng-class="{active: ctrl.viewId === section.id}" ng-repeat="section in ctrl.sections">
+				<a ng-click="ctrl.viewId = section.id">
+					{{::section.title}}
+				</a>
+			</li>
+		</ul>
+	</aside>
+
+	<div class="edit-tab-content" ng-if="ctrl.viewId === 'general'">
+		general
+	</div>
+
+	<div class="edit-tab-content" ng-if="ctrl.viewId === 'annotations'">
+		annotations
+	</div>
+
+	<div class="edit-tab-content" ng-if="ctrl.viewId === 'templating'">
+		annotations
+	</div>
+
+</div>
+

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

@@ -0,0 +1,47 @@
+import {coreModule, appEvents} from 'app/core/core';
+import {DashboardModel} from '../dashboard_model';
+
+export class SettingsCtrl {
+  dashboard: DashboardModel;
+  isOpen: boolean;
+  viewId: string;
+
+  sections: any[] = [
+    {title: 'General',     id: 'general'},
+    {title: 'Annotations', id: 'annotations'},
+    {title: 'Templating',  id: 'templating'},
+    {title: 'Versions',    id: 'versions'},
+  ];
+
+  /** @ngInject */
+  constructor($scope, private $location, private $rootScope) {
+    appEvents.on('hide-dash-editor', this.hideSettings.bind(this), $scope);
+
+    var urlParams = this.$location.search();
+    this.viewId = urlParams.editview;
+  }
+
+  hideSettings() {
+    var urlParams = this.$location.search();
+    delete urlParams.editview;
+    setTimeout(() => {
+      this.$rootScope.$apply(() => {
+        this.$location.search(urlParams);
+      });
+    });
+  }
+}
+
+export function dashboardSettings() {
+  return {
+    restrict: 'E',
+    templateUrl: 'public/app/features/dashboard/settings/settings.html',
+    controller: SettingsCtrl,
+    bindToController: true,
+    controllerAs: 'ctrl',
+    transclude: true,
+    scope: { dashboard: "=" }
+  };
+}
+
+coreModule.directive('dashboardSettings', dashboardSettings);

public/app/features/dashboard/submenu/submenu.html

@@ -1,5 +1,4 @@
 <div class="submenu-controls">
-
   <div ng-repeat="variable in ctrl.variables" ng-hide="variable.hide === 2" class="submenu-item gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label template-variable" ng-hide="variable.hide === 1">

public/app/partials/dashboard.html

@@ -2,15 +2,15 @@
 	<dashnav dashboard="ctrl.dashboard"></dashnav>
 
 	<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
-		<div dash-editor-view class="dash-edit-view"></div>
-		<div class="dashboard-container">
+		<dashboard-settings dashboard="ctrl.dashboard" ng-if="ctrl.dashboardViewState.state.editview">
+		</dashboard-settings>
 
+		<div class="dashboard-container">
 			<dashboard-submenu ng-if="ctrl.dashboard.meta.submenuEnabled" dashboard="ctrl.dashboard">
 			</dashboard-submenu>
 
 			<dashboard-grid get-panel-container="ctrl.getPanelContainer">
 			</dashboard-grid>
-
 		</div>
 	</div>
 </div>