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

refactor(web/menu): attempt alignment

Browse Source 
doka pls fix
This commit is contained in:
Luke
2023-01-22 14:00:44 +01:00
parent 1be71ea6ba
commit 819bb60bd3
1 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
web/src/features/menu/planet/index.tsx
View File

@@ -30,9 +30,11 @@ debugData<{ items: MenuItem[]; sub?: boolean }>([
items: [ items: [
{ icon: 'palette', label: 'Paint' }, { icon: 'palette', label: 'Paint' },
{ icon: 'warehouse', label: 'Garage' }, { icon: 'warehouse', label: 'Garage' },
{ icon: 'palette', label: 'Quite long text' },
{ icon: 'palette', label: 'Paint' }, { icon: 'palette', label: 'Paint' },
// { icon: 'warehouse', label: 'Garage' }, { icon: 'warehouse', label: 'Garage' },
], ],
sub: false, sub: false,
}, },
}, },
@@ -99,14 +101,16 @@ const useStyles = createStyles((theme) => ({
sector: { sector: {
fill: theme.colors.dark[6], fill: theme.colors.dark[6],
color: theme.colors.dark[0], color: theme.colors.dark[0],
'&:hover': { '&:hover': {
fill: theme.fn.primaryColor(), fill: theme.fn.primaryColor(),
'> g > text, > g > svg > path': {
fill: '#fff',
},
},
'> g > text': {
fill: theme.colors.dark[0],
}, },
stroke: '#fff',
strokeWidth: '1px',
},
circleIcon: {
// position: 'relative',
}, },
})); }));
@@ -134,37 +138,29 @@ const PlanetMenu: React.FC = () => {
return ( return (
<> <>
<Box className={classes.wrapper}> <Box className={classes.wrapper}>
<svg width="500px" height="500px" transform="rotate(90)"> <svg width="350px" height="350px" transform="rotate(90)">
{menu.items.map((item, index) => { {menu.items.map((item, index) => {
// TODO: center labels and icon inside sector
const pieAngle = 360 / menu.items.length; const pieAngle = 360 / menu.items.length;
const angle = degToRad(pieAngle / 2 + 90); const angle = degToRad(pieAngle / 2 + 90);
const radius = 250 / 2; const radius = 175 / 2;
const iconX = 250 + Math.sin(angle) * radius; const iconX = 175 + Math.sin(angle) * radius;
const iconY = 250 + Math.cos(angle) * radius; const iconY = 175 + Math.cos(angle) * radius;
return ( return (
<> <>
<g transform={`rotate(-${index * pieAngle} 250 250)`}> <g transform={`rotate(-${index * pieAngle} 175 175)`} className={classes.sector}>
<path <path
className={classes.sector} stroke="#fff"
d={`M250,250 l250,0 A250,250 0 0,0 ${250 + 250 * Math.cos(-degToRad(pieAngle))}, ${ d={`M175.01,175.01 l175,0 A175.01,175.01 0 0,0 ${175 + 175 * Math.cos(-degToRad(pieAngle))}, ${
250 + 250 * Math.sin(-degToRad(pieAngle)) 175 + 175 * Math.sin(-degToRad(pieAngle))
} z`} } z`}
/> />
<text x={iconX} y={iconY} textAnchor="middle" fill="#fff" width={50} height={50}> <g transform={`rotate(${index * pieAngle - 90} ${iconX} ${iconY})`} pointerEvents="none">
{item.label} <FontAwesomeIcon x={iconX - 13} y={iconY - 35} icon={item.icon} width={25} height={25} fixedWidth />
</text> <text x={iconX} y={iconY + 10} fill="#fff" textAnchor="middle" pointerEvents="none">
{/*<FontAwesomeIcon*/} {item.label}
{/* icon={item.icon}*/} </text>
{/* fixedWidth*/} </g>
{/* className={classes.circleIcon}*/}
{/* width={50}*/}
{/* height={50}*/}
{/* x={iconX}*/}
{/* y={iconY}*/}
{/* // transform="translate(-5,-5)"*/}
{/*/>*/}
</g> </g>
</> </>
); );