waveterm/backup
0
0
Fork 0
mirror of https://github.com/wavetermdev/backup.git synced 2026-08-05 13:57:07 -07:00
Code Issues Packages Projects Releases Wiki Activity

Pe 195 12 oct 2 (#36)

Browse Source 
* history and imports fixed

* history and favourites are ready

* connections home works. now to Add connection

* connections done
This commit is contained in:
anandamarsh
2023-10-12 22:06:12 -07:00
committed by GitHub
parent 11a90b01dc
commit 53446e93d3
14 changed files with 124 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/app.less
+1 -1
View File
@@ -91,7 +91,7 @@ svg.icon {
.dropdown,
.button {
display: inline-block;
border: none;
border: 1px solid @base-border !important;
border-radius: 5px;
cursor: pointer;
background-color: @button-background !important;
src/app/assets/icons/circle.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 297 B

src/app/assets/icons/key.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M336 352c97.2 0 176-78.8 176-176S433.2 0 336 0S160 78.8 160 176c0 18.7 2.9 36.8 8.3 53.7L7 391l-7 7V408v80 24H24h80 24V488 448h40 24V424 384h40 9.9l7-7 33.3-33.3c16.9 5.4 35 8.3 53.7 8.3zM376 96a40 40 0 1 1 0 80 40 40 0 1 1 0-80z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 477 B

src/app/assets/icons/rotate_left.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M142.9 142.9L200 200l-24 24H16V64L40 40 97.6 97.6l0 0c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0l45.3-45.3c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0l0 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 452 B

src/app/bookmarks/bookmarks.tsx
+3 -3
View File
@@ -12,7 +12,7 @@ import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
import { ReactComponent as CopyIcon } from "../assets/icons/favourites/copy.svg";
import { ReactComponent as PenIcon } from "../assets/icons/favourites/pen.svg";
import { ReactComponent as TrashIcon } from "../assets/icons/favourites/trash.svg";
import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
import "./bookmarks.less";
@@ -192,7 +192,7 @@ class BookmarksView extends React.Component<{}, {}> {
return (
<div className={cn("bookmarks-view", { "is-hidden": isHidden })}>
<div className="header">
<div className="bookmarks-title">Favourites</div>
<div className="bookmarks-title">Favorites</div>
<div className="close-button hoverEffect" title="Close (Escape)" onClick={this.closeView}>
<XmarkIcon className={"icon"} />
</div>
@@ -205,7 +205,7 @@ class BookmarksView extends React.Component<{}, {}> {
<div className="no-content">
No Bookmarks.
<br />
Use the <FavouritesIcon className={"icon"} /> icon on commands to add your first bookmark.
Use the <FavoritesIcon className={"icon"} /> icon on commands to add your first bookmark.
</div>
</If>
</div>
src/app/common/common.less
+8 -8
View File
@@ -505,25 +505,25 @@
}
.remote-status {
margin-right: 5px;
position: relative;
top: -3px;
color: #c4a000;
width: 1em;
height: 1em;
display: inline;
fill: #c4a000;
&.status-init,
&.status-disconnected {
color: #c4a000;
fill: #c4a000;
}
&.status-connecting {
color: #c4a000;
fill: #c4a000;
}
&.status-connected {
color: #4e9a06;
fill: #4e9a06;
}
&.status-error {
color: #cc0000;
fill: #cc0000;
}
}
src/app/common/common.tsx
+6 -3
View File
@@ -10,6 +10,9 @@ import type { RemoteType } from "../../types/types";
import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
import { ReactComponent as CopyIcon } from "../assets/icons/history/copy.svg";
import { ReactComponent as CircleIcon } from "../assets/icons/circle.svg";
import { ReactComponent as KeyIcon } from "../assets/icons/key.svg";
import { ReactComponent as RotateIcon } from "../assets/icons/rotate_left.svg";
import "./common.less";
@@ -100,11 +103,11 @@ class RemoteStatusLight extends React.Component<{ remote: RemoteType }, {}> {
status = remote.status;
wfp = remote.waitingforpassword;
}
let icon = "fa-sharp fa-solid fa-circle";
if (status == "connecting") {
icon = wfp ? "fa-sharp fa-solid fa-key" : "fa-sharp fa-solid fa-rotate";
if (wfp) return <KeyIcon className={`remote-status status-${status}`} />;
else return <RotateIcon className={`remote-status status-${status}`} />;
}
return <i className={cn("remote-status", icon, "status-" + status)} />;
return <CircleIcon className={`remote-status status-${status}`} />;
}
}
src/app/common/modals/modals.less
+18 -17
View File
@@ -6,7 +6,7 @@
z-index: 105;
.modal-background {
background-color: rgba(10, 10, 10, 0.6);
background-color: @base-background-transparent;
}
}
@@ -14,9 +14,6 @@
a:hover {
text-decoration: underline;
}
.content {
}
}
.disconnected-modal {
@@ -112,18 +109,29 @@
.modal.prompt-modal {
.modal-content {
border-radius: 5px;
border: 5px solid #333;
background: @base-background;
box-shadow: 0px 2px 2px 0 rgba(255, 255, 255, 0.1), 0px 4px 5px 0 rgba(255, 255, 255, 0.2),
0px 0px 5px 2.5px rgba(255, 255, 255, 0.5);
padding-bottom: 0.5em;
}
header {
background-color: #000;
display: flex;
flex-direction: row;
padding: 10px;
position: relative;
background-color: @background-session-components-solid;
.modal-title {
color: @prompt-green;
color: @base-color;
font-size: 1.5em;
.icon {
display: inline;
width: 1em;
height: 1em;
margin-right: 1em;
vertical-align: middle;
}
}
.close-icon {
@@ -143,12 +151,9 @@
}
.inner-content {
background-color: #222;
padding: 15px 10px 15px 10px;
color: @term-white;
padding: 1em;
margin: 0;
border-top: 1px solid fade(@base-border, 50%);
&.is-hidden {
display: none;
}
@@ -158,10 +163,7 @@
display: flex;
flex-direction: row;
align-items: center;
color: @term-white;
background-color: #222;
padding: 15px 10px 10px 10px;
border-top: 1px solid #666;
}
}
@@ -229,8 +231,7 @@
.settings-label {
font-weight: bold;
color: #fff;
width: 120px;
width: 12em;
display: flex;
flex-direction: row;
align-items: center;
src/app/common/modals/modals.tsx
+5 -5
View File
@@ -10,6 +10,7 @@ import { GlobalModel } from "../../../model/model";
import { Markdown } from "../common";
import { ReactComponent as XmarkIcon } from "../../assets/icons/line/xmark.svg";
import { ReactComponent as WarningIcon } from "../../assets/icons/line/triangle-exclamation.svg";
dayjs.extend(localizedFormat);
@@ -88,9 +89,7 @@ class DisconnectedModal extends React.Component<{}, {}> {
<span>Try Reconnect</span>
</button>
<button onClick={this.restartServer} className="button is-danger" style={{ marginLeft: 10 }}>
<span className="icon">
<i className="fa-sharp fa-solid fa-triangle-exclamation" />
</span>
<WarningIcon className="icon" />
<span>Restart Server</span>
</button>
</footer>
@@ -176,7 +175,8 @@ class AlertModal extends React.Component<{}, {}> {
<div className="modal-content">
<header>
<p className="modal-title">
<i className="fa-sharp fa-solid fa-triangle-exclamation" /> {title}
<WarningIcon className="icon" />
{title}
</p>
<div className="close-icon hoverEffect" title="Close (Escape)" onClick={this.closeModal}>
<XmarkIcon />
@@ -257,7 +257,7 @@ class WelcomeModal extends React.Component<{}, {}> {
let pageNum = this.pageNum.get();
return (
<div className={cn("modal welcome-modal prompt-modal is-active")}>
<div className="modal-background" />
<div className="modal-background" onClick={this.closeModal} />
<div className="modal-content">
<header>
<div className="modal-title">welcome to [prompt]</div>
src/app/connections/connections.less
+57 -25
View File
@@ -4,24 +4,41 @@
.modal-content {
min-width: 850px;
}
.icon {
width: 1em;
height: 1em;
fill: @base-color;
}
.button {
svg {
float: right;
margin-top: 0.3em;
margin-right: 0;
}
}
.dropdown,
.button {
display: inline-flex;
}
.dropdown .button {
border: none !important;
}
.inner-content {
display: flex;
flex-direction: row;
align-items: stretch;
padding: 0;
max-height: 80vh;
min-height: 45em;
max-height: 45em;
.remotes-menu {
flex: 0 0 200px;
min-height: 450px;
border-right: 1px solid #666;
border-right: 1px solid @disabled-color;
overflow-y: auto;
height: 100px;
.remote-menu-item {
border-top: 1px solid #666;
padding: 5px;
border-top: 1px solid @disabled-color;
padding: 0.5em;
display: flex;
flex-direction: row;
cursor: pointer;
@@ -47,8 +64,9 @@
}
.remote-status-light {
width: 15px;
margin-top: -2px;
width: 2em;
margin-top: 0.7em;
font-size: 0.8em;
}
.remote-name {
@@ -56,10 +74,12 @@
.remote-name-primary {
font-weight: bold;
max-width: 10em;
}
.remote-name-secondary {
color: #777;
color: @disabled-color;
max-width: 14em;
}
}
}
@@ -73,7 +93,7 @@
flex-direction: column;
.settings-field {
margin-top: 5px;
margin-top: 0.75em;
}
* {
@@ -87,7 +107,7 @@
.title {
color: @term-white;
padding-bottom: 8px;
padding: 0.75em 0;
margin-bottom: 0;
border-bottom: 1px solid #777;
}
@@ -95,13 +115,19 @@
.terminal-wrapper {
margin-left: 0;
margin-bottom: 0;
&.has-message {
margin-top: 0;
}
box-shadow: none;
border: 1px solid #777;
border-radius: 0 0 5px 5px;
font-size: 0.8em !important;
.xterm-rows {
padding-top: 0.5em;
}
.xterm-rows > div {
font-size: 0.8em;
}
}
.action-buttons {
@@ -116,18 +142,16 @@
padding: 8px;
border-radius: 5px 5px 0 0;
background-color: #333;
i.fa-check {
color: @term-green;
}
&.is-ok {
}
border: 1px solid #777;
border-bottom: none;
.message-row {
display: flex;
flex-direction: row;
align-items: center;
svg {
vertical-align: text-bottom;
}
}
.remote-status {
@@ -174,7 +198,7 @@
display: flex;
flex-direction: row;
align-items: center;
width: 135px;
width: 12em !important;
}
.settings-field .settings-input .undo-icon {
@@ -186,6 +210,11 @@
.editremote-dropdown .dropdown-trigger button {
width: 120px;
justify-content: flex-start;
color: @base-color;
border: none;
&:hover {
box-shadow: none;
}
}
.settings-field .raw-input {
@@ -193,16 +222,19 @@
}
.settings-input input {
background: rgba(255, 255, 255, 0.8);
width: 250px;
}
.dropdown .dropdown-trigger button {
outline: none;
}
.dropdown .dropdown-item {
padding: 5px 5px 5px 12px;
}
.dropdown .dropdown-content {
max-width: 10.6em;
}
.settings-input {
.info-message {
margin-left: 22px;
src/app/connections/connections.tsx
+13 -14
View File
@@ -11,6 +11,9 @@ import * as util from "../../util/util";
import * as textmeasure from "../../util/textmeasure";
import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
import { ReactComponent as AngleDownIcon } from "../assets/icons/history/angle-down.svg";
import { ReactComponent as RotateLeftIcon } from "../assets/icons/rotate_left.svg";
import { ReactComponent as AddIcon } from "../assets/icons/add.svg";
import "./connections.less";
@@ -59,12 +62,10 @@ class AuthModeDropdown extends React.Component<{ tempVal: OV<string> }, {}> {
return (
<div className={cn("dropdown", "editremote-dropdown", { "is-active": this.active.get() })}>
<div className="dropdown-trigger">
<button onClick={this.toggleActive} className="button is-small is-dark">
<button onClick={this.toggleActive} className="button">
<span>{this.props.tempVal.get()}</span>
<div className="flex-spacer" />
<span className="icon is-small">
<i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
</span>
<AngleDownIcon className="icon" />
</button>
</div>
<div className="dropdown-menu" role="menu">
@@ -115,12 +116,10 @@ class ConnectModeDropdown extends React.Component<{ tempVal: OV<string> }, {}> {
return (
<div className={cn("dropdown", "editremote-dropdown", { "is-active": this.active.get() })}>
<div className="dropdown-trigger">
<button onClick={this.toggleActive} className="button is-small is-dark">
<button onClick={this.toggleActive} className="button">
<span>{this.props.tempVal.get()}</span>
<div className="flex-spacer" />
<span className="icon is-small">
<i className="fa-sharp fa-regular fa-angle-down" aria-hidden="true"></i>
</span>
<AngleDownIcon className="icon" />
</button>
</div>
<div className="dropdown-menu" role="menu">
@@ -700,8 +699,8 @@ class EditRemoteSettings extends React.Component<
maxLength={400}
/>
<If condition={this.canResetPw()}>
<div className="undo-icon" title="restore to original password">
<i onClick={this.resetPw} className="icon fa-sharp fa-solid fa-rotate-left" />
<div className="undo-icon" title="restore to original password" onClick={this.resetPw}>
<RotateLeftIcon className="icon" />
</div>
</If>
</div>
@@ -1117,8 +1116,8 @@ class RemotesModal extends React.Component<{ model: RemotesModalModel }, {}> {
</If>
<If condition={!util.isBlank(remote.remotealias)}>
<div className="remote-name">
<div className="remote-name-primary">{remote.remotealias}</div>
<div className="remote-name-secondary">{remote.remotecanonicalname}</div>
<div className="remote-name-primary truncate">{remote.remotealias}</div>
<div className="remote-name-secondary truncate">{remote.remotecanonicalname}</div>
</div>
</If>
</div>
@@ -1128,8 +1127,8 @@ class RemotesModal extends React.Component<{ model: RemotesModalModel }, {}> {
renderAddRemoteMenuItem(): any {
return (
<div key="add" onClick={this.clickAddRemote} className={cn("remote-menu-item add-remote")}>
<div>
<i className="fa-sharp fa-solid fa-plus" /> Add SSH Connection
<div className="hoverEffect" style={{ padding: "0.5em", borderRadius: "4px" }}>
<AddIcon className="icon" /> Add SSH Connection
</div>
</div>
);
src/app/history/history.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ import customParseFormat from "dayjs/plugin/customParseFormat";
import { Line } from "../line/linecomps";
import { CmdStrCode } from "../common/common";
import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.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 ChevronLeftIcon } from "../assets/icons/history/chevron-left.svg";
@@ -532,7 +532,7 @@ class HistoryView extends React.Component<{}, {}> {
</If>
</td>
<td className="bookmark" style={{ display: "none" }}>
<FavouritesIcon className="icon" />
<FavoritesIcon className="icon" />
</td>
<td className="ts">{getHistoryViewTs(nowDate, item.ts)}</td>
<td className="session">{formatSSName(snames, scrnames, item)}</td>
src/app/line/linecomps.tsx
+5 -3
View File
@@ -21,7 +21,7 @@ import type {
} from "../../types/types";
import cn from "classnames";
import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
import { ReactComponent as PinIcon } from "../assets/icons/pin.svg";
import { ReactComponent as PlusIcon } from "../assets/icons/plus.svg";
import { ReactComponent as MinusIcon } from "../assets/icons/minus.svg";
@@ -644,7 +644,7 @@ class LineCmd extends React.Component<
className={cn("line-icon", "line-bookmark", "hoverEffect")}
onClick={this.clickBookmark}
>
<FavouritesIcon className="icon" />
<FavoritesIcon className="icon" />
</div>
<div
key="minimise"
@@ -709,7 +709,9 @@ class LineCmd extends React.Component<
<If condition={rsdiff != null && rsdiff != ""}>
<div className="cmd-rtnstate-label">new state</div>
<div className="cmd-rtnstate-sep"></div>
<div className="cmd-rtnstate-diff" style={{fontSize: rtnStateDiffSize}}>{this.rtnStateDiff.get()}</div>
<div className="cmd-rtnstate-diff" style={{ fontSize: rtnStateDiffSize }}>
{this.rtnStateDiff.get()}
</div>
</If>
</div>
</If>
src/app/sidebar/MainSideBar.tsx
+3 -3
View File
@@ -11,7 +11,7 @@ import { ReactComponent as HelpIcon } from "../assets/icons/help.svg";
import { ReactComponent as SettingsIcon } from "../assets/icons/settings.svg";
import { ReactComponent as DiscordIcon } from "../assets/icons/discord.svg";
import { ReactComponent as HistoryIcon } from "../assets/icons/history.svg";
import { ReactComponent as FavouritesIcon } from "../assets/icons/favourites.svg";
import { ReactComponent as FavoritesIcon } from "../assets/icons/favourites.svg";
import { ReactComponent as AppsIcon } from "../assets/icons/apps.svg";
import { ReactComponent as ConnectionsIcon } from "../assets/icons/connections.svg";
import { ReactComponent as WorkspacesIcon } from "../assets/icons/workspaces.svg";
@@ -213,8 +213,8 @@ class MainSideBar extends React.Component<{}, {}> {
<span className="hotkey">&#x2318;H</span>
</div>
<div className="item hoverEffect" onClick={this.handleBookmarksClick}>
<FavouritesIcon className="icon" />
Favourites
<FavoritesIcon className="icon" />
Favorites
<span className="hotkey">&#x2318;B</span>
</div>
<div className="item hoverEffect" onClick={this.handleConnectionsClick}>