fix tab color in settings

This commit is contained in:
sawka
2023-10-05 13:27:29 -07:00
parent c7676bb22e
commit 71151f7073
2 changed files with 34 additions and 25 deletions
+30 -18
View File
@@ -278,32 +278,35 @@
.control {
}
.tab-color-icon.color-green {
color: desaturate(@tab-green, 30%);
.tab-color-icon.color-default path {
fill: @tab-green;
}
.tab-color-icon.color-orange {
color: desaturate(@tab-orange, 30%);
.tab-color-icon.color-green path {
fill: @tab-green;
}
.tab-color-icon.color-red {
color: desaturate(@tab-red, 20%);
.tab-color-icon.color-orange path {
fill: @tab-orange;
}
.tab-color-icon.color-yellow {
color: desaturate(@tab-yellow, 30%);
.tab-color-icon.color-red path {
fill: @tab-red;
}
.tab-color-icon.color-blue {
color: desaturate(@tab-blue, 20%);
.tab-color-icon.color-yellow path {
fill: @tab-yellow;
}
.tab-color-icon.color-magenta {
color: desaturate(@tab-magenta, 20%);
.tab-color-icon.color-blue path {
fill: @tab-blue;
}
.tab-color-icon.color-cyan {
color: desaturate(@tab-cyan, 20%);
.tab-color-icon.color-magenta path {
fill: @tab-magenta;
}
.tab-color-icon.color-white {
color: @term-white;
.tab-color-icon.color-cyan path {
fill: @tab-cyan;
}
.tab-color-icon.color-black {
color: lighten(@tab-black, 20%);
.tab-color-icon.color-white path {
fill: @tab-white;
}
.tab-color-icon.color-black path {
fill: @tab-black
}
.tab-colors {
@@ -321,6 +324,15 @@
width: 100px;
}
.tab-color-icon {
width: 1.1em;
vertical-align: middle;
}
.tab-color-name {
margin-left: 1em;
}
.tab-color-select {
cursor: pointer;
margin: 5px;
+4 -7
View File
@@ -9,6 +9,7 @@ import { Toggle, InlineSettingsTextEdit, SettingsError, InfoMessage } from "../c
import { LineType, RendererPluginType, ClientDataType, CommandRtnType } from "../../../types/types";
import { PluginModel } from "../../../plugins/plugins";
import * as util from "../../../util/util";
import { ReactComponent as SquareIcon } from "../../assets/icons/tab/square.svg";
import "./modals.less";
@@ -240,10 +241,8 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
<div className="settings-input">
<div className="tab-colors">
<div className="tab-color-cur">
<span className={cn("icon tab-color-icon", "color-" + screen.getTabColor())}>
<i className="fa-sharp fa-solid fa-square" />
</span>
<span>{screen.getTabColor()}</span>
<SquareIcon className={cn("tab-color-icon", "color-" + screen.getTabColor())}/>
<span className="tab-color-name">{screen.getTabColor()}</span>
</div>
<div className="tab-color-sep">|</div>
<For each="color" of={TabColors}>
@@ -252,9 +251,7 @@ class ScreenSettingsModal extends React.Component<{ sessionId: string; screenId:
className="tab-color-select"
onClick={() => this.selectTabColor(color)}
>
<span className={cn("tab-color-icon", "color-" + color)}>
<i className="fa-sharp fa-solid fa-square" />
</span>
<SquareIcon className={cn("tab-color-icon", "color-" + color)}/>
</div>
</For>
</div>