Skip to content

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

wip

parent 45fde57e
Showing with 78 additions and 88 deletions
public/app/features/dashboard/dashgrid/DataSourcePicker.tsx
......@@ -7,10 +7,12 @@ import { DataSourceSelectItem } from 'app/types';
export interface Props {
onChangeDataSource: (ds: DataSourceSelectItem) => void;
datasources: DataSourceSelectItem[];
current: DataSourceSelectItem;
}
interface State {
searchQuery: string;
isOpen: boolean;
}
export class DataSourcePicker extends PureComponent<Props, State> {
......@@ -18,8 +20,10 @@ export class DataSourcePicker extends PureComponent<Props, State> {
constructor(props) {
super(props);
this.state = {
searchQuery: '',
isOpen: false,
};
}
......@@ -95,11 +99,27 @@ export class DataSourcePicker extends PureComponent<Props, State> {
);
}
onOpen = () => {
this.setState({ isOpen: true });
};
render() {
const { current } = this.props;
const { isOpen } = this.state;
return (
<div className="ds-picker">
{!isOpen && (
<div className="toolbar__main" onClick={this.onOpen}>
<img className="toolbar__main-image" src={current.meta.info.logos.small} />
<div className="toolbar__main-name">{current.name}</div>
<i className="fa fa-caret-down" />
</div>
)}
{isOpen && (
<KeyboardNavigation
render={(keyNavProps: KeyboardNavigationProps) => (
<>
<div className="ds-picker-menu">
<div className="cta-form__bar">
{this.renderFilters(keyNavProps)}
<div className="gf-form--grow" />
......@@ -107,9 +127,11 @@ export class DataSourcePicker extends PureComponent<Props, State> {
<div className="ds-picker-list">
{this.getDataSources().map((ds, index) => this.renderDataSource(ds, index, keyNavProps))}
</div>
</>
</div>
)}
/>
)}
</div>
);
}
}
......
public/app/features/dashboard/dashgrid/EditorTabBody.tsx
......@@ -5,22 +5,10 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
interface Props {
children: JSX.Element;
heading: string;
main?: EditorToolBarView;
toolbarItems: EditorToolBarView[];
}
export interface EditorToolBarView {
title: string;
imgSrc?: string;
icon?: string;
disabled?: boolean;
onClick?: () => void;
render: (closeFunction: any) => JSX.Element | JSX.Element[];
renderToolbar: () => JSX.Element;
}
interface State {
openView?: EditorToolBarView;
isOpen: boolean;
fadeIn: boolean;
}
......@@ -29,9 +17,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
super(props);
this.state = {
openView: null,
fadeIn: false,
isOpen: false,
};
}
......@@ -39,87 +25,56 @@ export class EditorTabBody extends PureComponent<Props, State> {
this.setState({ fadeIn: true });
}
onToggleToolBarView = (item: EditorToolBarView) => {
this.setState({
openView: item,
isOpen: !this.state.isOpen,
});
};
onCloseOpenView = () => {
this.setState({ isOpen: false });
};
static getDerivedStateFromProps(props, state) {
if (state.openView) {
const activeToolbarItem = props.toolbarItems.find(
item => item.title === state.openView.title && item.icon === state.openView.icon
);
if (activeToolbarItem) {
return {
...state,
openView: activeToolbarItem,
};
}
}
return state;
}
renderMainSelection(view: EditorToolBarView) {
return (
<div className="toolbar__main" onClick={() => this.onToggleToolBarView(view)} key={view.title + view.icon}>
<img className="toolbar__main-image" src={view.imgSrc} />
<div className="toolbar__main-name">{view.title}</div>
<i className="fa fa-caret-down" />
</div>
);
}
renderButton(view: EditorToolBarView) {
const onClick = () => {
if (view.onClick) {
view.onClick();
}
this.onToggleToolBarView(view);
};
return (
<div className="nav-buttons" key={view.title + view.icon}>
<button className="btn navbar-button" onClick={onClick} disabled={view.disabled}>
{view.icon && <i className={view.icon} />} {view.title}
</button>
</div>
);
}
renderOpenView(view: EditorToolBarView) {
return (
<div className="toolbar-subview">
<button className="toolbar-subview__close" onClick={this.onCloseOpenView}>
<i className="fa fa-chevron-up" />
</button>
{view.render(this.onCloseOpenView)}
</div>
);
}
// renderMainSelection(view: EditorToolBarView) {
// return (
// <div className="toolbar__main" onClick={() => this.onToggleToolBarView(view)} key={view.title + view.icon}>
// <img className="toolbar__main-image" src={view.imgSrc} />
// <div className="toolbar__main-name">{view.title}</div>
// <i className="fa fa-caret-down" />
// </div>
// );
// }
//
// renderButton(view: EditorToolBarView) {
// const onClick = () => {
// if (view.onClick) {
// view.onClick();
// }
// this.onToggleToolBarView(view);
// };
//
// return (
// <div className="nav-buttons" key={view.title + view.icon}>
// <button className="btn navbar-button" onClick={onClick} disabled={view.disabled}>
// {view.icon && <i className={view.icon} />} {view.title}
// </button>
// </div>
// );
// }
//
// renderOpenView(view: EditorToolBarView) {
// return (
// <div className="toolbar-subview">
// <button className="toolbar-subview__close" onClick={this.onCloseOpenView}>
// <i className="fa fa-chevron-up" />
// </button>
// {view.render(this.onCloseOpenView)}
// </div>
// );
// }
render() {
const { children, toolbarItems, main, heading } = this.props;
const { openView, fadeIn, isOpen } = this.state;
const { children, renderToolbar, heading } = this.props;
const { fadeIn } = this.state;
return (
<>
<div className="toolbar">
<div className="toolbar__heading">{heading}</div>
{main && this.renderMainSelection(main)}
<div className="gf-form--grow" />
{toolbarItems.map(item => this.renderButton(item))}
{renderToolbar && renderToolbar()}
</div>
<div className="panel-editor__scroll">
<CustomScrollbar autoHide={false}>
<FadeIn in={isOpen} duration={200} unmountOnExit={true}>
<div className="panel-editor__toolbar-view">{openView && this.renderOpenView(openView)}</div>
</FadeIn>
<div className="panel-editor__content">
<FadeIn in={fadeIn} duration={50}>
{children}
......
public/sass/components/_panel_editor.scss
......@@ -273,6 +273,19 @@
}
}
.ds-picker {
position: relative;
}
.ds-picker-menu {
min-width: 400px;
max-width: 500px;
position: absolute;
background: $panel-editor-toolbar-view-bg;
padding: 5px;
overflow: auto;
}
.ds-picker-list__name {
text-overflow: ellipsis;
overflow: hidden;
......
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