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

feature/auto-hide-tab-bar review changes

Browse Source
This commit is contained in:
Ritik Ranjan 2024-12-19 19:49:45 +05:30
parent bce3106141
commit 1ef2d685c6
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/app/block/block.scss
View File

@ -4,9 +4,11 @@
@use "../mixins.scss"; @use "../mixins.scss";
@use "../tab/tabbar.scss" as tabbar; @use "../tab/tabbar.scss" as tabbar;
.darwin:not(.fullscreen) .block.block-frame-default .block-frame-default-header { .darwin:not(.fullscreen) {
.window-drag.left { .block.block-frame-default .block-frame-default-header {
width: tabbar.$darwin-not-fullscreen-indent; .window-drag.left {
width: tabbar.$darwin-not-fullscreen-indent;
}
} }
} }

3
frontend/app/block/blockframe.tsx
View File

@ -187,7 +187,6 @@ const BlockFrame_Header = ({
const prevMagifiedState = React.useRef(magnified); const prevMagifiedState = React.useRef(magnified);
const manageConnection = util.useAtomValueSafe(viewModel?.manageConnection); const manageConnection = util.useAtomValueSafe(viewModel?.manageConnection);
const dragHandleRef = preview ? null : nodeModel.dragHandleRef; const dragHandleRef = preview ? null : nodeModel.dragHandleRef;
const draggerLeftRef = React.useRef<HTMLDivElement>(null);
const connName = blockData?.meta?.connection; const connName = blockData?.meta?.connection;
const connStatus = util.useAtomValueSafe(getConnStatusAtom(connName)); const connStatus = util.useAtomValueSafe(getConnStatusAtom(connName));
const wshProblem = connName && !connStatus?.wshenabled && connStatus?.status == "connected"; const wshProblem = connName && !connStatus?.wshenabled && connStatus?.status == "connected";
@ -256,7 +255,7 @@ const BlockFrame_Header = ({
return ( return (
<div className="block-frame-default-header" ref={dragHandleRef} onContextMenu={onContextMenu}> <div className="block-frame-default-header" ref={dragHandleRef} onContextMenu={onContextMenu}>
<WindowDrag ref={draggerLeftRef} className={clsx({ 'left': autoHideTabBar })} /> <WindowDrag className={clsx({ 'left': autoHideTabBar })} />
{preIconButtonElem} {preIconButtonElem}
<div className="block-frame-default-header-iconview"> <div className="block-frame-default-header-iconview">
{viewIconElem} {viewIconElem}

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

@ -3,6 +3,7 @@
@use "./../theme.scss"; @use "./../theme.scss";
// 74px accounts for the macOS window controls and spacing in non-fullscreen mode
$darwin-not-fullscreen-indent: 74px; $darwin-not-fullscreen-indent: 74px;
.tab-bar-wrapper { .tab-bar-wrapper {
@ -43,10 +44,16 @@ $darwin-not-fullscreen-indent: 74px;
opacity: 0; opacity: 0;
background: transparent; background: transparent;
backdrop-filter: blur(10px);
border-radius: 6px; border-radius: 6px;
transition: opacity 0.3s ease, top 0.3s ease; 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 { .tab-bar-wrapper-auto-hide-visible {