NewPanelEditor: Panel edit tweaks (#22415)

* NewPanelEditor: Alternative edit layout

* Fixed full height issue

* panel-edit-tabs experiment

* minor tweaks

* PanelEditor: Minor tweaks

public/app/core/components/BackButton/BackButton.tsx

@@ -21,7 +21,7 @@ export const BackButton: React.FC<Props> = 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;
-        }
       }
     `,
   };

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;
     `,
   };
 });

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -213,15 +213,85 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
             }}
           </AutoSizer>
         </div>
-        <div className={styles.noScrollPaneContent}>
+        <div className={styles.tabsWrapper}>
           <PanelEditorTabs panel={panel} dashboard={dashboard} tabs={tabs} onChangeTab={this.onChangeTab} data={data} />
         </div>
       </SplitPane>
     );
   }
 
+  renderToolbar() {
+    const { dashboard, location, uiState, panel } = this.props;
+    const styles = getStyles(config.theme);
+
+    return (
+      <div className={styles.toolbar}>
+        <div className={styles.toolbarLeft}>
+          <BackButton onClick={this.onPanelExit} />
+          <PanelTitle value={panel.title} onChange={this.onPanelTitleChange} />
+        </div>
+        <div className={styles.toolbarLeft}>
+          <div className={styles.toolbarItem}>
+            <Forms.Button className={styles.toolbarItem} variant="secondary" onClick={this.onDiscard}>
+              Discard changes
+            </Forms.Button>
+          </div>
+          <div className={styles.toolbarItem}>
+            <Forms.Select
+              value={displayModes.find(v => v.value === uiState.mode)}
+              options={displayModes}
+              onChange={this.onDiplayModeChange}
+            />
+          </div>
+          <div className={styles.toolbarItem}>
+            <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
+          </div>
+          <div className={styles.toolbarItem}>
+            <Forms.Button
+              className={styles.toolbarItem}
+              icon="fa fa-sliders"
+              variant="secondary"
+              onClick={this.onTogglePanelOptions}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderOptionsPane(styles: any) {
+    return (
+      <div className={styles.panelOptionsPane}>
+        <CustomScrollbar>
+          {this.renderFieldOptions()}
+          <OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
+        </CustomScrollbar>
+      </div>
+    );
+  }
+
+  renderWithOptionsPane(styles: any) {
+    const { uiState } = this.props;
+
+    return (
+      <SplitPane
+        split="vertical"
+        minSize={100}
+        primary="second"
+        /* Use persisted state for default size */
+        defaultSize={uiState.rightPaneSize}
+        resizerClassName={styles.resizerV}
+        onDragStarted={() => (document.body.style.cursor = 'col-resize')}
+        onDragFinished={size => this.onDragFinished(Pane.Right, size)}
+      >
+        {this.renderHorizontalSplit(styles)}
+        {this.renderOptionsPane(styles)}
+      </SplitPane>
+    );
+  }
+
   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<Props> {
 
     return (
       <div className={styles.wrapper}>
-        <div className={styles.toolbar}>
-          <div className={styles.toolbarLeft}>
-            <BackButton onClick={this.onPanelExit} />
-            <PanelTitle value={panel.title} onChange={this.onPanelTitleChange} />
-          </div>
-          <div className={styles.toolbarLeft}>
-            <div className={styles.toolbarItem}>
-              <Forms.Button
-                className={styles.toolbarItem}
-                icon="fa fa-remove"
-                variant="destructive"
-                onClick={this.onDiscard}
-              />
-            </div>
-            <div className={styles.toolbarItem}>
-              <Forms.Select
-                value={displayModes.find(v => v.value === uiState.mode)}
-                options={displayModes}
-                onChange={this.onDiplayModeChange}
-              />
-            </div>
-            <div className={styles.toolbarItem}>
-              <Forms.Button
-                className={styles.toolbarItem}
-                icon="fa fa-sliders"
-                variant="secondary"
-                onClick={this.onTogglePanelOptions}
-              />
-            </div>
-            <div>
-              <DashNavTimeControls dashboard={dashboard} location={location} updateLocation={updateLocation} />
-            </div>
-          </div>
-        </div>
-        <div className={styles.editorBody}>
-          {uiState.isPanelOptionsVisible ? (
-            <SplitPane
-              split="vertical"
-              minSize={100}
-              primary="second"
-              /* Use persisted state for default size */
-              defaultSize={uiState.rightPaneSize}
-              resizerClassName={styles.resizerV}
-              onDragStarted={() => (document.body.style.cursor = 'col-resize')}
-              onDragFinished={size => this.onDragFinished(Pane.Right, size)}
-            >
-              {this.renderHorizontalSplit(styles)}
-              <div className={styles.panelOptionsPane}>
-                <CustomScrollbar>
-                  {this.renderFieldOptions()}
-                  <OptionsGroup title="Old settings">{this.renderVisSettings()}</OptionsGroup>
-                </CustomScrollbar>
-              </div>
-            </SplitPane>
-          ) : (
-            this.renderHorizontalSplit(styles)
-          )}
+        {this.renderToolbar()}
+        <div className={styles.panesWrapper}>
+          {uiState.isPanelOptionsVisible ? this.renderWithOptionsPane(styles) : this.renderHorizontalSplit(styles)}
         </div>
       </div>
     );
@@ -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;

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;