From f1aacf82fded7c00c97fd527823a06ee190f9f44 Mon Sep 17 00:00:00 2001 From: sawka Date: Tue, 14 Mar 2023 11:48:14 -0700 Subject: [PATCH] session settings modal --- src/main.tsx | 156 ++++++++----------------------------- src/model.ts | 11 ++- src/settings.tsx | 197 +++++++++++++++++++++++++++++++++++++++++++++++ src/sh2.less | 27 ++++++- 4 files changed, 265 insertions(+), 126 deletions(-) create mode 100644 src/settings.tsx diff --git a/src/main.tsx b/src/main.tsx index d1b12df1a..d53f597c8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,21 +3,22 @@ import * as mobxReact from "mobx-react"; import * as mobx from "mobx"; import {sprintf} from "sprintf-js"; import {boundMethod} from "autobind-decorator"; +import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components"; +import cn from "classnames"; import {debounce, throttle} from "throttle-debounce"; import {v4 as uuidv4} from "uuid"; 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, riToRPtr, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols} from "./model"; +import {GlobalModel, GlobalCommandRunner, Session, Cmd, Window, Screen, riToRPtr, windowWidthToCols, windowHeightToRows, termHeightFromRows, termWidthFromCols, TabColors, RemoteColors} from "./model"; import {isModKeyPress} from "./util"; import ReactMarkdown from 'react-markdown' import remarkGfm from 'remark-gfm' import {BookmarksView} from "./bookmarks"; import {HistoryView} from "./history"; import {Line, Prompt} from "./linecomps"; +import {ScreenSettingsModal, SessionSettingsModal} from "./settings"; dayjs.extend(localizedFormat) @@ -26,9 +27,6 @@ const RemotePtyCols = 80; const PasswordUnchangedSentinel = "--unchanged--"; const LinesVisiblePadding = 500; -const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"]; -const TabColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange", "black"]; - type OV = mobx.IObservableValue; type OArr = mobx.IObservableArray; type OMap = mobx.ObservableMap; @@ -2159,6 +2157,7 @@ class ScreenTabs extends React.Component<{session : Session}, {}> { @boundMethod openScreenSettings(e : any, screen : Screen) : void { e.preventDefault(); + e.stopPropagation(); mobx.action(() => { GlobalModel.screenSettingsModal.set({sessionId: screen.sessionId, screenId: screen.screenId}); })(); @@ -2350,6 +2349,15 @@ class MainSideBar extends React.Component<{}, {}> { })(); } + @boundMethod + openSessionSettings(e : any, session : Session) : void { + e.preventDefault(); + e.stopPropagation(); + mobx.action(() => { + GlobalModel.sessionSettingsModal.set(session.sessionId); + })(); + } + render() { let model = GlobalModel; let activeSessionId = model.activeSessionId.get(); @@ -2391,20 +2399,26 @@ class MainSideBar extends React.Component<{}, {}> {

Private Sessions

-
    +
      -
    • (loading)
      • +
    • ...
      •
    • this.handleSessionClick(session.sessionId)}> - {idx+1}  +
      {idx+1}
       -   +
      - {session.name.get()} +
      + {session.name.get()} +
      +
    • this.handleNewSession()}> New Session
      • @@ -2627,116 +2641,6 @@ class AlertModal extends React.Component<{}, {}> { } } -@mobxReact.observer -class ScreenSettingsModal extends React.Component<{sessionId : string, screenId : string}, {}> { - tempName : OV; - tempTabColor : OV; - tabColorDropdownOpen : OV = mobx.observable.box(false, {name: "tabColorDropdownOpen"}); - - constructor(props : any) { - super(props); - let {sessionId, screenId} = props; - let screen = GlobalModel.getScreenById(sessionId, screenId); - if (screen == null) { - return; - } - this.tempName = mobx.observable.box(screen.name.get(), {name: "screenSettings-tempName"}); - this.tempTabColor = mobx.observable.box(screen.getTabColor(), {name: "screenSettings-tempTabColor"}); - } - - @boundMethod - closeModal() : void { - mobx.action(() => { - GlobalModel.screenSettingsModal.set(null); - })(); - } - - @boundMethod - handleOK() : void { - mobx.action(() => { - GlobalModel.screenSettingsModal.set(null); - GlobalCommandRunner.screenSetSettings({ - "tabcolor": this.tempTabColor.get(), - "name": this.tempName.get(), - }); - })(); - console.log("ok"); - } - - @boundMethod - handleChangeName(e : any) : void { - mobx.action(() => { - this.tempName.set(e.target.value); - })(); - } - - @boundMethod - selectTabColor(color : string) : void { - mobx.action(() => { - this.tempTabColor.set(color); - })(); - } - - render() { - let {sessionId, screenId} = this.props; - let screen = GlobalModel.getScreenById(sessionId, screenId); - if (screen == null) { - return null; - } - let color : string = null; - return ( -
      -
      -
      -
      -
      screen settings ({screen.name.get()})
      -
      - -
      -
      -
      -
      -
      - Name -
      -
      - -
      -
      -
      -
      - Tab Color -
      -
      -
      -
      - - - - {this.tempTabColor.get()} -
      -
      |
      - -
      this.selectTabColor(color)}> - - - -
      -       -
      -
      -
      -
      -
      -
      OK
      -
      Cancel
      -
      -
      -
      - ); - } -} - @mobxReact.observer class WelcomeModal extends React.Component<{}, {}> { totalPages : number = 3; @@ -2868,7 +2772,8 @@ class Main extends React.Component<{}, {}> { } render() { - let ssm = GlobalModel.screenSettingsModal.get(); + let screenSettingsModal = GlobalModel.screenSettingsModal.get(); + let sessionSettingsModal = GlobalModel.sessionSettingsModal.get(); return (
      @@ -2884,8 +2789,11 @@ class Main extends React.Component<{}, {}> { - - + + + + +
      ); diff --git a/src/model.ts b/src/model.ts index 71a178d0f..7c637aaa7 100644 --- a/src/model.ts +++ b/src/model.ts @@ -29,6 +29,8 @@ const DefaultTermFontSize = 12; const MinFontSize = 8; const MaxFontSize = 15; const InputChunkSize = 500; +const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"]; +const TabColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange", "black"]; // @ts-ignore const VERSION = __PROMPT_VERSION__; @@ -2253,6 +2255,7 @@ class Model { alertPromiseResolver : (result : boolean) => void; welcomeModalOpen : OV = mobx.observable.box(false, {name: "welcomeModalOpen"}); screenSettingsModal : OV<{sessionId : string, screenId : string}> = mobx.observable.box(null, {name: "screenSettingsModal"}); + sessionSettingsModal : OV = mobx.observable.box(null, {name: "sessionSettingsModal"}); inputModel : InputModel; bookmarksModel : BookmarksModel; @@ -3224,6 +3227,12 @@ class CommandRunner { GlobalModel.submitCommand("screen", "set", null, kwargs, true); } + sessionSetSettings(settings : {name? : string}) : void { + let kwargs = Object.assign({}, settings); + kwargs["nohist"] = "1"; + GlobalModel.submitCommand("session", "set", null, kwargs, true); + } + lineStar(lineId : string, starVal : number) { GlobalModel.submitCommand("line", "star", [lineId, String(starVal)], {"nohist": "1"}, true); } @@ -3337,7 +3346,7 @@ if ((window as any).GlobalModel == null) { GlobalModel = (window as any).GlobalModel; GlobalCommandRunner = (window as any).GlobalCommandRunner; -export {Model, Session, Window, GlobalModel, GlobalCommandRunner, Cmd, Screen, riToRPtr, windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows, getPtyData, getRemotePtyData}; +export {Model, Session, Window, GlobalModel, GlobalCommandRunner, Cmd, Screen, riToRPtr, windowWidthToCols, windowHeightToRows, termWidthFromCols, termHeightFromRows, getPtyData, getRemotePtyData, TabColors, RemoteColors}; export type {LineContainerModel}; diff --git a/src/settings.tsx b/src/settings.tsx new file mode 100644 index 000000000..e616b57b4 --- /dev/null +++ b/src/settings.tsx @@ -0,0 +1,197 @@ +import * as React from "react"; +import * as mobxReact from "mobx-react"; +import * as mobx from "mobx"; +import {sprintf} from "sprintf-js"; +import {boundMethod} from "autobind-decorator"; +import {If, For, When, Otherwise, Choose} from "tsx-control-statements/components"; +import cn from "classnames"; +import {GlobalModel, GlobalCommandRunner, TabColors} from "./model"; + +type OV = mobx.IObservableValue; +type OArr = mobx.IObservableArray; +type OMap = mobx.ObservableMap; +type CV = mobx.IComputedValue; + +@mobxReact.observer +class ScreenSettingsModal extends React.Component<{sessionId : string, screenId : string}, {}> { + tempName : OV; + tempTabColor : OV; + + constructor(props : any) { + super(props); + let {sessionId, screenId} = props; + let screen = GlobalModel.getScreenById(sessionId, screenId); + if (screen == null) { + return; + } + this.tempName = mobx.observable.box(screen.name.get(), {name: "screenSettings-tempName"}); + this.tempTabColor = mobx.observable.box(screen.getTabColor(), {name: "screenSettings-tempTabColor"}); + } + + @boundMethod + closeModal() : void { + mobx.action(() => { + GlobalModel.screenSettingsModal.set(null); + })(); + } + + @boundMethod + handleOK() : void { + mobx.action(() => { + GlobalModel.screenSettingsModal.set(null); + GlobalCommandRunner.screenSetSettings({ + "tabcolor": this.tempTabColor.get(), + "name": this.tempName.get(), + }); + })(); + } + + @boundMethod + handleChangeName(e : any) : void { + mobx.action(() => { + this.tempName.set(e.target.value); + })(); + } + + @boundMethod + selectTabColor(color : string) : void { + mobx.action(() => { + this.tempTabColor.set(color); + })(); + } + + render() { + let {sessionId, screenId} = this.props; + let screen = GlobalModel.getScreenById(sessionId, screenId); + if (screen == null) { + return null; + } + let color : string = null; + return ( +
      +
      +
      +
      +
      screen settings ({screen.name.get()})
      +
      + +
      +
      +
      +
      +
      + Name +
      +
      + +
      +
      +
      +
      + Tab Color +
      +
      +
      +
      + + + + {this.tempTabColor.get()} +
      +
      |
      + +
      this.selectTabColor(color)}> + + + +
      +       +
      +
      +
      +
      +
      +
      OK
      +
      Cancel
      +
      +
      +
      + ); + } +} + +@mobxReact.observer +class SessionSettingsModal extends React.Component<{sessionId : string}, {}> { + tempName : OV; + + constructor(props : any) { + super(props); + let {sessionId} = props; + let session = GlobalModel.getSessionById(sessionId); + if (session == null) { + return; + } + this.tempName = mobx.observable.box(session.name.get(), {name: "sessionSettings-tempName"}); + } + + @boundMethod + closeModal() : void { + mobx.action(() => { + GlobalModel.sessionSettingsModal.set(null); + })(); + } + + @boundMethod + handleOK() : void { + mobx.action(() => { + GlobalModel.sessionSettingsModal.set(null); + GlobalCommandRunner.sessionSetSettings({ + "name": this.tempName.get(), + }); + })(); + } + + @boundMethod + handleChangeName(e : any) : void { + mobx.action(() => { + this.tempName.set(e.target.value); + })(); + } + + render() { + let {sessionId} = this.props; + let session = GlobalModel.getSessionById(sessionId); + if (session == null) { + return null; + } + return ( +
      +
      +
      +
      +
      session settings ({session.name.get()})
      +
      + +
      +
      +
      +
      +
      + Name +
      +
      + +
      +
      +
      +
      +
      OK
      +
      Cancel
      +
      +
      +
      + ); + } +} + +export {ScreenSettingsModal, SessionSettingsModal}; diff --git a/src/sh2.less b/src/sh2.less index f4a8798fb..766bb6397 100644 --- a/src/sh2.less +++ b/src/sh2.less @@ -1052,6 +1052,31 @@ body::-webkit-scrollbar { } } + .menu-list.session-menu-list { + li a { + display: flex; + flex-direction: row; + align-items: center; + + .session-num { + width: 14px; + } + + .session-gear { + visibility: hidden; + } + + &:hover .session-gear { + color: #ccc; + visibility: visible; + + &:hover { + color: white; + } + } + } + } + .menu-list.remotes-menu-list { max-height: 35%; overflow-y: auto; @@ -2628,7 +2653,7 @@ input[type=checkbox] { } } -.modal.screen-settings-modal { +.modal.settings-modal { footer { justify-content: center;