ux: navbar progress

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

@@ -51,9 +51,8 @@
 	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
 	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="!ctrl.dashboard.timepicker.hidden"></gf-time-picker>
 
 
 	<div class="navbar-buttons navbar-buttons--close">
 	<div class="navbar-buttons navbar-buttons--close">
-		<button class="btn navbar-button navbar-button--primary" ng-click="ctrl.toggleSettings()" bs-tooltip="'Close settings'" data-placement="bottom">
-			<i class="fa fa-remove"></i>
-			Close
+		<button class="btn navbar-button navbar-button--primary" ng-click="ctrl.close()" bs-tooltip="'Back to dashboard'" data-placement="bottom">
+			<i class="fa fa-reply"></i>
 		</button>
 		</button>
 	</div>
 	</div>
 
 

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

@@ -42,6 +42,18 @@ export class DashNavCtrl {
       this.$location.search(search);
       this.$location.search(search);
     }
     }
 
 
+    close() {
+      let search = this.$location.search();
+      if (search.editview) {
+        delete search.editview;
+      }
+      if (search.fullscreen) {
+        delete search.fullscreen;
+        delete search.edit;
+      }
+      this.$location.search(search);
+    }
+
     starDashboard() {
     starDashboard() {
       this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred)
       this.dashboardSrv.starDashboard(this.dashboard.id, this.dashboard.meta.isStarred)
         .then(newState => {
         .then(newState => {

public/sass/_variables.dark.scss

@@ -22,7 +22,6 @@ $gray-5:           #ECECEC;
 $gray-6:           #f4f5f8;
 $gray-6:           #f4f5f8;
 $gray-7:           #fbfbfb;
 $gray-7:           #fbfbfb;
 
 
-// $gray-blue:				 #292a2d;
 $gray-blue:        #212327;
 $gray-blue:        #212327;
 $input-black:      #09090B;
 $input-black:      #09090B;
 
 
@@ -100,6 +99,7 @@ $panel-border:          solid 1px $panel-border-color;
 $panel-drop-zone-bg:    repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
 $panel-drop-zone-bg:    repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
 $panel-header-hover-bg:       $dark-4;
 $panel-header-hover-bg:       $dark-4;
 $panel-header-menu-hover-bg:  $dark-5;
 $panel-header-menu-hover-bg:  $dark-5;
+$panel-edit-shadow: 0 -30px 30px -30px $black;
 
 
 // page header
 // page header
 $page-header-bg: linear-gradient(90deg, #292a2d, black);
 $page-header-bg: linear-gradient(90deg, #292a2d, black);

public/sass/_variables.light.scss

@@ -103,6 +103,7 @@ $panel-border:       solid 1px $panel-border-color;
 $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
 $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
 $panel-header-hover-bg:       $gray-6;
 $panel-header-hover-bg:       $gray-6;
 $panel-header-menu-hover-bg:  $gray-4;
 $panel-header-menu-hover-bg:  $gray-4;
+$panel-edit-shadow: 0 0 30px 20px $black;
 
 
 // Page header
 // Page header
 $page-header-bg: linear-gradient(90deg, $white, $gray-7);
 $page-header-bg: linear-gradient(90deg, $white, $gray-7);

public/sass/components/_navbar.scss

@@ -10,14 +10,19 @@
   display: flex;
   display: flex;
   flex-grow: 1;
   flex-grow: 1;
   border-bottom: 1px solid transparent;
   border-bottom: 1px solid transparent;
-  transition: all 300ms ease-in-out;
+  transition: all 350ms ease-in-out;
 }
 }
 
 
-.dashboard-page--settings-open {
-  .navbar {
+@mixin navbar-alt-look() {
   background: $page-header-bg;
   background: $page-header-bg;
   box-shadow: $search-shadow;
   box-shadow: $search-shadow;
   border-bottom: $navbarBorder;
   border-bottom: $navbarBorder;
+}
+
+
+.dashboard-page--settings-open {
+  .navbar {
+    @include navbar-alt-look();
   }
   }
 
 
   .navbar-buttons--actions,
   .navbar-buttons--actions,
@@ -31,6 +36,20 @@
   }
   }
 }
 }
 
 
+.panel-in-fullscreen {
+ .navbar {
+    @include navbar-alt-look();
+  }
+
+  .navbar-buttons--actions {
+    display: none;
+  }
+
+  .navbar-buttons--close {
+    display: flex;
+  }
+}
+
 .sidemenu-open {
 .sidemenu-open {
   .navbar {
   .navbar {
     padding-left: 15px;
     padding-left: 15px;

public/sass/components/_tabbed_view.scss

@@ -6,7 +6,8 @@
     padding: 0;
     padding: 0;
 
 
     .tabbed-view-header {
     .tabbed-view-header {
-      padding: 1.5em 1rem 0 1rem;
+      padding: 0px 25px;
+      background: none;
     }
     }
   }
   }
 }
 }

public/sass/pages/_dashboard.scss

@@ -217,4 +217,6 @@ div.flot-text {
   }
   }
 }
 }
 
 
-
+.panel-full-edit {
+  margin: $dashboard-padding (-$dashboard-padding) 0 (-$dashboard-padding);
+}