ux: dashboard settings progress

public/app/core/services/keybindingSrv.ts

@@ -72,8 +72,8 @@ export class KeybindingSrv {
     }, 'keydown');
   }
 
-  showDashEditView(view) {
-    var search = _.extend(this.$location.search(), {editview: view});
+  showDashEditView() {
+    var search = _.extend(this.$location.search(), {editview: 'settings'});
     this.$location.search(search);
   }
 
@@ -197,7 +197,7 @@ export class KeybindingSrv {
     });
 
     this.bind('d s', () => {
-      this.showDashEditView('settings');
+      this.showDashEditView();
     });
 
     this.bind('d k', () => {
@@ -215,8 +215,14 @@ export class KeybindingSrv {
       }
 
       scope.appEvent('hide-modal');
-      scope.appEvent('hide-dash-editor');
       scope.appEvent('panel-change-view', {fullscreen: false, edit: false});
+
+      // close settings view
+      var search = this.$location.search();
+      if (search.editview) {
+        delete search.editview;
+        this.$location.search(search);
+      }
     });
   }
 }

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

@@ -32,15 +32,16 @@ export class DashNavCtrl {
       }
     }
 
-    openEditView(editview) {
-      var search = _.extend(this.$location.search(), {editview: editview});
+    openSettings() {
+      let search = this.$location.search();
+      if (search.editview) {
+        delete search.editview;
+      } else {
+        search.editview = 'settings';
+      }
       this.$location.search(search);
     }
 
-    showHelpModal() {
-      appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
-    }
-
     starDashboard() {
       this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred)
         .then(newState => {

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

@@ -1,96 +1,67 @@
-<div class="tabbed-view-header">
-	<h2 class="tabbed-view-title">
-		Settings
-	</h2>
+<h3 class="page-heading">General</h2>
 
-	<ul class="gf-tabs">
-		<li class="gf-tabs-item" ng-repeat="tab in ::['General', 'Links', 'Time picker']">
-			<a class="gf-tabs-link" ng-click="ctrl.editTab = $index" ng-class="{active: ctrl.editTab === $index}">
-				{{::tab}}
-			</a>
-		</li>
-	</ul>
+<div class="gf-form-group">
+	<div class="gf-form">
+		<label class="gf-form-label width-7">Name</label>
+		<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
+	</div>
+	<div class="gf-form">
+		<label class="gf-form-label width-7">Description</label>
+		<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
+	</div>
+	<div class="gf-form">
+		<label class="gf-form-label width-7">
+			Tags
+			<info-popover mode="right-normal">Press enter to add a tag</info-popover>
+		</label>
+		<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
+		</bootstrap-tagsinput>
+	</div>
 
-	<button class="tabbed-view-close-btn" ng-click="dismiss();">
-		<i class="fa fa-remove"></i>
-	</button>
+	<folder-picker ng-if="!ctrl.dashboard.meta.isFolder"
+								initial-title="ctrl.dashboard.meta.folderTitle"
+				on-change="ctrl.onFolderChange($folder)"
+		label-class="width-7">
+	</folder-picker>
 </div>
 
-<div class="tabbed-view-body">
-	<div ng-if="ctrl.editTab == 0">
-
-		<div class="gf-form-group section">
-      <h5 class="section-heading">Details</h5>
-			<div class="gf-form">
-				<label class="gf-form-label width-7">Name</label>
-				<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.title'></input>
+<div class="section">
+	<h5 class="section-heading">Options</h5>
+	<div class="gf-form-group">
+		<div class="gf-form">
+			<label class="gf-form-label width-11">Timezone</label>
+			<div class="gf-form-select-wrapper">
+				<select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
 			</div>
-      <div class="gf-form">
-				<label class="gf-form-label width-7">Description</label>
-				<input type="text" class="gf-form-input width-30" ng-model='ctrl.dashboard.description'></input>
-			</div>
-      <div class="gf-form">
-				<label class="gf-form-label width-7">
-          Tags
-          <info-popover mode="right-normal">Press enter to add a tag</info-popover>
-        </label>
-				<bootstrap-tagsinput ng-model="ctrl.dashboard.tags" tagclass="label label-tag" placeholder="add tags">
-				</bootstrap-tagsinput>
-			</div>
-
-      <folder-picker ng-if="!ctrl.dashboard.meta.isFolder"
-										 initial-title="ctrl.dashboard.meta.folderTitle"
-										 on-change="ctrl.onFolderChange($folder)"
-										 label-class="width-7">
-			</folder-picker>
 		</div>
-
-    <div class="section">
-      <h5 class="section-heading">Options</h5>
-      <div class="gf-form-group">
-        <div class="gf-form">
-          <label class="gf-form-label width-11">Timezone</label>
-          <div class="gf-form-select-wrapper">
-            <select ng-model="ctrl.dashboard.timezone" class='gf-form-input' ng-options="f.value as f.text for f in [{value: '', text: 'Default'}, {value: 'browser', text: 'Local browser time'},{value: 'utc', text: 'UTC'}]" ng-change="timezoneChanged()"></select>
-          </div>
-        </div>
-        <gf-form-switch class="gf-form"
-                        label="Editable"
-                        tooltip="Uncheck, then save and reload to disable all dashboard editing"
-                        checked="ctrl.dashboard.editable"
-                        label-class="width-11">
-        </gf-form-switch>
-				<gf-form-switch class="gf-form"
-                        label="Hide Controls"
-                        tooltip="Hide row controls. Shortcut: CTRL+H or CMD+H"
-                        checked="ctrl.dashboard.hideControls"
-                        label-class="width-11">
-        </gf-form-switch>
-      </div>
-    </div>
-
-    <div class="section">
-      <h5 class="section-heading">Panel Options</h5>
-      <div class="gf-form">
-        <label class="gf-form-label width-11">
-          Graph Tooltip
-          <info-popover mode="right-normal">
-            Cycle between options using Shortcut: CTRL+O or CMD+O
-          </info-popover>
-        </label>
-        <div class="gf-form-select-wrapper">
-          <select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
-        </div>
-      </div>
-    </div>
-	</div>
-
-	<div ng-if="editor.index == 1">
-		<dash-links-editor></dash-links-editor>
+		<gf-form-switch class="gf-form" label="Editable" tooltip="Uncheck, then save and reload to disable all dashboard editing" checked="ctrl.dashboard.editable" label-class="width-11">
+		</gf-form-switch>
+		<gf-form-switch class="gf-form" label="Hide Controls" tooltip="Hide row controls. Shortcut: CTRL+H or CMD+H" checked="ctrl.dashboard.hideControls" label-class="width-11">
+		</gf-form-switch>
 	</div>
+</div>
 
-	<div ng-if="editor.index == 2">
-		<gf-time-picker-settings dashboard="ctrl.dashboard"></gf-time-picker-settings>
+<div class="section">
+	<h5 class="section-heading">Panel Options</h5>
+	<div class="gf-form">
+		<label class="gf-form-label width-11">
+			Graph Tooltip
+			<info-popover mode="right-normal">
+				Cycle between options using Shortcut: CTRL+O or CMD+O
+			</info-popover>
+		</label>
+		<div class="gf-form-select-wrapper">
+			<select ng-model="ctrl.dashboard.graphTooltip" class='gf-form-input' ng-options="f.value as f.text for f in [{value: 0, text: 'Default'}, {value: 1, text: 'Shared crosshair'},{value: 2, text: 'Shared Tooltip'}]"></select>
+		</div>
 	</div>
-
 </div>
+
+<!-- <div ng&#45;if="editor.index == 1"> -->
+<!-- 	<dash&#45;links&#45;editor></dash&#45;links&#45;editor> -->
+<!-- </div> -->
+<!--  -->
+<!-- <div ng&#45;if="editor.index == 2"> -->
+<!-- 	<gf&#45;time&#45;picker&#45;settings dashboard="ctrl.dashboard"></gf&#45;time&#45;picker&#45;settings> -->
+<!-- </div> -->
+<!--  -->
+<!-- </div> -->

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

@@ -1,6 +1,5 @@
-
-<div class="edit-tab-with-sidemenu" ng-if="ctrl.viewId !== 'timepicker'">
-	<aside class="edit-sidemenu-aside">
+<div class="sidenav">
+	<aside class="sidenav__aside">
 		<h2>
 			<i class="fa fa-cog"></i>
 			Settings
@@ -8,27 +7,22 @@
 
 		<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">
+        <a href="{{::section.url}}">
 					{{::section.title}}
 				</a>
 			</li>
 		</ul>
 	</aside>
 
-	<div class="edit-tab-content" ng-if="ctrl.viewId === 'general'">
-		general
+	<div class="sidenav__content" ng-if="ctrl.viewId === 'settings'" ng-include="'public/app/features/dashboard/partials/settings.html'">
 	</div>
 
-	<div class="edit-tab-content" ng-if="ctrl.viewId === 'annotations'">
-		annotations
+	<div class="sidenav__content" ng-if="ctrl.viewId === 'annotations'" ng-include="'public/app/features/annotations/partials/editor.html'">
 	</div>
 
-	<div class="edit-tab-content" ng-if="ctrl.viewId === 'templating'">
+	<div class="sidenav__content" ng-if="ctrl.viewId === 'templating'">
 		annotations
 	</div>
 </div>
 
-<div ng-if="ctrl.viewId === 'timepicker'">
-  <gf-time-picker-dropdown dashboard="ctrl.dashboard"></gf-time-picker-dropdown>
-</div>
 

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

@@ -1,5 +1,7 @@
 import {coreModule, appEvents} from 'app/core/core';
 import {DashboardModel} from '../dashboard_model';
+import $ from 'jquery';
+import _ from 'lodash';
 
 export class SettingsCtrl {
   dashboard: DashboardModel;
@@ -7,7 +9,7 @@ export class SettingsCtrl {
   viewId: string;
 
   sections: any[] = [
-    {title: 'General',     id: 'general'},
+    {title: 'General',     id: 'settings'},
     {title: 'Annotations', id: 'annotations'},
     {title: 'Templating',  id: 'templating'},
     {title: 'Versions',    id: 'versions'},
@@ -15,10 +17,22 @@ export class SettingsCtrl {
 
   /** @ngInject */
   constructor($scope, private $location, private $rootScope) {
-    appEvents.on('hide-dash-editor', this.hideSettings.bind(this), $scope);
+    const params = this.$location.search();
+    const url = $location.path();
 
-    var urlParams = this.$location.search();
-    this.viewId = urlParams.editview;
+    for (let section of this.sections) {
+      const sectionParams = _.defaults({editview: section.id}, params);
+      section.url = url + '?' + $.param(sectionParams);
+      console.log(section.url);
+    }
+
+    this.viewId = params.editview;
+    $rootScope.onAppEvent("$routeUpdate", this.onRouteUpdated.bind(this), $scope);
+  }
+
+  onRouteUpdated() {
+    console.log('settings route updated');
+    this.viewId = this.$location.search().editview;
   }
 
   hideSettings() {

public/app/features/panel/panel_header.ts

@@ -84,7 +84,6 @@ function panelHeader($compile) {
     restrict: 'E',
     template: template,
     link: function(scope, elem, attrs) {
-      console.log(elem.html());
 
       let menuElem = elem.find('.panel-menu');
       let menuScope;

public/app/partials/dashboard.html

@@ -2,7 +2,9 @@
 	<dashnav dashboard="ctrl.dashboard"></dashnav>
 
 	<div class="scroll-canvas scroll-canvas--dashboard" grafana-scrollbar>
-		<dashboard-settings dashboard="ctrl.dashboard" ng-if="ctrl.dashboardViewState.state.editview" class="dashboard-settings">
+		<dashboard-settings dashboard="ctrl.dashboard"
+											  ng-if="ctrl.dashboardViewState.state.editview"
+												class="dashboard-settings">
 		</dashboard-settings>
 
 		<div class="dashboard-container">

public/sass/_grafana.scss

@@ -88,6 +88,7 @@
 @import "components/page_header";
 @import "components/dashboard_settings";
 @import "components/empty_list_cta";
+@import "components/sidenav";
 
 
 // PAGES

public/sass/components/_navbar.scss

@@ -9,6 +9,10 @@
   padding-right: $spacer;
   display: flex;
   flex-grow: 1;
+
+  background: $page-header-bg;
+  box-shadow: $page-header-shadow;
+  border-bottom: 1px solid $page-header-border-color;
 }
 
 .sidemenu-open {

public/sass/components/_sidenav.scss

@@ -0,0 +1,15 @@
+.sidenav {
+  display: flex;
+  flex-direction: row;
+}
+
+.sidenav__content {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.sidenav__aside {
+  margin-right: $spacer*2;
+}
+
+