refactoring & cleaning up css

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

@@ -40,9 +40,9 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
   renderMainSelection(view: EditorToolBarView) {
     return (
-      <div className="edit-section__selected" onClick={() => this.onToggleToolBarView(view)} key={view.title}>
+      <div className="toolbar__main" onClick={() => this.onToggleToolBarView(view)} key={view.title}>
-        <img className="edit-section__selected-image" src={view.imgSrc} />
+        <img className="toolbar__main-image" src={view.imgSrc} />
-        <div className="edit-section__selected-name">{view.title}</div>
+        <div className="toolbar__main-name">{view.title}</div>
         <i className="fa fa-caret-down" />
       </div>
     );
@@ -60,8 +60,8 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
   renderOpenView(view: EditorToolBarView) {
     return (
-      <div className="editor-toolbar-view">
+      <div className="toolbar-subview">
-        <button className="editor-toolbar-view__close" onClick={this.onCloseOpenView}>
+        <button className="toolbar-subview__close" onClick={this.onCloseOpenView}>
           <i className="fa fa-chevron-up" />
         </button>
         {view.render()}
@@ -75,12 +75,10 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
     return (
       <>
-        <div className="edit-section">
+        <div className="toolbar">
-          <div className="edit-section__header">
+          {this.renderMainSelection(main)}
-            {this.renderMainSelection(main)}
+          <div className="gf-form--grow" />
-            <div className="gf-form--grow" />
+          {toolbarItems.map(item => this.renderButton(item))}
-            {toolbarItems.map(item => this.renderButton(item))}
-          </div>
         </div>
         <div className="panel-editor__scroll">
           <CustomScrollbar>

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

@@ -1,16 +1,16 @@
 import React, { PureComponent } from 'react';
 
-import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
 import { EditorTabBody } from './EditorTabBody';
 import { VizTypePicker } from './VizTypePicker';
 
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
+import { PanelPlugin } from 'app/types/plugins';
 
 interface Props {
   panel: PanelModel;
   dashboard: DashboardModel;
-  plugin: PluginModel;
+  plugin: PanelPlugin;
   onTypeChanged: (newType: PanelPlugin) => void;
 }
 

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

@@ -85,7 +85,7 @@ export class VizTypePicker extends PureComponent<Props, State> {
           <div className="gf-form--grow" />
         </div>
 
-        <div className="viz-picker__items">{pluginList.map(this.renderVizPlugin)}</div>
+        <div className="viz-picker">{pluginList.map(this.renderVizPlugin)}</div>
       </>
     );
   }

public/app/features/panel/partials/metrics_tab.html

@@ -1,4 +1,4 @@
-<div class="gf-form-group hide">
+<div class="gf-form-group">
   <div class="gf-form-inline">
     <div class="gf-form">
       <label class="gf-form-label">Data Source</label>

public/sass/_grafana.scss

@@ -97,7 +97,8 @@
 @import 'components/form_select_box';
 @import 'components/user-picker';
 @import 'components/description-picker';
-@import 'components/viz_editor';
+@import 'components/panel_editor';
+@import 'components/toolbar';
 @import 'components/delete_button';
 @import 'components/add_data_source.scss';
 @import 'components/page_loader';

public/sass/components/_navbar.scss

@@ -40,6 +40,10 @@
 }
 
 .panel-in-fullscreen {
+  .navbar {
+    padding-left: 15px;
+  }
+
   .navbar-button--add-panel,
   .navbar-button--star,
   .navbar-button--tv,

public/sass/components/_panel_editor.scss

@@ -28,18 +28,10 @@
 }
 
 .panel-in-fullscreen {
-  // .scroll-canvas--dashboard {
-  //   height: 100%;
-  // }
-
   .sidemenu {
     display: none;
   }
 
-  // .main-view {
-  //   background: unset;
-  // }
-
   .dashboard-container {
     padding: 0;
   }
@@ -53,11 +45,49 @@
   }
 }
 
-.viz-picker {
+.panel-editor-resizer {
-  margin-bottom: $spacer;
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  top: -23px;
+  text-align: center;
+  border-bottom: 2px dashed transparent;
+
+  &:hover {
+    transition: border-color 0.2s ease-in 0.4s;
+    transition-delay: 0.2s;
+    border-color: $text-color-faint;
+  }
 }
 
-.viz-picker__items {
+.panel-editor-resizer__handle {
+  display: inline-block;
+  width: 180px;
+  position: relative;
+  border-radius: 2px;
+  height: 10px;
+  cursor: grabbing;
+  background: $dark-4;
+  top: -8px;
+
+  &:hover {
+    transition: background 0.2s ease-in 0.4s;
+    transition-delay: 0.2s;
+    background: $blue-dark;
+    .panel-editor-resizer__handle-dots {
+      transition: opacity 0.2s ease-in;
+      opacity: 0;
+    }
+  }
+}
+
+.panel-editor-resizer__handle-dots {
+  border-top: 2px dashed $text-color-faint;
+  position: relative;
+  top: 4px;
+}
+
+.viz-picker {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 13px;
@@ -104,108 +134,6 @@
   height: 55px;
 }
 
-.panel-editor-resizer {
-  position: absolute;
-  height: 2px;
-  width: 100%;
-  top: -23px;
-  text-align: center;
-  border-bottom: 2px dashed transparent;
-
-  &:hover {
-    transition: border-color 0.2s ease-in 0.4s;
-    transition-delay: 0.2s;
-    border-color: $text-color-faint;
-  }
-}
-
-.panel-editor-resizer__handle {
-  display: inline-block;
-  width: 180px;
-  position: relative;
-  border-radius: 2px;
-  height: 10px;
-  cursor: grabbing;
-  background: $dark-4;
-  top: -8px;
-
-  &:hover {
-    transition: background 0.2s ease-in 0.4s;
-    transition-delay: 0.2s;
-    background: $blue-dark;
-    .panel-editor-resizer__handle-dots {
-      transition: opacity 0.2s ease-in;
-      opacity: 0;
-    }
-  }
-}
-
-.panel-editor-resizer__handle-dots {
-  border-top: 2px dashed $text-color-faint;
-  position: relative;
-  top: 4px;
-}
-
-.panel-editor {
-  height: calc(100% - 10px);
-}
-
-.form-option-box {
-  margin-bottom: 20px;
-}
-
-.form-option-box__header {
-  border-bottom: 2px solid $blue-dark;
-  padding: 5px 0px;
-  font-size: $font-size-lg;
-  margin-bottom: 20px;
-}
-
-.edit-section {
-  position: relative;
-}
-
-.edit-section__header {
-  display: flex;
-  align-content: center;
-  align-items: center;
-  background: $page-header-bg;
-  box-shadow: 0 0 20px black;
-  padding: 7px 30px 7px 20px;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-}
-
-.edit-section__selected {
-  padding: $input-padding-y $input-padding-x;
-  font-size: $font-size-md;
-  line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
-  border: $input-border;
-  border-radius: $input-border-radius;
-  display: flex;
-  align-items: center;
-  .fa {
-    margin-left: 20px;
-    display: inline-block;
-    position: relative;
-  }
-}
-
-.edit-section__title {
-  font-size: $font-size-lg;
-  padding-right: 20px;
-  width: 150px;
-}
-
-.edit-section__selected-image {
-  margin-right: 10px;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-}
 
 .panel-editor-tabs {
   position: relative;
@@ -213,6 +141,7 @@
   box-shadow: $page-header-shadow;
   border-bottom: 1px solid $page-header-border-color;
   padding: 0 $dashboard-padding;
+
   @include clearfix();
 
   .active.gf-tabs-link {
@@ -238,28 +167,6 @@
   }
 }
 
-.editor-toolbar-view {
-  position: relative;
-  padding: 20px 20px;
-  background-color: $empty-list-cta-bg;
-  top: -45px;
-  margin: 0 30px 20px 0px;
-}
-
-.editor-toolbar-view__close {
-  background: transparent;
-  padding: 4px 8px 4px 9px;
-  border: none;
-  position: absolute;
-  right: 15px;
-  top: 20px;
-  font-size: $font-size-md;
-
-  &:hover {
-    color: $text-color-strong;
-  }
-}
-
 .ds-picker-list {
   display: flex;
   flex-wrap: wrap;
@@ -300,3 +207,14 @@
 .ds-picker-list__img {
   width: 30px;
 }
+
+.form-option-box {
+  margin-bottom: 20px;
+}
+
+.form-option-box__header {
+  border-bottom: 2px solid $blue-dark;
+  padding: 5px 0px;
+  font-size: $font-size-lg;
+  margin-bottom: 20px;
+}

public/sass/components/_toolbar.scss

@@ -0,0 +1,59 @@
+.toolbar {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  background: $page-header-bg;
+  box-shadow: 0 0 20px black;
+  padding: 7px 30px 7px 20px;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+}
+
+.toolbar__main {
+  padding: $input-padding-y $input-padding-x;
+  font-size: $font-size-md;
+  line-height: $input-line-height;
+  color: $input-color;
+  background-color: $input-bg;
+  border: $input-border;
+  border-radius: $input-border-radius;
+  display: flex;
+  align-items: center;
+
+  .fa {
+    margin-left: 20px;
+    display: inline-block;
+    position: relative;
+  }
+}
+
+.toolbar__main-image {
+  margin-right: 10px;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+}
+
+.toolbar-subview {
+  position: relative;
+  padding: 20px 20px;
+  background-color: $empty-list-cta-bg;
+  top: -45px;
+  margin: 0 30px 20px 0px;
+}
+
+.toolbar-subview__close {
+  background: transparent;
+  padding: 4px 8px 4px 9px;
+  border: none;
+  position: absolute;
+  right: 15px;
+  top: 20px;
+  font-size: $font-size-md;
+
+  &:hover {
+    color: $text-color-strong;
+  }
+}