IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-12-12 14:44:40 +01:00
parent 5adb0f79df
commit 1751a51088
3 changed files with 46 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
public/app/features/dashboard/dashgrid/VisualizationTab.tsx
View File

@ -5,7 +5,7 @@ import React, { PureComponent } from 'react';
import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader';
// Components // Components
import { EditorTabBody } from './EditorTabBody'; import { EditorTabBody, EditorToolBarView } from './EditorTabBody';
import { VizTypePicker } from './VizTypePicker'; import { VizTypePicker } from './VizTypePicker';
import { FadeIn } from 'app/core/components/Animations/FadeIn'; import { FadeIn } from 'app/core/components/Animations/FadeIn';
@ -155,23 +155,23 @@ export class VisualizationTab extends PureComponent<Props, State> {
const { plugin } = this.props; const { plugin } = this.props;
const { searchQuery } = this.state; const { searchQuery } = this.state;
// if (this.state.isVizPickerOpen) { if (this.state.isVizPickerOpen) {
// return ( return (
// <> <>
// <label className="gf-form--has-input-icon"> <label className="gf-form--has-input-icon">
// <input <input
// type="text" type="text"
// className="gf-form-input width-13" className="gf-form-input width-13"
// placeholder="" placeholder=""
// onChange={this.onSearchQueryChange} onChange={this.onSearchQueryChange}
// value={searchQuery} value={searchQuery}
// ref={elem => elem && elem.focus()} ref={elem => elem && elem.focus()}
// /> />
// <i className="gf-form-input-icon fa fa-search" /> <i className="gf-form-input-icon fa fa-search" />
// </label> </label>
// </> </>
// ); );
// } else { } else {
return ( return (
<div className="toolbar__main" onClick={this.onOpenVizPicker}> <div className="toolbar__main" onClick={this.onOpenVizPicker}>
<img className="toolbar__main-image" src={plugin.info.logos.small} /> <img className="toolbar__main-image" src={plugin.info.logos.small} />
@ -179,7 +179,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
<i className="fa fa-caret-down" /> <i className="fa fa-caret-down" />
</div> </div>
); );
// } }
}; };
onTypeChanged = (plugin: PanelPlugin) => { onTypeChanged = (plugin: PanelPlugin) => {
@ -190,18 +190,26 @@ export class VisualizationTab extends PureComponent<Props, State> {
render() { render() {
const { plugin } = this.props; const { plugin } = this.props;
const { isVizPickerOpen, searchQuery } = this.state; const { isVizPickerOpen, searchQuery } = this.state;
const toolbarItems: EditorToolBarView = [];
const panelHelp = { if (!isVizPickerOpen) {
toolbarItems.push({
title: '', title: '',
icon: 'fa fa-question', icon: 'fa fa-question',
render: () => <h2>Help</h2>, render: () => <h2>Help</h2>,
}; });
}
return ( return (
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}> <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={toolbarItems}>
<> <>
<FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}> <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
<VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} onClose={this.onCloseVizPicker} /> <VizTypePicker
current={plugin}
onTypeChanged={this.onTypeChanged}
searchQuery={searchQuery}
onClose={this.onCloseVizPicker}
/>
</FadeIn> </FadeIn>
{this.renderPanelOptions()} {this.renderPanelOptions()}
</> </>

10
public/app/features/dashboard/dashgrid/VizTypePicker.tsx
View File

@ -66,19 +66,11 @@ export class VizTypePicker extends PureComponent<Props> {
const filteredPluginList = this.getFilteredPluginList(); const filteredPluginList = this.getFilteredPluginList();
return ( return (
<div className="form-section">
<div className="form-section__header">
<span>Type selection</span>
<button className="btn btn-link" onClick={onClose}>
<i className="fa fa-remove" />
</button>
</div>
<div className="form-section__body">
<div className="viz-picker"> <div className="viz-picker">
<div className="viz-picker-list">
{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))} {filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
</div> </div>
</div> </div>
</div>
); );
} }
} }

12
public/sass/components/_panel_editor.scss
View File

@ -133,14 +133,20 @@
} }
.viz-picker { .viz-picker {
background: $toolbar-bg;
margin: -40px -20px 40px 106px;
padding: 20px;
position: relative;
}
.viz-picker-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 40px;
} }
.viz-picker__item { .viz-picker__item {
background: $panel-bg; background: $panel-editor-viz-item-bg;
border: $panel-border; border: $panel-editor-viz-item-border;
border-radius: 3px; border-radius: 3px;
height: 100px; height: 100px;
width: 150px; width: 150px;