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

Hack to prevent tabbar flicker when switching tabs (#1379)

Browse Source
This commit is contained in:
Evan Simkowitz 2024-12-03 23:08:06 -05:00 committed by GitHub
parent a72d3e5c7a
commit 29e8929f91
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 124 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/app/store/global.ts
View File

@ -620,8 +620,13 @@ function removeNotification(id: string) {
}); });
} }
async function createTab(): Promise<void> { function createTab() {
await getApi().createTab(); getApi().createTab();
}
function setActiveTab(tabId: string) {
document.body.classList.add("nohover");
getApi().setActiveTab(tabId);
} }
export { export {
@ -655,6 +660,7 @@ export {
removeFlashError, removeFlashError,
removeNotification, removeNotification,
removeNotificationById, removeNotificationById,
setActiveTab,
setNodeFocus, setNodeFocus,
setPlatform, setPlatform,
subscribeToConnEvents, subscribeToConnEvents,

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

@ -31,18 +31,6 @@
border-radius: 6px; border-radius: 6px;
} }
&:hover {
& + .tab::after,
&::after {
content: none;
}
.tab-inner {
border-color: transparent;
background: rgb(from var(--main-text-color) r g b / 0.07);
}
}
&.animate { &.animate {
transition: transition:
transform 0.3s ease, transform 0.3s ease,
@ -60,7 +48,7 @@
color: var(--main-text-color); color: var(--main-text-color);
} }
&+.tab::after, & + .tab::after,
&::after { &::after {
content: none; content: none;
} }
@ -107,12 +95,22 @@
cursor: pointer; cursor: pointer;
z-index: var(--zindex-tab-name); z-index: var(--zindex-tab-name);
padding: 1px 2px; padding: 1px 2px;
transition: none !important;
}
}
body:not(.nohover) .tab:hover {
& + .tab::after,
&::after {
content: none;
} }
&:hover .close { .tab-inner {
border-color: transparent;
background: rgb(from var(--main-text-color) r g b / 0.07);
}
.close {
visibility: visible; visibility: visible;
backdrop-filter: blur(3px);
&:hover { &:hover {
color: var(--main-text-color); color: var(--main-text-color);
} }

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

@ -5,7 +5,7 @@ import { Button } from "@/app/element/button";
import { modalsModel } from "@/app/store/modalmodel"; import { modalsModel } from "@/app/store/modalmodel";
import { WindowDrag } from "@/element/windowdrag"; import { WindowDrag } from "@/element/windowdrag";
import { deleteLayoutModelForTab } from "@/layout/index"; import { deleteLayoutModelForTab } from "@/layout/index";
import { atoms, createTab, getApi, isDev, PLATFORM } from "@/store/global"; import { atoms, createTab, getApi, isDev, PLATFORM, setActiveTab } from "@/store/global";
import { fireAndForget } from "@/util/util"; import { fireAndForget } from "@/util/util";
import { useAtomValue } from "jotai"; import { useAtomValue } from "jotai";
import { OverlayScrollbars } from "overlayscrollbars"; import { OverlayScrollbars } from "overlayscrollbars";
@ -485,7 +485,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
const handleSelectTab = (tabId: string) => { const handleSelectTab = (tabId: string) => {
if (!draggingTabDataRef.current.dragged) { if (!draggingTabDataRef.current.dragged) {
getApi().setActiveTab(tabId); setActiveTab(tabId);
} }
}; };

5
frontend/wave.ts
View File

@ -87,6 +87,11 @@ async function initWaveWrap(initOpts: WaveInitOpts) {
async function reinitWave() { async function reinitWave() {
console.log("Reinit Wave"); console.log("Reinit Wave");
getApi().sendLog("Reinit Wave"); getApi().sendLog("Reinit Wave");
requestAnimationFrame(() => {
setTimeout(() => {
document.body.classList.remove("nohover");
}, 50);
});
const client = await WOS.reloadWaveObject<Client>(WOS.makeORef("client", savedInitOpts.clientId)); const client = await WOS.reloadWaveObject<Client>(WOS.makeORef("client", savedInitOpts.clientId));
const waveWindow = await WOS.reloadWaveObject<WaveWindow>(WOS.makeORef("window", savedInitOpts.windowId)); const waveWindow = await WOS.reloadWaveObject<WaveWindow>(WOS.makeORef("window", savedInitOpts.windowId));
const ws = await WOS.reloadWaveObject<Workspace>(WOS.makeORef("workspace", waveWindow.workspaceid)); const ws = await WOS.reloadWaveObject<Workspace>(WOS.makeORef("workspace", waveWindow.workspaceid));