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

feat(web): font awesome icon animations

Browse Source
This commit is contained in:
Luke
2023-11-15 15:28:21 +01:00
parent a50f7a2052
commit 882e372895
24 changed files with 124 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/features/menu/radial/index.tsx
View File

@@ -6,6 +6,7 @@ import { fetchNui } from '../../../utils/fetchNui';
import ScaleFade from '../../../transitions/ScaleFade';
import type { RadialMenuItem } from '../../../typings';
import { useLocales } from '../../../providers/LocaleProvider';
import LibIcon from '../../../components/LibIcon';
const useStyles = createStyles((theme) => ({
wrapper: {
@@ -81,18 +82,23 @@ const RadialMenu: React.FC = () => {
useEffect(() => {
if (menu.items.length <= PAGE_ITEMS) return setMenuItems(menu.items);
const items = menu.items.slice(PAGE_ITEMS * (menu.page - 1) - (menu.page - 1), PAGE_ITEMS * menu.page - menu.page + 1);
const items = menu.items.slice(
PAGE_ITEMS * (menu.page - 1) - (menu.page - 1),
PAGE_ITEMS * menu.page - menu.page + 1
);
if (PAGE_ITEMS * menu.page - menu.page + 1 < menu.items.length) {
items[items.length - 1] = { icon: 'ellipsis-h', label: locale.ui.more, isMore: true };
}
setMenuItems(items);
}, [menu.items, menu.page]);
useNuiEvent('openRadialMenu', async (data: { items: RadialMenuItem[]; sub?: boolean, option?: string } | false) => {
useNuiEvent('openRadialMenu', async (data: { items: RadialMenuItem[]; sub?: boolean; option?: string } | false) => {
if (!data) return setVisible(false);
let initialPage = 1;
if (data.option) {
data.items.findIndex((item, index) => item.menu == data.option && (initialPage = Math.floor(index / PAGE_ITEMS) + 1));
data.items.findIndex(
(item, index) => item.menu == data.option && (initialPage = Math.floor(index / PAGE_ITEMS) + 1)
);
}
setMenu({ ...data, page: initialPage });
setVisible(true);
@@ -134,7 +140,8 @@ const RadialMenu: React.FC = () => {
transform={`rotate(-${index * pieAngle} 175 175) translate(${sinAngle * gap}, ${cosAngle * gap})`}
className={classes.sector}
onClick={async () => {
const clickIndex = menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
const clickIndex =
menu.page === 1 ? index : PAGE_ITEMS * (menu.page - 1) - (menu.page - 1) + index;
if (!item.isMore) fetchNui('radialClick', clickIndex);
else {
await changePage(true);
@@ -147,19 +154,21 @@ const RadialMenu: React.FC = () => {
}, ${175 + (175 - gap) * Math.sin(-degToRad(pieAngle))} z`}
/>
<g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
<FontAwesomeIcon
x={iconX - 12.5}
y={iconY - 17.5}
icon={item.icon}
width={25}
height={25}
fixedWidth
/>
<text x={iconX} y={iconY + (item.label.includes(" \n") ? 7 : 25)} fill="#fff" textAnchor="middle" pointerEvents="none">
{item.label.includes(" \n")
? item.label.split(" \n").map((value) => <tspan x={iconX} dy="1.2em">{value}</tspan>)
: item.label
}
<LibIcon x={iconX - 12.5} y={iconY - 17.5} icon={item.icon} width={25} height={25} fixedWidth />
<text
x={iconX}
y={iconY + (item.label.includes(' \n') ? 7 : 25)}
fill="#fff"
textAnchor="middle"
pointerEvents="none"
>
{item.label.includes(' \n')
? item.label.split(' \n').map((value) => (
<tspan x={iconX} dy="1.2em">
{value}
</tspan>
))
: item.label}
</text>
</g>
</g>
@@ -183,7 +192,7 @@ const RadialMenu: React.FC = () => {
</g>
</svg>
<div className={classes.centerIconContainer}>
<FontAwesomeIcon
<LibIcon
icon={!menu.sub && menu.page < 2 ? 'xmark' : 'arrow-rotate-left'}
fixedWidth
className={classes.centerIcon}