mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-22 16:48:23 +01:00
more fixes
This commit is contained in:
Amarsh Anand
parent
26c5136e43
commit
336ac776d4
@ -102,7 +102,7 @@ svg.icon {
|
||||
}
|
||||
&.disabled {
|
||||
color: fade(@disabled-color, 60%);
|
||||
background: @disabled-background;
|
||||
background: @button-disabled-background;
|
||||
cursor: initial;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
|
||||
1
src/app/assets/icons/line/check.svg
Normal file
1
src/app/assets/icons/line/check.svg
Normal 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="M447.9 142.5l-23.2 22L181 395.3l-22 20.8-22-20.8L23.2 287.6 0 265.6l44-46.5 23.2 22L159 328 380.7 118l23.2-22 44 46.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 366 B |
1
src/app/assets/icons/line/comment.svg
Normal file
1
src/app/assets/icons/line/comment.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 49.6 21.3 95.1 56.9 130.8L16 480l150.4-45.1c27.9 8.5 58.1 13.1 89.6 13.1z"/></svg>
|
||||
|
After Width: | Height: | Size: 387 B |
1
src/app/assets/icons/line/fill.svg
Normal file
1
src/app/assets/icons/line/fill.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M45.3 317.3L0 272l45.3-45.3 76.1-76.1-80-80L18.7 48 64 2.7 86.6 25.4l80 80 60.1-60.1L272 0l45.3 45.3L466.7 194.7 512 240l-45.3 45.3L285.3 466.7 240 512l-45.3-45.3L45.3 317.3zM166.6 195.9L90.5 272l16 16h267l48-48L272 90.5l-60.1 60.1 18.7 18.7L253.3 192 208 237.3l-22.6-22.6-18.7-18.7z"/></svg>
|
||||
|
After Width: | Height: | Size: 531 B |
1
src/app/assets/icons/line/gear.svg
Normal file
1
src/app/assets/icons/line/gear.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M200 0H312l17.2 78.4c15.8 6.5 30.6 15.1 44 25.4l76.5-24.4 56 97-59.4 54.1c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l59.4 54.1-56 97-76.5-24.4c-13.4 10.3-28.2 18.9-44 25.4L312 512H200l-17.2-78.4c-15.8-6.5-30.6-15.1-44-25.4L62.3 432.5l-56-97 59.4-54.1C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L6.3 176.5l56-97 76.5 24.4c13.4-10.3 28.2-18.9 44-25.4L200 0zm56 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
|
||||
|
After Width: | Height: | Size: 648 B |
1
src/app/assets/icons/line/question.svg
Normal file
1
src/app/assets/icons/line/question.svg
Normal 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="M448 32H0V480H448V32zM136 184c0-30.9 25.1-56 56-56h56.9c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L248 264.4V288H200V264 250.5 236.6l12.1-6.9 44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H192c-4.4 0-8 3.6-8 8l0 6.5-48 0V184zm64 136h48v48H200V320z"/></svg>
|
||||
|
After Width: | Height: | Size: 519 B |
1
src/app/assets/icons/line/rotate.svg
Normal file
1
src/app/assets/icons/line/rotate.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M142.9 142.9c-17.5 17.5-30.1 38-37.8 59.8L44.8 181.4C55.6 150.7 73.2 122 97.6 97.6c87.5-87.5 229.3-87.5 316.8 0l0 0L472 40l24 24V224H336l-24-24 57.1-57.1 0 0c-62.5-62.5-163.8-62.5-226.3 0zm0 226.3c62.5 62.5 163.8 62.5 226.3 0c17.5-17.5 30.1-38 37.8-59.8l60.4 21.3c-10.8 30.6-28.4 59.3-52.9 83.7c-87.5 87.5-229.3 87.5-316.7 0l0 0L40 472 16 448V288H176l24 24-57.1 57.1z"/></svg>
|
||||
|
After Width: | Height: | Size: 615 B |
1
src/app/assets/icons/line/triangle-exclamation.svg
Normal file
1
src/app/assets/icons/line/triangle-exclamation.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M256 32L0 480H512L256 32zm24 160v24V328v24H232V328 216 192h48zM232 384h48v48H232V384z"/></svg>
|
||||
|
After Width: | Height: | Size: 333 B |
1
src/app/assets/icons/line/xmark.svg
Normal file
1
src/app/assets/icons/line/xmark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 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="M326.6 166.6L349.3 144 304 98.7l-22.6 22.6L192 210.7l-89.4-89.4L80 98.7 34.7 144l22.6 22.6L146.7 256 57.4 345.4 34.7 368 80 413.3l22.6-22.6L192 301.3l89.4 89.4L304 413.3 349.3 368l-22.6-22.6L237.3 256l89.4-89.4z"/></svg>
|
||||
|
After Width: | Height: | Size: 459 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="mdil-minus-circle" viewBox="0 0 24 24"><path d="M7,12H16V13H7V12M11.5,3A9.5,9.5 0 0,1 21,12.5A9.5,9.5 0 0,1 11.5,22A9.5,9.5 0 0,1 2,12.5A9.5,9.5 0 0,1 11.5,3M11.5,4A8.5,8.5 0 0,0 3,12.5A8.5,8.5 0 0,0 11.5,21A8.5,8.5 0 0,0 20,12.5A8.5,8.5 0 0,0 11.5,4Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232H160v48h24H328h24V232H328 184z"/></svg>
|
||||
|
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 381 B |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" id="mdil-plus-circle" viewBox="0 0 24 24"><path d="M7,12H11V8H12V12H16V13H12V17H11V13H7V12M11.5,3A9.5,9.5 0 0,1 21,12.5A9.5,9.5 0 0,1 11.5,22A9.5,9.5 0 0,1 2,12.5A9.5,9.5 0 0,1 11.5,3M11.5,4A8.5,8.5 0 0,0 3,12.5A8.5,8.5 0 0,0 11.5,21A8.5,8.5 0 0,0 20,12.5A8.5,8.5 0 0,0 11.5,4Z" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 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="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 368h48V344 280h64 24V232H344 280V168 144H232v24 64H168 144v48h24 64v64 24z"/></svg>
|
||||
|
Before Width: | Height: | Size: 327 B After Width: | Height: | Size: 422 B |
@ -36,6 +36,15 @@ import { PluginModel } from "../../plugins/plugins";
|
||||
import { Prompt } from "../common/prompt/prompt";
|
||||
import * as lineutil from "./lineutil";
|
||||
|
||||
import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
|
||||
import { ReactComponent as CommentIcon } from "../assets/icons/line/comment.svg";
|
||||
import { ReactComponent as QuestionIcon } from "../assets/icons/line/question.svg";
|
||||
import { ReactComponent as RotateIcon } from "../assets/icons/line/rotate.svg";
|
||||
import { ReactComponent as WarningIcon } from "../assets/icons/line/triangle-exclamation.svg";
|
||||
import { ReactComponent as XmarkIcon } from "../assets/icons/line/xmark.svg";
|
||||
import { ReactComponent as FillIcon } from "../assets/icons/line/fill.svg";
|
||||
import { ReactComponent as GearIcon } from "../assets/icons/line/gear.svg";
|
||||
|
||||
import "./lines.less";
|
||||
|
||||
dayjs.extend(localizedFormat);
|
||||
@ -51,35 +60,37 @@ class SmallLineAvatar extends React.Component<{ line: LineType; cmd: Cmd; onRigh
|
||||
let rtnstate = cmd != null ? cmd.getRtnState() : false;
|
||||
let exitcode = cmd != null ? cmd.getExitCode() : 0;
|
||||
let isComment = line.linetype == "text";
|
||||
let icon: string = null;
|
||||
let icon = null;
|
||||
let iconTitle = null;
|
||||
let iconColor = null;
|
||||
if (isComment) {
|
||||
icon = "fa-comment";
|
||||
icon = <CommentIcon />;
|
||||
iconTitle = "comment";
|
||||
} else if (status == "done") {
|
||||
icon = exitcode === 0 ? "fa-check" : "fa-xmark";
|
||||
iconTitle = exitcode === 0 ? "success" : "fail";
|
||||
iconColor = exitcode === 0 ? "color-green" : "color-red";
|
||||
if (exitcode === 0) {
|
||||
icon = <CheckIcon className="success" />;
|
||||
iconTitle = "success";
|
||||
} else {
|
||||
icon = <XmarkIcon className="fail" />;
|
||||
iconTitle = "fail";
|
||||
}
|
||||
} else if (status == "hangup" || status == "error") {
|
||||
icon = "fa-triangle-exclamation";
|
||||
icon = <WarningIcon className="warning" />;
|
||||
iconTitle = status;
|
||||
iconColor = "color-yellow";
|
||||
} else if (status == "running" || "detached") {
|
||||
icon = "fa-rotate fa-spin";
|
||||
icon = <RotateIcon className="warning spin" />;
|
||||
iconTitle = "running";
|
||||
iconColor = "color-green";
|
||||
} else {
|
||||
icon = "fa-square-question";
|
||||
icon = <QuestionIcon />;
|
||||
iconTitle = "unknown";
|
||||
}
|
||||
return (
|
||||
<div
|
||||
onContextMenu={this.props.onRightClick}
|
||||
title={iconTitle}
|
||||
className={cn("simple-line-status", "status-" + status, rtnstate ? "has-rtnstate" : null)}
|
||||
>
|
||||
<span className="linenum">{lineNumStr}</span>
|
||||
<i title={iconTitle} className={cn("fa-sharp fa-solid", icon, iconColor)} />
|
||||
<div className="avatar">{icon}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -437,15 +448,15 @@ class LineCmd extends React.Component<
|
||||
<div> </div>
|
||||
<If condition={!isBlank(renderer) && renderer != "terminal"}>
|
||||
<div className="renderer">
|
||||
<i className="fa-sharp fa-solid fa-fill" />
|
||||
<FillIcon />
|
||||
{renderer}
|
||||
</div>
|
||||
</If>
|
||||
<div className="termopts">
|
||||
({termOpts.rows}x{termOpts.cols})
|
||||
</div>
|
||||
<div className="settings" onClick={this.handleLineSettings}>
|
||||
<i className="fa-sharp fa-solid fa-gear" />
|
||||
<div className="settings hoverEffect" onClick={this.handleLineSettings}>
|
||||
<GearIcon />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -641,7 +652,7 @@ class LineCmd extends React.Component<
|
||||
)}
|
||||
onClick={this.clickMinimise}
|
||||
>
|
||||
{this.isMinimised.get() ? <PlusIcon className="icon" /> : <MinusIcon className="icon" />}
|
||||
{this.isMinimised.get() ? <PlusIcon className="icon plus" /> : <MinusIcon className="icon" />}
|
||||
</div>
|
||||
</div>
|
||||
<If condition={!this.isMinimised.get()}>
|
||||
|
||||
@ -18,7 +18,6 @@
|
||||
}
|
||||
|
||||
.line .renderer-loading {
|
||||
color: @term-white;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
@ -27,9 +26,13 @@
|
||||
scroll-margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
.avatar {
|
||||
cursor: pointer;
|
||||
height: 36px;
|
||||
.plus {
|
||||
opacity: 0.5;
|
||||
}
|
||||
&:hover {
|
||||
.plus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.line-header {
|
||||
@ -67,25 +70,18 @@
|
||||
.line-icon.active {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
|
||||
i.fa-star,
|
||||
i.fa-thumb-tack {
|
||||
color: @term-bright-yellow;
|
||||
}
|
||||
|
||||
i.fa-bookmark {
|
||||
color: @term-bright-blue;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .line-icon {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.meta.meta-line1 {
|
||||
margin-left: 2px;
|
||||
color: rgba(@base-color, 0.6) !important;
|
||||
}
|
||||
|
||||
&.has-rtnstate .terminal-wrapper {
|
||||
@ -179,18 +175,10 @@
|
||||
|
||||
.ts {
|
||||
display: flex;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
.simple-line-status {
|
||||
color: #aaa;
|
||||
|
||||
i {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.linenum {
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -201,16 +189,38 @@
|
||||
}
|
||||
}
|
||||
|
||||
.color-red {
|
||||
color: @term-red;
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin: 0 0.5em;
|
||||
vertical-align: text-top;
|
||||
fill: @base-color;
|
||||
}
|
||||
|
||||
.color-green {
|
||||
color: @term-bright-green;
|
||||
.success {
|
||||
fill: @prompt-green;
|
||||
}
|
||||
|
||||
.color-yellow {
|
||||
color: @term-bright-yellow;
|
||||
.fail {
|
||||
fill: @error-red;
|
||||
}
|
||||
|
||||
.warning {
|
||||
fill: @warning-yellow;
|
||||
}
|
||||
|
||||
@keyframes infiniteRotate {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spin {
|
||||
animation: infiniteRotate 2s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@ -337,38 +347,39 @@
|
||||
.termopts,
|
||||
.renderer {
|
||||
display: flex;
|
||||
color: #aaa;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.renderer {
|
||||
color: #aaa;
|
||||
margin-left: 3px;
|
||||
margin-top: 5px;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
|
||||
margin-right: 2px;
|
||||
margin-top: 2px;
|
||||
svg {
|
||||
width: 1em;
|
||||
margin-right: 0.5em;
|
||||
fill: rgba(@base-color, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.settings {
|
||||
display: none;
|
||||
color: #aaa;
|
||||
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
margin-left: 0.5em;
|
||||
margin-top: 0.65em;
|
||||
cursor: pointer;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
border-radius: 50%;
|
||||
line-height: 1em;
|
||||
svg {
|
||||
fill: rgba(@base-color, 0.6);
|
||||
&:hover {
|
||||
fill: @base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.termopts {
|
||||
color: #aaa;
|
||||
margin-top: 5px;
|
||||
|
||||
display: none;
|
||||
|
||||
.resize-button {
|
||||
cursor: pointer;
|
||||
padding-left: 3px;
|
||||
@ -464,15 +475,16 @@
|
||||
.line-sep {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #aaa;
|
||||
margin-top: 1em;
|
||||
color: rgba(@base-color, 0.5);
|
||||
}
|
||||
|
||||
.line-sep::before,
|
||||
.line-sep::after {
|
||||
content: "";
|
||||
height: 2px;
|
||||
background-color: @term-white;
|
||||
height: 1px;
|
||||
flex-grow: 1;
|
||||
background-color: rgba(@base-color, 0.5);
|
||||
}
|
||||
|
||||
.line-sep::before {
|
||||
|
||||
@ -3,43 +3,38 @@
|
||||
.main-sidebar {
|
||||
padding: 0;
|
||||
width: 20rem;
|
||||
min-width: 20rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
transition: width 0.2s ease;
|
||||
|
||||
&.collapsed {
|
||||
width: 4em;
|
||||
width: 6em;
|
||||
.arrow-container {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.contents {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.1s ease-in-out, visibility 0.1s step-start;
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.arrow-container {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 18px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 2em;
|
||||
right: 2em;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.top {
|
||||
margin-top: 32px;
|
||||
margin-top: 4em;
|
||||
}
|
||||
|
||||
.separator {
|
||||
|
||||
@ -124,15 +124,15 @@
|
||||
.cmd-exec {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -6px;
|
||||
.icon {
|
||||
margin: 0 8px 0 6px;
|
||||
vertical-align: middle;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: bottom;
|
||||
margin-right: 1em;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 50%;
|
||||
fill: @prompt-green;
|
||||
padding: 0.25em;
|
||||
}
|
||||
.icon.disabled {
|
||||
fill: @disabled-background;
|
||||
@ -140,9 +140,12 @@
|
||||
}
|
||||
.cmd-btn {
|
||||
display: inline-block;
|
||||
margin-right: 2em;
|
||||
margin-right: 1em;
|
||||
padding: 0.2em 0.7rem;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
vertical-align: super;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -158,12 +158,12 @@ class CmdInput extends React.Component<{}, {}> {
|
||||
{inputModel.inputExpanded.get() ? "shrink" : "expand"} input ({renderCmdText("E")})
|
||||
</div>**/}
|
||||
{!focusVal && (
|
||||
<div onClick={this.clickFocusInputHint} className="cmd-btn">
|
||||
<div onClick={this.clickFocusInputHint} className="cmd-btn hoverEffect">
|
||||
focus input ({renderCmdText("I")})
|
||||
</div>
|
||||
)}
|
||||
{focusVal && (
|
||||
<div onMouseDown={this.clickHistoryHint} className="cmd-btn">
|
||||
<div onMouseDown={this.clickHistoryHint} className="cmd-btn hoverEffect">
|
||||
{historyShow ? "close history (esc)" : "show history (ctrl-r)"}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@ -146,9 +146,10 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.screen-tab.new-screen {
|
||||
.new-screen {
|
||||
width: 3em;
|
||||
min-width: 3em;
|
||||
margin-left: 1em;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
|
||||
@ -11,7 +11,6 @@ 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";
|
||||
|
||||
@ -177,7 +176,7 @@ class ScreenTabs extends React.Component<{ session: Session }, {}> {
|
||||
<For each="screen" index="index" of={showingScreens}>
|
||||
{this.renderTab(screen, activeScreenId, index)}
|
||||
</For>
|
||||
<div key="new-screen" className="screen-tab new-screen" onClick={this.handleNewScreen}>
|
||||
<div key="new-screen" className="new-screen" onClick={this.handleNewScreen}>
|
||||
<AddIcon className="icon hoverEffect" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,9 +8,13 @@
|
||||
&.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
max-width: calc(100% - 21em);
|
||||
max-width: calc(100% - 20.5em);
|
||||
background: @background-session;
|
||||
border: 1px solid @base-border;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1em;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
.collapsed + .session-view {
|
||||
max-width: calc(100% - 6.7em);
|
||||
}
|
||||
|
||||
@ -11,8 +11,10 @@
|
||||
@scrollbar-background: rgba(21, 23, 21, 1);
|
||||
@scrollbar-thumb: rgb(134, 134, 134);
|
||||
@button-background: rgb(38, 38, 38);
|
||||
@button-disabled-background: rgb(30, 29, 29);
|
||||
@success-green: rgb(38, 97, 26);
|
||||
@error-red: #cc0000;
|
||||
@warning-yellow: #ffa500;
|
||||
|
||||
@term-black: #000000;
|
||||
@term-red: #cc0000;
|
||||
|
||||
@ -68,13 +68,14 @@
|
||||
}
|
||||
.readonly {
|
||||
position: absolute;
|
||||
top: calc(1.5rem + 3px);
|
||||
right: 10rem;
|
||||
top: 0;
|
||||
right: 12rem;
|
||||
border-radius: 5px;
|
||||
background-color: @term-bright-red;
|
||||
color: @term-white;
|
||||
background-color: @button-background;
|
||||
color: @prompt-green;
|
||||
z-index: 1;
|
||||
padding: 0 6px 2px;
|
||||
padding: 0 0.8em;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
/** customising react-split-it **/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user