Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-07 19:28:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

feature/auto-hide-tab-bar review comment resolved

Browse Source 
window:autohidetabsbar --> window:autohidetabbar
added invisible tab bar above and made it visible on hover using
mouseenter and invisible mouseleave
docs updated
css updated
This commit is contained in:
Ritik Ranjan 2024-12-17 00:14:22 +05:30 committed by Ritik Ranjan
parent 3fd9d97185
commit 98107e52ca
6 changed files with 46 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/docs/config.mdx
View File

@ -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 |

17
frontend/app/tab/tabbar.scss
View File

@ -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;

42
frontend/app/tab/tabbar.tsx
View File

@ -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;
}
document.addEventListener("mousemove", handleAutoHideTabsBar);
return () => document.removeEventListener("mousemove", handleAutoHideTabsBar);
}, [autoHideTabsBar])
const tabBarHeight = tabBar?.clientHeight + 1;
if (autoHideTabBar) {
tabbarWrapperRef.current.style.top = `-${tabBarHeight - 10}px`
}
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 (
<div ref={tabbarWrapperRef} className={`tab-bar-wrapper${autoHideTabsBar ? '-auto-hide' : ''}`}>
<div ref={tabbarWrapperRef} className={clsx('tab-bar-wrapper', {'tab-bar-wrapper-auto-hide': autoHideTabBar, 'tab-bar-wrapper-always-visible': !autoHideTabBar})}>
<WindowDrag ref={draggerLeftRef} className="left" />
{appMenuButton}
{devLabel}

2
frontend/types/gotypes.d.ts vendored
View File

@ -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;

2
pkg/wconfig/metaconsts.go
View File

@ -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"

2
pkg/wconfig/settingsconfig.go
View File

@ -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"`