mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
Hack to prevent tabbar flicker when switching tabs (#1379)
This commit is contained in:
Evan Simkowitz
GitHub
parent
a72d3e5c7a
commit
29e8929f91
@ -620,8 +620,13 @@ function removeNotification(id: string) {
|
||||
});
|
||||
}
|
||||
|
||||
async function createTab(): Promise<void> {
|
||||
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,
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -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<Client>(WOS.makeORef("client", savedInitOpts.clientId));
|
||||
const waveWindow = await WOS.reloadWaveObject<WaveWindow>(WOS.makeORef("window", savedInitOpts.windowId));
|
||||
const ws = await WOS.reloadWaveObject<Workspace>(WOS.makeORef("workspace", waveWindow.workspaceid));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user