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

Fix term width in view connection detail modal (#274)

Browse Source 
* fix term width

* add horizontal scroll to terminal when it overflows

* revert width of modal
This commit is contained in:
Red J Adaya 2024-02-11 06:18:50 +08:00 committed by GitHub
parent d319e72609
commit 2a4d85430a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/common/modals/viewremoteconndetail.less
View File

@ -54,6 +54,8 @@
} }
.remote-detail { .remote-detail {
width: 100%;
.settings-field { .settings-field {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -91,8 +93,9 @@
} }
.terminal-wrapper { .terminal-wrapper {
width: 100%;
margin-top: 5px; margin-top: 5px;
overflow-x: auto;
overflow-y: hidden;
.terminal-connectelem { .terminal-connectelem {
height: 163px !important; // Needed to override plugin height height: 163px !important; // Needed to override plugin height
@ -111,7 +114,6 @@
.xterm-screen { .xterm-screen {
padding: 10px; padding: 10px;
width: 541px !important; // Needed to override plugin width
} }
} }
} }

8
src/app/common/modals/viewremoteconndetail.tsx
View File

@ -12,12 +12,10 @@ import * as T from "../../../types/types";
import { Modal, Tooltip, Button, Status } from "../elements"; import { Modal, Tooltip, Button, Status } from "../elements";
import * as util from "../../../util/util"; import * as util from "../../../util/util";
import * as textmeasure from "../../../util/textmeasure"; import * as textmeasure from "../../../util/textmeasure";
import * as appconst from "../../appconst";
import "./viewremoteconndetail.less"; import "./viewremoteconndetail.less";
const RemotePtyRows = 9;
const RemotePtyCols = 80;
@mobxReact.observer @mobxReact.observer
class ViewRemoteConnDetailModal extends React.Component<{}, {}> { class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
termRef: React.RefObject<any> = React.createRef(); termRef: React.RefObject<any> = React.createRef();
@ -293,7 +291,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
let model = this.model; let model = this.model;
let isTermFocused = this.model.remoteTermWrapFocus.get(); let isTermFocused = this.model.remoteTermWrapFocus.get();
let termFontSize = GlobalModel.termFontSize.get(); let termFontSize = GlobalModel.termFontSize.get();
let termWidth = textmeasure.termWidthFromCols(RemotePtyCols, termFontSize); let termWidth = textmeasure.termWidthFromCols(appconst.RemotePtyCols, termFontSize);
let remoteAliasText = util.isBlank(remote.remotealias) ? "(none)" : remote.remotealias; let remoteAliasText = util.isBlank(remote.remotealias) ? "(none)" : remote.remotealias;
let selectedRemoteStatus = this.getSelectedRemote().status; let selectedRemoteStatus = this.getSelectedRemote().status;
@ -371,7 +369,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
ref={this.termRef} ref={this.termRef}
data-remoteid={remote.remoteid} data-remoteid={remote.remoteid}
style={{ style={{
height: textmeasure.termHeightFromRows(RemotePtyRows, termFontSize), height: textmeasure.termHeightFromRows(appconst.RemotePtyRows, termFontSize),
width: termWidth, width: termWidth,
}} }}
></div> ></div>

9
src/models/remotes.ts
View File

@ -12,9 +12,6 @@ import { GlobalCommandRunner } from "./global";
import { Model } from "./model"; import { Model } from "./model";
import { getTermPtyData } from "../util/modelutil"; import { getTermPtyData } from "../util/modelutil";
const RemotePtyRows = 8; // also in main.tsx
const RemotePtyCols = 80;
class RemotesModel { class RemotesModel {
globalModel: Model; globalModel: Model;
selectedRemoteId: OV<string> = mobx.observable.box(null, { selectedRemoteId: OV<string> = mobx.observable.box(null, {
@ -180,14 +177,14 @@ class RemotesModel {
return; return;
} }
let termOpts = { let termOpts = {
rows: RemotePtyRows, rows: appconst.RemotePtyRows,
cols: RemotePtyCols, cols: appconst.RemotePtyCols,
flexrows: false, flexrows: false,
maxptysize: 64 * 1024, maxptysize: 64 * 1024,
}; };
let termWrap = new TermWrap(elem, { let termWrap = new TermWrap(elem, {
termContext: { remoteId: remoteId }, termContext: { remoteId: remoteId },
usedRows: RemotePtyRows, usedRows: appconst.RemotePtyRows,
termOpts: termOpts, termOpts: termOpts,
winSize: null, winSize: null,
keyHandler: (e, termWrap) => { keyHandler: (e, termWrap) => {

4
src/plugins/terminal/terminal.less
View File

@ -3,10 +3,10 @@
.terminal-wrapper { .terminal-wrapper {
.xterm-viewport { .xterm-viewport {
overflow-y: hidden; overflow: hidden;
} }
&:hover .xterm-viewport, &:hover .xterm-viewport,
&:focus-within .xterm-viewport { &:focus-within .xterm-viewport {
overflow-y: auto; overflow: auto;
} }
} }