From 641c8da1c72610f596746cac7a0a34f1a627ae42 Mon Sep 17 00:00:00 2001
From: Red Adaya <red.adaya@gmail.com>
Date: Wed, 10 Apr 2024 16:16:07 +0800
Subject: [PATCH] use Button element for close trigger

---
 src/app/workspace/screen/newtabsettings.tsx | 54 ++-------------------
 src/app/workspace/workspace.less            |  2 +-
 src/app/workspace/workspaceview.tsx         |  7 ++-
 3 files changed, 7 insertions(+), 56 deletions(-)

diff --git a/src/app/workspace/screen/newtabsettings.tsx b/src/app/workspace/screen/newtabsettings.tsx
index f0df8260a..da516f60b 100644
--- a/src/app/workspace/screen/newtabsettings.tsx
+++ b/src/app/workspace/screen/newtabsettings.tsx
@@ -5,12 +5,10 @@ import { boundMethod } from "autobind-decorator";
 import { If, For } from "tsx-control-statements/components";
 import cn from "classnames";
 import { GlobalCommandRunner, GlobalModel, Screen } from "@/models";
-import { Button, TextField, Dropdown } from "@/elements";
-import { getRemoteStr, getRemoteStrWithAlias } from "@/common/prompt/prompt";
+import { TextField, Dropdown } from "@/elements";
+import { getRemoteStrWithAlias } from "@/common/prompt/prompt";
 import * as util from "@/util/util";
 import { TabIcon } from "@/elements/tabicon";
-import { ReactComponent as EllipseIcon } from "@/assets/icons/ellipse.svg";
-import { ReactComponent as Check12Icon } from "@/assets/icons/check12.svg";
 import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg";
 import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg";
 import * as appconst from "@/app/appconst";
@@ -18,52 +16,6 @@ import * as appconst from "@/app/appconst";
 import "./screenview.less";
 import "./tabs.less";
 
-@mobxReact.observer
-class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
-    errorMessage: OV<string | null> = mobx.observable.box(null, { name: "NewTabSettings-errorMessage" });
-
-    constructor(props) {
-        super(props);
-    }
-
-    @boundMethod
-    clickNewConnection(): void {
-        GlobalModel.remotesModel.openAddModal({ remoteedit: true });
-    }
-
-    render() {
-        let { screen } = this.props;
-        let rptr = screen.curRemote.get();
-        return (
-            <div className="newtab-container">
-                <div className="newtab-section name-section">
-                    <TabNameTextField screen={screen} errorMessage={this.errorMessage} />
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section conn-section">
-                    <div className="unselectable">
-                        You're connected to <b>[{getRemoteStrWithAlias(rptr)}]</b>. Do you want to change it?
-                    </div>
-                    <div>
-                        <TabRemoteSelector screen={screen} errorMessage={this.errorMessage} />
-                    </div>
-                    <div className="text-caption cr-help-text">
-                        To change connection from the command line use `/connect [alias|user@host]`
-                    </div>
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section">
-                    <TabIconSelector screen={screen} errorMessage={this.errorMessage} />
-                </div>
-                <div className="newtab-spacer" />
-                <div className="newtab-section">
-                    <TabColorSelector screen={screen} errorMessage={this.errorMessage} />
-                </div>
-            </div>
-        );
-    }
-}
-
 @mobxReact.observer
 class TabNameTextField extends React.Component<{ screen: Screen; errorMessage?: OV<string> }, {}> {
     @boundMethod
@@ -240,4 +192,4 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?:
     }
 }
 
-export { NewTabSettings, TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector };
+export { TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector };
diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less
index 019115bc8..122f2cb7b 100644
--- a/src/app/workspace/workspace.less
+++ b/src/app/workspace/workspace.less
@@ -40,7 +40,7 @@
             border-bottom: none;
         }
 
-        .close-icon {
+        .close-button {
             position: absolute;
             right: 10px;
             top: 10px;
diff --git a/src/app/workspace/workspaceview.tsx b/src/app/workspace/workspaceview.tsx
index 651d63593..e463d77ba 100644
--- a/src/app/workspace/workspaceview.tsx
+++ b/src/app/workspace/workspaceview.tsx
@@ -15,10 +15,9 @@ import { ScreenTabs } from "./screen/tabs";
 import { ErrorBoundary } from "@/common/error/errorboundary";
 import { boundMethod } from "autobind-decorator";
 import type { Screen } from "@/models";
-import { Button, TermStyleBlock } from "@/elements";
+import { Button, Dropdown, TermStyleBlock } from "@/elements";
 import { commandRtnHandler } from "@/util/util";
 import { getTermThemes } from "@/util/themeutil";
-import { Dropdown } from "@/elements/dropdown";
 import { getRemoteStrWithAlias } from "@/common/prompt/prompt";
 import { TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector } from "./screen/newtabsettings";
 import * as util from "@/util/util";
@@ -253,9 +252,9 @@ class WorkspaceView extends React.Component<{}, {}> {
                 <ScreenTabs key={"tabs-" + sessionId} session={session} />
                 <If condition={activeScreen != null}>
                     <div key="pulldown" className={cn("tab-settings-pulldown", { closed: !showTabSettings })}>
-                        <button className="close-icon" onClick={this.toggleTabSettings}>
+                        <Button className="close-button secondary ghost" onClick={this.toggleTabSettings}>
                             <i className="fa-solid fa-sharp fa-xmark-large" />
-                        </button>
+                        </Button>
                         <TabSettings key={activeScreen.screenId} screen={activeScreen} />
                         <If condition={showTabSettings && !isHidden}>
                             <TabSettingsPulldownKeybindings />