diff --git a/public/app/core/components/BackButton/BackButton.tsx b/public/app/core/components/BackButton/BackButton.tsx index 31e44bab426..528e7dbbcb9 100644 --- a/public/app/core/components/BackButton/BackButton.tsx +++ b/public/app/core/components/BackButton/BackButton.tsx @@ -21,7 +21,7 @@ export const BackButton: React.FC = props => { BackButton.displayName = 'BackButton'; 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 { wrapper: css` @@ -56,7 +56,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { } .gicon { - opacity: 0.9; font-size: 26px; } @@ -68,11 +67,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { opacity: 1; transform: scale(0.8); } - - .gicon { - opacity: 1; - transition: opacity 0.2s ease-in-out; - } } `, }; diff --git a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx index 0bdd27b4fa3..4d6ba3b6c15 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavTimeControls.tsx @@ -24,7 +24,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { container: css` position: relative; display: flex; - padding: 2px 2px; `, }; }); diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index 14d3a0b7e7b..3b01156d18a 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -213,15 +213,85 @@ export class PanelEditorUnconnected extends PureComponent { }} -
+
); } + renderToolbar() { + const { dashboard, location, uiState, panel } = this.props; + const styles = getStyles(config.theme); + + return ( +
+
+ + +
+
+
+ + Discard changes + +
+
+ v.value === uiState.mode)} + options={displayModes} + onChange={this.onDiplayModeChange} + /> +
+
+ +
+
+ +
+
+
+ ); + } + + renderOptionsPane(styles: any) { + return ( +
+ + {this.renderFieldOptions()} + {this.renderVisSettings()} + +
+ ); + } + + renderWithOptionsPane(styles: any) { + const { uiState } = this.props; + + return ( + (document.body.style.cursor = 'col-resize')} + onDragFinished={size => this.onDragFinished(Pane.Right, size)} + > + {this.renderHorizontalSplit(styles)} + {this.renderOptionsPane(styles)} + + ); + } + render() { - const { dashboard, location, panel, uiState, initDone } = this.props; + const { initDone, uiState } = this.props; const styles = getStyles(config.theme); if (!initDone) { @@ -230,63 +300,9 @@ export class PanelEditorUnconnected extends PureComponent { return (
-
-
- - -
-
-
- -
-
- v.value === uiState.mode)} - options={displayModes} - onChange={this.onDiplayModeChange} - /> -
-
- -
-
- -
-
-
-
- {uiState.isPanelOptionsVisible ? ( - (document.body.style.cursor = 'col-resize')} - onDragFinished={size => this.onDragFinished(Pane.Right, size)} - > - {this.renderHorizontalSplit(styles)} -
- - {this.renderFieldOptions()} - {this.renderVisSettings()} - -
-
- ) : ( - this.renderHorizontalSplit(styles) - )} + {this.renderToolbar()} +
+ {uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
); @@ -352,10 +368,18 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { right: 0; bottom: 0; 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` width: 100%; + padding-left: ${theme.spacing.sm}; height: 100%; `, resizerV: cx( @@ -377,7 +401,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { border-top-width: 1px; ` ), - noScrollPaneContent: css` + tabsWrapper: css` height: 100%; width: 100%; `, @@ -385,18 +409,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { height: 100%; width: 100%; background: ${theme.colors.pageBg}; - border: 1px solid ${theme.colors.pageHeaderBorder}; border-bottom: none; `, toolbar: css` display: flex; - padding-bottom: ${theme.spacing.sm}; + padding: ${theme.spacing.sm}; justify-content: space-between; `, - editorBody: css` - height: calc(100% - 55px); - position: relative; - `, toolbarLeft: css` padding-left: ${theme.spacing.sm}; display: flex; @@ -404,6 +423,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { `, toolbarItem: css` margin-right: ${theme.spacing.sm}; + + &:last-child { + margin-right: 0; + } `, centeringContainer: css` display: flex; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index 583f83ece8b..219d32c3051 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -62,7 +62,9 @@ const getPanelEditorTabsStyles = stylesFactory(() => { flex-direction: column; height: 100%; `, - tabBar: css``, + tabBar: css` + padding-left: ${theme.spacing.sm}; + `, tabContent: css` padding: 0; display: flex; @@ -70,8 +72,6 @@ const getPanelEditorTabsStyles = stylesFactory(() => { flex-grow: 1; min-height: 0; background: ${theme.colors.pageBg}; - border-right: 1px solid ${theme.colors.pageHeaderBorder}; - border-left: 1px solid ${theme.colors.pageHeaderBorder}; .toolbar { background: transparent;