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"; @import "../../../index.less";
#main .screen-tabs .screen-tab { #main .screen-tabs .screen-tab {
&.color-default { &.is-active {
color: @tab-white-text; color: @tab-white-text;
&.is-active { border-radius: 12px 0px 0px 0px;
color: @tab-white-text; border-top: 1px solid #58c142;
border-radius: 12px 0px 0px 0px; background: linear-gradient(
border-top: 1px solid #58c142; 180deg,
background: linear-gradient( rgba(88, 193, 66, 0.2) 9.34%,
180deg, rgba(88, 193, 66, 0.03) 44.16%,
rgba(88, 193, 66, 0.2) 9.34%, rgba(88, 193, 66, 0) 86.79%
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-green {
color: @tab-white-text; svg.left-icon path {
background-color: desaturate(@tab-green, 50%); fill: @tab-green;
&:hover {
background-color: @tab-green;
}
&.is-active {
color: @term-white;
background-color: @tab-green;
} }
} }
&.color-orange { &.color-orange {
color: @tab-black-text; svg.left-icon path {
background-color: desaturate(@tab-orange, 30%); fill: @tab-orange;
&:hover {
background-color: @tab-orange;
}
&.is-active {
color: @term-black;
background-color: @tab-orange;
} }
} }
&.color-red { &.color-red {
color: @tab-white-text; svg.left-icon path {
background-color: desaturate(@tab-red, 40%); fill: @tab-red;
&:hover {
background-color: @tab-red;
}
&.is-active {
color: @term-white;
background-color: @tab-red;
} }
} }
&.color-yellow { &.color-yellow {
color: @tab-black-text; svg.left-icon path {
background-color: desaturate(@tab-yellow, 40%); fill: @tab-yellow;
&:hover {
background-color: @tab-yellow;
}
&.is-active {
background-color: @tab-yellow;
color: @term-black;
} }
} }
&.color-blue { &.color-blue {
color: @tab-white-text; svg.left-icon path {
background-color: desaturate(@tab-blue, 50%); fill: @tab-blue;
&:hover {
background-color: @tab-blue;
}
&.is-active {
color: @term-white;
background-color: @tab-blue;
} }
} }
&.color-magenta { &.color-magenta {
color: @tab-white-text; svg.left-icon path {
background-color: desaturate(@tab-magenta, 20%); fill: @tab-magenta;
&:hover {
background-color: @tab-magenta;
}
&.is-active {
color: @term-white;
background-color: @tab-magenta;
} }
} }
&.color-cyan { &.color-cyan {
color: @tab-black-text; svg.left-icon path {
background-color: desaturate(@tab-cyan, 20%); fill: @tab-cyan;
&:hover {
background-color: @tab-cyan;
}
&.is-active {
color: @term-black;
background-color: @tab-cyan;
} }
} }
&.color-white { &.color-white {
color: @tab-black-text; svg.left-icon path {
background-color: @term-white; fill: @tab-white;
&:hover {
background-color: @tab-white;
}
&.is-active {
color: @term-black;
background-color: @tab-white;
} }
} }
&.color-black { &.color-black {
color: @tab-white-text; svg.left-icon path {
background-color: lighten(@tab-black, 20%); fill: @tab-black;
&:hover {
background-color: @tab-black;
}
&.is-active {
color: @term-white;
background-color: @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 localizedFormat from "dayjs/plugin/localizedFormat";
import { GlobalModel, GlobalCommandRunner, Session, ScreenLines, Screen } from "../../../model/model"; import { GlobalModel, GlobalCommandRunner, Session, ScreenLines, Screen } from "../../../model/model";
import { renderCmdText } from "../../common/common"; 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 SparkleIcon } from "../../assets/icons/tab/sparkle.svg";
import { ReactComponent as ActionsIcon } from "../../assets/icons/tab/actions.svg"; import { ReactComponent as ActionsIcon } from "../../assets/icons/tab/actions.svg";
import { ReactComponent as AddIcon } from "../../assets/icons/add.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)} onClick={() => this.handleSwitchScreen(screen.screenId)}
onContextMenu={(event) => this.openScreenSettings(event, screen)} onContextMenu={(event) => this.openScreenSettings(event, screen)}
> >
<SparkleIcon className="icon" /> <SquareIcon className="icon left-icon"/>
<div className="tab-name truncate"> <div className="tab-name truncate">
{archived} {archived}
{webShared} {webShared}

2
src/index.less
View File

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