Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

"Escape" should close/cancel most modals (#229)

Browse Source 
* init

* client settings view

* close and escape support for connections view

* close and escape support for clientsettings view
This commit is contained in:
Red J Adaya 2024-01-16 04:16:46 +08:00 committed by GitHub
parent da69c0411d
commit 76988a5277
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 61 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/app.less
View File

@ -622,3 +622,28 @@ a.a-block {
.text-selectable {
user-select: text;
}
.view {
background-color: @background-session;
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
overflow: auto;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 8px;
border: 1px solid rgba(241, 246, 243, 0.08);
background: rgba(13, 13, 13, 0.85);
.header {
margin: 24px 18px;
display: flex;
justify-content: space-between;
align-items: center;
.close-div {
font-size: 1.5em;
}
}
}

15
src/app/clientsettings/clientsettings.tsx
View File

@ -25,11 +25,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, { name: "clientSettings-fontSizeDropdownActive" });
errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
@boundMethod
closeModal(): void {
GlobalModel.modalsModel.popModal();
}
@boundMethod
dismissError(): void {
mobx.action(() => {
@ -110,6 +105,11 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
})();
}
@boundMethod
handleClose(): void {
GlobalModel.clientSettingsViewModel.closeView();
}
render() {
let isHidden = GlobalModel.activeMainView.get() != "clientsettings";
if (isHidden) {
@ -125,9 +125,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
let curFontSize = GlobalModel.termFontSize.get();
return (
<div className={cn("clientsettings-view")}>
<div className={cn("view clientsettings-view")}>
<header className="header">
<div className="clientsettings-title text-primary">Client Settings</div>
<div className="close-div hoverEffect" title="Close (Escape)" onClick={this.handleClose}>
<i className="fa-sharp fa-solid fa-xmark"></i>
</div>
</header>
<div className="content">
<div className="settings-field">

22
src/app/connections/connections.less
View File

@ -1,28 +1,6 @@
@import "../../app/common/themes/themes.less";
.connections-view {
background-color: @background-session;
flex-grow: 1;
display: flex;
flex-direction: column;
position: relative;
overflow: auto;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 8px;
border: 1px solid rgba(241, 246, 243, 0.08);
background: var(--element-window, rgba(13, 13, 13, 0.85));
.header {
margin: 24px 18px;
display: flex;
justify-content: space-between;
align-items: center;
.connections-title {
}
}
.no-items {
display: flex;
flex-direction: row;

10
src/app/connections/connections.tsx
View File

@ -117,6 +117,11 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
}
}
@boundMethod
handleClose(): void {
GlobalModel.connectionViewModel.closeView();
}
componentDidMount() {
if (this.tableRef.current != null) {
this.tableRszObs = new ResizeObserver(this.handleTableResize.bind(this));
@ -145,9 +150,12 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
let item: T.RemoteType = null;
return (
<div className={cn("connections-view")}>
<div className={cn("view connections-view")}>
<header className="header">
<div className="connections-title text-primary">Connections</div>
<div className="close-div hoverEffect" title="Close (Escape)" onClick={this.handleClose}>
<i className="fa-sharp fa-solid fa-xmark"></i>
</div>
</header>
<table
className="connections-table"

18
src/model/model.ts
View File

@ -2569,6 +2569,11 @@ class HistoryViewModel {
}
class ConnectionsViewModel {
closeView(): void {
GlobalModel.showSessionView();
setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
}
showConnectionsView(): void {
mobx.action(() => {
GlobalModel.activeMainView.set("connections");
@ -2577,6 +2582,11 @@ class ConnectionsViewModel {
}
class ClientSettingsViewModel {
closeView(): void {
GlobalModel.showSessionView();
setTimeout(() => GlobalModel.inputModel.giveFocus(), 50);
}
showClientSettingsView(): void {
mobx.action(() => {
GlobalModel.activeMainView.set("clientsettings");
@ -3589,6 +3599,14 @@ class Model {
this.historyViewModel.handleDocKeyDown(e);
return;
}
if (this.activeMainView.get() == "connections") {
this.historyViewModel.handleDocKeyDown(e);
return;
}
if (this.activeMainView.get() == "clientsettings") {
this.historyViewModel.handleDocKeyDown(e);
return;
}
if (e.code == "Escape") {
e.preventDefault();
if (this.activeMainView.get() == "webshare") {