Skip to content

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

panel edit ux experiments

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