fix: changing edit / view fullscreen modes now work

public/app/core/directives/dash_class.ts

@@ -6,6 +6,7 @@ function dashClass($timeout) {
   return {
     link: ($scope, elem) => {
       $scope.ctrl.dashboard.events.on('view-mode-changed', panel => {
+        console.log('view-mode-changed', panel.fullscreen);
         if (panel.fullscreen) {
           elem.addClass('panel-in-fullscreen');
         } else {

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

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
+import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
 import _ from 'lodash';
 
 interface Props {
@@ -49,13 +50,19 @@ export class VizTypePicker extends PureComponent<Props, State> {
   render() {
     return (
       <div className="viz-picker">
+        <div className="viz-picker__search">
           <div className="gf-form gf-form--grow">
             <label className="gf-form--has-input-icon gf-form--grow">
               <input type="text" className="gf-form-input" placeholder="Search type" />
               <i className="gf-form-input-icon fa fa-search" />
             </label>
           </div>
-        <div className="viz-picker-list">{this.state.pluginList.map(this.renderVizPlugin)}</div>
+        </div>
+        <div className="viz-picker__items">
+          <CustomScrollbar>
+            <div className="scroll-margin-helper">{this.state.pluginList.map(this.renderVizPlugin)}</div>
+          </CustomScrollbar>
+        </div>
       </div>
     );
   }

public/app/features/dashboard/view_state_srv.ts

@@ -11,7 +11,6 @@ export class DashboardViewState {
   panelScopes: any;
   $scope: any;
   dashboard: DashboardModel;
-  editStateChanged: any;
   fullscreenPanel: any;
   oldTimeRange: any;
 
@@ -72,9 +71,6 @@ export class DashboardViewState {
       }
     }
 
-    // remember if editStateChanged
-    this.editStateChanged = (state.edit || false) !== (this.state.edit || false);
-
     _.extend(this.state, state);
     this.dashboard.meta.fullscreen = this.state.fullscreen;
 
@@ -128,17 +124,11 @@ export class DashboardViewState {
         return;
       }
 
-      if (this.fullscreenPanel) {
-        // if already fullscreen
-        if (this.fullscreenPanel === panel && this.editStateChanged === false) {
-          return;
-        } else {
-          this.leaveFullscreen();
-        }
-      }
-
       if (!panel.fullscreen) {
         this.enterFullscreen(panel);
+      } else {
+        // already in fullscreen view just update the view mode
+        this.dashboard.setViewMode(panel, this.state.fullscreen, this.state.edit);
       }
     } else if (this.fullscreenPanel) {
       this.leaveFullscreen();

public/sass/components/_scrollbar.scss

@@ -307,6 +307,7 @@
   .view {
     display: flex;
     flex-grow: 1;
+    flex-direction: column;
   }
 
   .track-vertical {
@@ -337,3 +338,7 @@
     border-radius: 6px;
   }
 }
+
+.scroll-margin-helper {
+  margin-right: 12px;
+}

public/sass/components/_viz_editor.scss

@@ -19,12 +19,13 @@
   height: 100%;
 }
 
-.viz-picker-list {
-  padding-top: $spacer;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
+.viz-picker__search {
+  flex-grow: 0;
+}
+
+.viz-picker__items {
   flex-grow: 1;
+  height: calc(100% - 50px);
 }
 
 .viz-picker__item {
@@ -41,13 +42,15 @@
   display: flex;
   flex-shrink: 0;
   border: 1px solid transparent;
+  @include left-brand-border;
 
   &:hover {
     background: $card-background-hover;
   }
 
   &--selected {
-    border: 1px solid $orange;
+    // border: 1px solid $orange;
+    @include left-brand-border-gradient();
 
     .viz-picker__item-name {
       color: $text-color;