From e867bcb398c0c01172f4b0abf19c03fe8af24f14 Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Wed, 27 Mar 2024 12:47:57 -0700 Subject: [PATCH] Add overlay scrollbar for main sidebar, adjust active session display behavior (#505) * Add overlay scrollbar to left sidebar * Keep active session bolded when mainview is not session * fix color of scrollbar * swap expression args * add active color for scrollbar * add active/highlight to history, connections, and settings --- package.json | 2 ++ public/themes/default.css | 10 +++++++++- public/themes/light.css | 1 + src/app/app.tsx | 6 +++--- src/app/sidebar/main.less | 19 ++++++++++++------- src/app/sidebar/main.tsx | 26 +++++++++++++++++++------- src/app/sidebar/right.tsx | 1 - yarn.lock | 10 ++++++++++ 8 files changed, 56 insertions(+), 19 deletions(-) diff --git a/package.json b/package.json index 91a3704b..0c7126a8 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,8 @@ "monaco-editor": "^0.44.0", "mustache": "^4.2.0", "node-fetch": "^3.2.10", + "overlayscrollbars": "^2.6.1", + "overlayscrollbars-react": "^0.5.5", "papaparse": "^5.4.1", "react": "^18.1.0", "react-dom": "^18.1.0", diff --git a/public/themes/default.css b/public/themes/default.css index cededae8..0720a62e 100644 --- a/public/themes/default.css +++ b/public/themes/default.css @@ -67,6 +67,7 @@ --scrollbar-background-color: var(--app-bg-color); --scrollbar-thumb-color: rgba(255, 255, 255, 0.3); --scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5); + --scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6); /* code color */ --pre-bg-color: rgb(0, 0, 0); @@ -112,7 +113,7 @@ --hotkey-text-color: var(--app-text-secondary-color); /* sidebar colors */ - --sidebar-highlight-color: rgba(241, 246, 243, 0.08); + --sidebar-highlight-color: var(--app-accent-bg-color); --sidebar-font-size: 15px; --sidebar-line-height: 1.5; --sidebar-font-weight: normal; @@ -186,4 +187,11 @@ --datepicker-header-fade-color: rgba(255, 255, 255, 0.4); --datepicker-year-header-bg-color: rgba(255, 255, 255, 0.2); /* Light grey background */ --datepicker-year-header-border-color: rgba(241, 246, 243, 0.15); /* Light grey border */ + + /* OverlayScrollbars styling */ + .os-scrollbar { + --os-handle-bg: var(--scrollbar-thumb-color); + --os-handle-bg-hover: var(--scrollbar-thumb-hover-color); + --os-handle-bg-active: var(--scrollbar-thumb-active-color); + } } diff --git a/public/themes/light.css b/public/themes/light.css index 8c811f9b..a21da447 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -61,6 +61,7 @@ --scrollbar-background-color: var(--app-bg-color); --scrollbar-thumb-color: rgba(0, 0, 0, 0.2); --scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.4); + --scrollbar-thumb-active-color: rgba(0, 0, 0, 0.5); /* line color */ --line-actions-bg-color: rgba(0, 0, 0, 0.1); diff --git a/src/app/app.tsx b/src/app/app.tsx index f70c1eda..684d04f6 100644 --- a/src/app/app.tsx +++ b/src/app/app.tsx @@ -101,7 +101,7 @@ class App extends React.Component<{}, {}> { return (
- +
@@ -151,7 +151,7 @@ class App extends React.Component<{}, {}> {
- + @@ -160,7 +160,7 @@ class App extends React.Component<{}, {}> { - +
diff --git a/src/app/sidebar/main.less b/src/app/sidebar/main.less index 1db4345f..7567e51c 100644 --- a/src/app/sidebar/main.less +++ b/src/app/sidebar/main.less @@ -60,15 +60,15 @@ margin-bottom: -4px; } + .top { + padding-right: 6px; + } + .middle { padding: 4px 6px 8px 6px; border-bottom: 1px solid var(--app-border-color); overflow-y: auto; .item { - &.active { - background-color: var(--sidebar-highlight-color); - font-weight: var(--sidebar-highlight-font-weight); - } .index { font-size: 10px; } @@ -87,6 +87,7 @@ left: 0; width: 100%; padding-top: 0.8rem; + padding-right: 6px; } .item { @@ -94,9 +95,6 @@ margin-left: 6px; border-radius: 4px; opacity: 1; - width: inherit; - max-width: inherit; - min-width: inherit; display: flex; flex-direction: row; align-items: center; @@ -111,6 +109,13 @@ line-height: normal; } + &.active { + font-weight: var(--sidebar-highlight-font-weight); + } + &.highlight { + background-color: var(--sidebar-highlight-color); + } + .item-contents { flex-grow: 1; } diff --git a/src/app/sidebar/main.tsx b/src/app/sidebar/main.tsx index a6be3025..f188ecdd 100644 --- a/src/app/sidebar/main.tsx +++ b/src/app/sidebar/main.tsx @@ -8,7 +8,6 @@ import { boundMethod } from "autobind-decorator"; import cn from "classnames"; import dayjs from "dayjs"; import { If } from "tsx-control-statements/components"; -import { compareLoose } from "semver"; import { ReactComponent as AppsIcon } from "@/assets/icons/apps.svg"; import { ReactComponent as WorkspacesIcon } from "@/assets/icons/workspaces.svg"; @@ -24,6 +23,9 @@ import * as appconst from "@/app/appconst"; import "./main.less"; import { ActionsIcon, CenteredIcon, FrontIcon, StatusIndicator } from "@/common/icons/icons"; +import "overlayscrollbars/overlayscrollbars.css"; +import { OverlayScrollbarsComponent } from "overlayscrollbars-react"; + dayjs.extend(localizedFormat); class SideBarItem extends React.Component<{ @@ -59,7 +61,6 @@ class HotKeyIcon extends React.Component<{ hotkey: string }> { interface MainSideBarProps { parentRef: React.RefObject; - clientData: ClientDataType; } @mobxReact.observer @@ -192,14 +193,15 @@ class MainSideBar extends React.Component { } } return sessionList.map((session, index) => { - const isActive = GlobalModel.activeMainView.get() == "session" && activeSessionId == session.sessionId; + const isActive = activeSessionId == session.sessionId; + const showHighlight = isActive && GlobalModel.activeMainView.get() == "session"; const sessionScreens = GlobalModel.getSessionScreens(session.sessionId); const sessionIndicator = Math.max(...sessionScreens.map((screen) => screen.statusIndicator.get())); const sessionRunningCommands = sessionScreens.some((screen) => screen.numRunningCmds.get() > 0); return ( {index + 1}} contents={session.name.get()} endIcons={[ @@ -240,6 +242,10 @@ class MainSideBar extends React.Component { } render() { + let mainView = GlobalModel.activeMainView.get(); + const historyActive = mainView == "history"; + const connectionsActive = mainView == "connections"; + const settingsActive = mainView == "clientsettings"; return ( { } + className={cn({ active: historyActive, highlight: historyActive })} contents="History" endIcons={[]} onClick={this.handleHistoryClick} @@ -271,6 +278,7 @@ class MainSideBar extends React.Component { } + className={cn({ active: connectionsActive, highlight: connectionsActive })} contents="Connections" onClick={this.handleConnectionsClick} /> @@ -291,15 +299,18 @@ class MainSideBar extends React.Component { , ]} /> - + +