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

retain hover effect on mouse leave while still dragging

Browse Source
This commit is contained in:
Red Adaya 2024-12-10 13:20:03 +08:00
parent 477fc03f9a
commit 39e9a05720
3 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,8 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.separator { .separator,
.right-separator {
position: absolute; position: absolute;
left: 0px; left: 0px;
width: 1px; width: 1px;
@ -25,8 +26,14 @@
opacity: 1; opacity: 1;
} }
.right-separator {
left: auto;
right: 0px;
}
&.hover { &.hover {
.separator, .separator,
.right-separator,
& + .tab .separator { & + .tab .separator {
display: none; display: none;
} }
@ -103,7 +110,8 @@
} }
// Only apply hover effects when not in nohover mode. This prevents the previously-hovered tab from remaining hovered while a tab view is not mounted. // Only apply hover effects when not in nohover mode. This prevents the previously-hovered tab from remaining hovered while a tab view is not mounted.
body:not(.nohover) .tab:hover { body:not(.nohover) .tab:hover,
body:not(.nohover) .is-dragging {
.tab-inner { .tab-inner {
border-color: transparent; border-color: transparent;
background: rgb(from var(--main-text-color) r g b / 0.07); background: rgb(from var(--main-text-color) r g b / 0.07);

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

@ -20,7 +20,6 @@ const adjacentTabsAtom = atom<Set<string>>(new Set<string>());
interface TabProps { interface TabProps {
id: string; id: string;
isActive: boolean; isActive: boolean;
isFirst: boolean;
isBeforeActive: boolean; isBeforeActive: boolean;
draggingId: string; draggingId: string;
tabWidth: number; tabWidth: number;
@ -33,8 +32,6 @@ interface TabProps {
onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; onMouseDown: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onLoaded: () => void; onLoaded: () => void;
onPinChange: () => void; onPinChange: () => void;
// onMouseEnter: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
// onMouseLeave: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
} }
const Tab = memo( const Tab = memo(
@ -43,7 +40,6 @@ const Tab = memo(
{ {
id, id,
isActive, isActive,
isFirst,
isPinned, isPinned,
isBeforeActive, isBeforeActive,
draggingId, draggingId,
@ -55,8 +51,6 @@ const Tab = memo(
onClick, onClick,
onClose, onClose,
onMouseDown, onMouseDown,
// onMouseEnter,
// onMouseLeave,
onPinChange, onPinChange,
}, },
ref ref
@ -293,7 +287,7 @@ const Tab = memo(
console.log("entered else ?????????????????????????", tabsSwapped); console.log("entered else ?????????????????????????", tabsSwapped);
reset(); reset();
} }
}, [id, tabIds, isFirst, isActive, draggingId, tabsSwapped]); }, [id, tabIds, isActive, draggingId, tabsSwapped]);
const handleMouseEnter = useCallback(() => { const handleMouseEnter = useCallback(() => {
if (isActive) return; if (isActive) return;
@ -331,7 +325,7 @@ const Tab = memo(
ref={tabRef} ref={tabRef}
className={clsx("tab", { className={clsx("tab", {
active: isActive, active: isActive,
isDragging: draggingId === id, "is-dragging": draggingId === id,
"before-active": isBeforeActive, "before-active": isBeforeActive,
"new-tab": isNew, "new-tab": isNew,
})} })}
@ -372,6 +366,7 @@ const Tab = memo(
</Button> </Button>
)} )}
</div> </div>
{tabIds[tabIds.length - 1] === id && <div className="right-separator"></div>}
</div> </div>
); );
} }

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

@ -653,7 +653,6 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
key={tabId} key={tabId}
ref={tabRefs.current[index]} ref={tabRefs.current[index]}
id={tabId} id={tabId}
isFirst={tabIds[0]}
isPinned={isPinned} isPinned={isPinned}
onClick={() => handleSelectTab(tabId)} onClick={() => handleSelectTab(tabId)}
isActive={activeTabId === tabId} isActive={activeTabId === tabId}