From f824cd7d8b2ee9456f4a238e440f77273b64db50 Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Sun, 15 Dec 2024 18:18:53 +0530 Subject: [PATCH 1/9] feature/auto-hide-tab-bar added feature for auto hide using settings --- frontend/app/tab/tabbar.scss | 21 +++++++++++++++++++++ frontend/app/tab/tabbar.tsx | 17 ++++++++++++++++- frontend/types/gotypes.d.ts | 1 + pkg/wconfig/metaconsts.go | 1 + pkg/wconfig/settingsconfig.go | 1 + 5 files changed, 40 insertions(+), 1 deletion(-) diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index 3299a8afe..7a4b6c98a 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -1,6 +1,8 @@ // Copyright 2024, Command Line Inc. // SPDX-License-Identifier: Apache-2.0 +@use "./../theme.scss"; + .tab-bar-wrapper { --default-indent: 10px; --darwin-not-fullscreen-indent: 74px; @@ -25,6 +27,25 @@ .tab-bar-wrapper { padding-top: 6px; position: relative; +} + +.tab-bar-wrapper-auto-hide { + top: -20px; + left: 0; + right: 0; + + padding: 6px; + margin: 2px; + + position: fixed; + z-index: 1000; + background: var(--main-bg-color); + + transition: top 0.3s ease; +} + +.tab-bar-wrapper, +.tab-bar-wrapper-auto-hide { user-select: none; display: flex; flex-direction: row; diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index 90c618e6c..8897fb2dc 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -174,10 +174,25 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const isFullScreen = useAtomValue(atoms.isFullScreen); const settings = useAtomValue(atoms.settingsAtom); + const autoHideTabsBar = useRef(settings["window:autoHideTabsBar"]); let prevDelta: number; let prevDragDirection: string; + const handleAutoHideTabsBar = (event: MouseEvent) => { + const currentY = event.clientY; + const tabBar = tabbarWrapperRef.current; + const tabBarHeight = tabBar.clientHeight + 1; + + if (currentY < 10) tabBar.style.top = '0px'; + if (autoHideTabsBar.current && currentY > tabBarHeight) tabBar.style.top = `-${tabBarHeight}px`; + }; + + useEffect(() => { + document.addEventListener("mousemove", handleAutoHideTabsBar); + return () => document.removeEventListener("mousemove", handleAutoHideTabsBar); + }, []) + // Update refs when tabIds change useEffect(() => { tabRefs.current = tabIds.map((_, index) => tabRefs.current[index] || createRef()); @@ -654,7 +669,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { title: "Add Tab", }; return ( -
+
{appMenuButton} {devLabel} diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts index 8584c1260..3ec5c10b0 100644 --- a/frontend/types/gotypes.d.ts +++ b/frontend/types/gotypes.d.ts @@ -649,6 +649,7 @@ declare global { "window:reducedmotion"?: boolean; "window:tilegapsize"?: number; "window:showmenubar"?: boolean; + "window:autoHideTabsBar"?: boolean; "window:nativetitlebar"?: boolean; "window:disablehardwareacceleration"?: boolean; "window:maxtabcachesize"?: number; diff --git a/pkg/wconfig/metaconsts.go b/pkg/wconfig/metaconsts.go index 40c40f592..82f336cb9 100644 --- a/pkg/wconfig/metaconsts.go +++ b/pkg/wconfig/metaconsts.go @@ -61,6 +61,7 @@ const ( ConfigKey_WindowReducedMotion = "window:reducedmotion" ConfigKey_WindowTileGapSize = "window:tilegapsize" ConfigKey_WindowShowMenuBar = "window:showmenubar" + ConfigKey_WindowAutoHideTabsBar = "window:autoHideTabsBar" ConfigKey_WindowNativeTitleBar = "window:nativetitlebar" ConfigKey_WindowDisableHardwareAcceleration = "window:disablehardwareacceleration" ConfigKey_WindowMaxTabCacheSize = "window:maxtabcachesize" diff --git a/pkg/wconfig/settingsconfig.go b/pkg/wconfig/settingsconfig.go index 5b64adae7..8c03a3317 100644 --- a/pkg/wconfig/settingsconfig.go +++ b/pkg/wconfig/settingsconfig.go @@ -88,6 +88,7 @@ type SettingsType struct { WindowReducedMotion bool `json:"window:reducedmotion,omitempty"` WindowTileGapSize *int64 `json:"window:tilegapsize,omitempty"` WindowShowMenuBar bool `json:"window:showmenubar,omitempty"` + WindowAutoHideTabsBar bool `json:"window:autoHideTabsBar,omitempty"` WindowNativeTitleBar bool `json:"window:nativetitlebar,omitempty"` WindowDisableHardwareAcceleration bool `json:"window:disablehardwareacceleration,omitempty"` WindowMaxTabCacheSize int `json:"window:maxtabcachesize,omitempty"` From 9a9a1dcb8c3f71f4afb8cb2e67f6076a1e770dcd Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Sun, 15 Dec 2024 18:22:44 +0530 Subject: [PATCH 2/9] feature/auto-hide-tab-bar using all smaller for settings key --- frontend/app/tab/tabbar.tsx | 2 +- frontend/types/gotypes.d.ts | 2 +- pkg/wconfig/metaconsts.go | 2 +- pkg/wconfig/settingsconfig.go | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index 8897fb2dc..cc2be80ac 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -174,7 +174,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const isFullScreen = useAtomValue(atoms.isFullScreen); const settings = useAtomValue(atoms.settingsAtom); - const autoHideTabsBar = useRef(settings["window:autoHideTabsBar"]); + const autoHideTabsBar = useRef(settings["window:autohidetabsbar"]); let prevDelta: number; let prevDragDirection: string; diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts index 3ec5c10b0..affb5a501 100644 --- a/frontend/types/gotypes.d.ts +++ b/frontend/types/gotypes.d.ts @@ -649,7 +649,7 @@ declare global { "window:reducedmotion"?: boolean; "window:tilegapsize"?: number; "window:showmenubar"?: boolean; - "window:autoHideTabsBar"?: boolean; + "window:autohidetabsbar"?: boolean; "window:nativetitlebar"?: boolean; "window:disablehardwareacceleration"?: boolean; "window:maxtabcachesize"?: number; diff --git a/pkg/wconfig/metaconsts.go b/pkg/wconfig/metaconsts.go index 82f336cb9..850ed0d00 100644 --- a/pkg/wconfig/metaconsts.go +++ b/pkg/wconfig/metaconsts.go @@ -61,7 +61,7 @@ const ( ConfigKey_WindowReducedMotion = "window:reducedmotion" ConfigKey_WindowTileGapSize = "window:tilegapsize" ConfigKey_WindowShowMenuBar = "window:showmenubar" - ConfigKey_WindowAutoHideTabsBar = "window:autoHideTabsBar" + ConfigKey_WindowAutoHideTabsBar = "window:autohidetabsbar" ConfigKey_WindowNativeTitleBar = "window:nativetitlebar" ConfigKey_WindowDisableHardwareAcceleration = "window:disablehardwareacceleration" ConfigKey_WindowMaxTabCacheSize = "window:maxtabcachesize" diff --git a/pkg/wconfig/settingsconfig.go b/pkg/wconfig/settingsconfig.go index 8c03a3317..7009824b1 100644 --- a/pkg/wconfig/settingsconfig.go +++ b/pkg/wconfig/settingsconfig.go @@ -88,7 +88,7 @@ type SettingsType struct { WindowReducedMotion bool `json:"window:reducedmotion,omitempty"` WindowTileGapSize *int64 `json:"window:tilegapsize,omitempty"` WindowShowMenuBar bool `json:"window:showmenubar,omitempty"` - WindowAutoHideTabsBar bool `json:"window:autoHideTabsBar,omitempty"` + WindowAutoHideTabsBar bool `json:"window:autohidetabsbar,omitempty"` WindowNativeTitleBar bool `json:"window:nativetitlebar,omitempty"` WindowDisableHardwareAcceleration bool `json:"window:disablehardwareacceleration,omitempty"` WindowMaxTabCacheSize int `json:"window:maxtabcachesize,omitempty"` From 0da0a7591d599bb1e81057d98971706ad6aec159 Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Sun, 15 Dec 2024 18:24:37 +0530 Subject: [PATCH 3/9] feature/auto-hide-tab-bar updated doc --- docs/docs/config.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/docs/config.mdx b/docs/docs/config.mdx index 2c6f341ef..b5cebb016 100644 --- a/docs/docs/config.mdx +++ b/docs/docs/config.mdx @@ -68,6 +68,7 @@ wsh editconfig | window:magnifiedblockblursecondarypx | int | change the blur in CSS pixels that is applied to the visible portions of non-magnified blocks when a block is magnified (see [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) for more info on how this gets applied) | | window:maxtabcachesize | int | number of tabs to cache. when tabs are cached, switching between them is very fast. (defaults to 10) | | window:showmenubar | bool | set to use the OS-native menu bar (Windows and Linux only, requires app restart) | +| window:autohidetabsbar | bool | auto hide tab bar based on true or false | window:nativetitlebar | bool | set to use the OS-native title bar, rather than the overlay (Windows and Linux only, requires app restart) | | window:disablehardwareacceleration | bool | set to disable Chromium hardware acceleration to resolve graphical bugs (requires app restart) | | telemetry:enabled | bool | set to enable/disable telemetry | From b3720b3719808b3465dbdc6914b4d606d65aace7 Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Mon, 16 Dec 2024 07:59:11 +0530 Subject: [PATCH 4/9] feature/auto-hide-tab-bar refactored code and updated doc --- docs/docs/config.mdx | 2 +- frontend/app/tab/tabbar.tsx | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/docs/config.mdx b/docs/docs/config.mdx index b5cebb016..0b761ccfb 100644 --- a/docs/docs/config.mdx +++ b/docs/docs/config.mdx @@ -68,7 +68,7 @@ wsh editconfig | window:magnifiedblockblursecondarypx | int | change the blur in CSS pixels that is applied to the visible portions of non-magnified blocks when a block is magnified (see [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) for more info on how this gets applied) | | window:maxtabcachesize | int | number of tabs to cache. when tabs are cached, switching between them is very fast. (defaults to 10) | | window:showmenubar | bool | set to use the OS-native menu bar (Windows and Linux only, requires app restart) | -| window:autohidetabsbar | bool | auto hide tab bar based on true or false +| window:autohidetabsbar | bool | auto hide tab bar based on true or false (requires restart) | window:nativetitlebar | bool | set to use the OS-native title bar, rather than the overlay (Windows and Linux only, requires app restart) | | window:disablehardwareacceleration | bool | set to disable Chromium hardware acceleration to resolve graphical bugs (requires app restart) | | telemetry:enabled | bool | set to enable/disable telemetry | diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index cc2be80ac..efe662e86 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -174,7 +174,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const isFullScreen = useAtomValue(atoms.isFullScreen); const settings = useAtomValue(atoms.settingsAtom); - const autoHideTabsBar = useRef(settings["window:autohidetabsbar"]); + const autoHideTabsBar = settings?.["window:autohidetabsbar"] ?? false; let prevDelta: number; let prevDragDirection: string; @@ -185,13 +185,15 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const tabBarHeight = tabBar.clientHeight + 1; if (currentY < 10) tabBar.style.top = '0px'; - if (autoHideTabsBar.current && currentY > tabBarHeight) tabBar.style.top = `-${tabBarHeight}px`; + if (autoHideTabsBar && currentY > tabBarHeight) tabBar.style.top = `-${tabBarHeight}px`; }; useEffect(() => { + if (!autoHideTabsBar) return; + document.addEventListener("mousemove", handleAutoHideTabsBar); return () => document.removeEventListener("mousemove", handleAutoHideTabsBar); - }, []) + }, [autoHideTabsBar]) // Update refs when tabIds change useEffect(() => { @@ -669,7 +671,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { title: "Add Tab", }; return ( -
+
{appMenuButton} {devLabel} From 3fd9d971854e2fb03e5485e7042f6a97e38abf4b Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Mon, 16 Dec 2024 09:18:19 +0530 Subject: [PATCH 5/9] feature/auto-hide-tab-bar fixed background color if theme applied --- frontend/app/tab/tabbar.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index 7a4b6c98a..fb77395e2 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -39,7 +39,9 @@ position: fixed; z-index: 1000; - background: var(--main-bg-color); + background: transparent; + backdrop-filter: blur(10px); + border-radius: 12px; transition: top 0.3s ease; } From 98107e52ca0b8d01ac6264b083b78fe0b013a58c Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Tue, 17 Dec 2024 00:14:22 +0530 Subject: [PATCH 6/9] feature/auto-hide-tab-bar review comment resolved window:autohidetabsbar --> window:autohidetabbar added invisible tab bar above and made it visible on hover using mouseenter and invisible mouseleave docs updated css updated --- docs/docs/config.mdx | 2 +- frontend/app/tab/tabbar.scss | 17 +++++++++----- frontend/app/tab/tabbar.tsx | 42 ++++++++++++++++++++++++++--------- frontend/types/gotypes.d.ts | 2 +- pkg/wconfig/metaconsts.go | 2 +- pkg/wconfig/settingsconfig.go | 2 +- 6 files changed, 46 insertions(+), 21 deletions(-) diff --git a/docs/docs/config.mdx b/docs/docs/config.mdx index 0b761ccfb..090943a51 100644 --- a/docs/docs/config.mdx +++ b/docs/docs/config.mdx @@ -68,7 +68,7 @@ wsh editconfig | window:magnifiedblockblursecondarypx | int | change the blur in CSS pixels that is applied to the visible portions of non-magnified blocks when a block is magnified (see [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) for more info on how this gets applied) | | window:maxtabcachesize | int | number of tabs to cache. when tabs are cached, switching between them is very fast. (defaults to 10) | | window:showmenubar | bool | set to use the OS-native menu bar (Windows and Linux only, requires app restart) | -| window:autohidetabsbar | bool | auto hide tab bar based on true or false (requires restart) +| window:autohidetabbar | bool | show and hide the tab bar automatically when the mouse moves near the top of the window | window:nativetitlebar | bool | set to use the OS-native title bar, rather than the overlay (Windows and Linux only, requires app restart) | | window:disablehardwareacceleration | bool | set to disable Chromium hardware acceleration to resolve graphical bugs (requires app restart) | | telemetry:enabled | bool | set to enable/disable telemetry | diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index fb77395e2..f52bb6899 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -24,13 +24,13 @@ margin-bottom: 20px; } -.tab-bar-wrapper { +.tab-bar-wrapper-always-visible { padding-top: 6px; position: relative; + opacity: 1; } .tab-bar-wrapper-auto-hide { - top: -20px; left: 0; right: 0; @@ -39,15 +39,20 @@ position: fixed; z-index: 1000; + + opacity: 0; background: transparent; backdrop-filter: blur(10px); - border-radius: 12px; + border-radius: 6px; - transition: top 0.3s ease; + transition: opacity 0.3s ease, top 0.3s ease; } -.tab-bar-wrapper, -.tab-bar-wrapper-auto-hide { +.tab-bar-wrapper-auto-hide-visible { + opacity: 1; +} + +.tab-bar-wrapper { user-select: none; display: flex; flex-direction: row; diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index efe662e86..a4d22a929 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -8,6 +8,7 @@ import { deleteLayoutModelForTab } from "@/layout/index"; import { atoms, createTab, getApi, globalStore, isDev, PLATFORM, setActiveTab } from "@/store/global"; import { fireAndForget } from "@/util/util"; import { useAtomValue } from "jotai"; +import clsx from "clsx"; import { OverlayScrollbars } from "overlayscrollbars"; import { createRef, memo, useCallback, useEffect, useRef, useState } from "react"; import { debounce } from "throttle-debounce"; @@ -174,26 +175,45 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const isFullScreen = useAtomValue(atoms.isFullScreen); const settings = useAtomValue(atoms.settingsAtom); - const autoHideTabsBar = settings?.["window:autohidetabsbar"] ?? false; + const autoHideTabBar = settings?.["window:autohidetabbar"] ?? false; let prevDelta: number; let prevDragDirection: string; - const handleAutoHideTabsBar = (event: MouseEvent) => { - const currentY = event.clientY; + const handleAutoHideTabBar = (event: MouseEvent) => { const tabBar = tabbarWrapperRef.current; - const tabBarHeight = tabBar.clientHeight + 1; + const tabBarHeight = tabBar?.clientHeight + 1; - if (currentY < 10) tabBar.style.top = '0px'; - if (autoHideTabsBar && currentY > tabBarHeight) tabBar.style.top = `-${tabBarHeight}px`; + if (event.type === 'mouseenter') { + tabBar.style.top = '0px'; + tabBar.addEventListener("mouseleave", handleAutoHideTabBar); + tabBar.classList.add('tab-bar-wrapper-auto-hide-visible') + } + + if (event.type === 'mouseleave') { + tabBar.style.top = `-${tabBarHeight - 10}px`; + tabBar.removeEventListener("mouseleave", handleAutoHideTabBar); + tabBar.classList.remove('tab-bar-wrapper-auto-hide-visible') + } }; useEffect(() => { - if (!autoHideTabsBar) return; + const tabBar = tabbarWrapperRef.current; + if (!autoHideTabBar) { + tabBar.style.top = '0px'; + return; + } + + const tabBarHeight = tabBar?.clientHeight + 1; + if (autoHideTabBar) { + tabbarWrapperRef.current.style.top = `-${tabBarHeight - 10}px` + } - document.addEventListener("mousemove", handleAutoHideTabsBar); - return () => document.removeEventListener("mousemove", handleAutoHideTabsBar); - }, [autoHideTabsBar]) + tabbarWrapperRef.current.addEventListener("mouseenter", handleAutoHideTabBar); + return () => { + tabbarWrapperRef.current.removeEventListener("mouseenter", handleAutoHideTabBar); + } + }, [autoHideTabBar]) // Update refs when tabIds change useEffect(() => { @@ -671,7 +691,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { title: "Add Tab", }; return ( -
+
{appMenuButton} {devLabel} diff --git a/frontend/types/gotypes.d.ts b/frontend/types/gotypes.d.ts index affb5a501..b098af8d8 100644 --- a/frontend/types/gotypes.d.ts +++ b/frontend/types/gotypes.d.ts @@ -649,7 +649,7 @@ declare global { "window:reducedmotion"?: boolean; "window:tilegapsize"?: number; "window:showmenubar"?: boolean; - "window:autohidetabsbar"?: boolean; + "window:autohidetabbar"?: boolean; "window:nativetitlebar"?: boolean; "window:disablehardwareacceleration"?: boolean; "window:maxtabcachesize"?: number; diff --git a/pkg/wconfig/metaconsts.go b/pkg/wconfig/metaconsts.go index 850ed0d00..62fae1ab1 100644 --- a/pkg/wconfig/metaconsts.go +++ b/pkg/wconfig/metaconsts.go @@ -61,7 +61,7 @@ const ( ConfigKey_WindowReducedMotion = "window:reducedmotion" ConfigKey_WindowTileGapSize = "window:tilegapsize" ConfigKey_WindowShowMenuBar = "window:showmenubar" - ConfigKey_WindowAutoHideTabsBar = "window:autohidetabsbar" + ConfigKey_WindowAutoHideTabBar = "window:autohidetabbar" ConfigKey_WindowNativeTitleBar = "window:nativetitlebar" ConfigKey_WindowDisableHardwareAcceleration = "window:disablehardwareacceleration" ConfigKey_WindowMaxTabCacheSize = "window:maxtabcachesize" diff --git a/pkg/wconfig/settingsconfig.go b/pkg/wconfig/settingsconfig.go index 7009824b1..721130318 100644 --- a/pkg/wconfig/settingsconfig.go +++ b/pkg/wconfig/settingsconfig.go @@ -88,7 +88,7 @@ type SettingsType struct { WindowReducedMotion bool `json:"window:reducedmotion,omitempty"` WindowTileGapSize *int64 `json:"window:tilegapsize,omitempty"` WindowShowMenuBar bool `json:"window:showmenubar,omitempty"` - WindowAutoHideTabsBar bool `json:"window:autohidetabsbar,omitempty"` + WindowAutoHideTabBar bool `json:"window:autohidetabbar,omitempty"` WindowNativeTitleBar bool `json:"window:nativetitlebar,omitempty"` WindowDisableHardwareAcceleration bool `json:"window:disablehardwareacceleration,omitempty"` WindowMaxTabCacheSize int `json:"window:maxtabcachesize,omitempty"` From 3223c8de4c9f35de4a80716d41cc5d864acb08fe Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Tue, 17 Dec 2024 00:19:36 +0530 Subject: [PATCH 7/9] feature/auto-hide-tab-bar refactored --- frontend/app/tab/tabbar.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index a4d22a929..576c230bc 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -210,9 +210,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { } tabbarWrapperRef.current.addEventListener("mouseenter", handleAutoHideTabBar); - return () => { - tabbarWrapperRef.current.removeEventListener("mouseenter", handleAutoHideTabBar); - } + return () => tabbarWrapperRef.current.removeEventListener("mouseenter", handleAutoHideTabBar); }, [autoHideTabBar]) // Update refs when tabIds change From bce3106141c0e6b6c70b7f2a806b347c4ed7efa1 Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Thu, 19 Dec 2024 19:30:21 +0530 Subject: [PATCH 8/9] fixed issue for darwin title bar overlapping feature/auto-hide-tab-bar fixed issue of window title bar feature/auto-hide-tab-bar fixed issue in non hide mode --- frontend/app/block/block.scss | 7 +++++++ frontend/app/block/blockframe.tsx | 5 +++++ frontend/app/tab/tabbar.scss | 5 +++-- 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss index 9ad0482d6..41698a14b 100644 --- a/frontend/app/block/block.scss +++ b/frontend/app/block/block.scss @@ -2,6 +2,13 @@ // SPDX-License-Identifier: Apache-2.0 @use "../mixins.scss"; +@use "../tab/tabbar.scss" as tabbar; + +.darwin:not(.fullscreen) .block.block-frame-default .block-frame-default-header { + .window-drag.left { + width: tabbar.$darwin-not-fullscreen-indent; + } +} .block { display: flex; diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx index cf17849d5..c5439d7d8 100644 --- a/frontend/app/block/blockframe.tsx +++ b/frontend/app/block/blockframe.tsx @@ -40,6 +40,7 @@ import clsx from "clsx"; import * as jotai from "jotai"; import * as React from "react"; import { BlockFrameProps } from "./blocktypes"; +import { WindowDrag } from "../element/windowdrag"; const NumActiveConnColors = 8; @@ -181,9 +182,12 @@ const BlockFrame_Header = ({ const preIconButton = util.useAtomValueSafe(viewModel?.preIconButton); let headerTextUnion = util.useAtomValueSafe(viewModel?.viewText); const magnified = jotai.useAtomValue(nodeModel.isMagnified); + const settings = jotai.useAtomValue(atoms.settingsAtom); + const autoHideTabBar = settings?.["window:autohidetabbar"] ?? false; const prevMagifiedState = React.useRef(magnified); const manageConnection = util.useAtomValueSafe(viewModel?.manageConnection); const dragHandleRef = preview ? null : nodeModel.dragHandleRef; + const draggerLeftRef = React.useRef(null); const connName = blockData?.meta?.connection; const connStatus = util.useAtomValueSafe(getConnStatusAtom(connName)); const wshProblem = connName && !connStatus?.wshenabled && connStatus?.status == "connected"; @@ -252,6 +256,7 @@ const BlockFrame_Header = ({ return (
+ {preIconButtonElem}
{viewIconElem} diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index f52bb6899..bfc1f6c07 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -3,14 +3,15 @@ @use "./../theme.scss"; +$darwin-not-fullscreen-indent: 74px; + .tab-bar-wrapper { --default-indent: 10px; - --darwin-not-fullscreen-indent: 74px; } .darwin:not(.fullscreen) .tab-bar-wrapper { .window-drag.left { - width: var(--darwin-not-fullscreen-indent); + width: $darwin-not-fullscreen-indent; } } From 1ef2d685c666a3e2d31a3f7e49b72d852cbf2475 Mon Sep 17 00:00:00 2001 From: Ritik Ranjan Date: Thu, 19 Dec 2024 19:49:45 +0530 Subject: [PATCH 9/9] feature/auto-hide-tab-bar review changes --- frontend/app/block/block.scss | 8 +++++--- frontend/app/block/blockframe.tsx | 3 +-- frontend/app/tab/tabbar.scss | 9 ++++++++- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/frontend/app/block/block.scss b/frontend/app/block/block.scss index 41698a14b..4ef33720d 100644 --- a/frontend/app/block/block.scss +++ b/frontend/app/block/block.scss @@ -4,9 +4,11 @@ @use "../mixins.scss"; @use "../tab/tabbar.scss" as tabbar; -.darwin:not(.fullscreen) .block.block-frame-default .block-frame-default-header { - .window-drag.left { - width: tabbar.$darwin-not-fullscreen-indent; +.darwin:not(.fullscreen) { + .block.block-frame-default .block-frame-default-header { + .window-drag.left { + width: tabbar.$darwin-not-fullscreen-indent; + } } } diff --git a/frontend/app/block/blockframe.tsx b/frontend/app/block/blockframe.tsx index c5439d7d8..15d922af1 100644 --- a/frontend/app/block/blockframe.tsx +++ b/frontend/app/block/blockframe.tsx @@ -187,7 +187,6 @@ const BlockFrame_Header = ({ const prevMagifiedState = React.useRef(magnified); const manageConnection = util.useAtomValueSafe(viewModel?.manageConnection); const dragHandleRef = preview ? null : nodeModel.dragHandleRef; - const draggerLeftRef = React.useRef(null); const connName = blockData?.meta?.connection; const connStatus = util.useAtomValueSafe(getConnStatusAtom(connName)); const wshProblem = connName && !connStatus?.wshenabled && connStatus?.status == "connected"; @@ -256,7 +255,7 @@ const BlockFrame_Header = ({ return (
- + {preIconButtonElem}
{viewIconElem} diff --git a/frontend/app/tab/tabbar.scss b/frontend/app/tab/tabbar.scss index bfc1f6c07..888b7d61d 100644 --- a/frontend/app/tab/tabbar.scss +++ b/frontend/app/tab/tabbar.scss @@ -3,6 +3,7 @@ @use "./../theme.scss"; +// 74px accounts for the macOS window controls and spacing in non-fullscreen mode $darwin-not-fullscreen-indent: 74px; .tab-bar-wrapper { @@ -43,10 +44,16 @@ $darwin-not-fullscreen-indent: 74px; opacity: 0; background: transparent; - backdrop-filter: blur(10px); border-radius: 6px; transition: opacity 0.3s ease, top 0.3s ease; + + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); + + @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { + background: rgb(from var(--block-bg-color) r g b / 0.8); + } } .tab-bar-wrapper-auto-hide-visible {