wip: style changes

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

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

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

@@ -336,23 +336,27 @@ export class QueriesTab extends PureComponent<Props, State> {
         renderToolbar={this.renderToolbar}
         toolbarItems={[options, queryInspector, dsHelp]}
       >
-        <div className="query-editor-rows gf-form-group">
-          <div ref={element => (this.element = element)} />
-
-          <div className="gf-form-query">
-            <div className="gf-form gf-form-query-letter-cell">
-              <label className="gf-form-label">
-                <span className="gf-form-query-letter-cell-carret muted">
-                  <i className="fa fa-caret-down" />
-                </span>
-                <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
-              </label>
-              {!isAddingMixed && (
-                <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
-                  Add Query
-                </button>
-              )}
-              {isAddingMixed && this.renderMixedPicker()}
+        <div className="panel-option-section">
+          <div className="panel-option-section__body">
+            <div className="query-editor-rows gf-form-group">
+              <div ref={element => (this.element = element)} />
+
+              <div className="gf-form-query">
+                <div className="gf-form gf-form-query-letter-cell">
+                  <label className="gf-form-label">
+                    <span className="gf-form-query-letter-cell-carret muted">
+                      <i className="fa fa-caret-down" />
+                    </span>
+                    <span className="gf-form-query-letter-cell-letter">{panel.getNextQueryLetter()}</span>
+                  </label>
+                  {!isAddingMixed && (
+                    <button className="btn btn-secondary gf-form-btn" onClick={this.onAddQueryClick}>
+                      Add Query
+                    </button>
+                  )}
+                  {isAddingMixed && this.renderMixedPicker()}
+                </div>
+              </div>
             </div>
           </div>
         </div>

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++) {
       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>
         </div>
       </div>

public/sass/components/_panel_editor.scss

@@ -63,7 +63,7 @@
 }
 
 .panel-editor__content {
-  padding: 40px 20px;
+  padding: 0;
 }
 
 .panel-editor__toolbar-view {
@@ -132,7 +132,6 @@
 }
 
 .viz-picker {
-  margin-top: -40px;
   padding: 20px;
   position: relative;
 }
@@ -303,27 +302,10 @@
   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;
-  margin-bottom: 20px;
   background: $input-label-bg;
-  border-radius: 3px;
   position: relative;
 
   .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;
 }
 
+.query-editor-rows {
+  margin-top: 20px;
+}
+
 .gf-form-query {
   display: flex;
   flex-direction: row;