mirror of
https://github.com/wavetermdev/backup.git
synced 2026-04-22 15:26:58 -07:00
Compare commits
15 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Sylvia Crowe
|
550e93e62a | ||
|
Sylvia Crowe
|
42963f4287 | ||
|
Sylvia Crowe
|
a356df3396 | ||
|
Sylvia Crowe
|
0eab1e3973 | ||
|
Sylvia Crowe
|
5abff8075b | ||
|
Sylvia Crowe
|
6bd60e8330 | ||
|
Sylvia Crowe
|
e62540bdbe | ||
|
Sylvia Crowe
|
85156bd6c2 | ||
|
Sylvia Crowe
|
d4a64fa8c2 | ||
|
Sylvia Crowe
|
618a08fe54 | ||
|
Sylvia Crowe
|
b788a5e4af | ||
|
Sylvia Crowe
|
2e76556cac | ||
|
Sylvia Crowe
|
d66287fcc6 | ||
|
Sylvia Crowe
|
f25892ba40 | ||
|
Sylvia Crowe
|
37ff5f8c3e |
+4
-4
@@ -1,4 +1,4 @@
|
||||
@import "@/common/themes/themes.less";
|
||||
@import "./common/themes/themes.less";
|
||||
|
||||
@font-face {
|
||||
font-family: "Martian Mono";
|
||||
@@ -19,7 +19,7 @@ body {
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
background: @base-background-transparent;
|
||||
color: var(--base-color);
|
||||
color: @base-color;
|
||||
}
|
||||
|
||||
body.is-dev {
|
||||
@@ -33,7 +33,7 @@ textarea {
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
background: @base-background;
|
||||
color: var(--base-color);
|
||||
color: @base-color;
|
||||
}
|
||||
|
||||
// typography
|
||||
@@ -103,7 +103,7 @@ body code {
|
||||
}
|
||||
|
||||
svg.icon {
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
|
||||
@@ -20,9 +20,6 @@ import { MainSideBar } from "./sidebar/sidebar";
|
||||
import { DisconnectedModal, ClientStopModal } from "./common/modals";
|
||||
import { ModalsProvider } from "./common/modals/provider";
|
||||
import { ErrorBoundary } from "./common/error/errorboundary";
|
||||
|
||||
import "@/common/themes/fonts.less";
|
||||
import "@/common/themes/themes.less";
|
||||
import "./app.less";
|
||||
|
||||
dayjs.extend(localizedFormat);
|
||||
|
||||
+1
-2
@@ -18,8 +18,7 @@ export const ConfirmKey_HideShellPrompt = "hideshellprompt";
|
||||
|
||||
export const NoStrPos = -1;
|
||||
|
||||
export const RemotePtyRows = 8;
|
||||
export const RemotePtyTotalRows = 25;
|
||||
export const RemotePtyRows = 8; // also in main.tsx
|
||||
export const RemotePtyCols = 80;
|
||||
export const ProdServerEndpoint = "http://127.0.0.1:1619";
|
||||
export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
}
|
||||
|
||||
.bookmarks-list {
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
i {
|
||||
display: inline;
|
||||
font-size: 13px;
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
padding-top: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -370,11 +370,7 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
|
||||
ref={this.termRef}
|
||||
data-remoteid={remote.remoteid}
|
||||
style={{
|
||||
height: textmeasure.termHeightFromRows(
|
||||
appconst.RemotePtyRows,
|
||||
termFontSize,
|
||||
appconst.RemotePtyTotalRows
|
||||
),
|
||||
height: textmeasure.termHeightFromRows(appconst.RemotePtyRows, termFontSize),
|
||||
width: termWidth,
|
||||
}}
|
||||
></div>
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
:root {
|
||||
--fixed-font: "Martian Mono", sans-serif;
|
||||
--terminal-font: "JetBrains Mono", sans-serif;
|
||||
|
||||
--text-s1-font: "Martian Mono", sans-serif;
|
||||
|
||||
--markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji";
|
||||
}
|
||||
@@ -77,138 +77,3 @@
|
||||
@markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji";
|
||||
@markdown-highlight: rgb(35, 35, 35);
|
||||
|
||||
:root {
|
||||
--base-color: #eceeec;
|
||||
|
||||
// semantic vars based on --base-color
|
||||
--line-avatar-color: #eceeec;
|
||||
--line-text-color: #f2f4f2;
|
||||
--line-svg-fill: var(--line-text-color);
|
||||
--line-svg-hover-fill: #eceeec;
|
||||
--line-selected-border-color: rgb(193, 195, 193);
|
||||
--line-separator-color: rgb(126, 126, 126);
|
||||
--line-meta-line1-color: rgb(150, 152, 150);
|
||||
|
||||
--base-background: rgba(21, 23, 21, 1);
|
||||
|
||||
// semantic vars based on --base-background
|
||||
--line-background: rgba(21, 23, 21, 1);
|
||||
|
||||
--base-background-transparent: rgba(21, 23, 21, 0.7);
|
||||
--base-background-dev: rgba(21, 23, 48, 0.7);
|
||||
--base-border: rgba(241, 246, 243, 0.08);
|
||||
--background-session: rgba(13, 13, 13, 0.85);
|
||||
--background-session-components: rgba(48, 49, 48, 0.6);
|
||||
--background-session-components-solid: rgb(33, 34, 33);
|
||||
--wave-green: rgb(88, 193, 66);
|
||||
|
||||
// semantic vars based on --wave-green
|
||||
--line-status-success-fill: rgb(88, 193, 66);
|
||||
|
||||
--wave-green-faded: rgba(88, 193, 66, 0.4);
|
||||
|
||||
--cmd-input-border-color: rgba(88, 193, 66, 0.8);
|
||||
|
||||
--disabled-background: rgba(76, 81, 75, 1);
|
||||
--disabled-color: #adadad;
|
||||
--disabled-color-faded: rgba(173, 173, 173, 0.6);
|
||||
--scrollbar-background: rgba(21, 23, 21, 1);
|
||||
--scrollbar-thumb-background: rgb(134, 134, 134);
|
||||
--button-background: rgb(38, 38, 38);
|
||||
--button-disabled-background: rgb(30, 29, 29);
|
||||
--success-green: rgb(38, 97, 26);
|
||||
--error-red: #cc0000;
|
||||
|
||||
// semantic vars based on --error-red
|
||||
--line-base-error-color: #cc0000;
|
||||
|
||||
// semantic vars based on --error-red
|
||||
--line-status-error-fill: #cc0000;
|
||||
|
||||
--warning-yellow: #ffa500;
|
||||
|
||||
// semantic vars based on --warning-yellow
|
||||
--line-status-warning-fill: #ffa500;
|
||||
|
||||
--textarea-background: #2a2a2a;
|
||||
|
||||
--text-primary: #fff;
|
||||
--text-secondary: #c3c8c2;
|
||||
--text-caption: #8b918a;
|
||||
|
||||
--status-connected: #46a758;
|
||||
--status-connecting: #f5d90a;
|
||||
--status-error: #e54d2e;
|
||||
--status-disconnected: #c3c8c2;
|
||||
|
||||
--term-black: #000000;
|
||||
--term-red: #cc0000;
|
||||
|
||||
// semantic vars based on --term-red
|
||||
--line-load-error-text-color: #cc0000;
|
||||
|
||||
--term-green: #4e9a06;
|
||||
|
||||
// semantic vars based on --term-green
|
||||
--line-active-border-color: rgb(97, 158, 72);
|
||||
|
||||
--term-yellow: #c4a000;
|
||||
|
||||
// semantic vars based on --term-yellow
|
||||
--line-base-yellow-color: #fce94f;
|
||||
|
||||
// semantic vars based on --term-yellow
|
||||
--line-sidebar-message-text-color: #c4a000;
|
||||
|
||||
--term-blue: #3465a4;
|
||||
--term-cyan: #06989a;
|
||||
--term-white: #d3d7cf;
|
||||
|
||||
// semantic vars based on --term-white
|
||||
--line-base-white-color: #d3d7cf;
|
||||
|
||||
--term-bright-red: #ef2929;
|
||||
--term-bright-green: #58c142;
|
||||
--term-bright-yellow: #fce94f;
|
||||
|
||||
--term-bright-blue: #32afff;
|
||||
--term-bright-magenta: #ad7fa8;
|
||||
--term-bright-cyan: #34e2e2;
|
||||
--term-bright-white: #ffffff;
|
||||
|
||||
--button-bg-yellow: #e9be68;
|
||||
--button-bg-red: #d06c68;
|
||||
|
||||
--history-error-red: #d06c68;
|
||||
|
||||
--history-selected-error-red: #f79494;
|
||||
|
||||
--tab-red: #e54d2e;
|
||||
--tab-orange: #ef713b;
|
||||
--tab-yellow: #e0b956;
|
||||
--tab-green: #58c142;
|
||||
--tab-mint: #4bffa9;
|
||||
--tab-cyan: #4bdfff;
|
||||
--tab-blue: #3971ff;
|
||||
--tab-violet: #ba76ff;
|
||||
--tab-pink: #e05677;
|
||||
--tab-white: #ffffff;
|
||||
|
||||
--soft-blue: #729fcf;
|
||||
|
||||
// semantic vars based on --soft-blue
|
||||
--line-base-soft-blue-color: #729fcf;
|
||||
--line-meta-user-color: #89afd7;
|
||||
|
||||
--active-menu-color: rgb(0, 71, 171);
|
||||
|
||||
--fixed-font: "Martian Mono", sans-serif;
|
||||
--terminal-font: "JetBrains Mono", sans-serif;
|
||||
|
||||
--text-s1-font: "Martian Mono", sans-serif;
|
||||
|
||||
--markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji";
|
||||
--markdown-highlight: rgb(35, 35, 35);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
.icon {
|
||||
width: 1.3em !important;
|
||||
height: 1.3em !important;
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
}
|
||||
|
||||
.history-checkbox {
|
||||
@@ -51,7 +51,7 @@
|
||||
svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +70,7 @@
|
||||
font-size: 1em;
|
||||
padding: 0.5em 1em;
|
||||
background-color: @background-session-components;
|
||||
color: var(--base-color);
|
||||
color: @base-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
.label {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
color: var(--base-color);
|
||||
color: @base-color;
|
||||
}
|
||||
.icon {
|
||||
vertical-align: middle;
|
||||
@@ -163,7 +163,7 @@
|
||||
|
||||
.reset-button {
|
||||
margin-left: 1em;
|
||||
color: var(--base-color);
|
||||
color: @base-color;
|
||||
line-height: 1.75em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -388,7 +388,7 @@ class LineCmd extends React.Component<
|
||||
let height = 45 + 24; // height of zero height terminal
|
||||
const usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
|
||||
if (usedRows > 0) {
|
||||
height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get(), cmd.getTermMaxRows());
|
||||
height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
|
||||
}
|
||||
return height;
|
||||
}
|
||||
|
||||
+40
-38
@@ -1,3 +1,5 @@
|
||||
@import "@/common/themes/themes.less";
|
||||
|
||||
.line.line-text {
|
||||
flex-direction: row;
|
||||
padding-top: 5px;
|
||||
@@ -11,7 +13,7 @@
|
||||
}
|
||||
|
||||
.line .load-error-text {
|
||||
color: var(--line-load-error-text-color);
|
||||
color: @term-red;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
@@ -34,7 +36,7 @@
|
||||
}
|
||||
|
||||
.sidebar-message {
|
||||
color: var(--line-sidebar-message-text-color);
|
||||
color: @term-yellow;
|
||||
}
|
||||
|
||||
.line-header {
|
||||
@@ -82,14 +84,11 @@
|
||||
}
|
||||
|
||||
.meta.meta-line1 {
|
||||
color: var(--line-meta-line1-color) !important;
|
||||
margin-left: 2px;
|
||||
color: rgba(@base-color, 0.6) !important;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.meta.meta-line2 {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
&.has-rtnstate .terminal-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
@@ -114,6 +113,11 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.terminal {
|
||||
margin-right: 8px;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
&.cmd-done .terminal .xterm-cursor {
|
||||
display: none;
|
||||
}
|
||||
@@ -130,7 +134,7 @@
|
||||
position: relative;
|
||||
|
||||
.cmd-rtnstate-label {
|
||||
font-family: var(--terminal-font);
|
||||
font-family: @terminal-font;
|
||||
position: relative;
|
||||
font-size: 10px;
|
||||
z-index: 2;
|
||||
@@ -138,13 +142,13 @@
|
||||
padding: 2px 5px 0px 5px;
|
||||
display: inline-block;
|
||||
font-size: 10px;
|
||||
color: var(--line-base-white-color);
|
||||
color: @term-white;
|
||||
background-color: #151715;
|
||||
}
|
||||
|
||||
.cmd-rtnstate-diff {
|
||||
font-family: var(--terminal-font);
|
||||
color: var(--line-base-white-color);
|
||||
font-family: @terminal-font;
|
||||
color: @term-white;
|
||||
white-space: pre;
|
||||
margin-left: 10px;
|
||||
padding-left: 10px;
|
||||
@@ -179,16 +183,16 @@
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
background: var(--line-background);
|
||||
background: @base-background;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&.selected {
|
||||
border: 1px solid var(--line-selected-border-color) !important;
|
||||
border: 1px solid rgba(@base-color, 0.8) !important;
|
||||
box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border: 1px solid var(--line-active-border-color) !important;
|
||||
border: 1px solid rgba(@wave-green, 0.8) !important;
|
||||
box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
|
||||
}
|
||||
|
||||
@@ -200,7 +204,7 @@
|
||||
&.line-simple {
|
||||
font-size: 11px;
|
||||
line-height: 1.2;
|
||||
color: var(--line-text-color);
|
||||
color: rgba(@base-color, 0.6);
|
||||
|
||||
.simple-line-header {
|
||||
display: flex;
|
||||
@@ -230,19 +234,19 @@
|
||||
height: 1em;
|
||||
margin: 0 0.5em;
|
||||
vertical-align: text-top;
|
||||
fill: var(--line-avatar-color);
|
||||
fill: @base-color;
|
||||
}
|
||||
|
||||
.success {
|
||||
fill: var(--line-status-success-fill);
|
||||
fill: @wave-green;
|
||||
}
|
||||
|
||||
.fail {
|
||||
fill: var(--line-status-error-fill);
|
||||
fill: @error-red;
|
||||
}
|
||||
|
||||
.warning {
|
||||
fill: var(--line-status-warning-fill);
|
||||
fill: @warning-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -273,8 +277,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
// color: @term-white;
|
||||
color: var(--line-avatar-color);
|
||||
color: @term-white;
|
||||
|
||||
border-radius: 5px;
|
||||
position: relative;
|
||||
@@ -306,30 +309,30 @@
|
||||
|
||||
&.status-error {
|
||||
.status-icon {
|
||||
color: var(--line-base-error-color);
|
||||
color: @error-red;
|
||||
}
|
||||
}
|
||||
|
||||
&.status-hangup {
|
||||
.status-icon {
|
||||
color: var(--line-base-yellow-color);
|
||||
color: @term-yellow;
|
||||
}
|
||||
}
|
||||
|
||||
&.status-running {
|
||||
background-color: var(--line-base-soft-blue-color);
|
||||
background-color: @soft-blue;
|
||||
}
|
||||
|
||||
&.status-waiting {
|
||||
background-color: var(--line-base-yellow-color);
|
||||
background-color: @term-yellow;
|
||||
}
|
||||
|
||||
&.status-detached {
|
||||
background-color: var(--line-base-soft-blue-color);
|
||||
background-color: @soft-blue;
|
||||
.status-icon {
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
color: var(--line-base-soft-blue-color);
|
||||
color: @term-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -352,7 +355,7 @@
|
||||
}
|
||||
|
||||
.user {
|
||||
color: var(--line-meta-user-color);
|
||||
color: lighten(@soft-blue, 10%);
|
||||
font-weight: bold;
|
||||
margin-top: 1px;
|
||||
margin-right: 10px;
|
||||
@@ -371,7 +374,7 @@
|
||||
svg {
|
||||
width: 1em;
|
||||
margin-right: 0.5em;
|
||||
fill: var(--line-meta-line1-color);
|
||||
fill: rgba(@base-color, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -385,9 +388,9 @@
|
||||
border-radius: 50%;
|
||||
line-height: 1em;
|
||||
svg {
|
||||
fill: var(--line-meta-line1-color);
|
||||
fill: rgba(@base-color, 0.6);
|
||||
&:hover {
|
||||
fill: var(--line-svg-hover-fill);
|
||||
fill: @base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -416,7 +419,7 @@
|
||||
.cmdtext-overflow {
|
||||
flex-shrink: 0;
|
||||
padding-right: 2px;
|
||||
color: var(--line-base-white-color);
|
||||
color: @term-white;
|
||||
cursor: pointer;
|
||||
|
||||
margin-top: 4px;
|
||||
@@ -434,7 +437,7 @@
|
||||
.cmdtext-expanded {
|
||||
white-space: pre;
|
||||
|
||||
color: var(--line-base-white-color);
|
||||
color: @term-white;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
}
|
||||
@@ -452,7 +455,7 @@
|
||||
}
|
||||
|
||||
.line.line-invalid {
|
||||
color: var(--line-base-white-color);
|
||||
color: @term-white;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
@@ -463,7 +466,6 @@
|
||||
padding: 0 0 10px 0;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent !important;
|
||||
@@ -476,7 +478,7 @@
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb-background) !important;
|
||||
background-color: @scrollbar-thumb !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -492,7 +494,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1em;
|
||||
color: var(--line-separator-color);
|
||||
color: rgba(@base-color, 0.5);
|
||||
}
|
||||
|
||||
.line-sep::before,
|
||||
@@ -500,7 +502,7 @@
|
||||
content: "";
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
background-color: var(--line-separator-color);
|
||||
background-color: rgba(@base-color, 0.5);
|
||||
}
|
||||
|
||||
.line-sep::before {
|
||||
|
||||
@@ -18,6 +18,8 @@ let MagicLayout = {
|
||||
ScreenMinContentSize: 100,
|
||||
ScreenMaxContentSize: 5000,
|
||||
|
||||
// the 3 is for descenders, which get cut off in the terminal without this
|
||||
TermDescendersHeight: 3,
|
||||
TermWidthBuffer: 15,
|
||||
|
||||
TabWidth: 154,
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -119,6 +119,7 @@
|
||||
}
|
||||
|
||||
.middle {
|
||||
max-height: calc(100vh - 32em);
|
||||
padding: 4px 6px 8px 6px;
|
||||
border-bottom: 1px solid @base-border;
|
||||
.item {
|
||||
@@ -141,10 +142,9 @@
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
bottom: 2em;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding-top: 0.8rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
@@ -221,7 +221,7 @@
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
color: var(--base-color);
|
||||
color: @base-color;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
|
||||
@@ -64,7 +64,7 @@ interface MainSideBarProps {
|
||||
|
||||
@mobxReact.observer
|
||||
class MainSideBar extends React.Component<MainSideBarProps, {}> {
|
||||
middleHeightSubtractor = mobx.observable.box(404);
|
||||
sidebarRef = React.createRef<HTMLDivElement>();
|
||||
|
||||
handleSessionClick(sessionId: string) {
|
||||
GlobalCommandRunner.switchSession(sessionId);
|
||||
@@ -203,37 +203,14 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate the subtractor portion for the middle div's height calculation, which should be `100vh - subtractor`.
|
||||
*/
|
||||
setMiddleHeightSubtractor() {
|
||||
const windowHeight = window.innerHeight;
|
||||
const bottomHeight = windowHeight - window.document.getElementById("sidebar-bottom")?.offsetTop;
|
||||
const middleTop = document.getElementById("sidebar-middle")?.offsetTop;
|
||||
const newMiddleHeightSubtractor = bottomHeight + middleTop;
|
||||
if (!Number.isNaN(newMiddleHeightSubtractor)) {
|
||||
mobx.action(() => {
|
||||
this.middleHeightSubtractor.set(newMiddleHeightSubtractor);
|
||||
})();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.setMiddleHeightSubtractor();
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
this.setMiddleHeightSubtractor();
|
||||
}
|
||||
|
||||
render() {
|
||||
const clientData = this.props.clientData;
|
||||
let clientData = this.props.clientData;
|
||||
let needsUpdate = false;
|
||||
if (!clientData?.clientopts.noreleasecheck && !isBlank(clientData?.releaseinfo?.latestversion)) {
|
||||
needsUpdate = compareLoose(appconst.VERSION, clientData.releaseinfo.latestversion) < 0;
|
||||
}
|
||||
const mainSidebar = GlobalModel.mainSidebarModel;
|
||||
const isCollapsed = mainSidebar.getCollapsed();
|
||||
let mainSidebar = GlobalModel.mainSidebarModel;
|
||||
let isCollapsed = mainSidebar.getCollapsed();
|
||||
return (
|
||||
<ResizableSidebar
|
||||
className="main-sidebar"
|
||||
@@ -294,16 +271,8 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
|
||||
</CenteredIcon>,
|
||||
]}
|
||||
/>
|
||||
<div
|
||||
className="middle hideScrollbarUntillHover"
|
||||
id="sidebar-middle"
|
||||
style={{
|
||||
maxHeight: `calc(100vh - ${this.middleHeightSubtractor.get()}px)`,
|
||||
}}
|
||||
>
|
||||
{this.getSessions()}
|
||||
</div>
|
||||
<div className="bottom" id="sidebar-bottom">
|
||||
<div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>
|
||||
<div className="bottom">
|
||||
<If condition={needsUpdate}>
|
||||
<SideBarItem
|
||||
key="update-available"
|
||||
|
||||
@@ -91,7 +91,7 @@
|
||||
height: 1em;
|
||||
margin: 0 0.5em;
|
||||
vertical-align: text-top;
|
||||
fill: var(--base-color);
|
||||
fill: @base-color;
|
||||
}
|
||||
|
||||
.warning {
|
||||
|
||||
@@ -109,7 +109,6 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
|
||||
return <div className="screen-view" ref={this.screenViewRef}></div>;
|
||||
}
|
||||
let fontSize = GlobalModel.termFontSize.get();
|
||||
let dprStr = sprintf("%0.3f", GlobalModel.devicePixelRatio.get());
|
||||
let viewOpts = screen.viewOpts.get();
|
||||
let hasSidebar = viewOpts?.sidebar?.open;
|
||||
let winWidth = "100%";
|
||||
@@ -146,7 +145,7 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
|
||||
return (
|
||||
<div className="screen-view" data-screenid={screen.screenId} ref={this.screenViewRef}>
|
||||
<ScreenWindowView
|
||||
key={screen.screenId + ":" + fontSize + ":" + dprStr}
|
||||
key={screen.screenId + ":" + fontSize}
|
||||
session={session}
|
||||
screen={screen}
|
||||
width={winWidth}
|
||||
|
||||
+3
-39
@@ -177,7 +177,6 @@ function readAuthKey() {
|
||||
return authKeyStr.trim();
|
||||
}
|
||||
const reloadAcceleratorKey = unamePlatform == "darwin" ? "Option+R" : "Super+R";
|
||||
let cmdOrAlt = process.platform === "darwin" ? "Cmd" : "Alt";
|
||||
let menuTemplate: Electron.MenuItemConstructorOptions[] = [
|
||||
{
|
||||
role: "appMenu",
|
||||
@@ -206,41 +205,9 @@ let menuTemplate: Electron.MenuItemConstructorOptions[] = [
|
||||
{ role: "reload", accelerator: reloadAcceleratorKey },
|
||||
{ role: "toggleDevTools" },
|
||||
{ type: "separator" },
|
||||
{
|
||||
label: "Actual Size",
|
||||
accelerator: cmdOrAlt + "+0",
|
||||
click: () => {
|
||||
if (MainWindow == null) {
|
||||
return;
|
||||
}
|
||||
MainWindow.webContents.setZoomFactor(1);
|
||||
MainWindow.webContents.send("zoom-changed");
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Zoom In",
|
||||
accelerator: cmdOrAlt + "+Plus",
|
||||
click: () => {
|
||||
if (MainWindow == null) {
|
||||
return;
|
||||
}
|
||||
const zoomFactor = MainWindow.webContents.getZoomFactor();
|
||||
MainWindow.webContents.setZoomFactor(zoomFactor * 1.1);
|
||||
MainWindow.webContents.send("zoom-changed");
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Zoom Out",
|
||||
accelerator: cmdOrAlt + "+-",
|
||||
click: () => {
|
||||
if (MainWindow == null) {
|
||||
return;
|
||||
}
|
||||
const zoomFactor = MainWindow.webContents.getZoomFactor();
|
||||
MainWindow.webContents.setZoomFactor(zoomFactor / 1.1);
|
||||
MainWindow.webContents.send("zoom-changed");
|
||||
},
|
||||
},
|
||||
{ role: "resetZoom" },
|
||||
{ role: "zoomIn" },
|
||||
{ role: "zoomOut" },
|
||||
{ type: "separator" },
|
||||
{ role: "togglefullscreen" },
|
||||
],
|
||||
@@ -408,9 +375,6 @@ function createMainWindow(clientData: ClientDataType | null) {
|
||||
win.on("close", () => {
|
||||
MainWindow = null;
|
||||
});
|
||||
win.webContents.on("zoom-changed", (e) => {
|
||||
win.webContents.send("zoom-changed");
|
||||
});
|
||||
win.webContents.setWindowOpenHandler(({ url, frameName }) => {
|
||||
if (url.startsWith("https://docs.waveterm.dev/")) {
|
||||
console.log("openExternal docs", url);
|
||||
|
||||
@@ -21,7 +21,6 @@ contextBridge.exposeInMainWorld("api", {
|
||||
onWCmd: (callback) => ipcRenderer.on("w-cmd", callback),
|
||||
onPCmd: (callback) => ipcRenderer.on("p-cmd", callback),
|
||||
onRCmd: (callback) => ipcRenderer.on("r-cmd", callback),
|
||||
onZoomChanged: (callback) => ipcRenderer.on("zoom-changed", callback),
|
||||
onMetaArrowUp: (callback) => ipcRenderer.on("meta-arrowup", callback),
|
||||
onMetaArrowDown: (callback) => ipcRenderer.on("meta-arrowdown", callback),
|
||||
onMetaPageUp: (callback) => ipcRenderer.on("meta-pageup", callback),
|
||||
|
||||
+7
-4
@@ -8,7 +8,6 @@ import { sprintf } from "sprintf-js";
|
||||
import { App } from "@/app/app";
|
||||
import * as DOMPurify from "dompurify";
|
||||
import { loadFonts } from "./util/util";
|
||||
import * as textmeasure from "./util/textmeasure";
|
||||
|
||||
// @ts-ignore
|
||||
let VERSION = __WAVETERM_VERSION__;
|
||||
@@ -21,14 +20,18 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
let reactElem = React.createElement(App, null, null);
|
||||
let elem = document.getElementById("app");
|
||||
let root = createRoot(elem);
|
||||
document.fonts.ready.then(() => {
|
||||
let isFontLoaded = document.fonts.check("12px 'JetBrains Mono'");
|
||||
if (isFontLoaded) {
|
||||
root.render(reactElem);
|
||||
});
|
||||
} else {
|
||||
document.fonts.ready.then(() => {
|
||||
root.render(reactElem);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
(window as any).mobx = mobx;
|
||||
(window as any).sprintf = sprintf;
|
||||
(window as any).DOMPurify = DOMPurify;
|
||||
(window as any).textmeasure = textmeasure;
|
||||
|
||||
console.log("WaveTerm", VERSION, BUILD);
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user