From c5731016692c788540e2dc22658da384acc9f622 Mon Sep 17 00:00:00 2001 From: Carter Date: Mon, 24 Mar 2025 12:00:52 -0600 Subject: [PATCH 1/4] some styling changes for bin yard tabs --- src/bin/BinYards.tsx | 34 ++++++++++++++++++---------------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/src/bin/BinYards.tsx b/src/bin/BinYards.tsx index 7ef7d1c..ce76d99 100644 --- a/src/bin/BinYards.tsx +++ b/src/bin/BinYards.tsx @@ -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,7 +108,7 @@ 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, @@ -117,17 +117,19 @@ const useStyles = makeStyles((theme: Theme) => { ...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, - "&:hover": { - background: - "linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)" - } + 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%)" + // } }, icon: { display: "flex", @@ -139,11 +141,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 +680,7 @@ export default function BinYard(props: Props) { { @@ -789,7 +792,6 @@ export default function BinYard(props: Props) { /> ))} - {/* {grainBags.length > 0 && ( ); -} +} \ No newline at end of file From 37eaa0fb11d537e21809777cb12b40fbb4694892 Mon Sep 17 00:00:00 2001 From: Carter Date: Mon, 24 Mar 2025 12:25:26 -0600 Subject: [PATCH 2/4] just a lil more light mode themeing --- src/bin/BinYards.tsx | 2 +- src/theme/theme.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/bin/BinYards.tsx b/src/bin/BinYards.tsx index ce76d99..ff582dd 100644 --- a/src/bin/BinYards.tsx +++ b/src/bin/BinYards.tsx @@ -123,7 +123,7 @@ const useStyles = makeStyles((theme: Theme) => { borderRadius: "-5px", borderTopLeftRadius: "6px", borderTopRightRadius: "6px", - background: theme.palette.background.default + background: theme.palette.background.default, // "linear-gradient(rgba(150, 150, 150, 0.3)," // + theme.palette.background.default + " 80%)" // "&:hover": { diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 360bf3d..4997cfd 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -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: "#e2e2e2", + paper: "#fafafa", }) return { From 605b6d69ddc3f274787ed76baabc5fe04f74619a Mon Sep 17 00:00:00 2001 From: Carter Date: Mon, 24 Mar 2025 15:53:42 -0600 Subject: [PATCH 3/4] dragging and dropping a tab actually works now --- src/bin/BinYards.tsx | 9 ++- src/common/DraggableTabs.tsx | 112 +++++++++++++++++++++++++++-------- src/theme/theme.ts | 2 +- 3 files changed, 91 insertions(+), 32 deletions(-) diff --git a/src/bin/BinYards.tsx b/src/bin/BinYards.tsx index ff582dd..242c9a1 100644 --- a/src/bin/BinYards.tsx +++ b/src/bin/BinYards.tsx @@ -126,10 +126,10 @@ const useStyles = makeStyles((theme: Theme) => { 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%)" - // } + "&:hover": { + background: + "linear-gradient(rgba(150, 150, 150, 0.3)," + theme.palette.background.default + " 80%)" + } }, icon: { display: "flex", @@ -762,7 +762,6 @@ export default function BinYard(props: Props) { ([]); + const [hoveredIndex, setHoveredIndex] = useState(-1); // Track hovered tab + const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab + + useEffect(() => { + const newOrder = initialChildren.map((_, index) => index); + console.log("Children updated. New tabOrder:", newOrder); + 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 +36,83 @@ 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) => handleDragStart(e, index), - onDragOver: (e: React.DragEvent) => e.preventDefault(), - // onDrop: (e: React.DragEvent) => handleDrop(e, index), - }); - } + const handleDragStart = (e: React.DragEvent, index: number) => { + console.log("Drag started at index:", index); + e.dataTransfer.setData("text/plain", index.toString()); + e.dataTransfer.effectAllowed = "move"; + }; + + const handleDragOver = (e: React.DragEvent, index: number) => { + e.preventDefault(); + e.dataTransfer.dropEffect = "move"; + setHoveredIndex(index); // Update hovered index + console.log("Dragging over index:", index); + }; + + const handleDrop = (e: React.DragEvent) => { + e.preventDefault(); + const draggedIndex = Number(e.dataTransfer.getData("text/plain")); + const dropIndex = hoveredIndex; // Use the last hovered index + + console.log("Dragged from index:", draggedIndex); + console.log("Dropped at index:", dropIndex); + console.log("Current tabOrder before:", tabOrder); + + 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); + console.log("New tabOrder after:", newOrder); + setTabOrder(newOrder); + } else { + console.log("Drop skipped: invalid indices or same position"); + } + setHoveredIndex(-1); // Reset hovered index + }; + + const handleDragEnd = (e: React.DragEvent) => { + console.log("Drag ended"); + setHoveredIndex(-1); // Reset on drag end + }; + + const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => { + if (React.isValidElement(child)) { + const currentIndex = tabOrder.indexOf(originalIndex); + console.log("Original index:", originalIndex, "Current index:", currentIndex); + return ( +
(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 + onDragEnd={handleDragEnd} + > + {React.cloneElement(child)} +
+ ); } - // Return non-Tab children unchanged return child; }) || []; - // Combine all tabs into a single array - const allTabs = [...startTabs, ...enhancedChildren, ...endTabs]; + useEffect(() => { + console.log(hoveredIndex) + }, [hoveredIndex]) - return ( - - {allTabs} - - ) + const orderedChildren = tabOrder.map((index) => enhancedChildren[index]); + const allTabs = [...startTabs, ...orderedChildren, ...endTabs]; + + useEffect(() => { + console.log("Current tab order:", tabOrder); + }, [tabOrder]); + + return {allTabs}; } \ No newline at end of file diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 4997cfd..8ff818e 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -13,7 +13,7 @@ export function CreateTheme(themeType: "light" | "dark"): Theme { function generateBackgroundShades(themeType: "light" | "dark") { if(themeType==="light") return ({ - default: "#e2e2e2", + default: "#e9e9e9", paper: "#fafafa", }) From ac69c9b68f30531d1bacdd1b52a75550b53719d2 Mon Sep 17 00:00:00 2001 From: Carter Date: Mon, 24 Mar 2025 16:41:20 -0600 Subject: [PATCH 4/4] more bin page themeing --- src/bin/BinYards.tsx | 1 + src/common/DraggableTabs.tsx | 25 +------------------------ src/pages/Bins.tsx | 5 ++++- src/theme/theme.ts | 6 +++--- 4 files changed, 9 insertions(+), 28 deletions(-) diff --git a/src/bin/BinYards.tsx b/src/bin/BinYards.tsx index 242c9a1..98afa4b 100644 --- a/src/bin/BinYards.tsx +++ b/src/bin/BinYards.tsx @@ -112,6 +112,7 @@ const useStyles = makeStyles((theme: Theme) => { }, tab: { ...parentTab, + color: theme.palette.text.primary }, smallTab: { ...parentTab, diff --git a/src/common/DraggableTabs.tsx b/src/common/DraggableTabs.tsx index abc6fc3..45a37c7 100644 --- a/src/common/DraggableTabs.tsx +++ b/src/common/DraggableTabs.tsx @@ -1,4 +1,4 @@ -import { Tab, Tabs, TabsProps } from "@mui/material"; +import { Tabs, TabsProps } from "@mui/material"; import React, { useEffect, useState, useRef } from "react"; interface DraggableTabsProps extends TabsProps { @@ -17,7 +17,6 @@ export default function DraggableTabs(props: DraggableTabsProps) { useEffect(() => { const newOrder = initialChildren.map((_, index) => index); - console.log("Children updated. New tabOrder:", newOrder); setTabOrder(newOrder); tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs }, [initialChildren.length]); @@ -40,7 +39,6 @@ export default function DraggableTabs(props: DraggableTabsProps) { const endTabs = flattenNodes(endNode, "end"); const handleDragStart = (e: React.DragEvent, index: number) => { - console.log("Drag started at index:", index); e.dataTransfer.setData("text/plain", index.toString()); e.dataTransfer.effectAllowed = "move"; }; @@ -49,7 +47,6 @@ export default function DraggableTabs(props: DraggableTabsProps) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; setHoveredIndex(index); // Update hovered index - console.log("Dragging over index:", index); }; const handleDrop = (e: React.DragEvent) => { @@ -57,10 +54,6 @@ export default function DraggableTabs(props: DraggableTabsProps) { const draggedIndex = Number(e.dataTransfer.getData("text/plain")); const dropIndex = hoveredIndex; // Use the last hovered index - console.log("Dragged from index:", draggedIndex); - console.log("Dropped at index:", dropIndex); - console.log("Current tabOrder before:", tabOrder); - if (dropIndex === -1) { console.log("Drop skipped: no valid drop target"); return; @@ -70,7 +63,6 @@ export default function DraggableTabs(props: DraggableTabsProps) { const newOrder = [...tabOrder]; const [draggedItem] = newOrder.splice(draggedIndex, 1); newOrder.splice(dropIndex, 0, draggedItem); - console.log("New tabOrder after:", newOrder); setTabOrder(newOrder); } else { console.log("Drop skipped: invalid indices or same position"); @@ -78,15 +70,9 @@ export default function DraggableTabs(props: DraggableTabsProps) { setHoveredIndex(-1); // Reset hovered index }; - const handleDragEnd = (e: React.DragEvent) => { - console.log("Drag ended"); - setHoveredIndex(-1); // Reset on drag end - }; - const enhancedChildren = React.Children.map(initialChildren, (child, originalIndex) => { if (React.isValidElement(child)) { const currentIndex = tabOrder.indexOf(originalIndex); - console.log("Original index:", originalIndex, "Current index:", currentIndex); return (
(tabRefs.current[currentIndex] = el)} // Assign ref to each tab @@ -94,7 +80,6 @@ export default function DraggableTabs(props: DraggableTabsProps) { onDragStart={(e) => handleDragStart(e, currentIndex)} onDragOver={(e) => handleDragOver(e, currentIndex)} onDrop={handleDrop} // Handle drop on individual tabs - onDragEnd={handleDragEnd} > {React.cloneElement(child)}
@@ -103,16 +88,8 @@ export default function DraggableTabs(props: DraggableTabsProps) { return child; }) || []; - useEffect(() => { - console.log(hoveredIndex) - }, [hoveredIndex]) - const orderedChildren = tabOrder.map((index) => enhancedChildren[index]); const allTabs = [...startTabs, ...orderedChildren, ...endTabs]; - useEffect(() => { - console.log("Current tab order:", tabOrder); - }, [tabOrder]); - return {allTabs}; } \ No newline at end of file diff --git a/src/pages/Bins.tsx b/src/pages/Bins.tsx index c23b390..1ad43c9 100644 --- a/src/pages/Bins.tsx +++ b/src/pages/Bins.tsx @@ -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 } }); }); diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 8ff818e..c2852e5 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -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; }