Minor progress on edit mode

public/app/features/dashboard/dashgrid/DashboardGrid.tsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import sizeMe from 'react-sizeme';
 import sizeMe from 'react-sizeme';
 
 
 let lastGridWidth = 1200;
 let lastGridWidth = 1200;
+let ignoreNextWidthChange = false;
 
 
 function GridWrapper({
 function GridWrapper({
   size,
   size,
@@ -24,8 +25,12 @@ function GridWrapper({
   isFullscreen,
   isFullscreen,
 }) {
 }) {
   const width = size.width > 0 ? size.width : lastGridWidth;
   const width = size.width > 0 ? size.width : lastGridWidth;
+
+  // logic to ignore width changes (optimization)
   if (width !== lastGridWidth) {
   if (width !== lastGridWidth) {
-    if (!isFullscreen && Math.abs(width - lastGridWidth) > 8) {
+    if (ignoreNextWidthChange) {
+      ignoreNextWidthChange = false;
+    } else if (!isFullscreen && Math.abs(width - lastGridWidth) > 8) {
       onWidthChange();
       onWidthChange();
       lastGridWidth = width;
       lastGridWidth = width;
     }
     }
@@ -138,6 +143,7 @@ export class DashboardGrid extends React.Component<DashboardGridProps, any> {
   }
   }
 
 
   onViewModeChanged(payload) {
   onViewModeChanged(payload) {
+    ignoreNextWidthChange = true;
     this.setState({ animated: !payload.fullscreen });
     this.setState({ animated: !payload.fullscreen });
   }
   }
 
 

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

@@ -23,7 +23,5 @@
     <dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
     <dash-links-container links="ctrl.dashboard.links" class="gf-form-inline"></dash-links-container>
   </div>
   </div>
 
 
-	<gf-time-picker class="gf-timepicker-nav" dashboard="ctrl.dashboard" ng-if="ctrl.dashboard.meta.fullscreen"></gf-time-picker>
-
   <div class="clearfix"></div>
   <div class="clearfix"></div>
 </div>
 </div>

public/sass/components/_navbar.scss

@@ -40,21 +40,12 @@
 }
 }
 
 
 .panel-in-fullscreen {
 .panel-in-fullscreen {
-  .navbar {
-    // @include navbar-alt-look();
-    display: none;
-  }
-
   .navbar-button--add-panel,
   .navbar-button--add-panel,
   .navbar-button--star,
   .navbar-button--star,
   .navbar-button--tv,
   .navbar-button--tv,
   .navbar-page-btn .fa-caret-down {
   .navbar-page-btn .fa-caret-down {
     display: none;
     display: none;
   }
   }
-
-  .navbar-buttons--close {
-    display: flex;
-  }
 }
 }
 
 
 .navbar-page-btn {
 .navbar-page-btn {
@@ -103,7 +94,7 @@
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   justify-content: flex-end;
   justify-content: flex-end;
-  // margin-right: $spacer;
+  margin-right: $spacer;
 
 
   &--close {
   &--close {
     display: none;
     display: none;

public/sass/components/_viz_editor.scss

@@ -28,24 +28,24 @@
 }
 }
 
 
 .panel-in-fullscreen {
 .panel-in-fullscreen {
-  .scroll-canvas--dashboard {
-    height: 100%;
-  }
+  // .scroll-canvas--dashboard {
+  //   height: 100%;
+  // }
 
 
   .sidemenu {
   .sidemenu {
     display: none;
     display: none;
   }
   }
 
 
-  .main-view {
-    background: unset;
-  }
+  // .main-view {
+  //   background: unset;
+  // }
 
 
   .dashboard-container {
   .dashboard-container {
     padding: 0;
     padding: 0;
   }
   }
 
 
   .submenu-controls {
   .submenu-controls {
-    padding: $dashboard-padding $dashboard-padding $panel-margin $dashboard-padding;
+    padding: 0 $dashboard-padding $panel-margin $dashboard-padding;
   }
   }
 
 
   .panel-editor-container__panel {
   .panel-editor-container__panel {