Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2024-12-22 16:48:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

make progress on tab colors

Browse Source
This commit is contained in:
sawka 2023-10-05 13:05:40 -07:00
parent 4708b4379a
commit c7676bb22e
4 changed files with 36 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/assets/icons/tab/square.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 353 B

115
src/app/workspace/screen/tabs.less
View File

@ -1,126 +1,75 @@
@import "../../../index.less";
#main .screen-tabs .screen-tab {
&.color-default {
&.is-active {
color: @tab-white-text;
&.is-active {
color: @tab-white-text;
border-radius: 12px 0px 0px 0px;
border-top: 1px solid #58c142;
background: linear-gradient(
180deg,
rgba(88, 193, 66, 0.2) 9.34%,
rgba(88, 193, 66, 0.03) 44.16%,
rgba(88, 193, 66, 0) 86.79%
);
border-radius: 12px 0px 0px 0px;
border-top: 1px solid #58c142;
background: linear-gradient(
180deg,
rgba(88, 193, 66, 0.2) 9.34%,
rgba(88, 193, 66, 0.03) 44.16%,
rgba(88, 193, 66, 0) 86.79%
);
}
&.color-default {
svg.left-icon path {
fill: @tab-green;
}
}
&.color-green {
color: @tab-white-text;
background-color: desaturate(@tab-green, 50%);
&:hover {
background-color: @tab-green;
}
&.is-active {
color: @term-white;
background-color: @tab-green;
svg.left-icon path {
fill: @tab-green;
}
}
&.color-orange {
color: @tab-black-text;
background-color: desaturate(@tab-orange, 30%);
&:hover {
background-color: @tab-orange;
}
&.is-active {
color: @term-black;
background-color: @tab-orange;
svg.left-icon path {
fill: @tab-orange;
}
}
&.color-red {
color: @tab-white-text;
background-color: desaturate(@tab-red, 40%);
&:hover {
background-color: @tab-red;
}
&.is-active {
color: @term-white;
background-color: @tab-red;
svg.left-icon path {
fill: @tab-red;
}
}
&.color-yellow {
color: @tab-black-text;
background-color: desaturate(@tab-yellow, 40%);
&:hover {
background-color: @tab-yellow;
}
&.is-active {
background-color: @tab-yellow;
color: @term-black;
svg.left-icon path {
fill: @tab-yellow;
}
}
&.color-blue {
color: @tab-white-text;
background-color: desaturate(@tab-blue, 50%);
&:hover {
background-color: @tab-blue;
}
&.is-active {
color: @term-white;
background-color: @tab-blue;
svg.left-icon path {
fill: @tab-blue;
}
}
&.color-magenta {
color: @tab-white-text;
background-color: desaturate(@tab-magenta, 20%);
&:hover {
background-color: @tab-magenta;
}
&.is-active {
color: @term-white;
background-color: @tab-magenta;
svg.left-icon path {
fill: @tab-magenta;
}
}
&.color-cyan {
color: @tab-black-text;
background-color: desaturate(@tab-cyan, 20%);
&:hover {
background-color: @tab-cyan;
}
&.is-active {
color: @term-black;
background-color: @tab-cyan;
svg.left-icon path {
fill: @tab-cyan;
}
}
&.color-white {
color: @tab-black-text;
background-color: @term-white;
&:hover {
background-color: @tab-white;
}
&.is-active {
color: @term-black;
background-color: @tab-white;
svg.left-icon path {
fill: @tab-white;
}
}
&.color-black {
color: @tab-white-text;
background-color: lighten(@tab-black, 20%);
&:hover {
background-color: @tab-black;
}
&.is-active {
color: @term-white;
background-color: @tab-black;
svg.left-icon path {
fill: @tab-black;
}
}

3
src/app/workspace/screen/tabs.tsx
View File

@ -10,6 +10,7 @@ import dayjs from "dayjs";
import localizedFormat from "dayjs/plugin/localizedFormat";
import { GlobalModel, GlobalCommandRunner, Session, ScreenLines, Screen } from "../../../model/model";
import { renderCmdText } from "../../common/common";
import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
import { ReactComponent as SparkleIcon } from "../../assets/icons/tab/sparkle.svg";
import { ReactComponent as ActionsIcon } from "../../assets/icons/tab/actions.svg";
import { ReactComponent as AddIcon } from "../../assets/icons/add.svg";
@ -128,7 +129,7 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
onClick={() => this.handleSwitchScreen(screen.screenId)}
onContextMenu={(event) => this.openScreenSettings(event, screen)}
>
<SparkleIcon className="icon" />
<SquareIcon className="icon left-icon"/>
<div className="tab-name truncate">
{archived}
{webShared}

2
src/index.less
View File

@ -25,7 +25,7 @@
@term-bright-cyan: #34e2e2;
@term-bright-white: #ffffff;
@tab-black: rgb(0, 0, 0);
@tab-black: rgb(50, 50, 50);
@tab-red: rgb(205, 49, 49);
@tab-green: rgb(0, 128, 0);
@tab-orange: rgb(255, 199, 6);