ux: dashboard setings progres

public/app/core/directives/dash_class.js

@@ -35,8 +35,16 @@ function (_, $, coreModule) {
           elem.toggleClass('playlist-active', newValue === true);
         });
 
-        $scope.$watch('ctrl.dashboardViewState.state.editView', function(newValue) {
-          elem.toggleClass('dashboard-settings-open', _.isString(newValue));
+        $scope.$watch('ctrl.dashboardViewState.state.editview', function(newValue) {
+          if (newValue) {
+            elem.toggleClass('dashboard-page--settings-opening', _.isString(newValue));
+            setTimeout(function() {
+              elem.toggleClass('dashboard-page--settings-open', _.isString(newValue));
+            }, 10);
+          } else {
+            elem.removeClass('dashboard-page--settings-opening');
+            elem.removeClass('dashboard-page--settings-open');
+          }
         });
       }
     };

public/app/features/dashboard/dashnav/dashnav.html

@@ -41,20 +41,9 @@
 			<i class="fa fa-link"></i>
 		</button>
 
-		<div class="dropdown">
-			<button class="btn navbar-button" data-toggle="dropdown" bs-tooltip="'Settings'" data-placement="bottom">
-				<i class="fa fa-cog"></i>
-			</button>
-
-			<ul class="dropdown-menu dropdown-menu--navbar">
-				<li ng-repeat="navItem in ::ctrl.navModel.menu" ng-class="{active: navItem.active}">
-					<a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
-						<i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
-						{{::navItem.title}}
-					</a>
-				</li>
-			</ul>
-		</div>
+		<button class="btn navbar-button" ng-click="ctrl.openSettings()" bs-tooltip="'Settings'" data-placement="bottom">
+			<i class="fa fa-cog"></i>
+		</button>
 	</div>
 
 	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>

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

@@ -37,8 +37,8 @@ export class DashNavCtrl {
       this.contextSrv.toggleSideMenu();
     }
 
-    openEditView(editview) {
-      var search = _.extend(this.$location.search(), {editview: editview});
+    openSettings() {
+      var search = _.extend(this.$location.search(), {editview: 'general'});
       this.$location.search(search);
     }
 

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

@@ -1,7 +1,11 @@
-<h2>Settings</h2>
 
 <div class="edit-tab-with-sidemenu">
 	<aside class="edit-sidemenu-aside">
+		<h2>
+			<i class="fa fa-cog"></i>
+			Settings
+		</h2>
+
 		<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">

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">
+		<dashboard-settings dashboard="ctrl.dashboard"
+											  ng-if="ctrl.dashboardViewState.state.editview"
+												class="dashboard-settings">
 		</dashboard-settings>
 
 		<div class="dashboard-container">

public/sass/_grafana.scss

@@ -86,6 +86,7 @@
 @import "components/dashboard_grid";
 @import "components/dashboard_list";
 @import "components/page_header";
+@import "components/dashboard_settings";
 
 
 // PAGES

public/sass/components/_dashboard_settings.scss

@@ -0,0 +1,18 @@
+.dashboard-settings {
+  opacity: 0;
+  display: block;
+  padding: $spacer*2;
+}
+
+.dashboard-page--settings-opening {
+  .dashboard-container {
+    display: none;
+  }
+}
+
+.dashboard-page--settings-open {
+  .dashboard-settings {
+    opacity: 1;
+    transition: opacity 250ms ease-in-out;
+  }
+}

public/sass/pages/_dashboard.scss

@@ -217,20 +217,4 @@ div.flot-text {
   }
 }
 
-.dash-edit-view {
-  opacity: 0;
-
-  &--open{
-    opacity: 1;
-    transition: opacity 200ms ease-in-out;
-  }
-}
 
-.dashboard-nav-shadow {
-  box-shadow: 0 0 20px black;
-  height: 10px;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-  top: -10px;
-}