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

Add esc keybinding to all modals, add update button in About modal (#514)

Browse Source 
* Add esc keybinding to all modals, add update button in About modal

* move import
This commit is contained in:
Evan Simkowitz 2024-03-27 15:35:14 -07:00 committed by GitHub
parent 4eb215b99d
commit abe6d6a6ba
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 37 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/common/elements/modal.tsx
View File

@ -2,7 +2,6 @@
// SPDX-License-Identifier: Apache-2.0
import * as React from "react";
import * as mobx from "mobx";
import { If } from "tsx-control-statements/components";
import ReactDOM from "react-dom";
import { Button } from "./button";
@ -14,11 +13,15 @@ import { boundMethod } from "autobind-decorator";
interface ModalHeaderProps {
onClose?: () => void;
keybindings?: boolean;
title: string;
}
const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, title }) => (
const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings = true, title }) => (
<div className="wave-modal-header">
<If condition={keybindings && onClose}>
<ModalKeybindings onCancel={onClose}></ModalKeybindings>
</If>
{<div className="wave-modal-title">{title}</div>}
<If condition={onClose}>
<Button className="secondary ghost" onClick={onClose}>
@ -36,23 +39,27 @@ interface ModalFooterProps {
keybindings?: boolean;
}
class ModalKeybindings extends React.Component<{ onOk; onCancel }, {}> {
class ModalKeybindings extends React.Component<{ onOk?: () => void; onCancel?: () => void }, {}> {
curId: string;
@boundMethod
componentDidMount(): void {
this.curId = uuidv4();
let domain = "modal-" + this.curId;
let keybindManager = GlobalModel.keybindManager;
const domain = "modal-" + this.curId;
const keybindManager = GlobalModel.keybindManager;
if (this.props.onOk) {
keybindManager.registerKeybinding("modal", domain, "generic:confirm", (waveEvent) => {
this.props.onOk();
if (this.props.onOk) {
this.props.onOk();
}
return true;
});
}
if (this.props.onCancel) {
keybindManager.registerKeybinding("modal", domain, "generic:cancel", (waveEvent) => {
this.props.onCancel();
if (this.props.onCancel) {
this.props.onCancel();
}
return true;
});
}

12
src/app/common/modals/about.less
View File

@ -63,18 +63,6 @@
}
}
.status.updated {
div {
display: flex;
align-items: center;
margin-bottom: 5px;
i {
color: var(--app-success-color);
}
}
}
.status.outdated {
div {
i {

63
src/app/common/modals/about.tsx
View File

@ -5,10 +5,12 @@ import * as React from "react";
import * as mobxReact from "mobx-react";
import * as mobx from "mobx";
import { boundMethod } from "autobind-decorator";
import { GlobalModel } from "@/models";
import { GlobalModel, getApi } from "@/models";
import { Modal, LinkButton } from "@/elements";
import * as util from "@/util/util";
import * as appconst from "@/app/appconst";
import cn from "classnames";
import { If } from "tsx-control-statements/components";
import logo from "@/assets/waveterm-logo-with-bg.svg";
import "./about.less";
@ -22,54 +24,35 @@ class AboutModal extends React.Component<{}, {}> {
})();
}
@boundMethod
isUpToDate(): boolean {
return true;
}
@boundMethod
updateApp(): void {
// GlobalCommandRunner.updateApp();
getApi().installAppUpdate();
}
@boundMethod
getStatus(isUpToDate: boolean): JSX.Element {
// TODO no up-to-date status reporting
return (
<div className="status updated">
<div className="text-selectable">
Client Version {appconst.VERSION} ({appconst.BUILD})
</div>
</div>
);
getClientVersion(): JSX.Element {
const clientData: ClientDataType = GlobalModel.clientData.get();
const showUpdateStatus = clientData.clientopts.noreleasecheck !== true;
const isUpToDate = !showUpdateStatus || GlobalModel.appUpdateStatus.get() !== "ready";
if (isUpToDate) {
return (
<div className="status updated">
<div>
<i className="fa-sharp fa-solid fa-circle-check" />
<span>Up to Date</span>
</div>
<div className="selectable">
Client Version {appconst.VERSION} ({appconst.BUILD})
</div>
</div>
);
}
return (
<div className="status outdated">
<div>
<i className="fa-sharp fa-solid fa-triangle-exclamation" />
<span>Outdated Version</span>
</div>
<div className={cn("status", { outdated: !isUpToDate })}>
<If condition={!isUpToDate}>
<div>
<i className="fa-sharp fa-solid fa-triangle-exclamation" />
<span>Outdated Version</span>
</div>
</If>
<div className="selectable">
Client Version {appconst.VERSION} ({appconst.BUILD})
</div>
<div>
<button onClick={this.updateApp} className="button color-green text-secondary">
Update
</button>
</div>
<If condition={!isUpToDate}>
<div>
<button onClick={this.updateApp} className="button color-green text-secondary">
Restart to Update
</button>
</div>
</If>
</div>
);
}
@ -93,7 +76,7 @@ class AboutModal extends React.Component<{}, {}> {
</div>
</div>
</div>
<div className="about-section text-standard">{this.getStatus(this.isUpToDate())}</div>
<div className="about-section text-standard">{this.getClientVersion()}</div>
<div className="about-section">
<LinkButton
className="secondary solid"