fix background colors, standardize tab icons -- use fontawesome, use fa-fw (fixed width) (#352)

2024-12-21 16:38:23 +01:00 · 2024-02-27 21:31:58 -08:00 · 2024-02-27 21:31:58 -08:00 · 9e806d0621
commit 9e806d0621
parent 3fa6494493
11 changed files with 52 additions and 50 deletions
--- a/public/index-dev.html
+++ b/public/index-dev.html
@ -7,6 +7,7 @@
        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
        <link rel="stylesheet" href="dist-dev/waveterm.css" />
--- a/public/index.html
+++ b/public/index.html
@ -7,6 +7,7 @@
        <link rel="stylesheet" href="public/bulma-0.9.4.min.css" />
        <link rel="stylesheet" href="public/fontawesome/css/fontawesome.min.css">
        <link rel="stylesheet" href="public/fontawesome/css/brands.min.css">
+        <link rel="stylesheet" href="public/fontawesome/css/solid.min.css">
        <link rel="stylesheet" href="public/fontawesome/css/sharp-solid.min.css">
        <link rel="stylesheet" href="public/fontawesome/css/sharp-regular.min.css">
        <link rel="stylesheet" href="dist/waveterm.css" />
--- 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;
                }
--- 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",
--- 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";
--- a/src/app/common/elements/tabicon.tsx
+++ 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 (
+            <div className={cn("icon", "color-" + color)}>
+                <i className={iconClass} />
+            </div>
+        );
+    }
+}
+
+export { TabIcon };
--- 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<{}, {}> {
                        <div className="settings-input">
                            <div className="tab-colors">
                                <div className="tab-color-cur">
-                                    <SquareIcon className={cn("tab-color-icon", "color-" + screen.getTabColor())} />
+                                    <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
                                    <span className="tab-color-name">{screen.getTabColor()}</span>
                                </div>
                                <div className="tab-color-sep">|</div>
@ -284,7 +284,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                                        className="tab-color-select"
                                        onClick={() => this.selectTabColor(color)}
                                    >
-                                        <SquareIcon className={cn("tab-color-icon", "color-" + color)} />
+                                        <TabIcon icon="square" color={color} />
                                    </div>
                                </For>
                            </div>
@ -295,12 +295,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                        <div className="settings-input">
                            <div className="tab-icons">
                                <div className="tab-icon-cur">
-                                    <If condition={screen.getTabIcon() == "default"}>
-                                        <SquareIcon className={cn("tab-color-icon", "color-white")} />
-                                    </If>
-                                    <If condition={screen.getTabIcon() != "default"}>
-                                        <i className={`fa-sharp fa-solid fa-${screen.getTabIcon()}`}></i>
-                                    </If>
+                                    <TabIcon icon={screen.getTabIcon()} color="white" />
                                    <span className="tab-icon-name">{screen.getTabIcon()}</span>
                                </div>
                                <div className="tab-icon-sep">|</div>
@ -310,7 +305,7 @@ class ScreenSettingsModal extends React.Component<{}, {}> {
                                        className="tab-icon-select"
                                        onClick={() => this.selectTabIcon(icon)}
                                    >
-                                        <i className={`fa-sharp fa-solid fa-${icon}`}></i>
+                                        <TabIcon icon={icon} color="white" />
                                    </div>
                                </For>
                            </div>
--- 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 <SquareIcon className="left-icon" />;
-        }
-        return <i className={`fa-sharp fa-solid fa-${tabIcon}`}></i>;
-    }
-
    @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)}
            >
                <If condition={option.sessionIdx != -1}>
-                    <div className={cn("icon", "color-" + option.color)}>{this.renderIcon(option)}</div>
+                    <TabIcon icon={option.icon} color={option.color} />
                    <div className="tabname">
                        #{option.sessionName} / {option.screenName}
                    </div>
--- 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);
--- 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 }, {}> {
            <>
                <div className="text-s1 unselectable">Select the icon</div>
                <div className="control-iconlist tabicon-list">
-                    <div key="square" className="icondiv" title="square" onClick={() => this.selectTabIcon("square")}>
-                        <SquareIcon className="icon square-icon" />
-                    </div>
                    <For each="icon" of={appconst.TabIcons}>
                        <div
                            className="icondiv tabicon"
@ -438,7 +435,7 @@ class NewTabSettings extends React.Component<{ screen: Screen }, {}> {
                            title={icon || ""}
                            onClick={() => this.selectTabIcon(icon || "")}
                        >
-                            <i className={`fa-sharp fa-solid fa-${icon}`}></i>
+                            <TabIcon icon={icon} color="white" />
                        </div>
                    </For>
                </div>
--- 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 (
-                <div className="icon svg-icon">
-                    <SquareIcon className="svg-icon-inner" />
-                </div>
-            );
-        }
-        return (
-            <div className="icon fa-icon">
-                <i className={`fa-sharp fa-solid fa-${tabIcon}`}></i>
-            </div>
-        );
-    };
-
    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}
            >
-                <CenteredIcon className="front-icon">{this.renderTabIcon(screen)}</CenteredIcon>
+                <CenteredIcon className="front-icon">
+                    <TabIcon icon={screen.getTabIcon()} color={screen.getTabColor()} />
+                </CenteredIcon>
                <div className="tab-name truncate">
                    {archived}
                    {webShared}