FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 06:56: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 { Box, Text } from "@chakra-ui/react";
import {
Box,
Text,
Popover,
PopoverTrigger,
Portal,
PopoverContent,
PopoverBody,
} from "@chakra-ui/react";
import { debugData } from "../utils/debugData";
import { useState } from "react";
@@ -51,64 +59,89 @@ const ContextMenu: React.FC = () => {
});
return (
<>
<Box position="absolute" w="xs" h="fit-content" top="20%" right="25%">
<Box borderRadius="md" bg="gray.700" mb={3}>
<Text
fontFamily="Poppins"
fontSize="md"
p={2}
textAlign="center"
fontWeight="light"
>
{contextMenu.title}
</Text>
</Box>
<Box
position="absolute"
w="xs"
h="fit-content"
maxH="20rem"
top="20%"
right="25%"
>
<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) => (
<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}`}
<Popover
placement="right-start"
trigger="hover"
eventListeners={{ scroll: true }}
isLazy
>
{/* 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>
<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 && (
<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>
)}
{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>
)
)}
</>
)}
</Box>
</PopoverTrigger>
</Popover>
))}
</Box>
</>
</Box>
);
};

8
web/src/index.css
View File

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