mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-02 18:39:05 +01:00
more history UI updates. copy/use controls, change font, fix scroll area
This commit is contained in:
sawka
parent
e54d76ebe0
commit
a5d4ae04af
@ -168,7 +168,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
|
||||
const curTheme = GlobalModel.getTheme();
|
||||
|
||||
return (
|
||||
<MainView viewName="clientsettings" title="Client Settings" onClose={this.handleClose}>
|
||||
<MainView className="clientsettings-view" title="Client Settings" onClose={this.handleClose}>
|
||||
<div className="content">
|
||||
<div className="settings-field">
|
||||
<div className="settings-label">Term Font Size</div>
|
||||
|
||||
@ -10,17 +10,17 @@ import "./mainview.less";
|
||||
|
||||
@mobxReact.observer
|
||||
class MainView extends React.Component<{
|
||||
viewName: string;
|
||||
title: string;
|
||||
onClose: () => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}> {
|
||||
render() {
|
||||
const sidebarModel = GlobalModel.mainSidebarModel;
|
||||
const maxWidthSubtractor = sidebarModel.getCollapsed() ? 0 : sidebarModel.getWidth();
|
||||
return (
|
||||
<div
|
||||
className={cn("mainview", `${this.props.viewName}-view`)}
|
||||
className={cn("mainview", this.props.className)}
|
||||
style={{ maxWidth: `calc(100vw - ${maxWidthSubtractor}px)` }}
|
||||
>
|
||||
<div className="header-container bottom-border">
|
||||
|
||||
@ -131,7 +131,7 @@ class ConnectionsView extends React.Component<{ model: RemotesModel }, { hovered
|
||||
let item: RemoteType = null;
|
||||
|
||||
return (
|
||||
<MainView viewName="connections" title="Connections" onClose={this.handleClose}>
|
||||
<MainView className="connections-view" title="Connections" onClose={this.handleClose}>
|
||||
<table
|
||||
className="connections-table"
|
||||
cellSpacing="0"
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.history-view {
|
||||
padding-bottom: 10px;
|
||||
min-height: 0;
|
||||
|
||||
.icon {
|
||||
width: 1.5em !important;
|
||||
@ -8,6 +9,14 @@
|
||||
fill: var(--app-text-color);
|
||||
}
|
||||
|
||||
.mainview-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
padding: 10px 10px 0 10px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.history-checkbox {
|
||||
&.state-unchecked {
|
||||
width: 16px;
|
||||
@ -154,17 +163,22 @@
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
height: 35px;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 2px solid #ccc;
|
||||
|
||||
.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.is-top {
|
||||
border-bottom: 2px solid #ccc;
|
||||
border-top: 1px solid #333;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
&.is-bottom {
|
||||
border-top: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.trash-icon {
|
||||
@ -251,6 +265,8 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: calc(100% - 20px);
|
||||
flex-grow: 1;
|
||||
min-height: 200px;
|
||||
|
||||
.row.active-history-item {
|
||||
display: flex;
|
||||
@ -303,6 +319,7 @@
|
||||
border-bottom: 1px solid var(--table-tr-border-bottom-color);
|
||||
align-items: center;
|
||||
color: var(--app-text-color);
|
||||
font: var(--base-font);
|
||||
|
||||
&.is-selected {
|
||||
background-color: var(--table-tr-selected-bg-color);
|
||||
@ -328,7 +345,7 @@
|
||||
}
|
||||
|
||||
.selectbox {
|
||||
flex: 0 0 20px;
|
||||
flex: 0 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@ -359,20 +376,40 @@
|
||||
white-space: pre;
|
||||
max-height: 70px;
|
||||
min-width: 300px;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
overflow-x: scroll;
|
||||
position: relative;
|
||||
|
||||
.use-button {
|
||||
.cmdstr-code {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.actions-block {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.action-item:hover {
|
||||
color: var(--app-text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover .use-button {
|
||||
visibility: visible;
|
||||
.activate-item-spacer {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .cmdstr .actions-block {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.downarrow {
|
||||
flex: 0 0 32px;
|
||||
justify-content: center;
|
||||
|
||||
@ -153,16 +153,16 @@ class HistoryCmdStr extends React.Component<
|
||||
<div>copied</div>
|
||||
</div>
|
||||
</If>
|
||||
<div key="use" className="use-button hoverEffect" title="Use Command" onClick={this.handleUse}>
|
||||
<CheckIcon className="icon" />
|
||||
</div>
|
||||
<div key="code" className="code-div">
|
||||
<code>{cmdstr}</code>
|
||||
</div>
|
||||
<div key="copy" className="copy-control hoverEffect">
|
||||
<div className="inner-copy" onClick={this.handleCopy} title="copy">
|
||||
<div key="copy" className="actions-block">
|
||||
<div className="action-item" onClick={this.handleCopy} title="copy">
|
||||
<CopyIcon className="icon" />
|
||||
</div>
|
||||
<div key="use" className="action-item" title="Use Command" onClick={this.handleUse}>
|
||||
<CheckIcon className="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -447,7 +447,7 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
let remoteId: string = null;
|
||||
|
||||
return (
|
||||
<MainView viewName="history" title="History" onClose={this.handleClose}>
|
||||
<MainView className="history-view" title="History" onClose={this.handleClose}>
|
||||
<div key="search" className="history-search">
|
||||
<div className="main-search field">
|
||||
<TextField
|
||||
@ -634,12 +634,14 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
fontSize="normal"
|
||||
limitHeight={true}
|
||||
/>
|
||||
<div
|
||||
className="flex-spacer activate-item-spacer"
|
||||
onClick={() => this.activateItem(item.historyid)}
|
||||
/>
|
||||
</div>
|
||||
<div className="cell workspace text-standard">
|
||||
{formatSSName(snames, scrnames, item)}
|
||||
</div>
|
||||
<div className="cell remote text-standard">{formatRemoteName(rnames, item.remote)}</div>
|
||||
<div className="cell ts text-standard">{getHistoryViewTs(nowDate, item.ts)}</div>
|
||||
<div className="cell workspace">{formatSSName(snames, scrnames, item)}</div>
|
||||
<div className="cell remote">{formatRemoteName(rnames, item.remote)}</div>
|
||||
<div className="cell ts">{getHistoryViewTs(nowDate, item.ts)}</div>
|
||||
<div className="cell downarrow" onClick={() => this.activateItem(item.historyid)}>
|
||||
<If condition={activeItemId != item.historyid}>
|
||||
<svg
|
||||
@ -685,7 +687,10 @@ class HistoryView extends React.Component<{}, {}> {
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
<div key="control2" className={cn("control-bar", { "is-hidden": items.length == 0 || !hasMore })}>
|
||||
<div
|
||||
key="control2"
|
||||
className={cn("control-bar", "is-bottom", { "is-hidden": items.length == 0 || !hasMore })}
|
||||
>
|
||||
<div className="spacer" />
|
||||
<div className="showing-text">
|
||||
Showing {offset + 1}-{offset + items.length}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user