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

feat(nui): Metadata popover

Browse Source
This commit is contained in:
Luke
2022-03-24 20:00:09 +01:00
parent 637d6d8e99
commit e3ef55b999
2 changed files with 95 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,13 @@
import { useNuiEvent } from "../hooks/useNuiEvent"; import { useNuiEvent } from "../hooks/useNuiEvent";
import { Box, Text } from "@chakra-ui/react"; import {
Box,
Text,
Popover,
PopoverTrigger,
Portal,
PopoverContent,
PopoverBody,
} from "@chakra-ui/react";
import { debugData } from "../utils/debugData"; import { debugData } from "../utils/debugData";
import { useState } from "react"; import { useState } from "react";
@@ -51,64 +59,89 @@ const ContextMenu: React.FC = () => {
}); });
return ( return (
<> <Box
<Box position="absolute" w="xs" h="fit-content" top="20%" right="25%"> position="absolute"
<Box borderRadius="md" bg="gray.700" mb={3}> w="xs"
<Text h="fit-content"
fontFamily="Poppins" maxH="20rem"
fontSize="md" top="20%"
p={2} right="25%"
textAlign="center" >
fontWeight="light" <Box borderRadius="md" bg="gray.700" mb={3}>
> <Text
{contextMenu.title} fontFamily="Poppins"
</Text> fontSize="md"
</Box> p={2}
textAlign="center"
fontWeight="light"
>
{contextMenu.title}
</Text>
</Box>
<Box maxH="33rem" overflowY="scroll">
{Object.entries(contextMenu.options).map((option, index) => ( {Object.entries(contextMenu.options).map((option, index) => (
<Box <Popover
bg="gray.700" placement="right-start"
borderRadius="md" trigger="hover"
h="fit-content" eventListeners={{ scroll: true }}
w="100%" isLazy
p={2}
mb={1}
fontFamily="Poppins"
fontSize="md"
transition="300ms"
_hover={{ bg: "gray.800" }}
key={`option-${index}`}
> >
{/* TODO: react-markdown (?) */} <PopoverTrigger>
<Box paddingBottom={1}> <Box
<Text w="100%" fontWeight="medium"> bg="gray.700"
{option[0]} borderRadius="md"
</Text> h="fit-content"
</Box> w="100%"
{option[1].description && ( p={2}
<Box paddingBottom={1}> mb={1}
<Text>{option[1].description}</Text> 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 && (
<Box paddingBottom={1}>
<Text>{option[1].description}</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> </Box>
)} </PopoverTrigger>
{option[1]?.metadata && Array.isArray(option[1].metadata) ? ( </Popover>
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>
)
)}
</>
)}
</Box>
))} ))}
</Box> </Box>
</> </Box>
); );
}; };

8
web/src/index.css
View File

@@ -40,3 +40,11 @@ code {
width: 100%; width: 100%;
} }
} }
::-webkit-scrollbar {
background-color: transparent;
padding: 0;
margin: 0;
width: 0;
height: 0;
}