more ux progress

public/app/core/reducers/location.ts

@@ -18,6 +18,7 @@ export const locationReducer = (state = initialState, action: Action): LocationS
 
       if (action.payload.partial) {
         query = _.defaults(query, state.query);
+        query = _.omitBy(query, _.isNull);
       }
 
       return {

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
+
 import { PanelModel } from '../panel_model';
 import { DashboardModel } from '../dashboard_model';
 import { store } from 'app/store/configureStore';
@@ -55,7 +56,6 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
     return (
       <div className="viz-editor">
         <VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.props.onTypeChanged} />
-        <h5 className="page-heading p-t-2">Options</h5>
         {this.renderPanelOptions()}
       </div>
     );
@@ -73,7 +73,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
   onClose = () => {
     store.dispatch(
       updateLocation({
-        query: { tab: false, fullscreen: false, edit: false },
+        query: { tab: null, fullscreen: null, edit: null },
         partial: true,
       })
     );
@@ -85,6 +85,11 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
 
     return (
       <div className="panel-editor-container__editor">
+        <div className="panel-editor-resizer">
+          <div className="panel-editor-resizer__handle">
+            <div className="panel-editor-resizer__handle-dots" />
+          </div>
+        </div>
         <div className="panel-editor__aside">
           <h2 className="panel-editor__aside-header">
             <i className="fa fa-cog" />

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

@@ -1,7 +1,9 @@
 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 {
@@ -40,30 +42,45 @@ export class VizTypePicker extends PureComponent<Props, State> {
 
     return (
       <div key={index} className={cssClass} onClick={() => this.props.onTypeChanged(plugin)} title={plugin.name}>
-        <img className="viz-picker__item-img" src={plugin.info.logos.small} />
         <div className="viz-picker__item-name">{plugin.name}</div>
+        <img className="viz-picker__item-img" src={plugin.info.logos.small} />
       </div>
     );
   };
 
+  renderFilters() {
+    return (
+      <>
+        <label className="gf-form--has-input-icon">
+          <input type="text" className="gf-form-input width-13" placeholder="" />
+          <i className="gf-form-input-icon fa fa-search" />
+        </label>
+        <div>
+          <button className="btn toggle-btn gf-form-btn active">Basic Types</button>
+          <button className="btn toggle-btn gf-form-btn">Master Types</button>
+        </div>
+      </>
+    );
+  }
+
   render() {
+    const { currentType } = this.props;
+    const { pluginList } = this.state;
+
     return (
       <div className="viz-picker">
         <div className="viz-picker__bar">
           <label className="gf-form-label">Visualization</label>
-          <label className="gf-form-input width-10">{this.props.currentType}</label>
+          <label className="gf-form-input width-10">
-          <div className="gf-form--grow" />
+            <span>{currentType}</span>
-          <label className="gf-form--has-input-icon">
-            <input type="text" className="gf-form-input width-13" placeholder="" />
-            <i className="gf-form-input-icon fa fa-search" />
           </label>
-          <div>
+          <div className="gf-form--grow" />
-            <button className="btn toggle-btn gf-form-btn active">Basic Types</button>
+          {this.renderFilters()}
-            <button className="btn toggle-btn gf-form-btn">Master Types</button>
-          </div>
         </div>
 
-        <div className="viz-picker__items">{this.state.pluginList.map(this.renderVizPlugin)}</div>
+        <CustomScrollbar>
+          <div className="viz-picker__items">{pluginList.map(this.renderVizPlugin)}</div>
+        </CustomScrollbar>
       </div>
     );
   }

public/sass/components/_viz_editor.scss

@@ -24,17 +24,14 @@
   }
 }
 
-.viz-picker {
-}
-
 .viz-picker__search {
   flex-grow: 0;
 }
 
 .viz-picker__items {
-  flex-grow: 1;
   display: flex;
-  flex-wrap: wrap;
+  // for scrollbar
+  margin-bottom: 10px;
 }
 
 .viz-picker__item {
@@ -42,16 +39,16 @@
   box-shadow: $card-shadow;
 
   border-radius: 3px;
-  padding: $spacer;
+  height: 70px;
-  height: 60px;
+  width: 130px;
-  width: 157px;
+  flex-shrink: 0;
+  flex-direction: column;
   text-align: center;
-  margin: 0 7px 7px 0;
   cursor: pointer;
   display: flex;
-  flex-shrink: 0;
+  margin-right: 6px;
   border: 1px solid transparent;
-  @include left-brand-border;
+  align-items: center;
 
   &:hover {
     background: $card-background-hover;
@@ -68,17 +65,15 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  font-size: $font-size-h5;
+  font-size: $font-size-sm;
   display: flex;
   flex-direction: column;
   align-self: center;
-  padding-left: $spacer;
+  height: 20px;
-  font-size: $font-size-md;
-  color: $text-muted;
 }
 
 .viz-picker__item-img {
-  height: 100%;
+  height: 40px;
 }
 
 .panel-editor-container {
@@ -96,6 +91,7 @@
   display: flex;
   flex-direction: row;
   height: 65%;
+  position: relative;
 }
 
 .panel-editor__content {
@@ -152,9 +148,8 @@
 .panel-editor__aside-header {
   color: $text-muted;
   font-size: $font-size-h3;
-  padding: 20px 20px 10px 20px;
+  padding: 20px 30px 10px 20px;
   white-space: nowrap;
-  margin-bottom: $spacer;
 
   i {
     font-size: 25px;
@@ -168,3 +163,33 @@
   display: flex;
   margin-bottom: $spacer;
 }
+
+.panel-editor-resizer {
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  top: 1px;
+  padding-left: 32px;
+}
+
+.panel-editor-resizer__handle {
+  display: inline-block;
+  width: 100px;
+  position: relative;
+  background: $input-label-bg;
+  top: -12px;
+  border-radius: 2px;
+  box-shadow: 0 0 8px $black;
+  height: 8px;
+  cursor: grabbing;
+}
+
+.panel-editor-resizer__handle-dots {
+  border-top: 2px dotted $text-color-faint;
+  position: relative;
+  top: 3px;
+}
+
+.panel-editor {
+  height: calc(100% - 10px);
+}