diff --git a/frontend/app/store/global.ts b/frontend/app/store/global.ts index 0ddcc35b5..00b167ea1 100644 --- a/frontend/app/store/global.ts +++ b/frontend/app/store/global.ts @@ -620,8 +620,13 @@ function removeNotification(id: string) { }); } -async function createTab(): Promise { - await getApi().createTab(); +function createTab() { + getApi().createTab(); +} + +function setActiveTab(tabId: string) { + document.body.classList.add("nohover"); + getApi().setActiveTab(tabId); } export { @@ -655,6 +660,7 @@ export { removeFlashError, removeNotification, removeNotificationById, + setActiveTab, setNodeFocus, setPlatform, subscribeToConnEvents, diff --git a/frontend/app/tab/tab.scss b/frontend/app/tab/tab.scss index d12f19b49..f5b8ecc27 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; + left: 0; + width: 1px; + height: 14px; + border-right: 1px solid rgb(from var(--main-text-color) r g b / 0.2); + } - &::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); - } + .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; - } - - &.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; - } - } - - &: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; - } + color: var(--main-text-color); } - .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; + & + .tab::after, + &::after { + content: none; } + } - &:hover .close { - visibility: visible; - backdrop-filter: blur(3px); + &:first-child::after { + content: none; + } - &:hover { - color: var(--main-text-color); - } + .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; } + } + + .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; + } +} + +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 04d387452..119bba05c 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 14cf03969..1dace31b1 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));