FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 15:06:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(web): scale fade transition

Browse Source
This commit is contained in:
Luke
2022-12-31 15:03:16 +01:00
parent 8722d25171
commit 2a1e7ff632
5 changed files with 147 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
web/src/features/menu/context/ContextMenu.tsx
View File

@@ -6,6 +6,7 @@ import ContextButton from './components/ContextButton';
import { fetchNui } from '../../../utils/fetchNui';
import ReactMarkdown from 'react-markdown';
import HeaderButton from './components/HeaderButton';
import ScaleFade from '../../../transitions/ScaleFade';
const openMenu = (id: string | undefined) => {
fetchNui<ContextMenuProps>('openContext', { id: id, back: true });
@@ -49,30 +50,28 @@ const ContextMenu: React.FC = () => {
});
return (
<Transition mounted={visible} transition="pop" duration={100} exitDuration={100}>
{(styles) => (
<Box style={styles} sx={{ position: 'absolute', top: '15%', right: '25%' }} w={320} h={580}>
<Flex justify="center" align="center" mb={10} gap={6}>
{contextMenu.menu && (
<HeaderButton icon="chevron-left" iconSize={16} handleClick={() => openMenu(contextMenu.menu)} />
)}
<Box sx={{ borderRadius: 4, flex: '1 85%' }} bg="dark.6">
<Text color="dark.0" p={6} align="center">
<ReactMarkdown>{contextMenu.title}</ReactMarkdown>
</Text>
</Box>
<HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />
</Flex>
<Box sx={{ height: 560, overflowY: 'scroll' }}>
<Stack spacing={3}>
{Object.entries(contextMenu.options).map((option, index) => (
<ContextButton option={option} key={`context-item-${index}`} />
))}
</Stack>
<Box sx={{ position: 'absolute', top: '15%', right: '25%' }} w={320} h={580}>
<ScaleFade visible={visible}>
<Flex justify="center" align="center" mb={10} gap={6}>
{contextMenu.menu && (
<HeaderButton icon="chevron-left" iconSize={16} handleClick={() => openMenu(contextMenu.menu)} />
)}
<Box sx={{ borderRadius: 4, flex: '1 85%' }} bg="dark.6">
<Text color="dark.0" p={6} align="center">
<ReactMarkdown>{contextMenu.title}</ReactMarkdown>
</Text>
</Box>
<HeaderButton icon="xmark" canClose={contextMenu.canClose} iconSize={18} handleClick={closeContext} />
</Flex>
<Box sx={{ height: 560, overflowY: 'scroll' }}>
<Stack spacing={3}>
{Object.entries(contextMenu.options).map((option, index) => (
<ContextButton option={option} key={`context-item-${index}`} />
))}
</Stack>
</Box>
)}
</Transition>
</ScaleFade>
</Box>
);
};

9
web/src/features/textui/TextUI.tsx
View File

@@ -4,6 +4,7 @@ import { Box, createStyles, Group } from '@mantine/core';
import ReactMarkdown from 'react-markdown';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import ScaleFade from '../../transitions/ScaleFade';
type Position = 'right-center' | 'left-center' | 'top-center';
@@ -55,16 +56,16 @@ const TextUI: React.FC = () => {
return (
<>
{visible && (
<Box className={classes.wrapper}>
<Box className={classes.wrapper}>
<ScaleFade visible={visible}>
<Box style={data.style} className={classes.container}>
<Group spacing={12}>
{data.icon && <FontAwesomeIcon icon={data.icon} fixedWidth size="lg" style={{ color: data.iconColor }} />}
<ReactMarkdown>{data.text}</ReactMarkdown>
</Group>
</Box>
</Box>
)}
</ScaleFade>
</Box>
</>
);
};