From 9e806d062148accebec5b57a03cae2ea613482fc Mon Sep 17 00:00:00 2001 From: Mike Sawka Date: Tue, 27 Feb 2024 21:31:58 -0800 Subject: [PATCH] fix background colors, standardize tab icons -- use fontawesome, use fa-fw (fixed width) (#352) --- public/index-dev.html | 1 + public/index.html | 1 + src/app/app.less | 9 ++++---- src/app/appconst.ts | 1 + src/app/common/elements/index.tsx | 1 + src/app/common/elements/tabicon.tsx | 28 ++++++++++++++++++++++++ src/app/common/modals/screensettings.tsx | 15 +++++-------- src/app/common/modals/tabswitcher.tsx | 13 ++--------- src/app/root.less | 4 ++-- src/app/workspace/screen/screenview.tsx | 7 ++---- src/app/workspace/screen/tab.tsx | 22 ++++--------------- 11 files changed, 52 insertions(+), 50 deletions(-) create mode 100644 src/app/common/elements/tabicon.tsx diff --git a/public/index-dev.html b/public/index-dev.html index f0c1c4a4..fffbee52 100644 --- a/public/index-dev.html +++ b/public/index-dev.html @@ -7,6 +7,7 @@ + diff --git a/public/index.html b/public/index.html index 3718ee97..03b504a2 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,7 @@ + diff --git a/src/app/app.less b/src/app/app.less index 5bf6942f..554e13bc 100644 --- a/src/app/app.less +++ b/src/app/app.less @@ -17,12 +17,12 @@ body { body { &.is-dev .sidebar { - background-color: var(--app-bg-color-dev); + background-color: var(--sidebar-dev-bg-color); } } body .sidebar { - background-color: var(--app-bg-color); + background-color: var(--sidebar-bg-color); } textarea { @@ -31,7 +31,6 @@ textarea { font-size: 12px; font-weight: 300; line-height: 1.5; - background: var(--app-bg-color); color: var(--app-text-color); } @@ -800,13 +799,15 @@ a.a-block { .tab-color-name, .tab-icon-name { + display: inline-block; margin-left: 1em; + min-width: 80px; } .tab-color-select, .tab-icon-select { cursor: pointer; - margin: 5px; + margin: 3px; &:hover { outline: 2px solid white; } diff --git a/src/app/appconst.ts b/src/app/appconst.ts index 6e80ff10..4bbbac46 100644 --- a/src/app/appconst.ts +++ b/src/app/appconst.ts @@ -33,6 +33,7 @@ export const InputChunkSize = 500; export const RemoteColors = ["red", "green", "yellow", "blue", "magenta", "cyan", "white", "orange"]; export const TabColors = ["red", "orange", "yellow", "green", "mint", "cyan", "blue", "violet", "pink", "white"]; export const TabIcons = [ + "square", "sparkle", "fire", "ghost", diff --git a/src/app/common/elements/index.tsx b/src/app/common/elements/index.tsx index fbdcad7e..30895855 100644 --- a/src/app/common/elements/index.tsx +++ b/src/app/common/elements/index.tsx @@ -18,3 +18,4 @@ export { Status } from "./status"; export { TextField } from "./textfield"; export { Toggle } from "./toggle"; export { Tooltip } from "./tooltip"; +export { TabIcon } from "./tabicon"; diff --git a/src/app/common/elements/tabicon.tsx b/src/app/common/elements/tabicon.tsx new file mode 100644 index 00000000..94717f33 --- /dev/null +++ b/src/app/common/elements/tabicon.tsx @@ -0,0 +1,28 @@ +// Copyright 2024, Command Line Inc. +// SPDX-License-Identifier: Apache-2.0 + +import * as React from "react"; +import { isBlank } from "@/util/util"; +import cn from "classnames"; + +class TabIcon extends React.Component<{ icon: string; color: string }> { + render() { + let { icon, color, className } = this.props; + let iconClass = ""; + if (icon === "default" || icon === "square") { + iconClass = "fa-solid fa-square fa-fw"; + } else { + iconClass = `fa-sharp fa-solid fa-${icon} fa-fw`; + } + if (isBlank(color) || color === "default") { + color = "green"; + } + return ( +
+ +
+ ); + } +} + +export { TabIcon }; diff --git a/src/app/common/modals/screensettings.tsx b/src/app/common/modals/screensettings.tsx index 3e3a5fc2..3524bf85 100644 --- a/src/app/common/modals/screensettings.tsx +++ b/src/app/common/modals/screensettings.tsx @@ -10,7 +10,7 @@ import cn from "classnames"; import { GlobalModel, GlobalCommandRunner, Screen } from "@/models"; import { Toggle, InlineSettingsTextEdit, SettingsError, Modal, Dropdown, Tooltip } from "@/elements"; import * as util from "@/util/util"; -import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg"; +import { TabIcon } from "@/common/elements/tabicon"; import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg"; import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg"; import * as appconst from "@/app/appconst"; @@ -274,7 +274,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
- + {screen.getTabColor()}
|
@@ -284,7 +284,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> { className="tab-color-select" onClick={() => this.selectTabColor(color)} > - +
@@ -295,12 +295,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
- - - - - - + {screen.getTabIcon()}
|
@@ -310,7 +305,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> { className="tab-icon-select" onClick={() => this.selectTabIcon(icon)} > - +
diff --git a/src/app/common/modals/tabswitcher.tsx b/src/app/common/modals/tabswitcher.tsx index 9b0f207f..4bdfbae5 100644 --- a/src/app/common/modals/tabswitcher.tsx +++ b/src/app/common/modals/tabswitcher.tsx @@ -11,7 +11,7 @@ import { GlobalModel, GlobalCommandRunner } from "@/models"; import { Modal, TextField, InputDecoration, Tooltip } from "@/elements"; import * as util from "@/util/util"; import { Screen } from "@/models"; -import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg"; +import { TabIcon } from "@/elements/tabicon"; import "./tabswitcher.less"; @@ -278,15 +278,6 @@ class TabSwitcherModal extends React.Component<{}, {}> { return mainOptions.concat(additionalOptions); } - @boundMethod - renderIcon(option: SwitcherDataType): React.ReactNode { - const tabIcon = option.icon; - if (tabIcon === "default" || tabIcon === "square") { - return ; - } - return ; - } - @boundMethod renderOption(option: SwitcherDataType, index: number): JSX.Element { if (!this.optionRefs[index]) { @@ -302,7 +293,7 @@ class TabSwitcherModal extends React.Component<{}, {}> { onClick={() => this.handleSelect(index)} > -
{this.renderIcon(option)}
+
#{option.sessionName} / {option.screenName}
diff --git a/src/app/root.less b/src/app/root.less index 0b5772f0..627684a7 100644 --- a/src/app/root.less +++ b/src/app/root.less @@ -32,6 +32,7 @@ --floating-logo-height: var(--screentabs-height); // global colors + --app-bg-color: black; --app-accent-color: rgb(88, 193, 66); --app-error-color: rgb(204, 0, 0); --app-warning-color: rgb(255, 165, 0); @@ -40,8 +41,6 @@ --app-text-primary-color: rgb(255, 255, 255); --app-text-secondary-color: rgb(195, 200, 194); --app-border-color: rgb(51, 51, 51); - --app-bg-color: rgba(21, 23, 21, 1); - --app-bg-color-dev: rgba(21, 23, 48, 1); --app-maincontent-bg-color: #333; --app-border-radius: 10px; @@ -146,6 +145,7 @@ --hotkey-text-color: rgb(195, 200, 194); // sidebar colors + --sidebar-bg-color: rgba(21, 23, 21, 1); --sidebar-dev-bg-color: rgb(21, 23, 48); --sidebar-settings-color: rgb(255, 255, 255); --sidebar-separator-color: var(--app-border-color); diff --git a/src/app/workspace/screen/screenview.tsx b/src/app/workspace/screen/screenview.tsx index 2cf38625..31ea2de0 100644 --- a/src/app/workspace/screen/screenview.tsx +++ b/src/app/workspace/screen/screenview.tsx @@ -17,9 +17,9 @@ import { getRemoteStr } from "@/common/prompt/prompt"; import { Line } from "@/app/line/linecomps"; import { LinesView } from "@/app/line/linesview"; import * as util from "@/util/util"; +import { TabIcon } from "@/elements/tabicon"; import { ReactComponent as EllipseIcon } from "@/assets/icons/ellipse.svg"; import { ReactComponent as Check12Icon } from "@/assets/icons/check12.svg"; -import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg"; import { ReactComponent as GlobeIcon } from "@/assets/icons/globe.svg"; import { ReactComponent as StatusCircleIcon } from "@/assets/icons/statuscircle.svg"; import * as appconst from "@/app/appconst"; @@ -428,9 +428,6 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> { <>
Select the icon
-
this.selectTabIcon("square")}> - -
{ title={icon || ""} onClick={() => this.selectTabIcon(icon || "")} > - +
diff --git a/src/app/workspace/screen/tab.tsx b/src/app/workspace/screen/tab.tsx index 432ccba4..bf4bc33e 100644 --- a/src/app/workspace/screen/tab.tsx +++ b/src/app/workspace/screen/tab.tsx @@ -8,10 +8,10 @@ import { boundMethod } from "autobind-decorator"; import cn from "classnames"; import { GlobalModel, GlobalCommandRunner, Screen } from "@/models"; import { ActionsIcon, StatusIndicator, CenteredIcon } from "@/common/icons/icons"; -import { ReactComponent as SquareIcon } from "@/assets/icons/tab/square.svg"; import * as constants from "@/app/appconst"; import { Reorder } from "framer-motion"; import { MagicLayout } from "@/app/magiclayout"; +import { TabIcon } from "@/elements/tabicon"; @mobxReact.observer class ScreenTab extends React.Component< @@ -58,22 +58,6 @@ class ScreenTab extends React.Component< GlobalModel.modalsModel.pushModal(constants.SCREEN_SETTINGS); } - renderTabIcon = (screen: Screen): React.ReactNode => { - const tabIcon = screen.getTabIcon(); - if (tabIcon === "default" || tabIcon === "square") { - return ( -
- -
- ); - } - return ( -
- -
- ); - }; - render() { let { screen, activeScreenId, index, onSwitchScreen } = this.props; let archived = screen.archived.get() ? ( @@ -105,7 +89,9 @@ class ScreenTab extends React.Component< onContextMenu={(event) => this.openScreenSettings(event, screen)} onDragEnd={this.handleDragEnd} > - {this.renderTabIcon(screen)} + + +
{archived} {webShared}