brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'dev_environment' of gitlab.com:brandx/bxt-app into dev_environment

Browse source
This commit is contained in:
csawatzky 2025-03-26 14:39:14 -06:00
commit 3d7573b65e
4 changed files with 87 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/bin/BinYards.tsx
View file

@ -57,7 +57,7 @@ const parentTab = {
marginTop: "4px",
marginLeft: "4px",
animationDuration: "10s",
background: "rgba(150, 150, 150, 0)",
// background: "rgba(150, 150, 150, 0)",
borderRadius: "-5px",
borderTopLeftRadius: "6px",
@ -100,7 +100,7 @@ const useStyles = makeStyles((theme: Theme) => {
minWidth: theme.spacing(8),
left: 0,
height: "100%",
background: theme.palette.background.paper
// background: theme.palette.background.paper
},
searchTabExpanded: {
...parentTab,
@ -108,22 +108,25 @@ const useStyles = makeStyles((theme: Theme) => {
minWidth: theme.spacing(30),
left: 0,
height: "100%",
background: theme.palette.background.paper
// background: theme.palette.background.paper
},
tab: {
...parentTab,
color: theme.palette.text.primary
},
smallTab: {
...parentTab,
width: theme.spacing(8),
minWidth: theme.spacing(8),
background: theme.palette.background.paper
// background: theme.palette.background.paper
},
selectedTab: {
borderRadius: "-5px",
borderTopLeftRadius: "6px",
borderTopRightRadius: "6px",
background: theme.palette.background.default,
// "linear-gradient(rgba(150, 150, 150, 0.3),"
// + theme.palette.background.default + " 80%)"
"&:hover": {
background:
"linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)"
@ -139,11 +142,11 @@ const useStyles = makeStyles((theme: Theme) => {
width: 36,
height: 36,
borderRadius: "18px",
background: "rgba(0,0,0,0)",
"&:hover": {
background:
"radial-gradient(closest-side, rgba(150, 150, 150, 0.5) 50%, rgba(150, 150, 150, 0.5))"
}
// background: "rgba(0,0,0,0)",
// "&:hover": {
// background:
// "radial-gradient(closest-side, rgba(150, 150, 150, 0.5) 50%, rgba(150, 150, 150, 0.5))"
// }
},
tabText: {
position: "absolute",
@ -678,6 +681,7 @@ export default function BinYard(props: Props) {
<DraggableTabs
variant="scrollable"
scrollButtons="auto"
sx={{ background: theme.palette.background.paper }}
value={tab}
TabIndicatorProps={{ style: { background: "rgba(0,0,0,0)" } }}
onChange={(_, newValue) => {
@ -759,7 +763,6 @@ export default function BinYard(props: Props) {
<Tab
classes={{ root: classes.tab, selected: classes.selectedTab }}
key={index}
draggable
sx={{
textAlign: "left",
}}
@ -789,7 +792,6 @@ export default function BinYard(props: Props) {
/>
</Tooltip>
))}
{/* {grainBags.length > 0 && (
<Tab
classes={{ root: classes.smallTab, selected: classes.selectedTab }}
@ -804,4 +806,4 @@ export default function BinYard(props: Props) {
</DraggableTabs>
</AppBar>
);
}
}

91
src/common/DraggableTabs.tsx
View file

@ -1,16 +1,26 @@
import { Tab, Tabs, TabsProps } from "@mui/material";
import React from "react";
import { Tabs, TabsProps } from "@mui/material";
import React, { useEffect, useState, useRef } from "react";
interface DraggableTabsProps extends TabsProps {
children: React.ReactNode;
children: React.ReactNode;
startNode?: React.ReactNode;
endNode?: React.ReactNode;
}
export default function DraggableTabs(props: DraggableTabsProps) {
const { startNode, endNode, children, ...tabsProps } = props
const { startNode, endNode, children, ...tabsProps } = props;
const initialChildren = React.Children.toArray(children);
const [tabOrder, setTabOrder] = useState<number[]>([]);
const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
useEffect(() => {
const newOrder = initialChildren.map((_, index) => index);
setTabOrder(newOrder);
tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
}, [initialChildren.length]);
// Helper function to flatten nodes and assign keys
const flattenNodes = (nodes: React.ReactNode, prefix: string) =>
React.Children.toArray(nodes).flatMap((node, nodeIndex) => {
if (React.isValidElement(node) && (node.type as any) === React.Fragment) {
@ -25,34 +35,61 @@ export default function DraggableTabs(props: DraggableTabsProps) {
: node;
});
// Process startTabs
const startTabs = flattenNodes(startNode, "start");
// Process endTabs
const endTabs = flattenNodes(endNode, "end");
const enhancedChildren = React.Children.map(children, (child) => {
if (React.isValidElement(child) && child.type === Tab) {
if (child.props.draggable === undefined || child.props.draggable === true) {
return React.cloneElement(child, {
...child.props,
draggable: true,
// onDragStart: (e: React.DragEvent<HTMLDivElement>) => handleDragStart(e, index),
onDragOver: (e: React.DragEvent<HTMLDivElement>) => e.preventDefault(),
// onDrop: (e: React.DragEvent<HTMLDivElement>) => handleDrop(e, index),
});
}
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
e.dataTransfer.setData("text/plain", index.toString());
e.dataTransfer.effectAllowed = "move";
};
const handleDragOver = (e: React.DragEvent<HTMLDivElement>, index: number) => {
e.preventDefault();
e.dataTransfer.dropEffect = "move";
setHoveredIndex(index); // Update hovered index
};
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
e.preventDefault();
const draggedIndex = Number(e.dataTransfer.getData("text/plain"));
const dropIndex = hoveredIndex; // Use the last hovered index
if (dropIndex === -1) {
console.log("Drop skipped: no valid drop target");
return;
}
if (draggedIndex !== dropIndex && draggedIndex >= 0 && dropIndex >= 0 && draggedIndex < tabOrder.length && dropIndex < tabOrder.length) {
const newOrder = [...tabOrder];
const [draggedItem] = newOrder.splice(draggedIndex, 1);
newOrder.splice(dropIndex, 0, draggedItem);
setTabOrder(newOrder);
} else {
console.log("Drop skipped: invalid indices or same position");
}
setHoveredIndex(-1); // Reset hovered index
};
const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => {
if (React.isValidElement(child)) {
const currentIndex = tabOrder.indexOf(originalIndex);
return (
<div
ref={(el) => (tabRefs.current[currentIndex] = el)} // Assign ref to each tab
draggable
onDragStart={(e) => handleDragStart(e, currentIndex)}
onDragOver={(e) => handleDragOver(e, currentIndex)}
onDrop={handleDrop} // Handle drop on individual tabs
>
{React.cloneElement(child)}
</div>
);
}
// Return non-Tab children unchanged
return child;
}) || [];
// Combine all tabs into a single array
const allTabs = [...startTabs, ...enhancedChildren, ...endTabs];
const orderedChildren = tabOrder.map((index) => enhancedChildren[index]);
const allTabs = [...startTabs, ...orderedChildren, ...endTabs];
return (
<Tabs {...tabsProps}>
{allTabs}
</Tabs>
)
return <Tabs {...tabsProps}>{allTabs}</Tabs>;
}

5
src/pages/Bins.tsx
View file

@ -18,6 +18,7 @@ import {
ImageList,
ImageListItem,
InputLabel,
lighten,
ListItemIcon,
ListItemText,
Menu,
@ -83,6 +84,8 @@ import BinYards from "bin/BinYards";
// import { useHistory } from "react-router";
const useStyles = makeStyles((theme: Theme) => {
const themeType = getThemeType();
const accordionBg = themeType === "light" ? theme.palette.background.paper : darken(theme.palette.background.paper, 0.2)
return ({
"@keyframes pulsate": {
to: {
@ -116,7 +119,7 @@ const useStyles = makeStyles((theme: Theme) => {
}
},
accordion: {
background: darken(theme.palette.background.paper, 0.4)
background: accordionBg
}
});
});

10
src/theme/theme.ts
View file

@ -13,8 +13,8 @@ export function CreateTheme(themeType: "light" | "dark"): Theme {
function generateBackgroundShades(themeType: "light" | "dark") {
if(themeType==="light") return ({
default: "#f2f2f2",
paper: "#fafafa"
default: "#e9e9e9",
paper: "#fafafa",
})
return {
@ -28,7 +28,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
const signature = getSignatureColour();
const accent = getSignatureAccentColour();
const highlight = themeType === "light" ? "black" : "white";
const bg = generateBackgroundShades(themeType)
const bg = generateBackgroundShades(themeType);
return {
cssVariables: true,
zIndex: {
@ -211,7 +211,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
styleOverrides: {
root: {
'& .MuiTouchRipple-root': {
color: highlight,
color: highlight,
},
'&:hover': {
color: highlight
@ -285,5 +285,5 @@ function options(themeType: "light" | "dark"): ThemeOptions {
// },
// },
}
} as ThemeOptions;
} as unknown as ThemeOptions;
}