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

refactor(web/menu): display bg circle when there's less than 3 item

Browse Source
This commit is contained in:
Luke
2023-01-28 18:03:51 +01:00
parent f5617abbb6
commit ea74e5705f
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -104,9 +104,12 @@ const RadialMenu: React.FC = () => {
<> <>
<Box className={classes.wrapper}> <Box className={classes.wrapper}>
<svg width="350px" height="350px" transform="rotate(90)"> <svg width="350px" height="350px" transform="rotate(90)">
<g transform="translate(175, 175)"> {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
<circle r={175} className={classes.backgroundCircle} /> {menu.items.length >= 3 && (
</g> <g transform="translate(175, 175)">
<circle r={175} className={classes.backgroundCircle} />
</g>
)}
{menu.items.map((item, index) => { {menu.items.map((item, index) => {
const pieAngle = 360 / menu.items.length; const pieAngle = 360 / menu.items.length;
const angle = degToRad(pieAngle / 2 + 90); const angle = degToRad(pieAngle / 2 + 90);
@@ -140,7 +143,6 @@ const RadialMenu: React.FC = () => {
); );
})} })}
<g transform="translate(175, 175)"> <g transform="translate(175, 175)">
{/*TODO: Fix background circle when there's 2 items*/}
<circle r={30} className={classes.centerCircle} /> <circle r={30} className={classes.centerCircle} />
</g> </g>
<FontAwesomeIcon <FontAwesomeIcon