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

Make connections modal scrollable (#623)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-04-30 16:43:47 -07:00 committed by GitHub
parent 8cea209823
commit 345356d8d4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/common/elements/modal.less
View File

@ -52,6 +52,7 @@
}
button {
padding-right: 4px !important;
i {
font-size: 18px;
}

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

@ -24,7 +24,7 @@ const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings, title }
</If>
{<div className="wave-modal-title">{title}</div>}
<If condition={onClose}>
<Button className="secondary ghost" onClick={onClose}>
<Button className="secondary ghost" onClick={() => onClose()} title="Close (ESC)">
<i className="fa-sharp fa-solid fa-xmark"></i>
</Button>
</If>

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

@ -1,25 +1,24 @@
.rconndetail-modal {
width: auto;
max-width: 80vw;
min-height: 565px;
.wave-modal-content {
display: flex;
padding-bottom: 0px;
flex-direction: column;
align-items: center;
gap: 20px;
flex-shrink: 0;
width: auto;
max-width: 80vw;
max-height: 90vh;
.wave-modal-body {
display: flex;
padding: 0px 20px;
padding: 20px;
align-items: flex-start;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 16px;
align-self: stretch;
overflow-y: scroll;
.name-header-actions-wrapper {
display: flex;
@ -53,6 +52,7 @@
.remote-detail {
width: 100%;
padding-top: 16px;
.settings-field {
display: flex;

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

@ -15,6 +15,7 @@ import * as appconst from "@/app/appconst";
import "./viewremoteconndetail.less";
import { ModalKeybindings } from "../elements/modal";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
@mobxReact.observer
class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
@ -299,15 +300,33 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
return (
<Modal className="rconndetail-modal">
<ModalKeybindings
onOk={() => {
if (selectedRemoteStatus == "connecting") {
return;
}
this.handleClose();
}}
onCancel={() => {
if (selectedRemoteStatus == "connecting") {
return;
}
this.handleClose();
}}
></ModalKeybindings>
<Modal.Header title="Connection" onClose={this.handleClose} />
<div className="wave-modal-body">
<OverlayScrollbarsComponent
className="wave-modal-body"
options={{ scrollbars: { autoHide: "leave" } }}
defer={true}
>
<div className="name-header-actions-wrapper">
<div className="name text-primary name-wrapper">
{util.getRemoteName(remote)}&nbsp; {getImportTooltip(remote)}
</div>
<div className="header-actions">{this.renderHeaderBtns(remote)}</div>
</div>
<div className="remote-detail" style={{ overflow: "hidden" }}>
<div className="remote-detail">
<div className="settings-field">
<div className="settings-label">Conn Id</div>
<div className="settings-input">{remote.remoteid}</div>
@ -381,33 +400,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
></div>
</div>
</div>
</div>
<div className="wave-modal-footer">
<ModalKeybindings
onOk={() => {
if (selectedRemoteStatus == "connecting") {
return;
}
this.handleClose();
}}
onCancel={() => {
if (selectedRemoteStatus == "connecting") {
return;
}
this.handleClose();
}}
></ModalKeybindings>
<Button
className="secondary"
disabled={selectedRemoteStatus == "connecting"}
onClick={this.handleClose}
>
Cancel
</Button>
<Button disabled={selectedRemoteStatus == "connecting"} onClick={this.handleClose}>
Done
</Button>
</div>
</OverlayScrollbarsComponent>
</Modal>
);
}