Skip to content

N
nexpie-grafana-theme
Commit 9272af26 by Torkel Ödegaard Committed by GitHub
Options

NewPanelEditor: Panel edit tweaks (#22415) 

* NewPanelEditor: Alternative edit layout

* Fixed full height issue

* panel-edit-tabs experiment

* minor tweaks

* PanelEditor: Minor tweaks
parent 1dd404a1
Showing with 62 additions and 46 deletions
public/app/core/components/BackButton/BackButton.tsx
...@@ -21,7 +21,7 @@ export const BackButton: React.FC<Props> = props => { ...@@ -21,7 +21,7 @@ export const BackButton: React.FC<Props> = props => {
BackButton.displayName = 'BackButton'; BackButton.displayName = 'BackButton';
const getStyles = stylesFactory((theme: GrafanaTheme) => { const getStyles = stylesFactory((theme: GrafanaTheme) => {
const hoverColor = selectThemeVariant({ dark: theme.colors.gray25, light: theme.colors.gray85 }, theme.type); const hoverColor = selectThemeVariant({ dark: theme.colors.gray15, light: theme.colors.gray85 }, theme.type);
return { return {
wrapper: css` wrapper: css`
...@@ -56,7 +56,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -56,7 +56,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
} }
.gicon { .gicon {
opacity: 0.9;
font-size: 26px; font-size: 26px;
} }
...@@ -68,11 +67,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -68,11 +67,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
opacity: 1; opacity: 1;
transform: scale(0.8); transform: scale(0.8);
} }
.gicon {
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
} }
`, `,
}; };
......
public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx
...@@ -24,7 +24,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -24,7 +24,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
container: css` container: css`
position: relative; position: relative;
display: flex; display: flex;
padding: 2px 2px;
`, `,
}; };
}); });
......
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
...@@ -213,23 +213,18 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -213,23 +213,18 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
}} }}
</AutoSizer> </AutoSizer>
</div> </div>
<div className={styles.noScrollPaneContent}> <div className={styles.tabsWrapper}>
<PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} /> <PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} />
</div> </div>
</SplitPane> </SplitPane>
); );
} }
render() { renderToolbar() {
const { dashboard, location, panel, uiState, initDone } = this.props; const { dashboard, location, uiState, panel } = this.props;
const styles = getStyles(config.theme); const styles = getStyles(config.theme);
if (!initDone) {
return null;
}
return ( return (
<div className={styles.wrapper}>
<div className={styles.toolbar}> <div className={styles.toolbar}>
<div className={styles.toolbarLeft}> <div className={styles.toolbarLeft}>
<BackButton onClick={this.onPanelExit} /> <BackButton onClick={this.onPanelExit} />
...@@ -237,12 +232,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -237,12 +232,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
</div> </div>
<div className={styles.toolbarLeft}> <div className={styles.toolbarLeft}>
<div className={styles.toolbarItem}> <div className={styles.toolbarItem}>
<Forms.Button <Forms.Button className={styles.toolbarItem} variant="secondary" onClick={this.onDiscard}>
className={styles.toolbarItem} Discard changes
icon="fa fa-remove" </Forms.Button>
variant="destructive"
onClick={this.onDiscard}
/>
</div> </div>
<div className={styles.toolbarItem}> <div className={styles.toolbarItem}>
<Forms.Select <Forms.Select
...@@ -252,6 +244,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -252,6 +244,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
/> />
</div> </div>
<div className={styles.toolbarItem}> <div className={styles.toolbarItem}>
<DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
</div>
<div className={styles.toolbarItem}>
<Forms.Button <Forms.Button
className={styles.toolbarItem} className={styles.toolbarItem}
icon="fa fa-sliders" icon="fa fa-sliders"
...@@ -259,13 +254,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -259,13 +254,26 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
onClick={this.onTogglePanelOptions} onClick={this.onTogglePanelOptions}
/> />
</div> </div>
<div>
<DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
</div> </div>
</div> </div>
);
}
renderOptionsPane(styles: any) {
return (
<div className={styles.panelOptionsPane}>
<CustomScrollbar>
{this.renderFieldOptions()}
<OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
</CustomScrollbar>
</div> </div>
<div className={styles.editorBody}> );
{uiState.isPanelOptionsVisible ? ( }
renderWithOptionsPane(styles: any) {
const { uiState } = this.props;
return (
<SplitPane <SplitPane
split="vertical" split="vertical"
minSize={100} minSize={100}
...@@ -277,16 +285,24 @@ export class PanelEditorUnconnected extends PureComponent<Props> { ...@@ -277,16 +285,24 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
onDragFinished={size => this.onDragFinished(Pane.Right, size)} onDragFinished={size => this.onDragFinished(Pane.Right, size)}
> >
{this.renderHorizontalSplit(styles)} {this.renderHorizontalSplit(styles)}
<div className={styles.panelOptionsPane}> {this.renderOptionsPane(styles)}
<CustomScrollbar>
{this.renderFieldOptions()}
<OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
</CustomScrollbar>
</div>
</SplitPane> </SplitPane>
) : ( );
this.renderHorizontalSplit(styles) }
)}
render() {
const { initDone, uiState } = this.props;
const styles = getStyles(config.theme);
if (!initDone) {
return null;
}
return (
<div className={styles.wrapper}>
{this.renderToolbar()}
<div className={styles.panesWrapper}>
{uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
</div> </div>
</div> </div>
); );
...@@ -352,10 +368,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -352,10 +368,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: ${background}; background: ${background};
padding: ${theme.spacing.sm}; display: flex;
flex-direction: column;
`,
panesWrapper: css`
flex: 1 1 0;
min-height: 0;
width: 100%;
position: relative;
`, `,
panelWrapper: css` panelWrapper: css`
width: 100%; width: 100%;
padding-left: ${theme.spacing.sm};
height: 100%; height: 100%;
`, `,
resizerV: cx( resizerV: cx(
...@@ -377,7 +401,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -377,7 +401,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
border-top-width: 1px; border-top-width: 1px;
` `
), ),
noScrollPaneContent: css` tabsWrapper: css`
height: 100%; height: 100%;
width: 100%; width: 100%;
`, `,
...@@ -385,18 +409,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -385,18 +409,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: ${theme.colors.pageBg}; background: ${theme.colors.pageBg};
border: 1px solid ${theme.colors.pageHeaderBorder};
border-bottom: none; border-bottom: none;
`, `,
toolbar: css` toolbar: css`
display: flex; display: flex;
padding-bottom: ${theme.spacing.sm}; padding: ${theme.spacing.sm};
justify-content: space-between; justify-content: space-between;
`, `,
editorBody: css`
height: calc(100% - 55px);
position: relative;
`,
toolbarLeft: css` toolbarLeft: css`
padding-left: ${theme.spacing.sm}; padding-left: ${theme.spacing.sm};
display: flex; display: flex;
...@@ -404,6 +423,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { ...@@ -404,6 +423,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
`, `,
toolbarItem: css` toolbarItem: css`
margin-right: ${theme.spacing.sm}; margin-right: ${theme.spacing.sm};
&:last-child {
margin-right: 0;
}
`, `,
centeringContainer: css` centeringContainer: css`
display: flex; display: flex;
......
public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
...@@ -62,7 +62,9 @@ const getPanelEditorTabsStyles = stylesFactory(() => { ...@@ -62,7 +62,9 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
`, `,
tabBar: css``, tabBar: css`
padding-left: ${theme.spacing.sm};
`,
tabContent: css` tabContent: css`
padding: 0; padding: 0;
display: flex; display: flex;
...@@ -70,8 +72,6 @@ const getPanelEditorTabsStyles = stylesFactory(() => { ...@@ -70,8 +72,6 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
flex-grow: 1; flex-grow: 1;
min-height: 0; min-height: 0;
background: ${theme.colors.pageBg}; background: ${theme.colors.pageBg};
border-right: 1px solid ${theme.colors.pageHeaderBorder};
border-left: 1px solid ${theme.colors.pageHeaderBorder};
.toolbar { .toolbar {
background: transparent; background: transparent;
......
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