diff --git a/src/app/app.less b/src/app/app.less index 44506aa9f..ad93d5705 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -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; diff --git a/src/app/assets/icons/line/check.svg b/src/app/assets/icons/line/check.svg new file mode 100644 index 000000000..f536befae --- /dev/null +++ b/src/app/assets/icons/line/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/line/comment.svg b/src/app/assets/icons/line/comment.svg new file mode 100644 index 000000000..829ea568c --- /dev/null +++ b/src/app/assets/icons/line/comment.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/line/fill.svg b/src/app/assets/icons/line/fill.svg new file mode 100644 index 000000000..41b5e9c21 --- /dev/null +++ b/src/app/assets/icons/line/fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/line/gear.svg b/src/app/assets/icons/line/gear.svg new file mode 100644 index 000000000..960f1e5e1 --- /dev/null +++ b/src/app/assets/icons/line/gear.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/line/question.svg b/src/app/assets/icons/line/question.svg new file mode 100644 index 000000000..341649055 --- /dev/null +++ b/src/app/assets/icons/line/question.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/line/rotate.svg b/src/app/assets/icons/line/rotate.svg new file mode 100644 index 000000000..35a3c24cb --- /dev/null +++ b/src/app/assets/icons/line/rotate.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/line/triangle-exclamation.svg b/src/app/assets/icons/line/triangle-exclamation.svg new file mode 100644 index 000000000..c91ddbc89 --- /dev/null +++ b/src/app/assets/icons/line/triangle-exclamation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/line/xmark.svg b/src/app/assets/icons/line/xmark.svg new file mode 100644 index 000000000..56f72c0e2 --- /dev/null +++ b/src/app/assets/icons/line/xmark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/assets/icons/minus.svg b/src/app/assets/icons/minus.svg index 616715326..c1457a3f8 100644 --- a/src/app/assets/icons/minus.svg +++ b/src/app/assets/icons/minus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/assets/icons/plus.svg b/src/app/assets/icons/plus.svg index 5f948b03a..e59c7c96d 100644 --- a/src/app/assets/icons/plus.svg +++ b/src/app/assets/icons/plus.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/line/linecomps.tsx b/src/app/line/linecomps.tsx index f398d7c4e..bd10dc463 100644 --- a/src/app/line/linecomps.tsx +++ b/src/app/line/linecomps.tsx @@ -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 = ; 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 = ; + iconTitle = "success"; + } else { + icon = ; + iconTitle = "fail"; + } } else if (status == "hangup" || status == "error") { - icon = "fa-triangle-exclamation"; + icon = ; iconTitle = status; - iconColor = "color-yellow"; } else if (status == "running" || "detached") { - icon = "fa-rotate fa-spin"; + icon = ; iconTitle = "running"; - iconColor = "color-green"; } else { - icon = "fa-square-question"; + icon = ; iconTitle = "unknown"; } return (
{lineNumStr} - +
{icon}
); } @@ -437,15 +448,15 @@ class LineCmd extends React.Component<
 
- + {renderer} 
({termOpts.rows}x{termOpts.cols})
-
- +
+
); @@ -641,7 +652,7 @@ class LineCmd extends React.Component< )} onClick={this.clickMinimise} > - {this.isMinimised.get() ? : } + {this.isMinimised.get() ? : } diff --git a/src/app/line/lines.less b/src/app/line/lines.less index 4f7310582..6f3e8e9c2 100644 --- a/src/app/line/lines.less +++ b/src/app/line/lines.less @@ -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 { diff --git a/src/app/sidebar/sidebar.less b/src/app/sidebar/sidebar.less index 610d70a79..088464039 100644 --- a/src/app/sidebar/sidebar.less +++ b/src/app/sidebar/sidebar.less @@ -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 { diff --git a/src/app/workspace/cmdinput/cmdInput.less b/src/app/workspace/cmdinput/cmdInput.less index a9eaeb9a7..65bd6d608 100644 --- a/src/app/workspace/cmdinput/cmdInput.less +++ b/src/app/workspace/cmdinput/cmdInput.less @@ -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; } diff --git a/src/app/workspace/cmdinput/cmdinput.tsx b/src/app/workspace/cmdinput/cmdinput.tsx index 796bcd98b..da53c63c3 100644 --- a/src/app/workspace/cmdinput/cmdinput.tsx +++ b/src/app/workspace/cmdinput/cmdinput.tsx @@ -158,12 +158,12 @@ class CmdInput extends React.Component<{}, {}> { {inputModel.inputExpanded.get() ? "shrink" : "expand"} input ({renderCmdText("E")}) **/} {!focusVal && ( -
+
focus input ({renderCmdText("I")})
)} {focusVal && ( -
+
{historyShow ? "close history (esc)" : "show history (ctrl-r)"}
)} diff --git a/src/app/workspace/screen/tabs.less b/src/app/workspace/screen/tabs.less index f0973cce3..4ce4880be 100644 --- a/src/app/workspace/screen/tabs.less +++ b/src/app/workspace/screen/tabs.less @@ -146,9 +146,10 @@ display: none; } - .screen-tab.new-screen { + .new-screen { width: 3em; min-width: 3em; + margin-left: 1em; cursor: pointer; .icon { diff --git a/src/app/workspace/screen/tabs.tsx b/src/app/workspace/screen/tabs.tsx index 59c7f39c5..b6b3e8efc 100644 --- a/src/app/workspace/screen/tabs.tsx +++ b/src/app/workspace/screen/tabs.tsx @@ -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 }, {}> { {this.renderTab(screen, activeScreenId, index)} -
+
diff --git a/src/app/workspace/workspace.less b/src/app/workspace/workspace.less index 4c0354917..46e74aad1 100644 --- a/src/app/workspace/workspace.less +++ b/src/app/workspace/workspace.less @@ -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); } diff --git a/src/index.less b/src/index.less index f205357fc..ee571aedd 100644 --- a/src/index.less +++ b/src/index.less @@ -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; diff --git a/src/plugins/code/code.less b/src/plugins/code/code.less index fbf0f79ba..9452e5866 100644 --- a/src/plugins/code/code.less +++ b/src/plugins/code/code.less @@ -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 **/