mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-02 18:39:05 +01:00
new tab colors. also re-implement tab gradients according to figma file
This commit is contained in:
sawka
parent
df073724e0
commit
a7c2d440b2
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -29,12 +29,6 @@ type OV<V> = mobx.IObservableValue<V>;
|
||||
class CmdInput extends React.Component<{}, {}> {
|
||||
cmdInputRef: React.RefObject<any> = 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}
|
||||
>
|
||||
<div key="minmax" onClick={this.onInfoToggle} className="input-minmax-control">
|
||||
<If condition={infoShow || historyShow}>
|
||||
<i className="fa-sharp fa-solid fa-chevron-down" />
|
||||
</If>
|
||||
<If condition={!(infoShow || historyShow) && hasInfo}>
|
||||
<i className="fa-sharp fa-solid fa-chevron-up" />
|
||||
</If>
|
||||
</div>
|
||||
<If condition={historyShow}>
|
||||
<div className="cmd-input-grow-spacer"></div>
|
||||
<HistoryInfo />
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -173,16 +173,19 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
|
||||
return (
|
||||
<div className="newtab-container">
|
||||
<div className="newtab-section conn-section">
|
||||
<div className="text-s1">
|
||||
<div className="text-s1 unselectable">
|
||||
You're connected to [{getRemoteStr(rptr)}]. Do you want to change it?
|
||||
</div>
|
||||
<div>
|
||||
{this.renderConnDropdown()}
|
||||
</div>
|
||||
<div className="text-caption cr-help-text">
|
||||
To change connection from the command line use `cr [alias|user@host]`
|
||||
</div>
|
||||
</div>
|
||||
<div className="newtab-spacer"/>
|
||||
<div className="newtab-section settings-field">
|
||||
<div className="text-s1">
|
||||
<div className="text-s1 unselectable">
|
||||
Name
|
||||
</div>
|
||||
<div className="settings-input">
|
||||
@ -198,7 +201,7 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
|
||||
</div>
|
||||
<div className="newtab-spacer"/>
|
||||
<div className="newtab-section">
|
||||
<div className="text-s1">
|
||||
<div className="text-s1 unselectable">
|
||||
Select the color
|
||||
</div>
|
||||
<div className="control-iconlist">
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 }, {}> {
|
||||
<i title="shared to web" className="fa-sharp fa-solid fa-share-nodes web-share-icon" />
|
||||
) : 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 (
|
||||
<div
|
||||
key={screen.screenId}
|
||||
@ -138,7 +129,6 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
|
||||
{ "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)}
|
||||
>
|
||||
|
||||
@ -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__;
|
||||
|
||||
@ -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<CommandRtnType>, errorMessage: OV<string>) {
|
||||
prtn.then((crtn) => {
|
||||
if (crtn.success) {
|
||||
@ -435,7 +422,6 @@ export {
|
||||
isBoolEq,
|
||||
hasNoModifiers,
|
||||
openLink,
|
||||
generateBackgroundWithGradient,
|
||||
getColorRGB,
|
||||
commandRtnHandler,
|
||||
};
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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"}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user