Skip to content

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

things are working

parent 9f0d7314
Showing with 57 additions and 24 deletions
public/app/features/dashboard/dashgrid/VisualizationTab.tsx
...@@ -7,6 +7,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa ...@@ -7,6 +7,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa
// Components // Components
import { EditorTabBody } from './EditorTabBody'; import { EditorTabBody } from './EditorTabBody';
import { VizTypePicker } from './VizTypePicker'; import { VizTypePicker } from './VizTypePicker';
import { FadeIn } from 'app/core/components/Animations/FadeIn';
// Types // Types
import { PanelModel } from '../panel_model'; import { PanelModel } from '../panel_model';
...@@ -105,7 +106,7 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -105,7 +106,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
template += template +=
` `
<div class="form-section" ng-cloak>` + <div class="form-section" ng-cloak>` +
(i > 0 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') + (i > -1 ? `<div class="form-section__header">{{ctrl.editorTabs[${i}].title}}</div>` : '') +
`<div class="form-section__body"> `<div class="form-section__body">
<panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab> <panel-editor-tab editor-tab="ctrl.editorTabs[${i}]" ctrl="ctrl"></panel-editor-tab>
</div> </div>
...@@ -139,6 +140,10 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -139,6 +140,10 @@ export class VisualizationTab extends PureComponent<Props, State> {
this.setState({ isVizPickerOpen: true }); this.setState({ isVizPickerOpen: true });
}; };
onCloseVizPicker = () => {
this.setState({ isVizPickerOpen: false });
};
onSearchQueryChange = evt => { onSearchQueryChange = evt => {
const value = evt.target.value; const value = evt.target.value;
this.setState({ this.setState({
...@@ -152,17 +157,19 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -152,17 +157,19 @@ export class VisualizationTab extends PureComponent<Props, State> {
if (this.state.isVizPickerOpen) { if (this.state.isVizPickerOpen) {
return ( return (
<label className="gf-form--has-input-icon"> <>
<input <label className="gf-form--has-input-icon">
type="text" <input
className="gf-form-input width-13" type="text"
placeholder="" className="gf-form-input width-13"
onChange={this.onSearchQueryChange} placeholder=""
value={searchQuery} onChange={this.onSearchQueryChange}
ref={elem => elem && elem.focus()} value={searchQuery}
/> ref={elem => elem && elem.focus()}
<i className="gf-form-input-icon fa fa-search" /> />
</label> <i className="gf-form-input-icon fa fa-search" />
</label>
</>
); );
} else { } else {
return ( return (
...@@ -193,9 +200,14 @@ export class VisualizationTab extends PureComponent<Props, State> { ...@@ -193,9 +200,14 @@ export class VisualizationTab extends PureComponent<Props, State> {
return ( return (
<EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}> <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
<> <>
{isVizPickerOpen && ( <FadeIn in={isVizPickerOpen} duration={200} unmountOnExit={true}>
<VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} /> <VizTypePicker
)} current={plugin}
onTypeChanged={this.onTypeChanged}
searchQuery={searchQuery}
onClose={this.onCloseVizPicker}
/>
</FadeIn>
{this.renderPanelOptions()} {this.renderPanelOptions()}
</> </>
</EditorTabBody> </EditorTabBody>
......
public/app/features/dashboard/dashgrid/VizTypePicker.tsx
...@@ -9,6 +9,7 @@ export interface Props { ...@@ -9,6 +9,7 @@ export interface Props {
current: PanelPlugin; current: PanelPlugin;
onTypeChanged: (newType: PanelPlugin) => void; onTypeChanged: (newType: PanelPlugin) => void;
searchQuery: string; searchQuery: string;
onClose: () => void;
} }
export class VizTypePicker extends PureComponent<Props> { export class VizTypePicker extends PureComponent<Props> {
...@@ -61,10 +62,23 @@ export class VizTypePicker extends PureComponent<Props> { ...@@ -61,10 +62,23 @@ export class VizTypePicker extends PureComponent<Props> {
}; };
render() { render() {
const { onClose } = this.props;
const filteredPluginList = this.getFilteredPluginList(); const filteredPluginList = this.getFilteredPluginList();
return ( return (
<div className="viz-picker">{filteredPluginList.map((plugin, index) => this.renderVizPlugin(plugin, index))}</div> <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>
</div>
); );
} }
} }
public/sass/_variables.dark.scss
...@@ -271,7 +271,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black; ...@@ -271,7 +271,7 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black;
$tab-border-color: $dark-4; $tab-border-color: $dark-4;
// Toolbar // Toolbar
$toolbar-bg: $black; $toolbar-bg: $input-bg;
// Pagination // Pagination
// ------------------------- // -------------------------
...@@ -375,6 +375,7 @@ $checkbox-color: $dark-1; ...@@ -375,6 +375,7 @@ $checkbox-color: $dark-1;
//Panel Edit //Panel Edit
// ------------------------- // -------------------------
$panel-editor-shadow: 0 0 20px black; $panel-editor-shadow: 0 0 20px black;
$panel-editor-border: 1px solid $dark-3;
$panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black); $panel-editor-side-menu-shadow: drop-shadow(0 0 10px $black);
$panel-editor-toolbar-view-bg: $black; $panel-editor-toolbar-view-bg: $black;
$panel-editor-viz-item-shadow: 0 0 8px $dark-5; $panel-editor-viz-item-shadow: 0 0 8px $dark-5;
......
public/sass/_variables.light.scss
...@@ -384,6 +384,7 @@ $checkbox-color: $gray-7; ...@@ -384,6 +384,7 @@ $checkbox-color: $gray-7;
//Panel Edit //Panel Edit
// ------------------------- // -------------------------
$panel-editor-shadow: 2px 2px 8px $gray-3; $panel-editor-shadow: 2px 2px 8px $gray-3;
$panel-editor-border: 1px solid $dark-4;
$panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3); $panel-editor-side-menu-shadow: drop-shadow(0 0 2px $gray-3);
$panel-editor-toolbar-view-bg: $white; $panel-editor-toolbar-view-bg: $white;
$panel-editor-viz-item-shadow: 0 0 4px $gray-3; $panel-editor-viz-item-shadow: 0 0 4px $gray-3;
......
public/sass/components/_buttons.scss
...@@ -78,6 +78,7 @@ ...@@ -78,6 +78,7 @@
.btn-link { .btn-link {
color: $btn-link-color; color: $btn-link-color;
background: transparent;
} }
// Set the backgrounds // Set the backgrounds
......
public/sass/components/_panel_editor.scss
...@@ -34,8 +34,8 @@ ...@@ -34,8 +34,8 @@
flex-grow: 1; flex-grow: 1;
background: $page-bg; background: $page-bg;
margin: 0 20px 0 84px; margin: 0 20px 0 84px;
border-left: 2px solid $orange;
border-radius: 3px; border-radius: 3px;
border: $panel-editor-border;
box-shadow: $panel-editor-shadow; box-shadow: $panel-editor-shadow;
} }
...@@ -133,17 +133,14 @@ ...@@ -133,17 +133,14 @@
} }
.viz-picker { .viz-picker {
background: $panel-editor-toolbar-view-bg;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: -40px -20px; margin-bottom: 40px;
margin-bottom: 13px;
padding: 20px;
} }
.viz-picker__item { .viz-picker__item {
background: $panel-editor-viz-item-bg; background: $panel-bg;
border: $panel-editor-viz-item-border; border: $panel-border;
border-radius: 3px; border-radius: 3px;
height: 100px; height: 100px;
width: 150px; width: 150px;
...@@ -323,6 +320,13 @@ ...@@ -323,6 +320,13 @@
margin-bottom: 20px; margin-bottom: 20px;
background: $input-label-bg; background: $input-label-bg;
border-radius: 3px; border-radius: 3px;
position: relative;
.btn {
position: absolute;
right: 0;
top: 2px;
}
} }
.form-section__body { .form-section__body {
......
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