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

using normal tabs for now instead of animated, did some highlighting to make it more obvious what where the tab is being dropped

Browse source
This commit is contained in:
Carter 2025-03-28 10:58:54 -06:00
parent 976736c0b4
commit f0b3f5a0d8
2 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/bin/BinYards.tsx
View file

@ -547,7 +547,7 @@ export default function BinYard(props: Props) {
<ListItemText secondary="Share Yard" /> <ListItemText secondary="Share Yard" />
</MenuItem> </MenuItem>
)} )}
<MenuItem {/* <MenuItem
onClick={() => { onClick={() => {
moveLeft(yardIndex); moveLeft(yardIndex);
setMenuAnchorEl(null); setMenuAnchorEl(null);
@ -570,7 +570,7 @@ export default function BinYard(props: Props) {
<KeyboardArrowRightIcon /> <KeyboardArrowRightIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText secondary="Move Right" /> <ListItemText secondary="Move Right" />
</MenuItem> </MenuItem> */}
{permissions.includes(pond.Permission.PERMISSION_USERS) && ( {permissions.includes(pond.Permission.PERMISSION_USERS) && (
<MenuItem <MenuItem
onClick={() => { onClick={() => {

14
src/common/DraggableTabs.tsx
View file

@ -1,6 +1,6 @@
import { Tabs, TabsProps } from "@mui/material"; import { darken, Tabs, TabsProps } from "@mui/material";
import React, { useEffect, useState, useRef } from "react"; import React, { useEffect, useState, useRef } from "react";
import AnimatedTabs from "./AnimatedTabs"; // import AnimatedTabs from "./AnimatedTabs";
interface DraggableTabsProps extends TabsProps { interface DraggableTabsProps extends TabsProps {
children: React.ReactNode; children: React.ReactNode;
@ -96,6 +96,13 @@ export default function DraggableTabs(props: DraggableTabsProps) {
onDragStart: (e: React.DragEvent<HTMLDivElement>) => handleDragStart(e, currentIndex), onDragStart: (e: React.DragEvent<HTMLDivElement>) => handleDragStart(e, currentIndex),
onDragOver: (e: React.DragEvent<HTMLDivElement>) => handleDragOver(e, currentIndex), onDragOver: (e: React.DragEvent<HTMLDivElement>) => handleDragOver(e, currentIndex),
onDrop: handleDrop, onDrop: handleDrop,
style: {
...(hoveredIndex === currentIndex && {
background: "rgba(150, 150, 150, 0.1)",
border: "1px double blue",
borderStyle: "hidden hidden hidden dotted",
}),
},
}); });
} }
return child; return child;
@ -104,5 +111,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
const orderedChildren = tabOrder.map((index) => enhancedChildren[index]); const orderedChildren = tabOrder.map((index) => enhancedChildren[index]);
const allTabs = [...startTabs, ...orderedChildren, ...endTabs]; const allTabs = [...startTabs, ...orderedChildren, ...endTabs];
return <AnimatedTabs {...tabsProps} value={selectedValue}>{allTabs}</AnimatedTabs>; // return <AnimatedTabs {...tabsProps} value={selectedValue}>{allTabs}</AnimatedTabs>;
return <Tabs {...tabsProps} value={selectedValue}>{allTabs}</Tabs>;
} }