Moving dock info panel to the top (#1007)

* Moving EditorPanel to the top Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Preventing save with empty yaml Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Make tooltips in @withTooltip narrower Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Not showing api errors in icon Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Success notification for create resource operation Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Button outlined style Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Making second button to stay outlined Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fine-tuning dock info panel colors Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Removing border-radius from ace-editor Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2020-10-02 09:32:20 +03:00 · 2020-10-02 09:32:20 +03:00 · af71834676
commit af71834676
parent 9ecfeb316c
11 changed files with 58 additions and 85 deletions
--- a/src/renderer/components/ace-editor/ace-editor.scss
+++ b/src/renderer/components/ace-editor/ace-editor.scss
@ -7,7 +7,6 @@

  .theme-light & {
    border: 1px solid gainsboro;
-    border-radius: $radius;

    .ace_scrollbar {
      @include custom-scrollbar(dark);
@ -19,7 +18,6 @@
    width: inherit;
    height: inherit;
    font-size: 90%;
-    border-radius: $radius;
  }

  // --Theme customization
--- a/src/renderer/components/button/button.scss
+++ b/src/renderer/components/button/button.scss
@ -41,6 +41,17 @@
    }
  }

+  &.outlined {
+    color: inherit;
+    background: transparent;
+
+    &.active,
+    &:focus {
+      color: inherit;
+      box-shadow: 0 0 0 1px inset;
+    }
+  }
+
  &.big {
    font-size: 2.2 * $unit;
    border-radius: 50px;
--- a/src/renderer/components/button/button.tsx
+++ b/src/renderer/components/button/button.tsx
@ -9,6 +9,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<any>, TooltipDecorator
  primary?: boolean;
  accent?: boolean;
  plain?: boolean;
+  outlined?: boolean;
  hidden?: boolean;
  active?: boolean;
  big?: boolean;
@ -23,12 +24,12 @@ export class Button extends React.PureComponent<ButtonProps, {}> {
  private button: HTMLButtonElement;

  render() {
-    const { className, waiting, label, primary, accent, plain, hidden, active, big, round, tooltip, children, ...props } = this.props;
+    const { className, waiting, label, primary, accent, plain, hidden, active, big, round, outlined, tooltip, children, ...props } = this.props;
    const btnProps = props as Partial<ButtonProps>;
    if (hidden) return null;

    btnProps.className = cssNames('Button', className, {
-      waiting, primary, accent, plain, active, big, round,
+      waiting, primary, accent, plain, active, big, round, outlined
    });

    const btnContent: ReactNode = (
--- a/src/renderer/components/dock/create-resource.tsx
+++ b/src/renderer/components/dock/create-resource.tsx
@ -39,6 +39,7 @@ export class CreateResource extends React.Component<Props> {

  create = async () => {
    if (this.error) return;
+    if (!this.data.trim()) return; // do not save when field is empty
    const resources = jsYaml.safeLoadAll(this.data)
      .filter(v => !!v) // skip empty documents if "---" pasted at the beginning or end
    const createdResources: string[] = [];
@ -54,12 +55,14 @@ export class CreateResource extends React.Component<Props> {
      errors.forEach(Notifications.error);
      if (!createdResources.length) throw errors[0];
    }
-    return (
+    const successMessage = (
      <p>
        <Plural value={createdResources.length} one="Resource" other="Resources"/>{" "}
        <Trans><b>{createdResources.join(", ")}</b> successfully created</Trans>
      </p>
    )
+    Notifications.ok(successMessage)
+    return successMessage
  }

  render() {
@ -67,11 +70,6 @@ export class CreateResource extends React.Component<Props> {
    const { className } = this.props;
    return (
      <div className={cssNames("CreateResource flex column", className)}>
-        <EditorPanel
-          tabId={tabId}
-          value={data}
-          onChange={onChange}
-        />
        <InfoPanel
          tabId={tabId}
          error={error}
@ -79,6 +77,11 @@ export class CreateResource extends React.Component<Props> {
          submitLabel={_i18n._(t`Create`)}
          showNotifications={false}
        />
+        <EditorPanel
+          tabId={tabId}
+          value={data}
+          onChange={onChange}
+        />
      </div>
    )
  }
--- a/src/renderer/components/dock/edit-resource.tsx
+++ b/src/renderer/components/dock/edit-resource.tsx
@ -90,11 +90,6 @@ export class EditResource extends React.Component<Props> {
    const { kind, getNs, getName } = resource;
    return (
      <div className={cssNames("EditResource flex column", this.props.className)}>
-        <EditorPanel
-          tabId={tabId}
-          value={draft}
-          onChange={onChange}
-        />
        <InfoPanel
          tabId={tabId}
          error={error}
@ -109,6 +104,11 @@ export class EditResource extends React.Component<Props> {
            </div>
          )}
        />
+        <EditorPanel
+          tabId={tabId}
+          value={draft}
+          onChange={onChange}
+        />
      </div>
    )
  }
--- a/src/renderer/components/dock/info-panel.scss
+++ b/src/renderer/components/dock/info-panel.scss
@ -2,7 +2,7 @@
  @include hidden-scrollbar;

  background: $dockInfoBackground;
-  border-top: 1px solid $dockInfoBorderColor;
+  border-bottom: 1px solid $dockInfoBorderColor;
  padding: $padding $padding * 2;
  flex-shrink: 0;

@ -12,37 +12,12 @@

  > .controls {
    white-space: nowrap;
-
-    &:empty {
-      display: none;
-    }
+    flex: 1 1;

    &:not(:empty) + .info {
-      border: 1px solid $borderColor;
-      border-top: 0;
-      border-bottom: 0;
      min-height: 25px;
      padding-left: $padding;
      padding-right: $padding;
    }
  }
-
-  > .info {
-    @include hidden-scrollbar;
-
-    min-width: 40px; // min-space for icon
-    flex: 1 1;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-
-    > div {
-      padding-right: $padding;
-      flex-shrink: 0;
-    }
-
-    .Icon {
-      margin: 0;
-      margin-right: $padding;
-    }
-  }
 }
--- a/src/renderer/components/dock/info-panel.tsx
+++ b/src/renderer/components/dock/info-panel.tsx
@ -38,35 +38,29 @@ export class InfoPanel extends Component<Props> {
    showNotifications: true,
  }

-  @observable.ref result: ReactNode;
  @observable error = "";
  @observable waiting = false;

  componentDidMount() {
    disposeOnUnmount(this, [
      reaction(() => this.props.tabId, () => {
-        this.result = ""
-        this.error = ""
        this.waiting = false
      })
    ])
  }

  @computed get errorInfo() {
-    return this.error || this.props.error;
+    return this.props.error;
  }

  submit = async () => {
    const { showNotifications } = this.props;
-    this.result = "";
-    this.error = "";
    this.waiting = true;
    try {
-      this.result = await this.props.submit()
-      if (showNotifications) Notifications.ok(this.result);
+      const result = await this.props.submit();
+      if (showNotifications) Notifications.ok(result);
    } catch (error) {
-      this.error = error.toString();
-      if (showNotifications) Notifications.error(this.error);
+      if (showNotifications) Notifications.error(error.toString());
    } finally {
      this.waiting = false
    }
@ -81,27 +75,15 @@ export class InfoPanel extends Component<Props> {
    dockStore.closeTab(this.props.tabId);
  }

-  renderInfo() {
-    if (!this.props.showInlineInfo) {
+  renderErrorIcon() {
+    if (!this.props.showInlineInfo || !this.errorInfo) {
      return;
    }
-    const { result, errorInfo } = this;
    return (
-      <>
-        {result && (
-          <div className="success flex align-center">
-            <Icon material="done" />
-            <span>{result}</span>
-          </div>
-        )}
-        {errorInfo && (
-          <div className="error flex align-center">
-            <Icon material="error_outline" />
-            <span>{errorInfo}</span>
-          </div>
-        )}
-      </>
-    )
+      <div className="error">
+        <Icon material="error_outline" tooltip={this.errorInfo}/>
+      </div>
+    );
  }

  render() {
@ -114,11 +96,13 @@ export class InfoPanel extends Component<Props> {
          {controls}
        </div>
        <div className="info flex gaps align-center">
-          {waiting ? <><Spinner /> {submittingMessage}</> : this.renderInfo()}
+          {waiting ? <><Spinner /> {submittingMessage}</> : this.renderErrorIcon()}
        </div>
        <Button plain label={<Trans>Cancel</Trans>} onClick={close} />
        <Button
-          primary active
+          active
+          outlined={showSubmitClose}
+          primary={!showSubmitClose}// one button always should be primary (blue)
          label={submitLabel}
          onClick={submit}
          disabled={isDisabled}
--- a/src/renderer/components/dock/install-chart.tsx
+++ b/src/renderer/components/dock/install-chart.tsx
@ -174,11 +174,6 @@ export class InstallChart extends Component<Props> {

    return (
      <div className="InstallChart flex column">
-        <EditorPanel
-          tabId={tabId}
-          value={values}
-          onChange={this.onValuesChange}
-        />
        <InfoPanel
          tabId={tabId}
          controls={panelControls}
@ -188,6 +183,11 @@ export class InstallChart extends Component<Props> {
          submittingMessage={_i18n._(t`Installing...`)}
          showSubmitClose={false}
        />
+        <EditorPanel
+          tabId={tabId}
+          value={values}
+          onChange={this.onValuesChange}
+        />
      </div>
    );
  }
--- a/src/renderer/components/dock/upgrade-chart.tsx
+++ b/src/renderer/components/dock/upgrade-chart.tsx
@ -106,18 +106,13 @@ export class UpgradeChart extends React.Component<Props> {
          themeName="outlined"
          value={version}
          options={versions}
-          formatOptionLabel={this.formatVersionLabel}          
+          formatOptionLabel={this.formatVersionLabel}
          onChange={({ value }: SelectOption) => this.version = value}
        />
      </div>
    )
    return (
      <div className={cssNames("UpgradeChart flex column", className)}>
-        <EditorPanel
-          tabId={tabId}
-          value={value}
-          onChange={onChange}
-        />
        <InfoPanel
          tabId={tabId}
          error={error}
@ -126,6 +121,11 @@ export class UpgradeChart extends React.Component<Props> {
          submittingMessage={_i18n._(t`Updating..`)}
          controls={controlsAndInfo}
        />
+        <EditorPanel
+          tabId={tabId}
+          value={value}
+          onChange={onChange}
+        />
      </div>
    )
  }
--- a/src/renderer/components/tooltip/withTooltip.tsx
+++ b/src/renderer/components/tooltip/withTooltip.tsx
@ -28,6 +28,7 @@ export function withTooltip<T extends React.ComponentType<any>>(Target: T): T {
        const tooltipProps: TooltipProps = {
          targetId: tooltipId,
          tooltipOnParentHover: tooltipOverrideDisabled,
+          formatters: { narrow: true },
          ...(isReactNode(tooltip) ? { children: tooltip } : tooltip),
        };
        targetProps.id = tooltipId;
--- a/src/renderer/themes/kontena-dark.json
+++ b/src/renderer/themes/kontena-dark.json
@ -58,8 +58,8 @@
    "colorVague": "#36393e",
    "colorTerminated": "#4c5053",
    "dockHeadBackground": "#2e3136",
-    "dockInfoBackground": "#111111",
-    "dockInfoBorderColor": "#4c5053",
+    "dockInfoBackground": "#1e2125",
+    "dockInfoBorderColor": "#303136",
    "terminalBackground": "#000000",
    "terminalForeground": "#ffffff",
    "terminalCursor": "#ffffff",