ux experiments

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

@@ -7,6 +7,7 @@ import { QueriesTab } from './QueriesTab';
 import { PanelPlugin, PluginExports } from 'app/types/plugins';
 import { VizTypePicker } from './VizTypePicker';
 import { updateLocation } from 'app/core/actions';
+import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
 
 interface PanelEditorProps {
   panel: PanelModel;
@@ -31,6 +32,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     this.tabs = [
       { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
       { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
+      { id: 'alert', text: 'Alert', icon: 'gicon gicon-alert' },
     ];
   }
 
@@ -52,14 +54,10 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
   renderVizTab() {
     return (
       <div className="viz-editor">
-        <div className="viz-editor-col1">
         <VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.props.onTypeChanged} />
-        </div>
-        <div className="viz-editor-col2">
-          <h5 className="page-heading">Options</h5>
+        <h5 className="page-heading p-t-2">Options</h5>
         {this.renderPanelOptions()}
       </div>
-      </div>
     );
   }
 
@@ -95,8 +93,10 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
         </div>
 
         <div className="panel-editor__content">
+          <CustomScrollbar>
             {activeTab === 'queries' && this.renderQueriesTab()}
             {activeTab === 'visualization' && this.renderVizTab()}
+          </CustomScrollbar>
         </div>
       </div>
     );

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

@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import config from 'app/core/config';
 import { PanelPlugin } from 'app/types/plugins';
-import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
 import _ from 'lodash';
 
 interface Props {
@@ -50,19 +49,21 @@ export class VizTypePicker extends PureComponent<Props, State> {
   render() {
     return (
       <div className="viz-picker">
-        <div className="viz-picker__search">
-          <div className="gf-form gf-form--grow">
-            <label className="gf-form--has-input-icon gf-form--grow">
-              <input type="text" className="gf-form-input" placeholder="Search type" />
+        <div className="viz-picker__bar">
+          <label className="gf-form-label">Visualization</label>
+          <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="" />
             <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">Master Types</button>
           </div>
         </div>
-        <div className="viz-picker__items">
-          <CustomScrollbar>
-            <div className="scroll-margin-helper">{this.state.pluginList.map(this.renderVizPlugin)}</div>
-          </CustomScrollbar>
-        </div>
+
+        <div className="viz-picker__items">{this.state.pluginList.map(this.renderVizPlugin)}</div>
       </div>
     );
   }

public/sass/components/_viz_editor.scss

 .viz-editor {
-  display: flex;
   height: 100%;
 }
 
-.viz-editor-col1 {
-  width: 210px;
-  height: 100%;
-  margin-right: 40px;
-}
-
-.viz-editor-col2 {
-  flex-grow: 1;
-}
-
 .viz-picker {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
 }
 
 .viz-picker__search {
@@ -25,7 +11,8 @@
 
 .viz-picker__items {
   flex-grow: 1;
-  height: calc(100% - 50px);
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .viz-picker__item {
@@ -34,10 +21,10 @@
 
   border-radius: 3px;
   padding: $spacer;
-  width: 100%;
   height: 60px;
+  width: 157px;
   text-align: center;
-  margin-bottom: 6px;
+  margin: 0 7px 7px 0;
   cursor: pointer;
   display: flex;
   flex-shrink: 0;
@@ -49,16 +36,9 @@
   }
 
   &--selected {
-    // border: 1px solid $orange;
-    @include left-brand-border-gradient();
-
     .viz-picker__item-name {
       color: $text-color;
     }
-
-    .viz-picker__item-img {
-      filter: saturate(100%);
-    }
   }
 }
 
@@ -77,7 +57,6 @@
 
 .viz-picker__item-img {
   height: 100%;
-  filter: saturate(30%);
 }
 
 .panel-editor-container {
@@ -92,7 +71,7 @@
 
 .panel-editor-container__editor {
   height: 65%;
-  margin-top: $panel-margin;
+  margin-top: $panel-margin*2;
   display: flex;
   flex-direction: row;
 }
@@ -101,7 +80,7 @@
   flex-grow: 1;
   min-width: 0;
   height: 100%;
-  padding: 20px 0 20px 20px;
+  padding: 0px 0 20px 20px;
   max-width: 1100px;
 }
 
@@ -126,3 +105,8 @@
     padding-right: 5px;
   }
 }
+
+.viz-picker__bar {
+  display: flex;
+  margin-bottom: $spacer;
+}

public/sass/pages/_dashboard.scss

@@ -10,9 +10,6 @@
 }
 
 .panel-in-fullscreen {
-  .dashboard-container--has-submenu {
-    height: 100%;
-  }
   .scroll-canvas--dashboard {
     height: 100%;
   }