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

60
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';
// Components
import { EditorTabBody } from './EditorTabBody';
import { EditorTabBody, EditorToolBarView } from './EditorTabBody';
import { VizTypePicker } from './VizTypePicker';
import { FadeIn } from 'app/core/components/Animations/FadeIn';
@ -155,23 +155,23 @@ export class VisualizationTab extends PureComponent<Props, State> {
const { plugin } = this.props;
const { searchQuery } = this.state;
// if (this.state.isVizPickerOpen) {
// return (
// <>
// <label className="gf-form--has-input-icon">
// <input
// type="text"
// className="gf-form-input width-13"
// placeholder=""
// onChange={this.onSearchQueryChange}
// value={searchQuery}
// ref={elem => elem && elem.focus()}
// />
// <i className="gf-form-input-icon fa fa-search" />
// </label>
// </>
// );
// } else {
if (this.state.isVizPickerOpen) {
return (
<>
<label className="gf-form--has-input-icon">
<input
type="text"
className="gf-form-input width-13"
placeholder=""
onChange={this.onSearchQueryChange}
value={searchQuery}
ref={elem => elem && elem.focus()}
/>
<i className="gf-form-input-icon fa fa-search" />
</label>
</>
);
} else {
return (
<div className="toolbar__main" onClick={this.onOpenVizPicker}>
<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" />
</div>
);
// }
}
};
onTypeChanged = (plugin: PanelPlugin) => {
@ -190,18 +190,26 @@ export class VisualizationTab extends PureComponent<Props, State> {
render() {
const { plugin } = this.props;
const { isVizPickerOpen, searchQuery } = this.state;
const toolbarItems: EditorToolBarView = [];
const panelHelp = {
title: '',
icon: 'fa fa-question',
render: () => <h2>Help</h2>,
};
if (!isVizPickerOpen) {
toolbarItems.push({
title: '',
icon: 'fa fa-question',
render: () => <h2>Help</h2>,
});
}
return (
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={toolbarItems}>
<>
<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>
{this.renderPanelOptions()}
</>

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

@ -66,17 +66,9 @@ export class VizTypePicker extends PureComponent<Props> {
const filteredPluginList = this.getFilteredPluginList();
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">
{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
</div>
<div className="viz-picker">
<div className="viz-picker-list">
{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}
</div>
</div>
);

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

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