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

Make Client Settings and connections views scrollable, fix regression in unused bookmarks feature (#621)

Browse Source 
Makes clientsettings scrollable, adds an option for mainview to wrap the
mainview-content in an OverlayScrollbarsComponent
This commit is contained in:
Evan Simkowitz 2024-04-30 16:05:49 -07:00 committed by GitHub
parent 8c63be4ea0
commit a16e01f73b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 109 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/themes/default.css
View File

@ -156,7 +156,7 @@
--table-border-color: rgba(241, 246, 243, 0.15);
--table-thead-border-top-color: rgba(250, 250, 250, 0.1);
--table-thead-bright-border-color: rgb(204, 204, 204);
--table-thead-bg-color: rgba(250, 250, 250, 0.02);
--table-thead-bg-color: rgb(5, 5, 5);
--table-tr-border-bottom-color: rgba(241, 246, 243, 0.15);
--table-tr-hover-bg-color: rgba(255, 255, 255, 0.06);
--table-tr-selected-bg-color: rgb(34, 34, 34);

4
public/themes/light.css
View File

@ -57,6 +57,10 @@
--scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4);
--scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5);
/* table colors */
--table-thead-bg-color: rgb(253, 253, 253);
--table-tr-selected-bg-color: rgb(216, 216, 216);
/* line color */
--line-actions-bg-color: rgba(0, 0, 0, 0.1);
--line-actions-inactive-color: rgba(0, 0, 0, 0.3);

3
src/app/clientsettings/clientsettings.less
View File

@ -1,6 +1,7 @@
.clientsettings-view {
.content {
padding: 14px 18px 0 30px;
padding: 14px 18px 14px 30px;
overflow-y: scroll;
}
.wave-dropdown {

8
src/app/clientsettings/clientsettings.tsx
View File

@ -14,6 +14,7 @@ import * as appconst from "@/app/appconst";
import "./clientsettings.less";
import { MainView } from "../common/elements/mainview";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
class ClientSettingsKeybindings extends React.Component<{}, {}> {
componentDidMount() {
@ -251,7 +252,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
const curSudoPwClearOnSleep = GlobalModel.getSudoPwClearOnSleep();
return (
<MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
<MainView
className="clientsettings-view"
title="Client Settings"
onClose={this.handleClose}
scrollable={true}
>
<If condition={!isHidden}>
<ClientSettingsKeybindings></ClientSettingsKeybindings>
</If>

3
src/app/common/elements/mainview.less
View File

@ -40,7 +40,8 @@
}
.mainview-content {
padding-top: 14px;
display: flex;
flex-direction: column;
}
}

18
src/app/common/elements/mainview.tsx
View File

@ -7,6 +7,8 @@ import cn from "classnames";
import { GlobalModel } from "@/models";
import "./mainview.less";
import { Choose, If, Otherwise, When } from "tsx-control-statements/components";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
@mobxReact.observer
class MainView extends React.Component<{
@ -14,6 +16,8 @@ class MainView extends React.Component<{
onClose: () => void;
children: React.ReactNode;
className?: string;
scrollable?: boolean;
onScrollbarInitialized?: () => void;
}> {
render() {
const sidebarModel = GlobalModel.mainSidebarModel;
@ -31,7 +35,21 @@ class MainView extends React.Component<{
</div>
</header>
</div>
<Choose>
<When condition={this.props.scrollable}>
<OverlayScrollbarsComponent
className="mainview-content"
options={{ scrollbars: { autoHide: "leave" } }}
defer={true}
events={{ initialized: this.props.onScrollbarInitialized }}
>
{this.props.children}
</OverlayScrollbarsComponent>
</When>
<Otherwise>
<div className="mainview-content">{this.props.children}</div>
</Otherwise>
</Choose>
</div>
);
}

19
src/app/connections/connections.less
View File

@ -9,10 +9,20 @@
margin: 20px 50px 20px 20px;
}
.connections-table-container {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-y: scroll;
max-height: 85vh;
width: fit-content;
max-width: 970px;
}
.connections-table {
margin: 0px 10px 10px 10px;
table-layout: fixed;
max-width: 970px;
position: relative;
colgroup {
.first-col {
@ -28,13 +38,16 @@
thead {
border-radius: var(--sizing-2-xs, 4px);
border-bottom: 2px solid var(--table-thead-bright-border-color);
user-select: none;
th {
position: sticky;
top: 0;
height: 32px;
padding: 5px 15px 5px 10px;
color: var(--app-text-color);
border-bottom: 2px solid var(--table-thead-bright-border-color);
background: var(--table-thead-bg-color);
}
}
@ -78,8 +91,10 @@
footer {
margin-left: 10px;
margin-top: 10px;
display: flex;
flex-direction: row;
flex-shrink: 0;
gap: 8px;
}

7
src/app/connections/connections.tsx
View File

@ -13,6 +13,7 @@ import * as util from "@/util/util";
import "./connections.less";
import { MainView } from "../common/elements/mainview";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
class ConnectionsKeybindings extends React.Component<{}, {}> {
componentDidMount() {
@ -149,6 +150,11 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
<If condition={!isHidden}>
<ConnectionsKeybindings></ConnectionsKeybindings>
</If>
<OverlayScrollbarsComponent
className="connections-table-container"
options={{ scrollbars: { autoHide: "leave" } }}
defer={true}
>
<table
className="connections-table"
cellSpacing="0"
@ -200,6 +206,7 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
</For>
</tbody>
</table>
</OverlayScrollbarsComponent>
<footer>
<Button
className="secondary"

2
src/models/bookmarks.ts
View File

@ -81,7 +81,7 @@ class BookmarksModel {
mobx.action(() => {
this.reset();
this.globalModel.showSessionView();
this.globalModel.inputModel.setCurLine(bm.cmdstr);
this.globalModel.inputModel.curLine = bm.cmdstr;
setTimeout(() => this.globalModel.inputModel.giveFocus(), 50);
})();
}