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

refactor

Browse Source
This commit is contained in:
Red Adaya 2024-11-26 14:47:11 +08:00
parent 1a09c4ae1c
commit 2e43d01e6d
3 changed files with 5 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,7 +17,7 @@
&::after {
content: "";
position: absolute;
right: 0;
left: 0;
width: 1px;
height: 14px;
border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2);
@ -32,6 +32,7 @@
}
&:hover {
& + .tab::after,
&::after {
content: none;
}
@ -59,14 +60,13 @@
color: var(--main-text-color);
}
&+.tab::after,
&::after {
content: none;
}
}
&.before-active:after,
&.before-hovered:after,
&:last-child::after {
&:first-child::after {
content: none;
}

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

@ -19,7 +19,6 @@ interface TabProps {
active: boolean;
isFirst: boolean;
isBeforeActive: boolean;
isBeforeHovered: boolean;
isDragging: boolean;
tabWidth: number;
isNew: boolean;
@ -27,8 +26,6 @@ interface TabProps {
onClose: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null) => void;
onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onLoaded: () => void;
onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}
const Tab = React.memo(
@ -39,7 +36,6 @@ const Tab = React.memo(
active,
isFirst,
isBeforeActive,
isBeforeHovered,
isDragging,
tabWidth,
isNew,
@ -47,8 +43,6 @@ const Tab = React.memo(
onSelect,
onClose,
onDragStart,
onMouseEnter,
onMouseLeave,
},
ref
) => {
@ -197,14 +191,11 @@ const Tab = React.memo(
active,
isDragging,
"before-active": isBeforeActive,
"before-hovered": isBeforeHovered,
"new-tab": isNew,
})}
onMouseDown={onDragStart}
onClick={onSelect}
onContextMenu={handleContextMenu}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}
data-tab-id={id}
>
<div className="tab-inner">

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

@ -106,7 +106,7 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
// const [scrollable, setScrollable] = useState(false);
// const [tabWidth, setTabWidth] = useState(TAB_DEFAULT_WIDTH);
const [newTabId, setNewTabId] = useState<string | null>(null);
const [hoveredTabId, setHoveredTabId] = useState<string | null>(null);
// const [hoveredTabId, setHoveredTabId] = useState<string | null>(null);
const tabbarWrapperRef = useRef<HTMLDivElement>(null);
const tabBarRef = useRef<HTMLDivElement>(null);
@ -520,24 +520,10 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
});
}, []);
const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement, MouseEvent>, tabId: string) => {
event.stopPropagation();
setHoveredTabId(tabId);
};
const handleMouseLeave = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation();
setHoveredTabId(null);
};
const isBeforeActive = (tabId: string) => {
return tabIds.indexOf(tabId) === tabIds.indexOf(activeTabId) - 1;
};
const isBeforeHovered = (tabId: string) => {
return tabIds.indexOf(tabId) === tabIds.indexOf(hoveredTabId) - 1;
};
function onEllipsisClick() {
getApi().showContextMenu();
}
@ -575,12 +561,9 @@ const TabBar = React.memo(({ workspace }: TabBarProps) => {
onClose={(event) => handleCloseTab(event, tabId)}
onLoaded={() => handleTabLoaded(tabId)}
isBeforeActive={isBeforeActive(tabId)}
isBeforeHovered={isBeforeHovered(tabId)}
isDragging={draggingTab === tabId}
tabWidth={tabWidthRef.current}
isNew={tabId === newTabId}
onMouseEnter={(e) => handleMouseEnter(e, tabId)}
onMouseLeave={handleMouseLeave}
/>
);
})}