- {
{title}
}
+ {
{title}
}
diff --git a/src/app/common/modals/modals.less b/src/app/common/modals/modals.less
index 1aa1232f..391c2152 100644
--- a/src/app/common/modals/modals.less
+++ b/src/app/common/modals/modals.less
@@ -396,13 +396,109 @@
gap: 12px;
align-self: stretch;
width: 100%;
+
+ > div {
+ width: 100%;
+ }
}
}
}
.screen-settings-modal {
width: 640px;
- min-height: 329px;
+
+ .wave-modal-content {
+ gap: 24px;
+
+ .wave-modal-body {
+ display: flex;
+ padding: 0px 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+ align-self: stretch;
+ width: 100%;
+
+ .screen-settings-dropdown {
+ width: 412px;
+
+ .lefticon {
+ position: absolute;
+ top: 50%;
+ left: 16px;
+ transform: translateY(-50%);
+
+ .globe-icon {
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ }
+
+ .status-icon {
+ position: absolute;
+ left: 7px;
+ top: 8px;
+ }
+ }
+ }
+
+ .archived-label,
+ .actions-label {
+ div:first-child {
+ margin-right: 5px;
+ }
+ div:last-child i {
+ font-size: 13px;
+ }
+ }
+ }
+ }
+}
+
+.screen-settings-tooltip .wave-tooltip-icon {
+ i {
+ font-size: 13px;
+ }
+}
+
+.session-settings-modal {
+ width: 640px;
+
+ .wave-modal-content {
+ gap: 24px;
+
+ .wave-modal-body {
+ display: flex;
+ padding: 0px 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+ align-self: stretch;
+ width: 100%;
+ }
+ }
+}
+
+.line-settings-modal {
+ width: 640px;
+
+ .wave-modal-content {
+ gap: 24px;
+
+ .wave-modal-body {
+ display: flex;
+ padding: 0px 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 4px;
+ align-self: stretch;
+ width: 100%;
+ }
+ }
+}
+
+.client-settings-modal {
+ width: 640px;
.wave-modal-content {
gap: 24px;
@@ -470,6 +566,8 @@
}
.alert-modal {
+ width: 500px;
+
.wave-modal-content {
.wave-modal-body {
padding: 40px 20px;
diff --git a/src/app/common/modals/modalsRegistry.tsx b/src/app/common/modals/modalsRegistry.tsx
index a5c5e6df..833d99d4 100644
--- a/src/app/common/modals/modalsRegistry.tsx
+++ b/src/app/common/modals/modalsRegistry.tsx
@@ -9,6 +9,7 @@ import {
EditRemoteConnModal,
AlertModal,
} from "./modals";
+import { ScreenSettingsModal, SessionSettingsModal, LineSettingsModal, ClientSettingsModal } from "./settings";
import * as constants from "../../appconst";
const modalsRegistry: { [key: string]: () => React.ReactElement } = {
@@ -17,6 +18,10 @@ const modalsRegistry: { [key: string]: () => React.ReactElement } = {
[constants.VIEW_REMOTE]: () =>
,
[constants.EDIT_REMOTE]: () =>
,
[constants.ALERT]: () =>
,
+ [constants.SCREEN_SETTINGS]: () =>
,
+ [constants.SESSION_SETTINGS]: () =>
,
+ [constants.LINE_SETTINGS]: () =>
,
+ [constants.CLIENT_SETTINGS]: () =>
,
};
export { modalsRegistry };
diff --git a/src/app/common/modals/settings.tsx b/src/app/common/modals/settings.tsx
index 03e3e3a6..9e43ca33 100644
--- a/src/app/common/modals/settings.tsx
+++ b/src/app/common/modals/settings.tsx
@@ -15,16 +15,17 @@ import {
MaxFontSize,
TabIcons,
Screen,
+ Session,
} from "../../../model/model";
-import { Toggle, InlineSettingsTextEdit, SettingsError, InfoMessage, Modal } from "../common";
-import { LineType, RendererPluginType, ClientDataType, CommandRtnType } from "../../../types/types";
-import { ConnectionDropdown } from "../../connections_deprecated/connections";
+import { Toggle, InlineSettingsTextEdit, SettingsError, InfoMessage, Modal, Dropdown, Tooltip } from "../common";
+import { LineType, RendererPluginType, ClientDataType, CommandRtnType, RemoteType } from "../../../types/types";
import { PluginModel } from "../../../plugins/plugins";
import * as util from "../../../util/util";
import { commandRtnHandler } from "../../../util/util";
import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
-import { ReactComponent as XmarkIcon } from "../../assets/icons/line/xmark.svg";
import { ReactComponent as AngleDownIcon } from "../../assets/icons/history/angle-down.svg";
+import { ReactComponent as GlobeIcon } from "../../assets/icons/globe.svg";
+import { ReactComponent as StatusCircleIcon } from "../../assets/icons/statuscircle.svg";
import "./modals.less";
@@ -58,18 +59,47 @@ Are you sure you want to stop web-sharing this tab?
`.trim();
@mobxReact.observer
-class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId: string }, {}> {
+class ScreenSettingsModal extends React.Component<{}, {}> {
shareCopied: OV
= mobx.observable.box(false, { name: "ScreenSettings-shareCopied" });
errorMessage: OV = mobx.observable.box(null, { name: "ScreenSettings-errorMessage" });
screen: Screen;
+ sessionId: string;
+ screenId: string;
+ remotes: RemoteType[];
- constructor(props: any) {
+ constructor(props) {
super(props);
- let { sessionId, screenId } = props;
+ let screenSettingsModal = GlobalModel.screenSettingsModal.get();
+ let { sessionId, screenId } = screenSettingsModal;
+ this.sessionId = sessionId;
+ this.screenId = screenId;
this.screen = GlobalModel.getScreenById(sessionId, screenId);
- if (this.screen == null) {
+ if (this.screen == null || sessionId == null || screenId == null) {
return;
}
+ this.remotes = GlobalModel.remotes;
+ }
+
+ @boundMethod
+ getOptions(): { label: string; value: string }[] {
+ return this.remotes
+ .filter((r) => !r.archived)
+ .map((remote) => ({
+ ...remote,
+ label:
+ remote.remotealias && !util.isBlank(remote.remotealias)
+ ? `${remote.remotecanonicalname}`
+ : remote.remotecanonicalname,
+ value: remote.remotecanonicalname,
+ }))
+ .sort((a, b) => {
+ let connValA = util.getRemoteConnVal(a);
+ let connValB = util.getRemoteConnVal(b);
+ if (connValA !== connValB) {
+ return connValA - connValB;
+ }
+ return a.remoteidx - b.remoteidx;
+ });
}
@boundMethod
@@ -77,19 +107,18 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
mobx.action(() => {
GlobalModel.screenSettingsModal.set(null);
})();
+ GlobalModel.modalsModel.popModal();
}
@boundMethod
selectTabColor(color: string): void {
- let { sessionId, screenId } = this.props;
- let screen = GlobalModel.getScreenById(sessionId, screenId);
- if (screen == null) {
+ if (this.screen == null) {
return;
}
- if (screen.getTabColor() == color) {
+ if (this.screen.getTabColor() == color) {
return;
}
- let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, { tabcolor: color }, false);
+ let prtn = GlobalCommandRunner.screenSetSettings(this.screenId, { tabcolor: color }, false);
commandRtnHandler(prtn, this.errorMessage);
}
@@ -104,26 +133,22 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
@boundMethod
handleChangeArchived(val: boolean): void {
- let { sessionId, screenId } = this.props;
- let screen = GlobalModel.getScreenById(sessionId, screenId);
- if (screen == null) {
+ if (this.screen == null) {
return;
}
- if (screen.archived.get() == val) {
+ if (this.screen.archived.get() == val) {
return;
}
- let prtn = GlobalCommandRunner.screenArchive(this.props.screenId, val);
+ let prtn = GlobalCommandRunner.screenArchive(this.screenId, val);
commandRtnHandler(prtn, this.errorMessage);
}
@boundMethod
handleChangeWebShare(val: boolean): void {
- let { sessionId, screenId } = this.props;
- let screen = GlobalModel.getScreenById(sessionId, screenId);
- if (screen == null) {
+ if (this.screen == null) {
return;
}
- if (screen.isWebShared() == val) {
+ if (this.screen.isWebShared() == val) {
return;
}
let message = val ? WebShareConfirmMarkdown : WebStopShareConfirmMarkdown;
@@ -132,19 +157,17 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
if (!result) {
return;
}
- let prtn = GlobalCommandRunner.screenWebShare(screen.screenId, val);
+ let prtn = GlobalCommandRunner.screenWebShare(this.screen.screenId, val);
commandRtnHandler(prtn, this.errorMessage);
});
}
@boundMethod
copyShareLink(): void {
- let { sessionId, screenId } = this.props;
- let screen = GlobalModel.getScreenById(sessionId, screenId);
- if (screen == null) {
+ if (this.screen == null) {
return null;
}
- let shareLink = screen.getWebShareUrl();
+ let shareLink = this.screen.getWebShareUrl();
if (shareLink == null) {
return;
}
@@ -161,29 +184,25 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
@boundMethod
inlineUpdateName(val: string): void {
- let { sessionId, screenId } = this.props;
- let screen = GlobalModel.getScreenById(sessionId, screenId);
- if (screen == null) {
+ if (this.screen == null) {
return;
}
- if (util.isStrEq(val, screen.name.get())) {
+ if (util.isStrEq(val, this.screen.name.get())) {
return;
}
- let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, { name: val }, false);
+ let prtn = GlobalCommandRunner.screenSetSettings(this.screenId, { name: val }, false);
commandRtnHandler(prtn, this.errorMessage);
}
@boundMethod
inlineUpdateShareName(val: string): void {
- let { sessionId, screenId } = this.props;
- let screen = GlobalModel.getScreenById(sessionId, screenId);
- if (screen == null) {
+ if (this.screen == null) {
return;
}
- if (util.isStrEq(val, screen.getShareName())) {
+ if (util.isStrEq(val, this.screen.getShareName())) {
return;
}
- let prtn = GlobalCommandRunner.screenSetSettings(this.props.screenId, { sharename: val }, false);
+ let prtn = GlobalCommandRunner.screenSetSettings(this.screenId, { sharename: val }, false);
commandRtnHandler(prtn, this.errorMessage);
}
@@ -196,9 +215,7 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
@boundMethod
handleDeleteScreen(): void {
- let { sessionId, screenId } = this.props;
- let screen = GlobalModel.getScreenById(sessionId, screenId);
- if (screen == null) {
+ if (this.screen == null) {
return;
}
let message = ScreenDeleteMessage;
@@ -207,8 +224,9 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
if (!result) {
return;
}
- let prtn = GlobalCommandRunner.screenPurge(screenId);
+ let prtn = GlobalCommandRunner.screenPurge(this.screenId);
commandRtnHandler(prtn, this.errorMessage);
+ GlobalModel.modalsModel.popModal();
});
}
@@ -219,16 +237,15 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
}
render() {
- let { sessionId, screenId } = this.props;
- let inline = false;
let screen = this.screen;
if (screen == null) {
return null;
}
- console.log("screen.getTabIcon()", screen.getTabIcon());
let color: string = null;
let icon: string = null;
+ let index: number = 0;
let curRemote = GlobalModel.getRemote(GlobalModel.getActiveScreen().getCurRemoteInstance().remoteid);
+
return (
@@ -253,10 +270,22 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId: