From cdfc4467631675c56efdb554335129a1f8192504 Mon Sep 17 00:00:00 2001 From: Red J Adaya Date: Wed, 24 Apr 2024 04:14:56 +0800 Subject: [PATCH] Improved tab settings pull down (#592) * add label to tab settings terminal theme dropdown * add connection label. add New Conection item * fix wrong prop * simplify logic * fix conflicts --- src/app/common/elements/dropdown.less | 7 ++- src/app/common/elements/dropdown.tsx | 14 +++-- src/app/workspace/screen/newtabsettings.tsx | 67 +++++---------------- src/app/workspace/workspace.less | 6 +- src/app/workspace/workspaceview.tsx | 8 +-- src/types/custom.d.ts | 4 +- 6 files changed, 41 insertions(+), 65 deletions(-) diff --git a/src/app/common/elements/dropdown.less b/src/app/common/elements/dropdown.less index 0da677772..e70637a02 100644 --- a/src/app/common/elements/dropdown.less +++ b/src/app/common/elements/dropdown.less @@ -5,7 +5,7 @@ width: 100%; border: 2px solid var(--form-element-border-color); border-radius: 6px; - line-height: 22px; + line-height: 20px; background: var(--form-element-bg-color); &.no-label { @@ -63,11 +63,14 @@ display: flex; min-width: 120px; padding: 5px 8px; - justify-content: space-between; align-items: center; align-self: stretch; border-radius: 6px; + i { + margin-right: 8px; + } + &-highlighted, &:hover { background: rgba(241, 246, 243, 0.08); diff --git a/src/app/common/elements/dropdown.tsx b/src/app/common/elements/dropdown.tsx index eaa0f704b..9adbad315 100644 --- a/src/app/common/elements/dropdown.tsx +++ b/src/app/common/elements/dropdown.tsx @@ -163,7 +163,7 @@ class Dropdown extends React.Component { if (isOpen) { const option = options[highlightedIndex]; if (option) { - this.handleSelect(option.value, undefined); + this.handleSelect(option, undefined); } } else { this.toggleDropdown(); @@ -185,18 +185,19 @@ class Dropdown extends React.Component { handleKeyDown(event: React.KeyboardEvent) {} @boundMethod - handleSelect(value: string, event?: React.MouseEvent | React.KeyboardEvent) { + handleSelect({ value, noop }: DropdownItem, event?: React.MouseEvent | React.KeyboardEvent) { const { onChange } = this.props; if (event) { event.stopPropagation(); // This stops the event from bubbling up to the wrapper } - if (!("value" in this.props)) { - this.setState({ internalValue: value }); - } onChange(value); this.setState({ isOpen: false, isTouched: true }); this.unregisterKeybindings(); + + if (!("value" in this.props) && !noop) { + this.setState({ internalValue: value }); + } } @boundMethod @@ -245,10 +246,11 @@ class Dropdown extends React.Component { className={cn("wave-dropdown-item unselectable", { "wave-dropdown-item-highlighted": index === highlightedIndex, })} - onClick={(e) => this.handleSelect(option.value, e)} + onClick={(e) => this.handleSelect(option, e)} onMouseEnter={() => this.setState({ highlightedIndex: index })} onMouseLeave={() => this.setState({ highlightedIndex: -1 })} > + {option.icon && {option.icon}} {option.label} ))} diff --git a/src/app/workspace/screen/newtabsettings.tsx b/src/app/workspace/screen/newtabsettings.tsx index 31c4c3bdc..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 = 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 ( -
-
- -
-
-
-
- You're connected to [{getRemoteStrWithAlias(rptr)}]. Do you want to change it? -
-
- -
-
- To change connection from the command line use `/connect [alias|user@host]` -
-
-
-
- -
-
-
- -
-
- ); - } -} - @mobxReact.observer class TabNameTextField extends React.Component<{ screen: Screen; errorMessage?: OV }, {}> { @boundMethod @@ -163,6 +115,10 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?: @boundMethod selectRemote(cname: string): void { + if (cname == null) { + GlobalModel.remotesModel.openAddModal({ remoteedit: true }); + return; + } mobx.action(() => { this.selectedRemoteCN.set(cname); })(); @@ -191,6 +147,14 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?: } return a.remoteidx - b.remoteidx; }); + + options.push({ + label: "New Connection", + value: null, + icon: , + noop: true, + }); + return options; } @@ -210,6 +174,7 @@ class TabRemoteSelector extends React.Component<{ screen: Screen; errorMessage?: let curRemote = GlobalModel.getRemoteByName(selectedRemote); return ( { 0}>
{
- + diff --git a/src/types/custom.d.ts b/src/types/custom.d.ts index 0559fa681..1d7410daa 100644 --- a/src/types/custom.d.ts +++ b/src/types/custom.d.ts @@ -308,7 +308,9 @@ declare global { type DropdownItem = { label: string; - value: string; + value?: string; + icon?: React.ReactNode; + noop?: boolean; }; /**