public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

panel-edit-ux-tabs on top alternative

Browse Source
This commit is contained in:
Torkel Ödegaard
2018-11-08 12:25:22 +01:00
parent 964a21b091
commit 8a9d721c00
1 changed files with 94 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard/dashgrid/PanelEditor.tsx
+94 -19
View File
@@ -87,7 +87,50 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
};
render() {
return this.renderAsTabs();
// return this.renderAsBoxes();
// const { location } = store.getState();
// const activeTab = location.query.tab || 'queries';
//
// return (
// <div className="panel-editor-container__editor">
// <div className="panel-editor-resizer">
// <div className="panel-editor-resizer__handle">
// <div className="panel-editor-resizer__handle-dots" />
// </div>
// </div>
// <div className="panel-editor__aside">
// <h2 className="panel-editor__aside-header">
// <i className="fa fa-cog" />
// Edit Panel
// </h2>
//
// {this.tabs.map(tab => {
// return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
// })}
//
// <div className="panel-editor__aside-actions">
// <button className="btn btn-secondary" onClick={this.onClose}>
// Back to dashboard
// </button>
// <button className="btn btn-inverse" onClick={this.onClose}>
// Discard changes
// </button>
// </div>
// </div>
// <div className="panel-editor__content">
// <CustomScrollbar>
// {activeTab === 'queries' && this.renderQueriesTab()}
// {activeTab === 'visualization' && this.renderVizTab()}
// </CustomScrollbar>
// </div>
// </div>
// );
}
renderAsTabs() {
const { location } = store.getState();
const { panel } = this.props;
const activeTab = location.query.tab || 'queries';
return (
@@ -97,31 +140,50 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
<div className="panel-editor-resizer__handle-dots" />
</div>
</div>
<div className="panel-editor__aside">
<h2 className="panel-editor__aside-header">
<i className="fa fa-cog" />
Edit Panel
</h2>
{this.tabs.map(tab => {
return <TabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
})}
<div className="tabbed-view tabbed-view--new">
<div className="tabbed-view-header">
<h3 className="tabbed-view-panel-title">{panel.title}</h3>
<div className="panel-editor__aside-actions">
<button className="btn btn-secondary" onClick={this.onClose}>
Back to dashboard
</button>
<button className="btn btn-inverse" onClick={this.onClose}>
Discard changes
<ul className="gf-tabs">
{this.tabs.map(tab => {
return <OldTabItem tab={tab} activeTab={activeTab} onClick={this.onChangeTab} key={tab.id} />;
})}
</ul>
<button className="tabbed-view-close-btn" onClick={this.onClose}>
<i className="fa fa-remove" />
</button>
</div>
<div className="tabbed-view-body">
<CustomScrollbar>
{activeTab === 'queries' && this.renderQueriesTab()}
{activeTab === 'visualization' && this.renderVizTab()}
</CustomScrollbar>
</div>
</div>
<div className="panel-editor__content">
<CustomScrollbar>
{activeTab === 'queries' && this.renderQueriesTab()}
{activeTab === 'visualization' && this.renderVizTab()}
</CustomScrollbar>
</div>
);
}
renderAsBoxes() {
const { location } = store.getState();
const { panel } = this.props;
const activeTab = location.query.tab || 'queries';
return (
<div className="panel-editor-container__editor">
<div className="panel-editor-resizer">
<div className="panel-editor-resizer__handle">
<div className="panel-editor-resizer__handle-dots" />
</div>
</div>
<CustomScrollbar>
{this.renderQueriesTab()}
{this.renderVizTab()}
</CustomScrollbar>
</div>
);
}
@@ -145,3 +207,16 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) {
</a>
);
}
function OldTabItem({ tab, activeTab, onClick }: TabItemParams) {
const tabClasses = classNames({
'gf-tabs-link': true,
active: activeTab === tab.id,
});
return (
<li className="gf-tabs-item" onClick={() => onClick(tab)}>
<a className={tabClasses}>{tab.text}</a>
</li>
);
}