diff --git a/src/app/app.less b/src/app/app.less index 3eb0639a..b45c5ced 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -84,6 +84,10 @@ body code { font-family: @terminal-font; } +body code { + background-color: transparent; +} + svg.icon { fill: @base-color; width: 100%; @@ -491,9 +495,9 @@ a.a-block { } } -.icon.color-magenta { +.icon.color-mint { path, circle { - fill: @tab-magenta; + fill: @tab-mint; } } diff --git a/src/app/common/modals/modals.less b/src/app/common/modals/modals.less index 57fe495d..e477307f 100644 --- a/src/app/common/modals/modals.less +++ b/src/app/common/modals/modals.less @@ -624,8 +624,8 @@ section { .tab-color-icon.color-blue path { fill: @tab-blue; } - .tab-color-icon.color-magenta path { - fill: @tab-magenta; + .tab-color-icon.color-mint path { + fill: @tab-mint; } .tab-color-icon.color-cyan path { fill: @tab-cyan; diff --git a/src/app/common/themes/themes.less b/src/app/common/themes/themes.less index c1a97aa3..606bdd04 100644 --- a/src/app/common/themes/themes.less +++ b/src/app/common/themes/themes.less @@ -48,14 +48,14 @@ @term-bright-white: #ffffff; @tab-red: #e54d2e; -@tab-green: #58c142; @tab-orange: #ef713b; -@tab-violet: #8b46d0; -@tab-cyan: #3abab6; -@tab-magenta: #fc3651; -@tab-pink: #e05677; -@tab-blue: #5460cf; @tab-yellow: #e0b956; +@tab-green: #58c142; +@tab-mint: #4BFFA9; +@tab-cyan: #4BDFFF; +@tab-blue: #3971FF; +@tab-violet: #BA76FF; +@tab-pink: #E05677; @tab-white: #ffffff; @tab-black-text: #333; diff --git a/src/app/workspace/cmdinput/cmdinput.tsx b/src/app/workspace/cmdinput/cmdinput.tsx index 9149e74d..10b4c1ff 100644 --- a/src/app/workspace/cmdinput/cmdinput.tsx +++ b/src/app/workspace/cmdinput/cmdinput.tsx @@ -29,12 +29,6 @@ type OV = mobx.IObservableValue; class CmdInput extends React.Component<{}, {}> { cmdInputRef: React.RefObject = React.createRef(); - @boundMethod - onInfoToggle(): void { - GlobalModel.inputModel.toggleInfoMsg(); - return; - } - componentDidMount() { this.updateCmdInputHeight(); } @@ -119,14 +113,6 @@ class CmdInput extends React.Component<{}, {}> { className={cn("cmd-input", { "has-info": infoShow }, { active: focusVal })} onClick={this.cmdInputClick} > -
- - - - - - -
diff --git a/src/app/workspace/screen/screenview.less b/src/app/workspace/screen/screenview.less index 43f4775d..66640018 100644 --- a/src/app/workspace/screen/screenview.less +++ b/src/app/workspace/screen/screenview.less @@ -130,6 +130,11 @@ } } + .cr-help-text { + color: @text-caption; + margin-left: 5px; + } + .newtab-spacer { height: 1px; background: rgba(241, 246, 243, 0.15); @@ -139,25 +144,29 @@ display: flex; padding: 8px 0; align-items: flex-start; - gap: 27px; + gap: 12px; .icondiv { - width: 16px; - height: 16px; + width: 20px; + height: 20px; cursor: pointer; position: relative; .icon { - width: 16px; - height: 16px; + width: 20px; + height: 20px; } .check-icon { width: 12px; height: 12px; position: absolute; - top: 2px; - left: 2px; + top: 4px; + left: 4px; + + path { + fill: black; + } } .icon.color-white + .check-icon { diff --git a/src/app/workspace/screen/screenview.tsx b/src/app/workspace/screen/screenview.tsx index eaf3f589..0c745dcf 100644 --- a/src/app/workspace/screen/screenview.tsx +++ b/src/app/workspace/screen/screenview.tsx @@ -173,16 +173,19 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> { return (
-
+
You're connected to [{getRemoteStr(rptr)}]. Do you want to change it?
{this.renderConnDropdown()}
+
+ To change connection from the command line use `cr [alias|user@host]` +
-
+
Name
@@ -198,7 +201,7 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
-
+
Select the color
diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less index eff5ae53..6aae3459 100644 --- a/src/app/workspace/screen/tabs.less +++ b/src/app/workspace/screen/tabs.less @@ -8,15 +8,14 @@ border-radius: 12px 0px 0px 0px; } - &.color-default { + &.color-green, &.color-default { svg.left-icon path { fill: @tab-green; } - } - &.color-green { - svg.left-icon path { - fill: @tab-green; + &.is-active { + border-top: 1px solid @tab-green; + background: linear-gradient(180deg, rgba(88, 193, 66, 0.20) 9.34%, rgba(88, 193, 66, 0.03) 44.16%, rgba(88, 193, 66, 0.00) 86.79%); } } @@ -24,29 +23,54 @@ svg.left-icon path { fill: @tab-orange; } + + &.is-active { + border-top: 1px solid @tab-orange; + background: linear-gradient(180deg, rgba(239, 113, 59, 0.20) 9.34%, rgba(239, 113, 59, 0.03) 44.16%, rgba(239, 113, 59, 0.00) 86.79%); + } } &.color-red { svg.left-icon path { fill: @tab-red; } + + &.is-active { + border-top: 1px solid @tab-red; + background: linear-gradient(180deg, rgba(229, 77, 46, 0.20) 9.34%, rgba(229, 77, 46, 0.03) 44.16%, rgba(229, 77, 46, 0.00) 86.79%); + } } &.color-yellow { svg.left-icon path { fill: @tab-yellow; } + + &.is-active { + border-top: 1px solid @tab-yellow; + background: linear-gradient(180deg, rgba(224, 185, 86, 0.20) 9.34%, rgba(224, 185, 86, 0.03) 44.16%, rgba(224, 185, 86, 0.00) 86.79%); + } } &.color-blue { svg.left-icon path { fill: @tab-blue; } + + &.is-active { + border-top: 1px solid @tab-blue; + background: linear-gradient(180deg, rgba(57, 113, 255, 0.20) 9.34%, rgba(57, 113, 255, 0.03) 44.16%, rgba(57, 113, 255, 0.00) 77.18%); + } } - &.color-magenta { + &.color-mint { svg.left-icon path { - fill: @tab-magenta; + fill: @tab-mint; + } + + &.is-active { + border-top: 1px solid @tab-mint; + background: linear-gradient(180deg, rgba(75, 255, 169, 0.20) 9.34%, rgba(75, 255, 169, 0.03) 44.16%, rgba(75, 255, 169, 0.00) 77.18%); } } @@ -54,24 +78,44 @@ svg.left-icon path { fill: @tab-cyan; } + + &.is-active { + border-top: 1px solid @tab-cyan; + background: linear-gradient(180deg, rgba(75, 223, 255, 0.20) 9.34%, rgba(75, 223, 255, 0.03) 44.16%, rgba(58, 186, 214, 0.00) 86.79%); + } } &.color-white { svg.left-icon path { fill: @tab-white; } + + &.is-active { + border-top: 1px solid @tab-white; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 9.34%, rgba(255, 255, 255, 0.03) 44.16%, rgba(255, 255, 255, 0.00) 86.79%); + } } &.color-violet { svg.left-icon path { fill: @tab-violet; } + + &.is-active { + border-top: 1px solid @tab-violet; + background: linear-gradient(180deg, rgba(186, 118, 255, 0.20) 9.34%, rgba(186, 118, 255, 0.03) 44.16%, rgba(186, 118, 255, 0.00) 86.79%); + } } &.color-pink { svg.left-icon path { fill: @tab-pink; } + + &.is-active { + border-top: 1px solid @tab-pink; + background: linear-gradient(180deg, rgba(255, 136, 165, 0.20) 9.34%, rgba(255, 136, 165, 0.03) 44.16%, rgba(255, 136, 165, 0.00) 86.79%); + } } .web-share-icon { diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx index 90f6cac9..564b8c45 100644 --- a/src/app/workspace/screen/tabs.tsx +++ b/src/app/workspace/screen/tabs.tsx @@ -11,7 +11,6 @@ import cn from "classnames"; import { debounce } from "throttle-debounce"; import dayjs from "dayjs"; import localizedFormat from "dayjs/plugin/localizedFormat"; -import { generateBackgroundWithGradient } from "../../../util/util"; import { GlobalModel, GlobalCommandRunner, Session, ScreenLines, Screen } from "../../../model/model"; import { renderCmdText } from "../../common/common"; import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg"; @@ -121,14 +120,6 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> { ) : null; - const style = { borderColor: "transparent", background: "none" }; - if (screen.isActive()) { - let tabColor = screen.getTabColor(); - if (tabColor === "default") tabColor = "green"; - style.borderColor = tabColor; - style.background = generateBackgroundWithGradient(tabColor); - } - return (
{ { "is-active": activeScreenId == screen.screenId, "is-archived": screen.archived.get() }, "color-" + screen.getTabColor() )} - style={style} onClick={() => this.handleSwitchScreen(screen.screenId)} onContextMenu={(event) => this.openScreenSettings(event, screen)} > diff --git a/src/model/model.ts b/src/model/model.ts index cef089d2..f7f75bd7 100644 --- a/src/model/model.ts +++ b/src/model/model.ts @@ -94,7 +94,7 @@ const MinFontSize = 8; const MaxFontSize = 15; const InputChunkSize = 500; const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"]; -const TabColors = ["green", "blue", "yellow", "pink", "magenta", "cyan", "violet", "orange", "red", "white"]; +const TabColors = ["red", "orange", "yellow", "green", "mint", "cyan", "blue", "violet", "pink", "white"]; // @ts-ignore const VERSION = __WAVETERM_VERSION__; diff --git a/src/util/util.ts b/src/util/util.ts index bb16be30..ef4104ec 100644 --- a/src/util/util.ts +++ b/src/util/util.ts @@ -390,19 +390,6 @@ function getColorRGB(colorInput) { return computedColorStyle; } -// usgae witing an element : style={background:generateBackgroundWithGradient('red')} -function generateBackgroundWithGradient(colorName = "white", decay = 3) { - const rgb = getColorRGB(colorName); - const rgba = rgb.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/); - const r = rgba[1]; - const g = rgba[2]; - const b = rgba[3]; - const lambda = -Math.log(0.01 * decay) / (0.1 * decay); - const percentages = [9.34, 44.16, 86.79]; - const opacities = percentages.map((p) => Math.exp((-lambda * p) / 100)); - return `linear-gradient(180deg, rgba(${r}, ${g}, ${b}, ${opacities[0]}) ${percentages[0]}%, rgba(${r}, ${g}, ${b}, ${opacities[1]}) ${percentages[1]}%, rgba(${r}, ${g}, ${b}, 0) ${percentages[2]}%)`; -} - function commandRtnHandler(prtn: Promise, errorMessage: OV) { prtn.then((crtn) => { if (crtn.success) { @@ -435,7 +422,6 @@ export { isBoolEq, hasNoModifiers, openLink, - generateBackgroundWithGradient, getColorRGB, commandRtnHandler, }; diff --git a/wavesrv/db/migrations/000024_updatetabcolornames.up.sql b/wavesrv/db/migrations/000024_updatetabcolornames.up.sql index 92563172..dcdb0cec 100644 --- a/wavesrv/db/migrations/000024_updatetabcolornames.up.sql +++ b/wavesrv/db/migrations/000024_updatetabcolornames.up.sql @@ -1,3 +1,3 @@ UPDATE screen SET screenopts = json_set(screenopts, '$.tabcolor', 'default') -WHERE json_extract(screenopts, '$.tabcolor') = 'black'; +WHERE json_extract(screenopts, '$.tabcolor') = 'black' OR json_extract(screenopts, '$.tabcolor') = 'magenta'; diff --git a/wavesrv/pkg/cmdrunner/cmdrunner.go b/wavesrv/pkg/cmdrunner/cmdrunner.go index aed03116..c8e6013b 100644 --- a/wavesrv/pkg/cmdrunner/cmdrunner.go +++ b/wavesrv/pkg/cmdrunner/cmdrunner.go @@ -71,7 +71,7 @@ const ( KwArgLang = "lang" ) -var ColorNames = []string{"yellow", "blue", "pink", "magenta", "cyan", "violet", "orange", "green", "red", "white"} +var ColorNames = []string{"yellow", "blue", "pink", "mint", "cyan", "violet", "orange", "green", "red", "white"} var RemoteColorNames = []string{"red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"} var RemoteSetArgs = []string{"alias", "connectmode", "key", "password", "autoinstall", "color"}