Skip to content

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

wip

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