Skip to content

N
nexpie-grafana-theme
Commit bcf669fa by Torkel Ödegaard
Options

ux experiments

parent 94c35e25
Showing with 33 additions and 51 deletions
public/app/features/dashboard/dashgrid/PanelEditor.tsx
...@@ -7,6 +7,7 @@ import { QueriesTab } from './QueriesTab'; ...@@ -7,6 +7,7 @@ import { QueriesTab } from './QueriesTab';
import { PanelPlugin, PluginExports } from 'app/types/plugins'; import { PanelPlugin, PluginExports } from 'app/types/plugins';
import { VizTypePicker } from './VizTypePicker'; import { VizTypePicker } from './VizTypePicker';
import { updateLocation } from 'app/core/actions'; import { updateLocation } from 'app/core/actions';
import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
interface PanelEditorProps { interface PanelEditorProps {
panel: PanelModel; panel: PanelModel;
...@@ -31,6 +32,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> { ...@@ -31,6 +32,7 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
this.tabs = [ this.tabs = [
{ id: 'queries', text: 'Queries', icon: 'fa fa-database' }, { id: 'queries', text: 'Queries', icon: 'fa fa-database' },
{ id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' }, { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
{ id: 'alert', text: 'Alert', icon: 'gicon gicon-alert' },
]; ];
} }
...@@ -52,13 +54,9 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> { ...@@ -52,13 +54,9 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
renderVizTab() { renderVizTab() {
return ( return (
<div className="viz-editor"> <div className="viz-editor">
<div className="viz-editor-col1"> <VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.props.onTypeChanged} />
<VizTypePicker currentType={this.props.panel.type} onTypeChanged={this.props.onTypeChanged} /> <h5 className="page-heading p-t-2">Options</h5>
</div> {this.renderPanelOptions()}
<div className="viz-editor-col2">
<h5 className="page-heading">Options</h5>
{this.renderPanelOptions()}
</div>
</div> </div>
); );
} }
...@@ -95,8 +93,10 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> { ...@@ -95,8 +93,10 @@ export class PanelEditor extends React.Component<PanelEditorProps, any> {
</div> </div>
<div className="panel-editor__content"> <div className="panel-editor__content">
{activeTab === 'queries' && this.renderQueriesTab()} <CustomScrollbar>
{activeTab === 'visualization' && this.renderVizTab()} {activeTab === 'queries' && this.renderQueriesTab()}
{activeTab === 'visualization' && this.renderVizTab()}
</CustomScrollbar>
</div> </div>
</div> </div>
); );
......
public/app/features/dashboard/dashgrid/VizTypePicker.tsx
...@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react'; ...@@ -2,7 +2,6 @@ import React, { PureComponent } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import config from 'app/core/config'; import config from 'app/core/config';
import { PanelPlugin } from 'app/types/plugins'; import { PanelPlugin } from 'app/types/plugins';
import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar';
import _ from 'lodash'; import _ from 'lodash';
interface Props { interface Props {
...@@ -50,19 +49,21 @@ export class VizTypePicker extends PureComponent<Props, State> { ...@@ -50,19 +49,21 @@ export class VizTypePicker extends PureComponent<Props, State> {
render() { render() {
return ( return (
<div className="viz-picker"> <div className="viz-picker">
<div className="viz-picker__search"> <div className="viz-picker__bar">
<div className="gf-form gf-form--grow"> <label className="gf-form-label">Visualization</label>
<label className="gf-form--has-input-icon gf-form--grow"> <label className="gf-form-input width-10">{this.props.currentType}</label>
<input type="text" className="gf-form-input" placeholder="Search type" /> <div className="gf-form--grow" />
<i className="gf-form-input-icon fa fa-search" /> <label className="gf-form--has-input-icon">
</label> <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> </div>
<div className="viz-picker__items">
<CustomScrollbar> <div className="viz-picker__items">{this.state.pluginList.map(this.renderVizPlugin)}</div>
<div className="scroll-margin-helper">{this.state.pluginList.map(this.renderVizPlugin)}</div>
</CustomScrollbar>
</div>
</div> </div>
); );
} }
......
public/sass/components/_viz_editor.scss
.viz-editor { .viz-editor {
display: flex;
height: 100%; height: 100%;
} }
.viz-editor-col1 {
width: 210px;
height: 100%;
margin-right: 40px;
}
.viz-editor-col2 {
flex-grow: 1;
}
.viz-picker { .viz-picker {
display: flex;
flex-direction: column;
height: 100%;
} }
.viz-picker__search { .viz-picker__search {
...@@ -25,7 +11,8 @@ ...@@ -25,7 +11,8 @@
.viz-picker__items { .viz-picker__items {
flex-grow: 1; flex-grow: 1;
height: calc(100% - 50px); display: flex;
flex-wrap: wrap;
} }
.viz-picker__item { .viz-picker__item {
...@@ -34,10 +21,10 @@ ...@@ -34,10 +21,10 @@
border-radius: 3px; border-radius: 3px;
padding: $spacer; padding: $spacer;
width: 100%;
height: 60px; height: 60px;
width: 157px;
text-align: center; text-align: center;
margin-bottom: 6px; margin: 0 7px 7px 0;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
...@@ -49,16 +36,9 @@ ...@@ -49,16 +36,9 @@
} }
&--selected { &--selected {
// border: 1px solid $orange;
@include left-brand-border-gradient();
.viz-picker__item-name { .viz-picker__item-name {
color: $text-color; color: $text-color;
} }
.viz-picker__item-img {
filter: saturate(100%);
}
} }
} }
...@@ -77,7 +57,6 @@ ...@@ -77,7 +57,6 @@
.viz-picker__item-img { .viz-picker__item-img {
height: 100%; height: 100%;
filter: saturate(30%);
} }
.panel-editor-container { .panel-editor-container {
...@@ -92,7 +71,7 @@ ...@@ -92,7 +71,7 @@
.panel-editor-container__editor { .panel-editor-container__editor {
height: 65%; height: 65%;
margin-top: $panel-margin; margin-top: $panel-margin*2;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
...@@ -101,7 +80,7 @@ ...@@ -101,7 +80,7 @@
flex-grow: 1; flex-grow: 1;
min-width: 0; min-width: 0;
height: 100%; height: 100%;
padding: 20px 0 20px 20px; padding: 0px 0 20px 20px;
max-width: 1100px; max-width: 1100px;
} }
...@@ -126,3 +105,8 @@ ...@@ -126,3 +105,8 @@
padding-right: 5px; padding-right: 5px;
} }
} }
.viz-picker__bar {
display: flex;
margin-bottom: $spacer;
}
public/sass/pages/_dashboard.scss
...@@ -10,9 +10,6 @@ ...@@ -10,9 +10,6 @@
} }
.panel-in-fullscreen { .panel-in-fullscreen {
.dashboard-container--has-submenu {
height: 100%;
}
.scroll-canvas--dashboard { .scroll-canvas--dashboard {
height: 100%; height: 100%;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment