FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-16 22: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 {
Box,
Text,
Flex,
Popover,
PopoverTrigger,
Portal,
@@ -41,6 +42,16 @@ debugData<Props>([
description: "Even cooler vehicle",
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 (
<Box
<Flex
position="absolute"
w="xs"
h="fit-content"
maxH="20rem"
top="20%"
right="25%"
w="75%"
h="80%"
justifyContent="flex-end"
alignItems="center"
>
<Box borderRadius="md" bg="gray.700" mb={3}>
<Text
fontFamily="Poppins"
fontSize="md"
p={2}
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
<Box w="xs" h={580}>
<Box borderRadius="md" bg="gray.800" mb={3}>
<Text
fontFamily="Poppins"
fontSize="md"
p={2}
textAlign="center"
fontWeight="light"
>
<PopoverTrigger>
<Box
bg="gray.700"
borderRadius="md"
h="fit-content"
w="100%"
p={2}
mb={1}
fontFamily="Poppins"
fontSize="md"
transition="300ms"
_hover={{ bg: "gray.800" }}
key={`option-${index}`}
>
{/* TODO: react-markdown (?) */}
<Box paddingBottom={1}>
<Text w="100%" fontWeight="medium">
{option[0]}
</Text>
</Box>
{option[1].description && (
{contextMenu.title}
</Text>
</Box>
<Box maxH={560} overflowY="scroll">
{Object.entries(contextMenu.options).map((option, index) => (
<Popover
placement="right-start"
trigger="hover"
eventListeners={{ scroll: true }}
isLazy
>
<PopoverTrigger>
<Box
bg="gray.800"
borderRadius="md"
h="fit-content"
w="100%"
p={2}
mb={1}
fontFamily="Poppins"
fontSize="md"
transition="300ms"
_hover={{ bg: "gray.700" }}
key={`option-${index}`}
>
{/* TODO: react-markdown (?) */}
<Box paddingBottom={1}>
<Text>{option[1].description}</Text>
<Text w="100%" fontWeight="medium">
{option[0]}
</Text>
</Box>
)}
<Portal>
<PopoverContent fontFamily="Poppins" bg="gray.800">
<PopoverBody>
{option[1]?.metadata &&
Array.isArray(option[1].metadata) ? (
option[1].metadata.map((metadata: string, index) => (
<Text key={`context-metadata-${index}`}>
{metadata}
</Text>
))
) : (
<>
{typeof option[1].metadata === "object" &&
Object.entries(option[1].metadata).map(
(metadata: { [key: string]: any }, index) => (
<Text key={`context-metadata-${index}`}>
{metadata[0]}: {metadata[1]}
</Text>
)
)}
</>
)}
</PopoverBody>
</PopoverContent>
</Portal>
</Box>
</PopoverTrigger>
</Popover>
))}
{option[1].description && (
<Box paddingBottom={1}>
<Text>{option[1].description}</Text>
</Box>
)}
<Portal>
<PopoverContent
fontFamily="Poppins"
bg="gray.800"
outline="none"
border="none"
w="fit-content"
maxW="2xs"
>
<PopoverBody>
{option[1]?.metadata &&
Array.isArray(option[1].metadata) ? (
option[1].metadata.map((metadata: string, index) => (
<Text key={`context-metadata-${index}`}>
{metadata}
</Text>
))
) : (
<>
{typeof option[1].metadata === "object" &&
Object.entries(option[1].metadata).map(
(metadata: { [key: string]: any }, index) => (
<Text key={`context-metadata-${index}`}>
{metadata[0]}: {metadata[1]}
</Text>
)
)}
</>
)}
</PopoverBody>
</PopoverContent>
</Portal>
</Box>
</PopoverTrigger>
</Popover>
))}
</Box>
</Box>
</Box>
</Flex>
);
};

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

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

1
web/src/index.css
View File

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