From 1c27df97d67cc824b8046399ab4c9958699f67a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Sat, 2 Dec 2017 07:05:58 +0100
Subject: [PATCH] ux: dashboard setings progres

---
 public/app/core/directives/dash_class.js       | 12 ++++++++++--
 .../features/dashboard/dashnav/dashnav.html    | 17 +++--------------
 .../app/features/dashboard/dashnav/dashnav.ts  |  4 ++--
 .../features/dashboard/settings/settings.html  |  6 +++++-
 public/app/partials/dashboard.html             |  4 +++-
 public/sass/_grafana.scss                      |  1 +
 .../sass/components/_dashboard_settings.scss   | 18 ++++++++++++++++++
 public/sass/pages/_dashboard.scss              | 16 ----------------
 8 files changed, 42 insertions(+), 36 deletions(-)
 create mode 100644 public/sass/components/_dashboard_settings.scss

diff --git a/public/app/core/directives/dash_class.js b/public/app/core/directives/dash_class.js
index b7323ea0161..69f1129f636 100644
--- a/public/app/core/directives/dash_class.js
+++ b/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');
+          }
         });
       }
     };
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html
index 260a3783a67..f06f997ce8e 100644
--- a/public/app/features/dashboard/dashnav/dashnav.html
+++ b/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>
diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts
index 57f75b1388d..f291913323a 100644
--- a/public/app/features/dashboard/dashnav/dashnav.ts
+++ b/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);
     }
 
diff --git a/public/app/features/dashboard/settings/settings.html b/public/app/features/dashboard/settings/settings.html
index b2371960a26..0781b0c109d 100644
--- a/public/app/features/dashboard/settings/settings.html
+++ b/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">
diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html
index 59fc2e86ded..210275d2200 100644
--- a/public/app/partials/dashboard.html
+++ b/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">
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index af4a97dc1e6..6d631171966 100644
--- a/public/sass/_grafana.scss
+++ b/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
diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss
new file mode 100644
index 00000000000..3e1e2b53291
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
index 4deefc2b9cb..943eb930543 100644
--- a/public/sass/pages/_dashboard.scss
+++ b/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;
-}