mirror of
https://github.com/wavetermdev/waveterm.git
synced 2024-12-21 16:38:23 +01:00
Scrollable tabs using OverlayScrollbars (#60)
This commit is contained in:
Red J Adaya
GitHub
parent
b73148be6b
commit
e83b5c8763
@ -60,3 +60,10 @@ body {
|
||||
.error-boundary {
|
||||
color: var(--error-color);
|
||||
}
|
||||
|
||||
/* OverlayScrollbars styling */
|
||||
.os-scrollbar {
|
||||
--os-handle-bg: var(--scrollbar-thumb-color);
|
||||
--os-handle-bg-hover: var(--scrollbar-thumb-hover-color);
|
||||
--os-handle-bg-active: var(--scrollbar-thumb-active-color);
|
||||
}
|
||||
|
||||
@ -9,9 +9,11 @@ import { Provider } from "jotai";
|
||||
|
||||
import { DndProvider } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import "./app.less";
|
||||
import { CenteredDiv } from "./element/quickelems";
|
||||
|
||||
import "overlayscrollbars/overlayscrollbars.css";
|
||||
import "./app.less";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<Provider store={globalStore}>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
import { Button } from "@/element/button";
|
||||
import * as WOS from "@/store/wos";
|
||||
import { clsx } from "clsx";
|
||||
import React from "react";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
import "./tab.less";
|
||||
|
||||
@ -16,13 +16,23 @@ interface TabProps {
|
||||
onSelect: () => void;
|
||||
onClose: () => void;
|
||||
onDragStart: () => void;
|
||||
onLoaded: () => void;
|
||||
}
|
||||
|
||||
const Tab = React.forwardRef<HTMLDivElement, TabProps>(
|
||||
({ id, active, isBeforeActive, isDragging, onSelect, onClose, onDragStart }, ref) => {
|
||||
({ id, active, isBeforeActive, isDragging, onLoaded, onSelect, onClose, onDragStart }, ref) => {
|
||||
const [tabData, tabLoading] = WOS.useWaveObjectValue<Tab>(WOS.makeORef("tab", id));
|
||||
const name = tabData?.name ?? "...";
|
||||
|
||||
const loadedRef = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loadedRef.current) {
|
||||
onLoaded();
|
||||
loadedRef.current = true;
|
||||
}
|
||||
}, [onLoaded]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
position: relative; // Needed for absolute positioning of child tabs
|
||||
min-height: 34px; // Adjust as necessary to fit the height of tabs
|
||||
width: calc(100vw - 36px); // 36 is the width of add tab button
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.add-tab-btn {
|
||||
@ -20,13 +19,24 @@
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%); // overridden in js
|
||||
border-radius: 100%;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
height: 32px;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--main-bg-color);
|
||||
}
|
||||
|
||||
// Customize scrollbar styles
|
||||
.os-theme-dark,
|
||||
.os-theme-light {
|
||||
box-sizing: border-box;
|
||||
--os-size: 3px;
|
||||
--os-padding-perpendicular: 0px;
|
||||
--os-padding-axis: 0px;
|
||||
--os-track-border-radius: 3px;
|
||||
--os-handle-interactive-area-offset: 0px;
|
||||
--os-handle-border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,39 +2,54 @@
|
||||
// SPDX-License-Identifier: Apache-2.0
|
||||
|
||||
import { deleteLayoutStateAtomForTab } from "@/faraday/lib/layoutAtom";
|
||||
import { debounce } from "@/faraday/lib/utils";
|
||||
import { atoms } from "@/store/global";
|
||||
import * as services from "@/store/services";
|
||||
import { PrimitiveAtom, atom, useAtom, useAtomValue } from "jotai";
|
||||
import React, { createRef, useCallback, useEffect, useRef } from "react";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { OverlayScrollbars } from "overlayscrollbars";
|
||||
import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
|
||||
|
||||
import { Tab } from "./tab";
|
||||
|
||||
import "./tabbar.less";
|
||||
|
||||
const DEFAULT_TAB_WIDTH = 130;
|
||||
|
||||
// Atoms
|
||||
const tabIdsAtom = atom<string[]>([]);
|
||||
const tabWidthAtom = atom<number>(DEFAULT_TAB_WIDTH);
|
||||
const dragStartPositionsAtom = atom<number[]>([]);
|
||||
const draggingTabAtom = atom<string | null>(null) as PrimitiveAtom<string | null>;
|
||||
const loadingAtom = atom<boolean>(true);
|
||||
const TAB_DEFAULT_WIDTH = 130;
|
||||
const TAB_MIN_WIDTH = 100;
|
||||
const OS_OPTIONS = {
|
||||
overflow: {
|
||||
x: "scroll",
|
||||
y: "hidden",
|
||||
},
|
||||
scrollbars: {
|
||||
theme: "os-theme-dark",
|
||||
visibility: "auto",
|
||||
autoHide: "leave",
|
||||
autoHideDelay: 1300,
|
||||
autoHideSuspend: false,
|
||||
dragScroll: true,
|
||||
clickScroll: false,
|
||||
pointers: ["mouse", "touch", "pen"],
|
||||
},
|
||||
};
|
||||
|
||||
interface TabBarProps {
|
||||
workspace: Workspace;
|
||||
}
|
||||
|
||||
const TabBar = ({ workspace }: TabBarProps) => {
|
||||
const [tabIds, setTabIds] = useAtom(tabIdsAtom);
|
||||
const [tabWidth, setTabWidth] = useAtom(tabWidthAtom);
|
||||
const [dragStartPositions, setDragStartPositions] = useAtom(dragStartPositionsAtom);
|
||||
const [draggingTab, setDraggingTab] = useAtom(draggingTabAtom);
|
||||
const [loading, setLoading] = useAtom(loadingAtom);
|
||||
const [tabIds, setTabIds] = useState<string[]>([]);
|
||||
const [dragStartPositions, setDragStartPositions] = useState<number[]>([]);
|
||||
const [draggingTab, setDraggingTab] = useState<string>();
|
||||
const [tabsLoaded, setTabsLoaded] = useState({});
|
||||
const [scrollable, setScrollable] = useState(false);
|
||||
const [tabWidth, setTabWidth] = useState(TAB_DEFAULT_WIDTH);
|
||||
|
||||
const tabBarRef = useRef<HTMLDivElement>(null);
|
||||
const tabsWrapperRef = useRef<HTMLDivElement>(null);
|
||||
const tabRefs = useRef<React.RefObject<HTMLDivElement>[]>([]);
|
||||
const addBtnRef = useRef<HTMLDivElement>(null);
|
||||
const draggingTimeoutId = useRef<NodeJS.Timeout>(null);
|
||||
const draggingTimeoutIdRef = useRef<NodeJS.Timeout>(null);
|
||||
const scrollToNewTabTimeoutIdRef = useRef<NodeJS.Timeout>(null);
|
||||
const draggingRemovedRef = useRef(false);
|
||||
const draggingTabDataRef = useRef({
|
||||
tabId: "",
|
||||
@ -43,13 +58,13 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
tabIndex: 0,
|
||||
dragged: false,
|
||||
});
|
||||
const osInstanceRef = useRef<OverlayScrollbars>(null);
|
||||
|
||||
const windowData = useAtomValue(atoms.waveWindow);
|
||||
const { activetabid } = windowData;
|
||||
|
||||
let prevDelta: number;
|
||||
let prevDragDirection: string;
|
||||
let shrunk: boolean;
|
||||
|
||||
// Update refs when tabIds change
|
||||
useEffect(() => {
|
||||
@ -68,12 +83,13 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
if (!areEqual) {
|
||||
setTabIds(workspace.tabids);
|
||||
}
|
||||
setLoading(false);
|
||||
}
|
||||
}, [workspace, tabIds, setTabIds, setLoading]);
|
||||
}, [workspace, tabIds]);
|
||||
|
||||
const updateTabPositions = useCallback(() => {
|
||||
if (tabBarRef.current) {
|
||||
const tabs = tabRefs.current;
|
||||
if (tabs === null) return;
|
||||
|
||||
const newStartPositions: number[] = [];
|
||||
let cumulativeLeft = 0; // Start from the left edge
|
||||
|
||||
@ -85,23 +101,35 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
});
|
||||
|
||||
setDragStartPositions(newStartPositions);
|
||||
}
|
||||
}, [tabRefs.current, setDragStartPositions]);
|
||||
}, []);
|
||||
|
||||
const debouncedSetTabWidth = debounce((width) => setTabWidth(width), 100);
|
||||
const debouncedSetScrollable = debounce((scrollable) => setScrollable(scrollable), 100);
|
||||
const debouncedUpdateTabPositions = debounce(() => updateTabPositions(), 100);
|
||||
|
||||
const handleResizeTabs = useCallback(() => {
|
||||
const tabBar = tabBarRef.current;
|
||||
if (!tabBar) return;
|
||||
if (tabBar === null) return;
|
||||
|
||||
const containerWidth = tabBar.getBoundingClientRect().width;
|
||||
const tabBarWidth = tabBar.getBoundingClientRect().width;
|
||||
const numberOfTabs = tabIds.length;
|
||||
const totalDefaultTabWidth = numberOfTabs * DEFAULT_TAB_WIDTH;
|
||||
let newTabWidth = DEFAULT_TAB_WIDTH;
|
||||
const totalDefaultTabWidth = numberOfTabs * TAB_DEFAULT_WIDTH;
|
||||
const minTotalTabWidth = numberOfTabs * TAB_MIN_WIDTH;
|
||||
let newTabWidth = tabWidth;
|
||||
let newScrollable = scrollable;
|
||||
|
||||
if (totalDefaultTabWidth > containerWidth) {
|
||||
newTabWidth = containerWidth / numberOfTabs;
|
||||
shrunk = true;
|
||||
if (minTotalTabWidth > tabBarWidth) {
|
||||
// Case where tabs cannot shrink further, make the tab bar scrollable
|
||||
newTabWidth = TAB_MIN_WIDTH;
|
||||
newScrollable = true;
|
||||
} else if (totalDefaultTabWidth > tabBarWidth) {
|
||||
// Case where resizing is needed due to limited container width
|
||||
newTabWidth = tabBarWidth / numberOfTabs;
|
||||
newScrollable = false;
|
||||
} else {
|
||||
shrunk = false;
|
||||
// Case where tabs were previously shrunk or there is enough space for default width tabs
|
||||
newTabWidth = TAB_DEFAULT_WIDTH;
|
||||
newScrollable = false;
|
||||
}
|
||||
|
||||
// Apply the calculated width and position to all tabs
|
||||
@ -114,7 +142,19 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
|
||||
// Update the state with the new tab width if it has changed
|
||||
if (newTabWidth !== tabWidth) {
|
||||
setTabWidth(newTabWidth);
|
||||
debouncedSetTabWidth(newTabWidth);
|
||||
}
|
||||
// Update the state with the new scrollable state if it has changed
|
||||
if (newScrollable !== scrollable) {
|
||||
debouncedSetScrollable(newScrollable);
|
||||
}
|
||||
// Initialize/destroy overlay scrollbars
|
||||
if (newScrollable) {
|
||||
osInstanceRef.current = OverlayScrollbars(tabBarRef.current, { ...(OS_OPTIONS as any) });
|
||||
} else {
|
||||
if (osInstanceRef.current) {
|
||||
osInstanceRef.current.destroy();
|
||||
}
|
||||
}
|
||||
|
||||
// Update the position of the Add Tab button if needed
|
||||
@ -123,66 +163,45 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
if (addButton && lastTabRef && lastTabRef.current) {
|
||||
const lastTabRect = lastTabRef.current.getBoundingClientRect();
|
||||
addButton.style.position = "absolute";
|
||||
addButton.style.transform = `translateX(${lastTabRect.right}px) translateY(-50%)`;
|
||||
if (newScrollable) {
|
||||
addButton.style.transform = `translateX(${document.documentElement.clientWidth - addButton.offsetWidth}px) translateY(-50%)`;
|
||||
} else {
|
||||
addButton.style.transform = `translateX(${lastTabRect.right + 1}px) translateY(-50%)`;
|
||||
}
|
||||
}, [tabIds, tabWidth, updateTabPositions, setTabWidth]);
|
||||
}
|
||||
|
||||
debouncedUpdateTabPositions();
|
||||
}, [tabIds, tabWidth, scrollable]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("resize", handleResizeTabs);
|
||||
window.addEventListener("resize", () => handleResizeTabs());
|
||||
return () => {
|
||||
window.removeEventListener("resize", handleResizeTabs);
|
||||
window.removeEventListener("resize", () => handleResizeTabs());
|
||||
};
|
||||
}, [handleResizeTabs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading) {
|
||||
handleResizeTabs();
|
||||
// Check if all tabs are loaded
|
||||
const allLoaded = tabIds.length > 0 && tabIds.every((id) => tabsLoaded[id]);
|
||||
if (allLoaded) {
|
||||
updateTabPositions();
|
||||
handleResizeTabs();
|
||||
}
|
||||
}, [loading, handleResizeTabs, updateTabPositions]);
|
||||
}, [tabIds, tabsLoaded, handleResizeTabs, updateTabPositions]);
|
||||
|
||||
// Make sure timeouts are cleared when component is unmounted
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (draggingTimeoutId.current) {
|
||||
clearTimeout(draggingTimeoutId.current);
|
||||
if (draggingTimeoutIdRef.current) {
|
||||
clearTimeout(draggingTimeoutIdRef.current);
|
||||
}
|
||||
if (scrollToNewTabTimeoutIdRef.current) {
|
||||
clearTimeout(scrollToNewTabTimeoutIdRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
const { tabId, ref, tabStartX } = draggingTabDataRef.current;
|
||||
|
||||
let tabIndex = draggingTabDataRef.current.tabIndex;
|
||||
let currentX = event.clientX - ref.current.getBoundingClientRect().width / 2;
|
||||
|
||||
// Check if the tab has moved 5 pixels
|
||||
if (Math.abs(currentX - tabStartX) >= 5) {
|
||||
setDraggingTab(tabId);
|
||||
draggingTabDataRef.current.dragged = true;
|
||||
}
|
||||
|
||||
// Constrain movement within the container bounds
|
||||
if (tabBarRef.current) {
|
||||
const numberOfTabs = tabIds.length;
|
||||
const totalDefaultTabWidth = numberOfTabs * DEFAULT_TAB_WIDTH;
|
||||
const containerRect = tabBarRef.current.getBoundingClientRect();
|
||||
let containerRectWidth = containerRect.width;
|
||||
// Set to the total default tab width if there's vacant space
|
||||
if (totalDefaultTabWidth < containerRectWidth) {
|
||||
containerRectWidth = totalDefaultTabWidth;
|
||||
}
|
||||
|
||||
const minLeft = 0;
|
||||
const maxRight = containerRectWidth - tabWidth;
|
||||
|
||||
// Adjust currentX to stay within bounds
|
||||
currentX = Math.min(Math.max(currentX, minLeft), maxRight);
|
||||
}
|
||||
|
||||
ref.current!.style.transform = `translateX(${currentX}px)`;
|
||||
ref.current!.style.zIndex = "100";
|
||||
|
||||
const getDragDirection = (currentX: number) => {
|
||||
let dragDirection;
|
||||
if (currentX - prevDelta > 0) {
|
||||
dragDirection = "+";
|
||||
@ -193,9 +212,11 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
}
|
||||
prevDelta = currentX;
|
||||
prevDragDirection = dragDirection;
|
||||
return dragDirection;
|
||||
};
|
||||
|
||||
const getNewTabIndex = (currentX: number, tabIndex: number, dragDirection: string) => {
|
||||
let newTabIndex = tabIndex;
|
||||
|
||||
if (dragDirection === "+") {
|
||||
// Dragging to the right
|
||||
for (let i = tabIndex + 1; i < tabIds.length; i++) {
|
||||
@ -213,6 +234,63 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
return newTabIndex;
|
||||
};
|
||||
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
const { tabId, ref, tabStartX } = draggingTabDataRef.current;
|
||||
|
||||
let currentX = event.clientX - ref.current.getBoundingClientRect().width / 2;
|
||||
let tabBarRectWidth = tabBarRef.current.getBoundingClientRect().width;
|
||||
const dragDirection = getDragDirection(currentX);
|
||||
|
||||
// Scroll the tab bar if the dragged tab overflows the container bounds
|
||||
if (scrollable) {
|
||||
const { viewport } = osInstanceRef.current.elements();
|
||||
const { overflowAmount } = osInstanceRef.current.state();
|
||||
const { scrollOffsetElement } = osInstanceRef.current.elements();
|
||||
|
||||
if (event.clientX <= 0) {
|
||||
viewport.scrollLeft = 0;
|
||||
} else if (event.clientX >= tabBarRectWidth) {
|
||||
viewport.scrollLeft = tabBarRectWidth;
|
||||
}
|
||||
|
||||
if (scrollOffsetElement.scrollLeft > 0) {
|
||||
currentX += overflowAmount.x;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if the tab has moved 5 pixels
|
||||
if (Math.abs(currentX - tabStartX) >= 5) {
|
||||
setDraggingTab((prev) => (prev !== tabId ? tabId : prev));
|
||||
draggingTabDataRef.current.dragged = true;
|
||||
}
|
||||
|
||||
// Constrain movement within the container bounds
|
||||
if (tabBarRef.current) {
|
||||
const numberOfTabs = tabIds.length;
|
||||
const totalDefaultTabWidth = numberOfTabs * TAB_DEFAULT_WIDTH;
|
||||
if (totalDefaultTabWidth < tabBarRectWidth) {
|
||||
// Set to the total default tab width if there's vacant space
|
||||
tabBarRectWidth = totalDefaultTabWidth;
|
||||
} else if (scrollable) {
|
||||
// Set to the scrollable width if the tab bar is scrollable
|
||||
tabBarRectWidth = tabsWrapperRef.current.scrollWidth;
|
||||
}
|
||||
|
||||
const minLeft = 0;
|
||||
const maxRight = tabBarRectWidth - tabWidth;
|
||||
|
||||
// Adjust currentX to stay within bounds
|
||||
currentX = Math.min(Math.max(currentX, minLeft), maxRight);
|
||||
}
|
||||
|
||||
ref.current!.style.transform = `translateX(${currentX}px)`;
|
||||
ref.current!.style.zIndex = "100";
|
||||
|
||||
const tabIndex = draggingTabDataRef.current.tabIndex;
|
||||
const newTabIndex = getNewTabIndex(currentX, tabIndex, dragDirection);
|
||||
|
||||
if (newTabIndex !== tabIndex) {
|
||||
// Remove the dragged tab if not already done
|
||||
@ -239,7 +317,6 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
}
|
||||
});
|
||||
|
||||
tabIndex = newTabIndex;
|
||||
draggingTabDataRef.current.tabIndex = newTabIndex;
|
||||
}
|
||||
};
|
||||
@ -257,7 +334,7 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
}
|
||||
|
||||
if (dragged) {
|
||||
draggingTimeoutId.current = setTimeout(() => {
|
||||
draggingTimeoutIdRef.current = setTimeout(() => {
|
||||
// Reset styles
|
||||
tabRefs.current.forEach((ref) => {
|
||||
ref.current.style.zIndex = "0";
|
||||
@ -292,12 +369,12 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
document.addEventListener("mousemove", handleMouseMove);
|
||||
document.addEventListener("mouseup", handleMouseUp);
|
||||
|
||||
if (draggingTimeoutId.current) {
|
||||
clearTimeout(draggingTimeoutId.current);
|
||||
if (draggingTimeoutIdRef.current) {
|
||||
clearTimeout(draggingTimeoutIdRef.current);
|
||||
}
|
||||
}
|
||||
},
|
||||
[tabIds, dragStartPositions, tabWidth]
|
||||
[tabIds, dragStartPositions]
|
||||
);
|
||||
|
||||
const handleSelectTab = (tabId: string) => {
|
||||
@ -310,6 +387,13 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
const newTabName = `T${tabIds.length + 1}`;
|
||||
setTabIds([...tabIds, newTabName]);
|
||||
services.ObjectService.AddTabToWorkspace(newTabName, true);
|
||||
|
||||
scrollToNewTabTimeoutIdRef.current = setTimeout(() => {
|
||||
if (scrollable) {
|
||||
const { viewport } = osInstanceRef.current.elements();
|
||||
viewport.scrollLeft = tabIds.length * tabWidth;
|
||||
}
|
||||
}, 30);
|
||||
};
|
||||
|
||||
const handleCloseTab = (tabId: string) => {
|
||||
@ -317,13 +401,26 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
deleteLayoutStateAtomForTab(tabId);
|
||||
};
|
||||
|
||||
const handleTabLoaded = useCallback((tabId) => {
|
||||
setTabsLoaded((prev) => {
|
||||
if (!prev[tabId]) {
|
||||
// Only update if the tab isn't already marked as loaded
|
||||
return { ...prev, [tabId]: true };
|
||||
}
|
||||
return prev;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const isBeforeActive = (tabId: string) => {
|
||||
return tabIds.indexOf(tabId) === tabIds.indexOf(activetabid) - 1;
|
||||
};
|
||||
|
||||
const tabsWrapperWidth = tabIds.length * tabWidth;
|
||||
|
||||
return (
|
||||
<div className="tab-bar-wrapper">
|
||||
<div className="tab-bar" ref={tabBarRef}>
|
||||
<div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
|
||||
<div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: tabsWrapperWidth }}>
|
||||
{tabIds.map((tabId, index) => (
|
||||
<Tab
|
||||
key={tabId}
|
||||
@ -333,11 +430,13 @@ const TabBar = ({ workspace }: TabBarProps) => {
|
||||
active={activetabid === tabId}
|
||||
onDragStart={() => handleDragStart(tabId, tabRefs.current[index])}
|
||||
onClose={() => handleCloseTab(tabId)}
|
||||
onLoaded={() => handleTabLoaded(tabId)}
|
||||
isBeforeActive={isBeforeActive(tabId)}
|
||||
isDragging={draggingTab === tabId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div ref={addBtnRef} className="add-tab-btn" onClick={handleAddTab}>
|
||||
<i className="fa fa-solid fa-plus fa-fw" />
|
||||
</div>
|
||||
|
||||
@ -29,4 +29,10 @@
|
||||
/* z-index values */
|
||||
--zindex-header-hover: 100;
|
||||
--zindex-termstickers: 20;
|
||||
|
||||
/* scrollbar colors */
|
||||
--scrollbar-background-color: var(--app-bg-color);
|
||||
--scrollbar-thumb-color: rgba(255, 255, 255, 0.3);
|
||||
--scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.5);
|
||||
--scrollbar-thumb-active-color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
"immer": "^10.1.1",
|
||||
"jotai": "^2.8.0",
|
||||
"monaco-editor": "^0.49.0",
|
||||
"overlayscrollbars": "^2.8.3",
|
||||
"react": "^18.3.1",
|
||||
"react-dnd": "^16.0.1",
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
|
||||
@ -10322,6 +10322,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"overlayscrollbars@npm:^2.8.3":
|
||||
version: 2.8.3
|
||||
resolution: "overlayscrollbars@npm:2.8.3"
|
||||
checksum: 10c0/1f0713e981ce27e0cd9261a6a0acfe080bd44c21c9f6cbb9c3df582c155d11a0c949553d7ea4e01a107d784d527c5cf3465ab6979affca9e430d450968b763f6
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"p-cancelable@npm:^2.0.0":
|
||||
version: 2.1.1
|
||||
resolution: "p-cancelable@npm:2.1.1"
|
||||
@ -12303,6 +12310,7 @@ __metadata:
|
||||
jotai: "npm:^2.8.0"
|
||||
less: "npm:^4.2.0"
|
||||
monaco-editor: "npm:^0.49.0"
|
||||
overlayscrollbars: "npm:^2.8.3"
|
||||
prettier: "npm:^3.2.5"
|
||||
prettier-plugin-jsdoc: "npm:^1.3.0"
|
||||
prettier-plugin-organize-imports: "npm:^3.2.4"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user