wip: style changes

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

@@ -88,11 +88,14 @@ export class EditorTabBody extends PureComponent<Props, State> {
 
 
   renderOpenView(view: EditorToolBarView) {
   renderOpenView(view: EditorToolBarView) {
     return (
     return (
-      <div className="toolbar-subview">
-        <button className="toolbar-subview__close" onClick={this.onCloseOpenView}>
-          <i className="fa fa-chevron-up" />
+      <div className="panel-option-section">
+        <div className="panel-option-section__header">
+          {view.title}
+          <button className="btn btn-link" onClick={this.onCloseOpenView}>
+            <i className="fa fa-remove" />
           </button>
           </button>
-        {view.render(this.onCloseOpenView)}
+        </div>
+        <div className="panel-option-section__body">{view.render(this.onCloseOpenView)}</div>
       </div>
       </div>
     );
     );
   }
   }
@@ -115,10 +118,10 @@ export class EditorTabBody extends PureComponent<Props, State> {
         </div>
         </div>
         <div className="panel-editor__scroll">
         <div className="panel-editor__scroll">
           <CustomScrollbar autoHide={false}>
           <CustomScrollbar autoHide={false}>
+            <div className="panel-editor__content">
               <FadeIn in={isOpen} duration={200} unmountOnExit={true}>
               <FadeIn in={isOpen} duration={200} unmountOnExit={true}>
-              <div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
+                {openView && this.renderOpenView(openView)}
               </FadeIn>
               </FadeIn>
-            <div className="panel-editor__content">
               <FadeIn in={fadeIn} duration={50}>
               <FadeIn in={fadeIn} duration={50}>
                 {children}
                 {children}
               </FadeIn>
               </FadeIn>

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

@@ -336,6 +336,8 @@ export class QueriesTab extends PureComponent<Props, State> {
         renderToolbar={this.renderToolbar}
         renderToolbar={this.renderToolbar}
         toolbarItems={[options, queryInspector, dsHelp]}
         toolbarItems={[options, queryInspector, dsHelp]}
       >
       >
+        <div className="panel-option-section">
+          <div className="panel-option-section__body">
             <div className="query-editor-rows gf-form-group">
             <div className="query-editor-rows gf-form-group">
               <div ref={element => (this.element = element)} />
               <div ref={element => (this.element = element)} />
 
 
@@ -356,6 +358,8 @@ export class QueriesTab extends PureComponent<Props, State> {
                 </div>
                 </div>
               </div>
               </div>
             </div>
             </div>
+          </div>
+        </div>
       </EditorTabBody>
       </EditorTabBody>
     );
     );
   }
   }

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

@@ -105,9 +105,9 @@ export class VisualizationTab extends PureComponent<Props, State> {
     for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
     for (let i = 0; i < panelCtrl.editorTabs.length; i++) {
       template +=
       template +=
         `
         `
-      <div class="form-section" ng-cloak>` +
-        (i > -1 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
-        `<div class="form-section__body">
+      <div class="panel-option-section" ng-cloak>` +
+        (i > -1 ? `<div class="panel-option-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
+        `<div class="panel-option-section__body">
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
           <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
         </div>
         </div>
       </div>
       </div>

public/sass/components/_panel_editor.scss

@@ -63,7 +63,7 @@
 }
 }
 
 
 .panel-editor__content {
 .panel-editor__content {
-  padding: 40px 20px;
+  padding: 0;
 }
 }
 
 
 .panel-editor__toolbar-view {
 .panel-editor__toolbar-view {
@@ -132,7 +132,6 @@
 }
 }
 
 
 .viz-picker {
 .viz-picker {
-  margin-top: -40px;
   padding: 20px;
   padding: 20px;
   position: relative;
   position: relative;
 }
 }
@@ -303,27 +302,10 @@
   width: 30px;
   width: 30px;
 }
 }
 
 
-.form-option-box {
-  margin-bottom: 20px;
-}
-
-.form-option-box__header {
-  border-bottom: 2px solid $dark-4;
-  padding: 5px 0px;
-  font-size: $font-size-md;
-  margin-bottom: 20px;
-}
-
-.form-section {
-  margin-bottom: 10px;
-}
-
-.form-section__header {
-  padding: 5px 10px;
+.panel-option-section__header {
+  padding: 5px 20px;
   font-size: $font-size-h5;
   font-size: $font-size-h5;
-  margin-bottom: 20px;
   background: $input-label-bg;
   background: $input-label-bg;
-  border-radius: 3px;
   position: relative;
   position: relative;
 
 
   .btn {
   .btn {
@@ -333,10 +315,6 @@
   }
   }
 }
 }
 
 
-.form-section__body {
-  padding: 0 10px;
-}
-
-.panel-editor-tabs__item-popover {
-  background: $orange;
+.panel-option-section__body {
+  padding: 20px;
 }
 }

public/sass/components/_query_editor.scss

@@ -13,6 +13,10 @@
   color: $orange;
   color: $orange;
 }
 }
 
 
+.query-editor-rows {
+  margin-top: 20px;
+}
+
 .gf-form-query {
 .gf-form-query {
   display: flex;
   display: flex;
   flex-direction: row;
   flex-direction: row;