Commit c7e29630 by Torkel Ödegaard

panel edit ux experiments

parent e47fc40b
......@@ -4,6 +4,7 @@ import { FadeIn } from 'app/core/components/Animations/FadeIn';
interface Props {
children: JSX.Element;
heading: string;
main?: EditorToolBarView;
toolbarItems: EditorToolBarView[];
}
......@@ -94,17 +95,16 @@ export class EditorTabBody extends PureComponent<Props, State> {
}
render() {
const { children, toolbarItems, main } = this.props;
const { children, toolbarItems, main, heading } = this.props;
const { openView } = this.state;
return (
<>
{main && (
<div className="toolbar">
{this.renderMainSelection(main)}
<div className="gf-form--grow" />
{toolbarItems.map(item => this.renderButton(item))}
</div>
)}
<div className="panel-editor__right">
<div className="toolbar">
<div className="toolbar__heading">{heading}</div>
{main && this.renderMainSelection(main)}
<div className="gf-form--grow" />
{toolbarItems.map(item => this.renderButton(item))}
</div>
<div className="panel-editor__scroll">
<CustomScrollbar autoHide={false}>
<div className="panel-editor__content">
......@@ -115,7 +115,7 @@ export class EditorTabBody extends PureComponent<Props, State> {
</div>
</CustomScrollbar>
</div>
</>
</div>
);
}
}
......@@ -50,7 +50,7 @@ export class GeneralTab extends PureComponent<Props> {
};
return (
<EditorTabBody main={currentDataSource} toolbarItems={[]}>
<EditorTabBody toolbarItems={[]}>
<div ref={element => (this.element = element)} />
</EditorTabBody>
);
......
......@@ -26,7 +26,6 @@ interface PanelEditorProps {
interface PanelEditorTab {
id: string;
text: string;
icon: string;
}
export class PanelEditor extends PureComponent<PanelEditorProps> {
......@@ -74,16 +73,14 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
const activeTab = store.getState().location.query.tab || 'queries';
const tabs = [
{ id: 'general', text: 'General', icon: 'gicon gicon-preferences' },
{ id: 'queries', text: 'Queries', icon: 'fa fa-database' },
{ id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' },
{ id: 'queries', text: 'Queries' },
{ id: 'visualization', text: 'Visualization' },
];
if (config.alertingEnabled && plugin.id === 'graph') {
tabs.push({
id: 'alert',
text: 'Alert',
icon: 'gicon gicon-alert',
});
}
......@@ -96,11 +93,9 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
</div>
<div className="panel-editor-tabs">
<ul className="gf-tabs">
{tabs.map(tab => {
return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
})}
</ul>
</div>
{this.renderCurrentTab(activeTab)}
</div>
......@@ -116,15 +111,15 @@ interface TabItemParams {
function TabItem({ tab, activeTab, onClick }: TabItemParams) {
const tabClasses = classNames({
'gf-tabs-link': true,
'panel-editor-tabs__link': true,
active: activeTab === tab.id,
});
return (
<li className="gf-tabs-item" onClick={() => onClick(tab)}>
<div className="panel-editor-tabs__item" onClick={() => onClick(tab)}>
<a className={tabClasses}>
<i className={tab.icon} /> {tab.text}
<img src={`public/img/panel-tabs/${tab.id}${activeTab === tab.id ? '-selected' : ''}.svg`} />
</a>
</li>
</div>
);
}
......@@ -238,7 +238,7 @@ export class QueriesTab extends PureComponent<Props, State> {
};
return (
<EditorTabBody main={dsInformation} toolbarItems={[queryInspector, dsHelp, options]}>
<EditorTabBody heading="Queries" main={dsInformation} toolbarItems={[queryInspector, dsHelp, options]}>
<div ref={element => (this.element = element)} style={{ width: '100%' }} />
</EditorTabBody>
);
......
......@@ -127,7 +127,7 @@ export class VisualizationTab extends PureComponent<Props> {
};
return (
<EditorTabBody main={panelSelection} toolbarItems={[]}>
<EditorTabBody heading="Visualization" main={panelSelection} toolbarItems={[]}>
{this.renderPanelOptions()}
</EditorTabBody>
);
......
......@@ -24,11 +24,17 @@
.panel-editor-container__editor {
margin-top: $panel-margin*2;
display: flex;
flex-direction: column;
flex-direction: row;
height: 65%;
position: relative;
}
.panel-editor__right {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.panel-editor__scroll {
flex-grow: 1;
min-width: 0;
......@@ -37,6 +43,7 @@
.panel-editor__content {
padding: 40px 20px;
background: $input-label-bg;
}
.panel-in-fullscreen {
......@@ -149,22 +156,13 @@
.panel-editor-tabs {
position: relative;
z-index: 2;
box-shadow: $page-header-shadow;
border-bottom: 1px solid $page-header-border-color;
padding: 0 $dashboard-padding;
@include clearfix();
.active.gf-tabs-link {
background: $toolbar-tab-bg;
}
display: flex;
flex-direction: column;
padding: 40px 10px 10px 10px;
}
.panel-editor-tabs__close {
padding: 5px 9px;
border-radius: $border-radius;
float: right;
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
.panel-editor-tabs__item {
margin-bottom: 25px;
}
.ds-picker-list {
......
......@@ -2,14 +2,17 @@
display: flex;
align-content: center;
align-items: center;
background: $toolbar-bg;
box-shadow: $toolbar-shadow;
padding: 7px 20px 7px 20px;
padding: 3px 20px 3px 20px;
position: relative;
z-index: 1;
flex: 0 0 auto;
}
.toolbar__heading {
font-size: $font-size-lg;
padding-right: 10px;
}
.toolbar__main {
padding: $input-padding-y $input-padding-x;
font-size: $font-size-md;
......
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