FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 23:46:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(nui): Context menu style adjustments

Browse Source
This commit is contained in:
Luke
2022-03-25 23:56:50 +01:00
parent e3ef55b999
commit f346d2ad99
3 changed files with 98 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
web/src/components/ContextMenu.tsx
View File

@@ -2,6 +2,7 @@ import { useNuiEvent } from "../hooks/useNuiEvent";
import { import {
Box, Box,
Text, Text,
Flex,
Popover, Popover,
PopoverTrigger, PopoverTrigger,
Portal, Portal,
@@ -41,6 +42,16 @@ debugData<Props>([
description: "Even cooler vehicle", description: "Even cooler vehicle",
metadata: ["Plate: JGM 971", "Status: In garage"], metadata: ["Plate: JGM 971", "Status: In garage"],
}, },
["Burger"]: {
description: "Make a delicious burger",
metadata: {
["Bun"]: 3,
["Lettuce"]: 2,
["Meat"]: 1,
["Tomato"]: 1,
["Cheese"]: 2,
},
},
}, },
}, },
}, },
@@ -59,89 +70,97 @@ const ContextMenu: React.FC = () => {
}); });
return ( return (
<Box <Flex
position="absolute" position="absolute"
w="xs" w="75%"
h="fit-content" h="80%"
maxH="20rem" justifyContent="flex-end"
top="20%" alignItems="center"
right="25%"
> >
<Box borderRadius="md" bg="gray.700" mb={3}> <Box w="xs" h={580}>
<Text <Box borderRadius="md" bg="gray.800" mb={3}>
fontFamily="Poppins" <Text
fontSize="md" fontFamily="Poppins"
p={2} fontSize="md"
textAlign="center" p={2}
fontWeight="light" textAlign="center"
> fontWeight="light"
{contextMenu.title}
</Text>
</Box>
<Box maxH="33rem" overflowY="scroll">
{Object.entries(contextMenu.options).map((option, index) => (
<Popover
placement="right-start"
trigger="hover"
eventListeners={{ scroll: true }}
isLazy
> >
<PopoverTrigger> {contextMenu.title}
<Box </Text>
bg="gray.700" </Box>
borderRadius="md" <Box maxH={560} overflowY="scroll">
h="fit-content" {Object.entries(contextMenu.options).map((option, index) => (
w="100%" <Popover
p={2} placement="right-start"
mb={1} trigger="hover"
fontFamily="Poppins" eventListeners={{ scroll: true }}
fontSize="md" isLazy
transition="300ms" >
_hover={{ bg: "gray.800" }} <PopoverTrigger>
key={`option-${index}`} <Box
> bg="gray.800"
{/* TODO: react-markdown (?) */} borderRadius="md"
<Box paddingBottom={1}> h="fit-content"
<Text w="100%" fontWeight="medium"> w="100%"
{option[0]} p={2}
</Text> mb={1}
</Box> fontFamily="Poppins"
{option[1].description && ( fontSize="md"
transition="300ms"
_hover={{ bg: "gray.700" }}
key={`option-${index}`}
>
{/* TODO: react-markdown (?) */}
<Box paddingBottom={1}> <Box paddingBottom={1}>
<Text>{option[1].description}</Text> <Text w="100%" fontWeight="medium">
{option[0]}
</Text>
</Box> </Box>
)} {option[1].description && (
<Portal> <Box paddingBottom={1}>
<PopoverContent fontFamily="Poppins" bg="gray.800"> <Text>{option[1].description}</Text>
<PopoverBody> </Box>
{option[1]?.metadata && )}
Array.isArray(option[1].metadata) ? ( <Portal>
option[1].metadata.map((metadata: string, index) => ( <PopoverContent
<Text key={`context-metadata-${index}`}> fontFamily="Poppins"
{metadata} bg="gray.800"
</Text> outline="none"
)) border="none"
) : ( w="fit-content"
<> maxW="2xs"
{typeof option[1].metadata === "object" && >
Object.entries(option[1].metadata).map( <PopoverBody>
(metadata: { [key: string]: any }, index) => ( {option[1]?.metadata &&
<Text key={`context-metadata-${index}`}> Array.isArray(option[1].metadata) ? (
{metadata[0]}: {metadata[1]} option[1].metadata.map((metadata: string, index) => (
</Text> <Text key={`context-metadata-${index}`}>
) {metadata}
)} </Text>
</> ))
)} ) : (
</PopoverBody> <>
</PopoverContent> {typeof option[1].metadata === "object" &&
</Portal> Object.entries(option[1].metadata).map(
</Box> (metadata: { [key: string]: any }, index) => (
</PopoverTrigger> <Text key={`context-metadata-${index}`}>
</Popover> {metadata[0]}: {metadata[1]}
))} </Text>
)
)}
</>
)}
</PopoverBody>
</PopoverContent>
</Portal>
</Box>
</PopoverTrigger>
</Popover>
))}
</Box>
</Box> </Box>
</Box> </Flex>
); );
}; };

1
web/src/components/TextUI.tsx
View File

@@ -38,6 +38,7 @@ const TextUI: React.FC = () => {
w="100%" w="100%"
h="100%" h="100%"
p={3} p={3}
position="absolute"
alignItems={data.position === "top-center" ? "baseline" : "center"} alignItems={data.position === "top-center" ? "baseline" : "center"}
justifyContent={ justifyContent={
data.position === "right-center" data.position === "right-center"

1
web/src/index.css
View File

@@ -12,6 +12,7 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
height: 100vh; height: 100vh;
user-select: none; user-select: none;
overflow: hidden !important;
} }
#root { #root {