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

working on modal

Browse Source
This commit is contained in:
sawka 2023-03-03 10:16:31 -08:00
parent 58a8d02f9d
commit e073effe55
3 changed files with 52 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/main.tsx
View File

@ -9,6 +9,7 @@ import dayjs from "dayjs";
import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components";
import cn from "classnames";
import type {SessionDataType, LineType, CmdDataType, RemoteType, RemoteStateType, RemoteInstanceType, RemotePtrType, HistoryItem, HistoryQueryOpts, RemoteEditType, FeStateType, ContextMenuOpts, BookmarkType, RenderModeType} from "./types";
import type * as T from "./types";
import localizedFormat from 'dayjs/plugin/localizedFormat';
import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, ScreenWindow, riToRPtr, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./model";
import {isModKeyPress} from "./util";
@ -2488,6 +2489,41 @@ class LoadingSpinner extends React.Component<{}, {}> {
}
}
@mobxReact.observer
class AlertModal extends React.Component<{}, {}> {
closeModal() : void {
mobx.action(() => {
GlobalModel.alertMessage.set(null);
})();
}
render() {
let message = GlobalModel.alertMessage.get();
if (message == null) {
return null;
}
let title = message.title ?? "Alert";
return (
<div className="modal is-active">
<div className="modal-background"/>
<div className="modal-card">
<header className="modal-card-head">
<p className="modal-card-title">{title}</p>
<button className="delete"></button>
</header>
<section className="modal-card-body">
<p>{message.message}</p>
</section>
<footer className="modal-card-foot">
<button className="button">OK</button>
</footer>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
);
}
}
@mobxReact.observer
class Main extends React.Component<{}, {}> {
constructor(props : any) {
@ -2533,6 +2569,7 @@ class Main extends React.Component<{}, {}> {
<If condition={!GlobalModel.ws.open.get() || !GlobalModel.localServerRunning.get()}>
<DisconnectedModal/>
</If>
<AlertModal/>
</div>
);
}

11
src/model.ts
View File

@ -5,7 +5,7 @@ import {debounce} from "throttle-debounce";
import {handleJsonFetchResponse, base64ToArray, genMergeData, genMergeSimpleData, boundInt, isModKeyPress} from "./util";
import {TermWrap} from "./term";
import {v4 as uuidv4} from "uuid";
import type {SessionDataType, WindowDataType, LineType, RemoteType, HistoryItem, RemoteInstanceType, RemotePtrType, CmdDataType, FeCmdPacketType, TermOptsType, RemoteStateType, ScreenDataType, ScreenWindowType, ScreenOptsType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, UIContextType, HistoryInfoType, HistoryQueryOpts, FeInputPacketType, TermWinSize, RemoteInputPacketType, FeStateType, ContextMenuOpts, RendererContext, RendererModel, PtyDataType, BookmarkType, ClientDataType, HistoryViewDataType} from "./types";
import type {SessionDataType, WindowDataType, LineType, RemoteType, HistoryItem, RemoteInstanceType, RemotePtrType, CmdDataType, FeCmdPacketType, TermOptsType, RemoteStateType, ScreenDataType, ScreenWindowType, ScreenOptsType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, UIContextType, HistoryInfoType, HistoryQueryOpts, FeInputPacketType, TermWinSize, RemoteInputPacketType, FeStateType, ContextMenuOpts, RendererContext, RendererModel, PtyDataType, BookmarkType, ClientDataType, HistoryViewDataType, AlertMessageType} from "./types";
import {WSControl} from "./ws";
import {ImageRendererModel} from "./imagerenderer";
import {measureText, getMonoFontSize} from "./textmeasure";
@ -1834,7 +1834,7 @@ class HistoryViewModel {
setTimeout(this.clearActiveDelete, 2000);
return;
}
console.log("DELETE!");
GlobalModel.showAlert({message: "DELETE!"});
}
@boundMethod
@ -2127,6 +2127,7 @@ class Model {
isDev : boolean;
activeMainView : OV<"session" | "history" | "bookmarks"> = mobx.observable.box("session", {name: "activeMainView"});
termFontSize : CV<number>;
alertMessage : OV<AlertMessageType> = mobx.observable.box(null, {name: "alertMessage"});
inputModel : InputModel;
bookmarksModel : BookmarksModel;
@ -2174,6 +2175,12 @@ class Model {
setTimeout(() => this.getClientData(), 10);
}
showAlert(alertMessage : AlertMessageType) : void {
mobx.action(() => {
this.alertMessage.set(alertMessage);
})();
}
getBaseHostPort() : string {
if (this.isDev) {
return DevServerEndpoint;

7
src/types.ts
View File

@ -420,6 +420,11 @@ type PlaybookEntryType = {
remove : boolean,
};
type AlertMessageType = {
title : string,
message : string,
};
type RenderModeType = "normal" | "collapsed";
export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, WindowDataType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, ScreenWindowType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType};
export type {SessionDataType, LineType, RemoteType, RemoteStateType, RemoteInstanceType, WindowDataType, HistoryItem, CmdRemoteStateType, FeCmdPacketType, TermOptsType, CmdStartPacketType, CmdDataType, ScreenDataType, ScreenOptsType, ScreenWindowType, LayoutType, PtyDataUpdateType, ModelUpdateType, UpdateMessage, InfoType, CmdLineUpdateType, RemotePtrType, UIContextType, HistoryInfoType, HistoryQueryOpts, WatchScreenPacketType, TermWinSize, FeInputPacketType, RemoteInputPacketType, RemoteEditType, FeStateType, ContextMenuOpts, RendererContext, WindowSize, RendererModel, PtyDataType, BookmarkType, ClientDataType, PlaybookType, PlaybookEntryType, HistoryViewDataType, RenderModeType, AlertMessageType};