From 07b1e143eb0013f5db1978853f3648ac2be7100d Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Tue, 3 Dec 2024 20:00:19 -0800 Subject: [PATCH 1/3] Hack to prevent tabbar flicker when switching tabs --- emain/emain-window.ts | 5 + frontend/app/store/global.ts | 11 +- frontend/app/tab/tab.scss | 220 +++++++++++++++++------------------ frontend/app/tab/tabbar.tsx | 4 +- frontend/wave.ts | 5 + 5 files changed, 130 insertions(+), 115 deletions(-) diff --git a/emain/emain-window.ts b/emain/emain-window.ts index 85e1334e57..19d24dced9 100644 --- a/emain/emain-window.ts +++ b/emain/emain-window.ts @@ -380,6 +380,11 @@ export class WaveBrowserWindow extends BaseWindow { return; } if (activeTabView.isOnScreen()) { + activeTabView.webContents.sendInputEvent({ + type: "mouseEnter", + x: 0, + y: 0, + }); activeTabView.setBounds({ x: 0, y: 0, diff --git a/frontend/app/store/global.ts b/frontend/app/store/global.ts index 0ddcc35b57..5dc1c8b972 100644 --- a/frontend/app/store/global.ts +++ b/frontend/app/store/global.ts @@ -620,8 +620,14 @@ function removeNotification(id: string) { }); } -async function createTab(): Promise { - await getApi().createTab(); +function createTab() { + document.body.classList.add("nohover"); + getApi().createTab(); +} + +function setActiveTab(tabId: string) { + document.body.classList.add("nohover"); + getApi().setActiveTab(tabId); } export { @@ -655,6 +661,7 @@ export { removeFlashError, removeNotification, removeNotificationById, + setActiveTab, setNodeFocus, setPlatform, subscribeToConnEvents, diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss index d12f19b494..f5b8ecc27e 100644 --- a/frontend/app/tab/tab.scss +++ b/frontend/app/tab/tab.scss @@ -2,134 +2,132 @@ // SPDX-License-Identifier: Apache-2.0 .tab { + position: absolute; + width: 130px; + height: calc(100% - 1px); + padding: 6px 0px 0px; + box-sizing: border-box; + font-weight: bold; + color: var(--secondary-text-color); + opacity: 0; + display: flex; + align-items: center; + justify-content: center; + + &::after { + content: ""; position: absolute; - width: 130px; - height: calc(100% - 1px); - padding: 6px 0px 0px; - box-sizing: border-box; - font-weight: bold; - color: var(--secondary-text-color); - opacity: 0; - display: flex; - align-items: center; - justify-content: center; - - &::after { - content: ""; - position: absolute; - left: 0; - width: 1px; - height: 14px; - border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2); - } - + left: 0; + width: 1px; + height: 14px; + border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2); + } + + .tab-inner { + position: relative; + width: calc(100% - 6px); + height: 100%; + white-space: nowrap; + border-radius: 6px; + } + + &.animate { + transition: + transform 0.3s ease, + background-color 0.3s ease-in-out; + } + + &.active { .tab-inner { - position: relative; - width: calc(100% - 6px); - height: 100%; - white-space: nowrap; - border-radius: 6px; + border-color: transparent; + border-radius: 6px; + background: rgb(from var(--main-text-color) r g b / 0.07); } - &:hover { - & + .tab::after, - &::after { - content: none; - } - - .tab-inner { - border-color: transparent; - background: rgb(from var(--main-text-color) r g b / 0.07); - } - } - - &.animate { - transition: - transform 0.3s ease, - background-color 0.3s ease-in-out; + .name { + color: var(--main-text-color); } - &.active { - .tab-inner { - border-color: transparent; - border-radius: 6px; - background: rgb(from var(--main-text-color) r g b / 0.07); - } - - .name { - color: var(--main-text-color); - } - - &+.tab::after, - &::after { - content: none; - } + & + .tab::after, + &::after { + content: none; } + } - &:first-child::after { - content: none; - } - - .name { - position: absolute; - top: 50%; - left: 50%; - transform: translate3d(-50%, -50%, 0); - user-select: none; - z-index: var(--zindex-tab-name); - font-size: 11px; - font-weight: 500; - text-shadow: 0px 0px 4px rgb(from var(--main-bg-color) r g b / 0.25); - overflow: hidden; - width: calc(100% - 10px); - text-overflow: ellipsis; - text-align: center; - - &.focused { - outline: none; - border: 1px solid rgb(from var(--main-text-color) r g b / 0.179); - padding: 2px 6px; - border-radius: 2px; - } - } + &:first-child::after { + content: none; + } - .close { - visibility: hidden; - position: absolute; - top: 50%; - right: 4px; - transform: translate3d(0, -50%, 0); - width: 20px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - z-index: var(--zindex-tab-name); - padding: 1px 2px; + .name { + position: absolute; + top: 50%; + left: 50%; + transform: translate3d(-50%, -50%, 0); + user-select: none; + z-index: var(--zindex-tab-name); + font-size: 11px; + font-weight: 500; + text-shadow: 0px 0px 4px rgb(from var(--main-bg-color) r g b / 0.25); + overflow: hidden; + width: calc(100% - 10px); + text-overflow: ellipsis; + text-align: center; + + &.focused { + outline: none; + border: 1px solid rgb(from var(--main-text-color) r g b / 0.179); + padding: 2px 6px; + border-radius: 2px; } + } - &:hover .close { - visibility: visible; - backdrop-filter: blur(3px); + .close { + visibility: hidden; + position: absolute; + top: 50%; + right: 4px; + transform: translate3d(0, -50%, 0); + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + z-index: var(--zindex-tab-name); + padding: 1px 2px; + transition: none !important; + } +} - &:hover { - color: var(--main-text-color); - } +body:not(.nohover) .tab:hover { + & + .tab::after, + &::after { + content: none; + } + + .tab-inner { + border-color: transparent; + background: rgb(from var(--main-text-color) r g b / 0.07); + } + .close { + visibility: visible; + &:hover { + color: var(--main-text-color); } + } } @keyframes expandWidthAndFadeIn { - from { - width: var(--initial-tab-width); - opacity: 0; - } - to { - width: var(--final-tab-width); - opacity: 1; - } + from { + width: var(--initial-tab-width); + opacity: 0; + } + to { + width: var(--final-tab-width); + opacity: 1; + } } .tab.new-tab { - animation: expandWidthAndFadeIn 0.1s forwards; + animation: expandWidthAndFadeIn 0.1s forwards; } diff --git a/frontend/app/tab/tabbar.tsx b/frontend/app/tab/tabbar.tsx index 04d387452c..119bba05ca 100644 --- a/frontend/app/tab/tabbar.tsx +++ b/frontend/app/tab/tabbar.tsx @@ -5,7 +5,7 @@ import { Button } from "@/app/element/button"; import { modalsModel } from "@/app/store/modalmodel"; import { WindowDrag } from "@/element/windowdrag"; 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 { useAtomValue } from "jotai"; import { OverlayScrollbars } from "overlayscrollbars"; @@ -485,7 +485,7 @@ const TabBar = memo(({ workspace }: TabBarProps) => { const handleSelectTab = (tabId: string) => { if (!draggingTabDataRef.current.dragged) { - getApi().setActiveTab(tabId); + setActiveTab(tabId); } }; diff --git a/frontend/wave.ts b/frontend/wave.ts index 14cf039691..1dace31b1a 100644 --- a/frontend/wave.ts +++ b/frontend/wave.ts @@ -87,6 +87,11 @@ async function initWaveWrap(initOpts: WaveInitOpts) { async function reinitWave() { console.log("Reinit Wave"); getApi().sendLog("Reinit Wave"); + requestAnimationFrame(() => { + setTimeout(() => { + document.body.classList.remove("nohover"); + }, 50); + }); const client = await WOS.reloadWaveObject(WOS.makeORef("client", savedInitOpts.clientId)); const waveWindow = await WOS.reloadWaveObject(WOS.makeORef("window", savedInitOpts.windowId)); const ws = await WOS.reloadWaveObject(WOS.makeORef("workspace", waveWindow.workspaceid)); From 8f9d77b0bdd826e46fe1bb60b61f92a8e804fbb9 Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Tue, 3 Dec 2024 20:01:27 -0800 Subject: [PATCH 2/3] remove unnecessary createTab fix --- frontend/app/store/global.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/app/store/global.ts b/frontend/app/store/global.ts index 5dc1c8b972..00b167ea18 100644 --- a/frontend/app/store/global.ts +++ b/frontend/app/store/global.ts @@ -621,7 +621,6 @@ function removeNotification(id: string) { } function createTab() { - document.body.classList.add("nohover"); getApi().createTab(); } From 751cebde4ead066a854d2aeba0a6ea46ba885af2 Mon Sep 17 00:00:00 2001 From: Evan Simkowitz Date: Tue, 3 Dec 2024 20:02:36 -0800 Subject: [PATCH 3/3] revert emain-window --- emain/emain-window.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/emain/emain-window.ts b/emain/emain-window.ts index 19d24dced9..85e1334e57 100644 --- a/emain/emain-window.ts +++ b/emain/emain-window.ts @@ -380,11 +380,6 @@ export class WaveBrowserWindow extends BaseWindow { return; } if (activeTabView.isOnScreen()) { - activeTabView.webContents.sendInputEvent({ - type: "mouseEnter", - x: 0, - y: 0, - }); activeTabView.setBounds({ x: 0, y: 0,