Skip to content

Commit 8a39df6

Browse files
dragoni7dragoni7
authored
Merge pull request #95 from dragoni7/buttons-and-menus
Buttons and menus
2 parents ca7f154 + c7b0375 commit 8a39df6

File tree

9 files changed

+135
-191
lines changed

9 files changed

+135
-191
lines changed

‎src/components/BackButton.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Button, styled } from '@mui/material';
2+
3+
export const BackButton = styled(Button)(({ theme }) => ({
4+
zIndex: 1000,
5+
background: 'transparent',
6+
color: 'white',
7+
padding: theme.spacing(1, 2),
8+
'&:hover': {
9+
background: 'rgba(255, 255, 255, 0.1)',
10+
},
11+
'& .MuiButton-startIcon': {
12+
marginRight: theme.spacing(1),
13+
},
14+
}));

‎src/components/D2LButton.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Button, styled } from '@mui/material';
2+
3+
export const D2LButton = styled(Button)(({ theme }) => ({
4+
background: 'rgba(0, 0, 0, 0.4)',
5+
backdropFilter: 'blur(10px)',
6+
color: 'white',
7+
padding: theme.spacing(1, 2),
8+
fontFamily: 'Helvetica, Arial, sans-serif',
9+
'&:hover': {
10+
background: 'rgba(0, 0, 0, 0.7)',
11+
backdropFilter: 'blur(10px)',
12+
border: '1px solid rgba(255, 255, 255, 1)',
13+
},
14+
borderRadius: 0,
15+
border: '1px solid rgba(255, 255, 255, 0.5)',
16+
transition: 'all 0.3s ease',
17+
}));

‎src/components/LoadoutCustomization.css

Lines changed: 0 additions & 65 deletions
This file was deleted.

‎src/components/LoadoutCustomization.tsx

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import './LoadoutCustomization.css';
32
import { Button, Box, Container, Grid } from '@mui/material';
43
import { styled } from '@mui/material/styles';
54
import ModCustomization from '../features/armor-mods/components/ModCustomization';
@@ -8,26 +7,14 @@ import AbilitiesModification from '../features/subclass/AbilitiesModification';
87
import ShareLoadout from '../features/loadouts/components/ShareLoadout';
98
import { SubclassConfig } from '../types/d2l-types';
109
import TotalStatsDisplay from '../features/subclass/TotalStatsDisplay';
10+
import { BackButton } from './BackButton';
1111

1212
interface LoadoutCustomizationProps {
1313
onBackClick: () => void;
1414
screenshot: string;
1515
subclass: SubclassConfig;
1616
}
1717

18-
const TransparentButton = styled(Button)(({ theme }) => ({
19-
zIndex: 1000,
20-
background: 'transparent',
21-
color: 'white',
22-
padding: theme.spacing(1, 2),
23-
'&:hover': {
24-
background: 'rgba(255, 255, 255, 0.1)',
25-
},
26-
'& .MuiButton-startIcon': {
27-
marginRight: theme.spacing(1),
28-
},
29-
}));
30-
3118
const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
3219
onBackClick,
3320
screenshot,
@@ -82,12 +69,12 @@ const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
8269

8370
<Grid container columns={2} sx={{ position: 'relative', zIndex: 3, height: '100%' }}>
8471
<Grid item md={1}>
85-
<TransparentButton
72+
<BackButton
8673
onClick={onBackClick}
8774
startIcon={<span style={{ fontSize: '1.2em' }}>←</span>}
8875
>
8976
Back
90-
</TransparentButton>
77+
</BackButton>
9178
</Grid>
9279
<Grid item md={1} />
9380
<Grid item md={1}>

‎src/features/armor-mods/components/ArmorModSelector.tsx

Lines changed: 46 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { useState } from 'react';
2-
import { Box, Typography } from '@mui/material';
1+
import React, { useEffect, useRef, useState } from 'react';
2+
import { Box } from '@mui/system';
33
import { ManifestArmorMod, ManifestArmorStatMod } from '../../../types/manifest-types';
4-
import { IconButton } from '@mui/material';
4+
import { Tooltip, IconButton, styled } from '@mui/material';
55
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
66
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
77
import HoverCard from '../../../components/HoverCard';
@@ -16,6 +16,42 @@ interface ModSelectorProps {
1616
const lockedModIcon =
1717
'https://www.bungie.net/common/destiny2_content/icons/1426b518acd10943c31171c99222e6fd.png';
1818

19+
const Submenu = styled('div', { shouldForwardProp: (prop) => prop !== 'top' })<{ top: number }>(
20+
({ theme, top }) =>
21+
top > 500
22+
? {
23+
display: 'none',
24+
position: 'absolute',
25+
left: 0,
26+
[theme.breakpoints.down('lg')]: {
27+
bottom: '100%',
28+
},
29+
[theme.breakpoints.between('lg', 'xl')]: {
30+
top: '100%',
31+
},
32+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
33+
backdropFilter: 'blur(5px)',
34+
padding: '6px',
35+
zIndex: 1000,
36+
width: '550px',
37+
borderRadius: '0px',
38+
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
39+
}
40+
: {
41+
display: 'none',
42+
position: 'absolute',
43+
left: 0,
44+
top: '100%',
45+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
46+
backdropFilter: 'blur(5px)',
47+
padding: '6px',
48+
zIndex: 1000,
49+
width: '550px',
50+
borderRadius: '0px',
51+
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
52+
}
53+
);
54+
1955
const ArmorModSelector: React.FC<ModSelectorProps> = ({
2056
selected,
2157
mods,
@@ -26,6 +62,8 @@ const ArmorModSelector: React.FC<ModSelectorProps> = ({
2662
const [hoveredMod, setHoveredMod] = useState<ManifestArmorMod | ManifestArmorStatMod | null>(
2763
null
2864
);
65+
const [top, setTop] = useState<number>(0);
66+
const elementRef = useRef<HTMLDivElement>(null);
2967
const modsPerPage = 18; // 3 rows * 6 columns
3068

3169
const handlePrevious = () => {
@@ -51,6 +89,7 @@ const ArmorModSelector: React.FC<ModSelectorProps> = ({
5189

5290
return (
5391
<Box
92+
ref={elementRef}
5493
sx={{
5594
position: 'relative',
5695
cursor: 'pointer',
@@ -68,27 +107,12 @@ const ArmorModSelector: React.FC<ModSelectorProps> = ({
68107
backgroundColor: 'rgba(10, 10, 10, 0.8)',
69108
}}
70109
/>
71-
<Box
72-
className="submenu-grid"
73-
sx={{
74-
display: 'none',
75-
position: 'absolute',
76-
top: '100%',
77-
left: 0,
78-
backgroundColor: 'rgba(255, 255, 255, 0.1)',
79-
backdropFilter: 'blur(5px)',
80-
padding: '10px',
81-
zIndex: 1000,
82-
width: '550px',
83-
borderRadius: '0px',
84-
boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
85-
}}
86-
>
110+
<Submenu top={top} className="submenu-grid">
87111
<Box sx={{ display: 'flex', alignItems: 'center' }}>
88112
<IconButton
89113
onClick={handlePrevious}
90114
disabled={startIndex === 0}
91-
sx={{ color: 'white', padding: '10px' }}
115+
sx={{ color: 'white', height: '100%', borderRadius: 0 }}
92116
>
93117
<ChevronLeftIcon />
94118
</IconButton>
@@ -147,12 +171,12 @@ const ArmorModSelector: React.FC<ModSelectorProps> = ({
147171
<IconButton
148172
onClick={handleNext}
149173
disabled={startIndex + modsPerPage >= mods.length}
150-
sx={{ color: 'white', padding: '10px' }}
174+
sx={{ color: 'white', height: '100%', borderRadius: 0 }}
151175
>
152176
<ChevronRightIcon />
153177
</IconButton>
154178
</Box>
155-
</Box>
179+
</Submenu>
156180
</Box>
157181
);
158182
};

‎src/features/loadouts/components/EquipLoadout.tsx

Lines changed: 17 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { TransitionProps } from '@mui/material/transitions';
2525
import SaveLoadout from './SaveLoadout';
2626
import { refreshProfileCharacters } from '../../../util/profile-characters';
2727
import { useDispatch } from 'react-redux';
28+
import { D2LButton } from '../../../components/D2LButton';
2829

2930
const StyledTitle = styled(Typography)(({ theme }) => ({
3031
paddingBottom: theme.spacing(1),
@@ -49,22 +50,6 @@ const LoadoutDialog = styled(Dialog)(({ theme }) => ({
4950
},
5051
}));
5152

52-
const TransparentButton = styled(Button)(({ theme }) => ({
53-
background: 'rgba(0, 0, 0, 0.4)',
54-
backdropFilter: 'blur(10px)',
55-
color: 'white',
56-
padding: theme.spacing(1, 2),
57-
fontFamily: 'Helvetica, Arial, sans-serif',
58-
'&:hover': {
59-
background: 'rgba(0, 0, 0, 0.7)',
60-
backdropFilter: 'blur(10px)',
61-
border: '1px solid rgba(255, 255, 255, 1)',
62-
},
63-
borderRadius: 0,
64-
border: '1px solid rgba(255, 255, 255, 0.5)',
65-
transition: 'all 0.3s ease',
66-
}));
67-
6853
const Transition = React.forwardRef(function Transition(
6954
props: TransitionProps & {
7055
children: React.ReactElement<any, any>;
@@ -131,7 +116,7 @@ const EquipLoadout: React.FC = () => {
131116

132117
return (
133118
<>
134-
<TransparentButton onClick={onButtonClick}>Equip Loadout</TransparentButton>
119+
<D2LButton onClick={onButtonClick}>Equip Loadout</D2LButton>
135120
<LoadoutDialog
136121
open={alertOpen}
137122
onClose={() => setAlertOpen(false)}
@@ -146,11 +131,18 @@ const EquipLoadout: React.FC = () => {
146131
</DialogContentText>
147132
</DialogContent>
148133
<DialogActions>
149-
<Button onClick={onDialogContinue}>CONTINUE</Button>
150-
<Button onClick={() => setAlertOpen(false)}>GO BACK</Button>
134+
<D2LButton onClick={onDialogContinue}>CONTINUE</D2LButton>
135+
<D2LButton onClick={() => setAlertOpen(false)}>GO BACK</D2LButton>
151136
</DialogActions>
152137
</LoadoutDialog>
153-
<Backdrop open={open} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}>
138+
<Backdrop
139+
open={open}
140+
sx={{
141+
color: '#fff',
142+
zIndex: (theme) => theme.zIndex.drawer + 1,
143+
backdropFilter: 'blur(5px)',
144+
}}
145+
>
154146
<Paper
155147
elevation={5}
156148
sx={{
@@ -246,19 +238,17 @@ const EquipLoadout: React.FC = () => {
246238
item
247239
container
248240
md={12}
249-
textAlign="center"
250-
alignItems="flex-end"
251-
justifyContent="space-betwen"
252241
height="7%"
242+
alignItems="center"
253243
sx={{ backgroundColor: 'rgba(0,0,0,0.8)' }}
254244
>
255245
{equipping ? (
256246
''
257247
) : (
258248
<>
259-
<Grid item md={4}>
249+
<Grid item md={6}>
260250
<FadeIn delay={200}>
261-
<Button
251+
<D2LButton
262252
onClick={() => {
263253
setOpen(false);
264254
setResults([]);
@@ -267,15 +257,10 @@ const EquipLoadout: React.FC = () => {
267257
}}
268258
>
269259
Back
270-
</Button>
271-
</FadeIn>
272-
</Grid>
273-
<Grid item md={4}>
274-
<FadeIn delay={400}>
275-
<Button>Share</Button>
260+
</D2LButton>
276261
</FadeIn>
277262
</Grid>
278-
<Grid item md={4}>
263+
<Grid item md={6}>
279264
<FadeIn delay={600}>
280265
<SaveLoadout />
281266
</FadeIn>

0 commit comments

Comments
 (0)