mirrors/Vencord
1
0
Fork 1
mirror of https://github.com/Vendicated/Vencord.git synced 2025-01-11 02:16:23 +00:00
Code Activity

Still WIP Book Tabs

Browse source
This commit is contained in:
Wolfie 2024-03-12 09:03:22 -04:00
parent 93c694757e
commit 17bcf33139
No known key found for this signature in database
GPG key ID: DE384EE9BF2D909A
2 changed files with 77 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
src/plugins/holynotes/components/modals/NoteBookTab.tsx
View file

@ -6,33 +6,38 @@
import { classes } from "@utils/misc";
import { findByCode, findByProps } from "@webpack";
import { Button, Menu, Popout, React, TabBar } from "@webpack/common";
import { Button, Clickable, Menu, Popout, React, TabBar } from "@webpack/common";
import { Fragment } from "react";
import { SvgOverFlowIcon } from "../icons/overFlowIcon";
export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
const tabBarRef = React.useRef<HTMLDivElement>(null);
const widthRef = React.useRef<number>(0);
const tabWidthMapRef = React.useRef(new Map());
const [overflowedTabs, setOverflowedTabs] = React.useState([]);
const { tabBar } = findByProps("tabBar");
const { tabBar, tabBarItem } = findByProps("tabBar");
const { forwardRef } = findByProps("forwardRef");
const calculateOverflowedTabs = React.useCallback(() => {
if (tabBarRef.current == null) return;
const overflowed = [];
if (!tabBarRef.current) return;
let totalWidth = tabBarRef.current.getBoundingClientRect().width;
overflowedTabs.length = 0;
if (totalWidth !== widthRef.current) {
for (const tab of Object.keys(tabs)) {
if (tab !== selectedTabId) {
const tabWidth = tabWidthMapRef.current.get(tab)?.width || 0;
totalWidth -= tabWidth;
if (totalWidth < 0) overflowed.push(tab);
if (tab !== selectedTabId && totalWidth < 0) overflowedTabs.push(tab);
}
}
setOverflowedTabs(overflowed);
widthRef.current = totalWidth;
setOverflowedTabs(overflowedTabs);
// widthRef.current = totalWidth;
}
}, [tabs, selectedTabId]);
@ -48,6 +53,17 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
};
}, [calculateOverflowedTabs]);
const TabItem = React.forwardRef(({ id, selected, onClick, children }) => (
<Clickable
className={classes(tabBarItem)}
data-tab-id={id}
// innerRef={ref}
onClick={onClick}
>
{children}
</Clickable>
));
const renderOverflowMenu = React.useCallback(({ closePopout }) => {
return (
<Menu.Menu
@ -85,47 +101,47 @@ export function NoteBookTabs({ tabs, selectedTabId, onSelectTab }) {
look="brand"
className={classes("vc-notebook-tabbar-bar", "vc-notebook-tabbar")}
>
{
Object.keys(tabs).map(tab => {
if (!overflowedTabs.includes(tab)) {
return (
<forwardRef
id={tab}
selected={selectedTabId === tab}
ref={ref => {
const width = ref?.getBoundingClientRect().width || 0;
tabWidthMapRef.current.set(tab, { node: ref, width });
{Object.keys(tabs).map(tab => {
if (!overflowedTabs.includes(tab)) {
return (
<TabItem
id={tab}
selected={selectedTabId === tab}
className={classes("vc-notebook-tabbar-bar-item", "vc-notebook-tabbar-item")}
ref={ref => {
const width = ref?.getBoundingClientRect().width || tabWidthMapRef.current.get(tab.id) || 0;
tabWidthMapRef.current.set(tab, width);
}}
onClick={selectedTabId !== tab ? () => onSelectTab(tab) : undefined}
>
<TabBar.Item key={tab} id={tab} className={classes("vc-notebook-tabbar-bar-item", "vc-notebook-tabbar-item")}>
{tab}
</TabBar.Item>
</forwardRef>
);
}
})
}}
// onClick={selectedTabId !== tab && onSelectTab(tab)}
>
{tab}
</TabItem>
);
}
})
}
{overflowedTabs.length > 0 && (
<Popout
renderPopout={renderOverflowMenu}
position="bottom"
align="right"
spacing={0}
>
{() => (
<Button
className={"vc-notebook-overflow-chevron"}
size={Button.Sizes.ICON}
look={Button.Looks.BLANK}
>
<SvgOverFlowIcon />
</Button>
)
}
<Fragment>
<Popout
renderPopout={renderOverflowMenu}
position="bottom"
align="right"
spacing={0}
>
{() => (
<Button
className={"vc-notebook-overflow-chevron"}
size={Button.Sizes.ICON}
look={Button.Looks.BLANK}
>
<SvgOverFlowIcon />
</Button>
)
}
</Popout>
</Popout>
</Fragment>
)}
</TabBar>
</div>

31
src/plugins/holynotes/style.css
View file

@ -30,20 +30,6 @@ $modifier: var(--background-modifier-accent);
transform: scale(1);
}
.vc-notebook-tabbar {
margin: 0;
padding: 10px 20px 0;
background-color: var(--background-tertiary);
}
.vc-notebook-tabbar-item {
font-size: 14px;
}
.vc-notebook-display-left {
flex: auto;
display: flex;
}
.vc-notebook-flex {
overflow: hidden;
@ -63,6 +49,11 @@ $modifier: var(--background-modifier-accent);
opacity: 1;
}
.vc-notebook-display-left {
flex: auto;
display: flex;
}
.vc-help-markdown {
margin-top: 6px;
}
@ -82,6 +73,18 @@ $modifier: var(--background-modifier-accent);
list-style-type: none;
}
.vc-notebook-tabbar {
overflow: hidden;
margin: 0;
padding: 10px 20px 0;
background-color: var(--background-tertiary);
}
.vc-notebook-tabbar-item {
font-size: 14px;
}
.vc-notebook-tabbar-bar {
overflow: hidden;
align-items: stretch;