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

more on dynamically hiding separators

Browse Source
This commit is contained in:
Red Adaya 2024-12-04 08:45:15 +08:00
parent 1fb76e7749
commit 993249583c
3 changed files with 20 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/app/tab/tab.scss
View File

@ -16,7 +16,7 @@
.separator {
position: absolute;
right: 0;
left: 0px;
width: 1px;
height: 14px;
border-right-width: 1px;
@ -33,11 +33,6 @@
}
&:hover {
// & + .tab::after,
// &::after {
// content: none;
// }
.tab-inner {
border-color: transparent;
background: rgb(from var(--main-text-color) r g b / 0.07);
@ -60,17 +55,8 @@
.name {
color: var(--main-text-color);
}
// &+.tab::after,
// &::after {
// content: none;
// }
}
// &:first-child::after {
// content: none;
// }
.name {
position: absolute;
top: 50%;

22
frontend/app/tab/tab.tsx
View File

@ -7,8 +7,7 @@ import * as services from "@/store/services";
import * as WOS from "@/store/wos";
import { clsx } from "clsx";
import { Atom, useAtomValue } from "jotai";
import * as React from "react";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
import { atoms, globalStore, refocusNode } from "@/app/store/global";
import { RpcApi } from "@/app/store/wshclientapi";
@ -31,7 +30,7 @@ interface TabProps {
onLoaded: () => void;
}
const Tab = React.memo(
const Tab = memo(
forwardRef<HTMLDivElement, TabProps>(
(
{
@ -194,6 +193,18 @@ const Tab = React.memo(
ContextMenuModel.showContextMenu(menu, e);
}
const showSeparator = useCallback(
(id) => {
const idx = tabIds.indexOf(id);
const found = tabIndicesMoved.find((i, ii) => ii !== 0 && i === idx) === undefined;
console.log("idx", id, ":", idx, ":", found);
return found;
},
[tabIndicesMoved]
);
console.log("showSeparator(id)=====", id, showSeparator(id));
return (
<div
ref={tabRef}
@ -208,6 +219,7 @@ const Tab = React.memo(
onContextMenu={handleContextMenu}
data-tab-id={id}
>
{!isFirst && showSeparator(id) && <div className="separator"></div>}
<div className="tab-inner">
<div
ref={editableRef}
@ -218,13 +230,13 @@ const Tab = React.memo(
onKeyDown={handleKeyDown}
suppressContentEditableWarning={true}
>
{tabData?.name}
{/* {tabData?.name} */}
{id.substring(id.length - 3)}
</div>
<Button className="ghost grey close" onClick={onClose} onMouseDown={handleMouseDownOnClose}>
<i className="fa fa-solid fa-xmark" />
</Button>
</div>
<div className="separator"></div>
</div>
);
}

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

@ -17,12 +17,6 @@ import "./tabbar.scss";
import { UpdateStatusBanner } from "./updatebanner";
import { WorkspaceSwitcher } from "./workspaceswitcher";
// export class TabBarModel {
// draggedTabIndex: PrimitiveAtom<number>;
// constructor
// }
const TAB_DEFAULT_WIDTH = 130;
const TAB_MIN_WIDTH = 100;
const DRAGGER_RIGHT_MIN_WIDTH = 74;
@ -109,7 +103,6 @@ const ConfigErrorIcon = ({ buttonRef }: { buttonRef: React.RefObject<HTMLElement
};
const TabBar = memo(({ workspace }: TabBarProps) => {
// const [tabIds, setTabIds] = useState<string[]>([]);
const [dragStartPositions, setDragStartPositions] = useState<number[]>([]);
const [draggingTab, setDraggingTab] = useState<string>();
const [tabsLoaded, setTabsLoaded] = useState({});
@ -421,8 +414,8 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
if (currentIndexOfDraggingTab !== -1) {
tabIds.splice(tabIndex, 1);
}
console.log("tabIndex=====", tabIndex);
console.log("newTabIndex=====", newTabIndex);
// Track indices that have been moved
if (getDragDirection(currentX) === "+") {
setTabIndicesMoved([tabIndex, newTabIndex, newTabIndex + 1]);
} else if (getDragDirection(currentX) === "-") {
@ -440,22 +433,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
}
});
// debounce(30, () => {
// const prevRightAdjacentTab = tabRefs.current[draggingTabDataRef.current.rightAdjacentTabIndex]?.current;
// // prevRightAdjacentTab.style.setProperty("--hide-separator", "1");
// // prevRightAdjacentTab.style.borderColor = "rgb(from var(--main-text-color) r g b / 0.2)";
// })();
// // Handle right adjacent tab's separator
// const rightAdjacentIndex = newTabIndex + 1;
// if (rightAdjacentIndex < tabIds.length) {
// const rightAdjacentTab = tabRefs.current[rightAdjacentIndex]?.current;
// if (rightAdjacentTab) {
// rightAdjacentTab.style.borderColor = "transparent";
// }
// }
// draggingTabDataRef.current.rightAdjacentTabIndex = rightAdjacentIndex;
draggingTabDataRef.current.tabIndex = newTabIndex;
}
};
@ -495,12 +472,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
setDraggingTab(null);
}
// const rightAdjacentTab = tabRefs.current[draggingTabDataRef.current.rightAdjacentTabIndex]?.current;
// // console.log("prevRightAdjacentTab=======", prevRightAdjacentTab);
// // if (prevRightAdjacentTab) {
// rightAdjacentTab.style.removeProperty("--hide-separator");
// }
document.removeEventListener("mouseup", handleMouseUp);
document.removeEventListener("mousemove", handleMouseMove);
draggingRemovedRef.current = false;
@ -590,8 +561,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
</div>
) : undefined;
// console.log("tabIds==========", tabIds);
return (
<div ref={tabbarWrapperRef} className="tab-bar-wrapper">
<WindowDrag ref={draggerLeftRef} className="left" />