panel edit mode changes

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

@@ -70,6 +70,15 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     );
   };
 
+  onClose = () => {
+    store.dispatch(
+      updateLocation({
+        query: { tab: false, fullscreen: false, edit: false },
+        partial: true,
+      })
+    );
+  };
+
   render() {
     const { location } = store.getState();
     const activeTab = location.query.tab || 'queries';
@@ -81,17 +90,23 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
             <i className="fa fa-cog" />
             Edit Panel
           </h2>
+
           {this.tabs.map(tab => {
             return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
           })}
 
-          <div className="dashboard-settings__aside-actions">
+          <div className="panel-editor__aside-actions">
-            <button className="btn btn-inverse" ng-click="ctrl.exitFullscreen();">
+            <a className="btn btn-link" onClick={this.onClose}>
-              <i className="fa fa-remove" /> Close
+              <i className="fa fa-check" /> Close
-            </button>
+            </a>
+            <a className="btn btn-link" onClick={this.onClose}>
+              <i className="fa fa-trash" /> Discard
+            </a>
+            <a className="btn btn-link" onClick={this.onClose}>
+              <i className="fa fa-copy" /> Save as master type
+            </a>
           </div>
         </div>
-
         <div className="panel-editor__content">
           <CustomScrollbar>
             {activeTab === 'queries' && this.renderQueriesTab()}
@@ -111,7 +126,7 @@ interface TabItemParams {
 
 function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   const tabClasses = classNames({
-    'dashboard-settings__nav-item': true,
+    'panel-editor__aside-item': true,
     active: activeTab === tab.id,
   });
 

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

@@ -54,11 +54,11 @@ export class VizTypePicker extends PureComponent<Props, State> {
           <label className="gf-form-input width-10">{this.props.currentType}</label>
           <div className="gf-form--grow" />
           <label className="gf-form--has-input-icon">
-            <input type="text" className="gf-form-input width-13" value={''} placeholder="" />
+            <input type="text" className="gf-form-input width-13" placeholder="" />
             <i className="gf-form-input-icon fa fa-search" />
           </label>
           <div>
-            <button className="btn toggle-btn gf-form-btn active">Panel Types</button>
+            <button className="btn toggle-btn gf-form-btn active">Basic Types</button>
             <button className="btn toggle-btn gf-form-btn">Master Types</button>
           </div>
         </div>

public/app/viz/Graph.tsx

@@ -108,8 +108,11 @@ export class Graph extends PureComponent<GraphProps> {
       ...dynamicOptions,
     };
 
-    console.log('plot', timeSeries, options);
+    try {
-    $.plot(this.element, timeSeries, options);
+      $.plot(this.element, timeSeries, options);
+    } catch (err) {
+      console.log('plot error', err);
+    }
   }
 
   render() {

public/sass/components/_dashboard_grid.scss

@@ -3,7 +3,7 @@
 
 .panel-in-fullscreen {
   .react-grid-layout {
-    height: 100% !important;
+    height: calc(100% - 20px) !important;
   }
 
   .react-grid-item {

public/sass/components/_submenu.scss

@@ -4,7 +4,7 @@
   flex-wrap: wrap;
   align-content: flex-start;
   align-items: flex-start;
-  margin: 0 0 $panel-margin 0;
+  padding: 0 0 $panel-margin 0;
 }
 
 .annotation-disabled,

public/sass/components/_viz_editor.scss

@@ -1,5 +1,27 @@
-.viz-editor {
+.panel-in-fullscreen {
-  height: 100%;
+  .scroll-canvas--dashboard {
+    height: 100%;
+  }
+
+  .sidemenu {
+    display: none;
+  }
+
+  .main-view {
+    background: unset;
+  }
+
+  .dashboard-container {
+    padding: 0;
+  }
+
+  .submenu-controls {
+    padding: $dashboard-padding $dashboard-padding $panel-margin $dashboard-padding;
+  }
+
+  .panel-editor-container__panel {
+    margin: 0 $dashboard-padding;
+  }
 }
 
 .viz-picker {
@@ -66,35 +88,71 @@
 }
 
 .panel-editor-container__panel {
-  height: 35%;
+  flex: 1 1 0;
 }
 
 .panel-editor-container__editor {
-  height: 65%;
   margin-top: $panel-margin*2;
   display: flex;
   flex-direction: row;
+  height: 65%;
 }
 
 .panel-editor__content {
   flex-grow: 1;
   min-width: 0;
   height: 100%;
-  padding: 0px 0 20px 20px;
+  padding: 0 20px;
   max-width: 1100px;
 }
 
 .panel-editor__aside {
-  padding: 18px 0 0 20px;
   background: $panel-bg;
   display: flex;
   flex-direction: column;
 }
 
+.panel-editor__aside-item {
+  padding: 8px 20px;
+  color: $text-color;
+  font-size: $font-size-md;
+  @include left-brand-border;
+
+  &.active {
+    @include left-brand-border-gradient();
+    background: $page-bg;
+  }
+
+  i {
+    width: 23px;
+  }
+
+  .gicon {
+    margin-bottom: 2px;
+  }
+
+  .fa {
+    font-size: 17px;
+  }
+}
+
+.panel-editor__aside-actions {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  flex-grow: 1;
+  padding: 30px 0 0 0;
+
+  a {
+    text-align: left;
+    padding-left: 20px;
+  }
+}
+
 .panel-editor__aside-header {
   color: $text-muted;
   font-size: $font-size-h3;
-  padding-right: 50px;
+  padding: 20px 20px 10px 20px;
   white-space: nowrap;
   margin-bottom: $spacer;
 

public/sass/pages/_dashboard.scss

@@ -9,18 +9,6 @@
   }
 }
 
-.panel-in-fullscreen {
-  .scroll-canvas--dashboard {
-    height: 100%;
-  }
-  .sidemenu {
-    display: none;
-  }
-  .main-view {
-    background: unset;
-  }
-}
-
 .template-variable {
   color: $variable;
 }