restore delete screen button (#522)

public/themes/default.css

@@ -87,7 +87,7 @@
     --form-element-border-color: rgba(241, 246, 243, 0.15);
     --form-element-bg-color: var(--app-bg-color);
     --form-element-text-color: var(--app-text-primary-color);
-    --form-element-primary-text-color: var(--form-element-text-color);
+    --form-element-primary-text-color: var(--app-text-primary-color);
     --form-element-label-color: var(--app-text-secondary-color);
     --form-element-primary-color: var(--app-accent-color);
     --form-element-secondary-color: rgba(255, 255, 255, 0.2);

public/themes/light.css

@@ -36,8 +36,8 @@
     /* form colors */
     --form-element-border-color: rgba(0, 0, 0, 0.3);
     --form-element-bg-color: var(--app-bg-color);
-    --form-element-text-color: var(--app-text-color);
-    --form-element-primary-text-color: var(--app-bg-color);
+    --form-element-text-color: var(--app-text-primary-color);
+    --form-element-primary-text-color: var(--app-text-primary-color);
     --form-element-label-color: rgba(0, 0, 0, 0.6);
     --form-element-secondary-color: rgba(0, 0, 0, 0.09);
     --form-element-icon-color: rgb(0, 0, 0, 0.6);

src/app/common/elements/button.less

@@ -27,6 +27,10 @@
         }
     }
 
+    &.primary.danger {
+        background: var(--app-error-color);
+    }
+
     &.primary.outlined {
         background: none;
         border: 1px solid var(--form-element-primary-color);
@@ -36,6 +40,37 @@
         }
     }
 
+    &.primary.greyoutlined {
+        background: none;
+        border: 1px solid var(--app-text-secondary-color);
+
+        i {
+            fill: var(--app-text-secondary-color);
+        }
+    }
+
+    &.primary.outlined,
+    &.primary.greyoutlined {
+        &.hover-danger:hover {
+            color: var(--form-element-primary-text-color);
+            border: 1px solid var(--app-error-color);
+            background: var(--app-error-color);
+        }
+    }
+
+    &.primary.outlined.danger {
+        background: none;
+        border: 1px solid var(--app-error-color);
+
+        i {
+            fill: var(--app-error-color);
+        }
+    }
+
+    &.greytext {
+        color: var(--app-text-secondary-color);
+    }
+
     &.primary.ghost {
         background: none;
         i {
@@ -43,6 +78,13 @@
         }
     }
 
+    &.primary.ghost.danger {
+        background: none;
+        i {
+            fill: var(--app-error-color);
+        }
+    }
+
     &.secondary {
         color: var(--form-element-text-color);
         background: var(--form-element-secondary-color);
@@ -56,6 +98,11 @@
         border: 1px solid var(--form-element-text-color);
     }
 
+    &.secondary.outlined.danger {
+        background: none;
+        border: 1px solid var(--app-error-color);
+    }
+
     &.secondary.ghost {
         background: none;
     }

src/app/workspace/screen/screenview.less

@@ -161,11 +161,11 @@
 }
 
 .newtab-container {
-    margin: 16px;
+    margin: 8px 16px 0 16px;
 
     .newtab-section {
         display: flex;
-        padding: 16px;
+        padding: 10px 16px;
         flex-direction: column;
         align-items: flex-start;
         gap: 8px;

src/app/workspace/screen/screenview.tsx

@@ -558,9 +558,6 @@ class ScreenWindowView extends React.Component<{ session: Session; screen: Scree
         return (
             <div className="window-view" ref={this.windowViewRef} style={{ width: this.props.width }}>
                 <If condition={lines.length == 0}>
-                    <If condition={false && screen.nextLineNum.get() == 1}>
-                        <NewTabSettings screen={screen} />
-                    </If>
                     <If condition={screen.nextLineNum.get() != 1}>
                         <div className="window-empty" ref={this.windowViewRef} data-screenid={screen.screenId}>
                             <div key="lines" className="lines"></div>

src/app/workspace/workspace.less

@@ -28,7 +28,6 @@
         position: absolute;
         top: var(--screentabs-height);
         width: 100%;
-        height: 330px;
         transition: height 0.2s ease-in-out;
         overflow: hidden;
         z-index: 11;

src/app/workspace/workspaceview.tsx

@@ -8,7 +8,7 @@ import cn from "classnames";
 import dayjs from "dayjs";
 import localizedFormat from "dayjs/plugin/localizedFormat";
 import { If } from "tsx-control-statements/components";
-import { GlobalModel } from "@/models";
+import { GlobalModel, GlobalCommandRunner } from "@/models";
 import { CmdInput } from "./cmdinput/cmdinput";
 import { ScreenView } from "./screen/screenview";
 import { ScreenTabs } from "./screen/tabs";
@@ -17,11 +17,17 @@ import * as textmeasure from "@/util/textmeasure";
 import "./workspace.less";
 import { boundMethod } from "autobind-decorator";
 import type { Screen } from "@/models";
+import { Button } from "@/elements";
 import { getRemoteStr, getRemoteStrWithAlias } from "@/common/prompt/prompt";
 import { TabColorSelector, TabIconSelector, TabNameTextField, TabRemoteSelector } from "./screen/newtabsettings";
+import * as util from "@/util/util";
 
 dayjs.extend(localizedFormat);
 
+const ScreenDeleteMessage = `
+Are you sure you want to delete this tab?
+`.trim();
+
 class SessionKeybindings extends React.Component<{}, {}> {
     componentDidMount() {
         let keybindManager = GlobalModel.keybindManager;
@@ -105,6 +111,29 @@ class TabSettingsPulldownKeybindings extends React.Component<{}, {}> {
 class TabSettings extends React.Component<{ screen: Screen }, {}> {
     errorMessage: OV<string> = mobx.observable.box(null, { name: "TabSettings-errorMessage" });
 
+    @boundMethod
+    handleDeleteScreen(): void {
+        const { screen } = this.props;
+        if (screen == null) {
+            return;
+        }
+        if (screen.getScreenLines().lines.length == 0) {
+            GlobalCommandRunner.screenDelete(screen.screenId, false);
+            GlobalModel.modalsModel.popModal();
+            return;
+        }
+        let message = ScreenDeleteMessage;
+        let alertRtn = GlobalModel.showAlert({ message: message, confirm: true, markdown: true });
+        alertRtn.then((result) => {
+            if (!result) {
+                return;
+            }
+            let prtn = GlobalCommandRunner.screenDelete(screen.screenId, false);
+            util.commandRtnHandler(prtn, this.errorMessage);
+            GlobalModel.modalsModel.popModal();
+        });
+    }
+
     render() {
         let { screen } = this.props;
         let rptr = screen.curRemote.get();
@@ -133,6 +162,16 @@ class TabSettings extends React.Component<{ screen: Screen }, {}> {
                 <div className="newtab-section">
                     <TabColorSelector screen={screen} errorMessage={this.errorMessage} />
                 </div>
+                <div className="newtab-spacer" />
+                <div className="newtab-section">
+                    <Button
+                        onClick={this.handleDeleteScreen}
+                        style={{ paddingTop: 4, paddingBottom: 4 }}
+                        className="primary greyoutlined greytext hover-danger"
+                    >
+                        Delete Tab
+                    </Button>
+                </div>
             </div>
         );
     }