panel edit ux experiments

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

@@ -4,6 +4,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 interface Props {
   children: JSX.Element;
+  heading: string;
   main?: EditorToolBarView;
   toolbarItems: EditorToolBarView[];
 }
@@ -94,17 +95,16 @@ export class EditorTabBody extends PureComponent<Props, State> {
   }
 
   render() {
-    const { children, toolbarItems, main } = this.props;
+    const { children, toolbarItems, main, heading } = this.props;
     const { openView } = this.state;
     return (
-      <>
-        {main && (
-          <div className="toolbar">
-            {this.renderMainSelection(main)}
-            <div className="gf-form--grow" />
-            {toolbarItems.map(item => this.renderButton(item))}
-          </div>
-        )}
+      <div className="panel-editor__right">
+        <div className="toolbar">
+          <div className="toolbar__heading">{heading}</div>
+          {main && this.renderMainSelection(main)}
+          <div className="gf-form--grow" />
+          {toolbarItems.map(item => this.renderButton(item))}
+        </div>
         <div className="panel-editor__scroll">
           <CustomScrollbar autoHide={false}>
             <div className="panel-editor__content">
@@ -115,7 +115,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
             </div>
           </CustomScrollbar>
         </div>
-      </>
+      </div>
     );
   }
 }

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

@@ -50,7 +50,7 @@ export class GeneralTab extends PureComponent<Props> {
     };
 
     return (
-      <EditorTabBody main={currentDataSource} toolbarItems={[]}>
+      <EditorTabBody toolbarItems={[]}>
         <div ref={element => (this.element = element)} />
       </EditorTabBody>
     );

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

@@ -26,7 +26,6 @@ interface PanelEditorProps {
 interface PanelEditorTab {
   id: string;
   text: string;
-  icon: string;
 }
 
 export class PanelEditor extends PureComponent<PanelEditorProps> {
@@ -74,16 +73,14 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
     const activeTab = store.getState().location.query.tab || 'queries';
 
     const tabs = [
-      { id: 'general', text: 'General', icon: 'gicon gicon-preferences' },
-      { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
-      { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
+      { id: 'queries', text: 'Queries' },
+      { id: 'visualization', text: 'Visualization' },
     ];
 
     if (config.alertingEnabled && plugin.id === 'graph') {
       tabs.push({
         id: 'alert',
         text: 'Alert',
-        icon: 'gicon gicon-alert',
       });
     }
 
@@ -96,11 +93,9 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
         </div>
 
         <div className="panel-editor-tabs">
-          <ul className="gf-tabs">
             {tabs.map(tab => {
               return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
             })}
-          </ul>
         </div>
         {this.renderCurrentTab(activeTab)}
       </div>
@@ -116,15 +111,15 @@ interface TabItemParams {
 
 function TabItem({ tab, activeTab, onClick }: TabItemParams) {
   const tabClasses = classNames({
-    'gf-tabs-link': true,
+    'panel-editor-tabs__link': true,
     active: activeTab === tab.id,
   });
 
   return (
-    <li className="gf-tabs-item" onClick={() => onClick(tab)}>
+    <div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
       <a className={tabClasses}>
-        <i className={tab.icon} /> {tab.text}
+        <img src={`public/img/panel-tabs/${tab.id}${activeTab === tab.id ? '-selected' : ''}.svg`} />
       </a>
-    </li>
+    </div>
   );
 }

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

@@ -238,7 +238,7 @@ export class QueriesTab extends PureComponent<Props, State> {
     };
 
     return (
-      <EditorTabBody main={dsInformation} toolbarItems={[queryInspector, dsHelp, options]}>
+      <EditorTabBody heading="Queries" main={dsInformation} toolbarItems={[queryInspector, dsHelp, options]}>
         <div ref={element => (this.element = element)} style={{ width: '100%' }} />
       </EditorTabBody>
     );

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

@@ -127,7 +127,7 @@ export class VisualizationTab extends PureComponent<Props> {
     };
 
     return (
-      <EditorTabBody main={panelSelection} toolbarItems={[]}>
+      <EditorTabBody heading="Visualization" main={panelSelection} toolbarItems={[]}>
         {this.renderPanelOptions()}
       </EditorTabBody>
     );

public/sass/components/_panel_editor.scss

@@ -24,11 +24,17 @@
 .panel-editor-container__editor {
   margin-top: $panel-margin*2;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   height: 65%;
   position: relative;
 }
 
+.panel-editor__right {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
 .panel-editor__scroll {
   flex-grow: 1;
   min-width: 0;
@@ -37,6 +43,7 @@
 
 .panel-editor__content {
   padding: 40px 20px;
+  background: $input-label-bg;
 }
 
 .panel-in-fullscreen {
@@ -149,22 +156,13 @@
 .panel-editor-tabs {
   position: relative;
   z-index: 2;
-  box-shadow: $page-header-shadow;
-  border-bottom: 1px solid $page-header-border-color;
-  padding: 0 $dashboard-padding;
-
-  @include clearfix();
-
-  .active.gf-tabs-link {
-    background: $toolbar-tab-bg;
-  }
+  display: flex;
+  flex-direction: column;
+  padding: 40px 10px 10px 10px;
 }
 
-.panel-editor-tabs__close {
-  padding: 5px 9px;
-  border-radius: $border-radius;
-  float: right;
-  @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
+.panel-editor-tabs__item {
+  margin-bottom: 25px;
 }
 
 .ds-picker-list {

public/sass/components/_toolbar.scss

@@ -2,14 +2,17 @@
   display: flex;
   align-content: center;
   align-items: center;
-  background: $toolbar-bg;
-  box-shadow: $toolbar-shadow;
-  padding: 7px 20px 7px 20px;
+  padding: 3px 20px 3px 20px;
   position: relative;
   z-index: 1;
   flex: 0 0 auto;
 }
 
+.toolbar__heading {
+  font-size: $font-size-lg;
+  padding-right: 10px;
+}
+
 .toolbar__main {
   padding: $input-padding-y $input-padding-x;
   font-size: $font-size-md;