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

changed the swipeable drawer to use a different variant when closed so the faded background doesn't linger

Browse source
This commit is contained in:
Carter 2025-04-01 11:42:46 -06:00
parent 4c8664841f
commit 2c4aceb13c
4 changed files with 22 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/app/Header.tsx
View file

@ -129,7 +129,6 @@ export default function Header(props: Props) {
<HeaderButtons hasTeams={hasTeams} team={team} user={user} /> <HeaderButtons hasTeams={hasTeams} team={team} user={user} />
</Box> </Box>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} /> <SideNavigator open={navOpen} onOpen={() => {setNavOpen(true)}} onClose={() => {setNavOpen(false)}} />
{isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />} {isMobile && <BottomNavigator setNavOpen={() => {setNavOpen(true)}} sideIsOpen={navOpen} />}

30
src/app/LoadingScreen.tsx
View file

@ -1,23 +1,23 @@
import { Box, CircularProgress, Typography, useTheme } from "@mui/material"; import { Box, CircularProgress, Typography, useTheme } from "@mui/material";
interface Props { interface Props {
message?: string; message?: string;
} }
export default function LoadingScreen(props: Props) { export default function LoadingScreen(props: Props) {
const { message } = props; const { message } = props;
const theme = useTheme(); const theme = useTheme();
return ( return (
<Box sx={{ width: "100%", height: "100%", justifyContent: "center", alignContent: "center", textAlign: "center" }}> <Box sx={{ width: "100%", height: "100%", justifyContent: "center", alignContent: "center", textAlign: "center" }}>
<CircularProgress <CircularProgress
size={150} size={150}
style={{ marginBottom: theme.spacing(4) }} style={{ marginBottom: theme.spacing(4) }}
/> />
<br/> <br/>
<Typography variant="h6"> <Typography variant="h6">
{message ? message : "Loading..."} {message ? message : "Loading..."}
</Typography> </Typography>
</Box> </Box>
); );
} }

8
src/common/DraggableTabs.tsx
View file

@ -14,7 +14,6 @@ export default function DraggableTabs(props: DraggableTabsProps) {
const { startNode, endNode, children, ...tabsProps } = props; const { startNode, endNode, children, ...tabsProps } = props;
const [selectedValue, setSelectedValue] = useState<any>(tabsProps.value); const [selectedValue, setSelectedValue] = useState<any>(tabsProps.value);
const initialChildren = React.Children.toArray(children); const initialChildren = React.Children.toArray(children);
// const [tabOrder, setTabOrder] = useState<number[]>([]);
const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab const [hoveredIndex, setHoveredIndex] = useState<number>(-1); // Track hovered tab
const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab const tabRefs = useRef<(HTMLDivElement | null)[]>([]); // Refs for each tab
const [{ as, user }] = useGlobalState() const [{ as, user }] = useGlobalState()
@ -30,21 +29,20 @@ export default function DraggableTabs(props: DraggableTabsProps) {
// Get tab order from cache // Get tab order from cache
const [tabOrder, setTabOrder] = useState<number[]>(() => { const [tabOrder, setTabOrder] = useState<number[]>(() => {
const storedValue = localStorage.getItem(cacheKey); const storedValue = localStorage.getItem(cacheKey);
console.log(storedValue)
console.log(JSON.parse(storedValue!))
console.log(storedValue !== null)
return storedValue !== null ? JSON.parse(storedValue) : []; return storedValue !== null ? JSON.parse(storedValue) : [];
}); });
// save tab order to cache when it changes // save tab order to cache when it changes
useEffect(() => { useEffect(() => {
console.log(tabOrder) // console.log(initialChildren.length)
localStorage.setItem(cacheKey, JSON.stringify(tabOrder)); localStorage.setItem(cacheKey, JSON.stringify(tabOrder));
}, [tabOrder]); }, [tabOrder]);
useEffect(() => { useEffect(() => {
const newOrder = initialChildren.map((_, index) => index); const newOrder = initialChildren.map((_, index) => index);
if (tabOrder.length < 1) setTabOrder(newOrder); if (tabOrder.length < 1) setTabOrder(newOrder);
// const oddOnesOut = newOrder.filter(item => !tabOrder.includes(item))
// setTabOrder([...oddOnesOut, ...tabOrder])
tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs tabRefs.current = new Array(newOrder.length).fill(null); // Initialize refs
}, [initialChildren.length]); }, [initialChildren.length]);

7
src/navigation/SideNavigator.tsx
View file

@ -217,7 +217,7 @@ export default function SideNavigator(props: Props) {
id="tour-dashboard" id="tour-dashboard"
onClick={() => goTo("/users")} onClick={() => goTo("/users")}
classes={getClasses("/user")} classes={getClasses("/user")}
> >
<ListItemIcon> <ListItemIcon>
<Person /> <Person />
</ListItemIcon> </ListItemIcon>
@ -238,7 +238,7 @@ export default function SideNavigator(props: Props) {
</ListItemButton> </ListItemButton>
</Tooltip> </Tooltip>
)} )}
{(IsOmniAir || user.hasFeature("admin")) && ( {(IsOmniAir() || user.hasFeature("admin")) && (
<Tooltip title="Aviation Map" placement="right"> <Tooltip title="Aviation Map" placement="right">
<ListItemButton <ListItemButton
id="tour-aviation-map" id="tour-aviation-map"
@ -258,7 +258,8 @@ export default function SideNavigator(props: Props) {
return ( return (
<SwipeableDrawer <SwipeableDrawer
variant={width === "xs" || width === "sm" ? "temporary" : "permanent"} // variant={width === "xs" || width === "sm" ? "temporary" : "permanent"}
variant={!open ? "permanent" : width === "xs" || width === "sm" ? "temporary" : "permanent"}
classes={{ classes={{
paper: classNames( paper: classNames(
classes.sideMenu, classes.sideMenu,