Merge pull request #54 from dragoni7/improve-popup-menu

Improve popup menu
dragoni7 · Sep 5, 2024 · 3346016 · 3346016
2 parents abaa386 + 4eb9755
commit 3346016
Show file tree

Hide file tree

Showing 4 changed files with 142 additions and 36 deletions.
diff --git a/src/components/LoadoutCustomization.tsx b/src/components/LoadoutCustomization.tsx
@@ -38,13 +38,51 @@ const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
         width: '100vw',
         display: 'flex',
         flexGrow: 1,
-        backgroundImage: `url(${screenshot})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
+        position: 'relative',
+        overflow: 'auto',
+        '&::before': {
+          content: '""',
+          position: 'fixed',
+          top: 0,
+          left: '50%',
+          width: '2px',
+          height: '100%',
+          background:
+            'linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.8) 10%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1))',
+          boxShadow: '0 0 10px rgba(0,0,0,0.7), 0 0 5px rgba(0,0,0,0.1)',
+          zIndex: 2,
+          pointerEvents: 'none',
+        },
       }}
     >
-      <Grid container columns={2}>
-        <Grid item md={1} sx={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}>
+      <Box
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundImage: `url(${screenshot})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundAttachment: 'fixed',
+        }}
+      />
+
+      <Box
+        sx={{
+          position: 'fixed',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          zIndex: 1,
+        }}
+      />
+
+      <Grid container columns={2} sx={{ position: 'relative', zIndex: 3 }}>
+        <Grid item md={1}>
           <TransparentButton
             onClick={onBackClick}
             startIcon={<span style={{ fontSize: '1.2em' }}>←</span>}
@@ -53,21 +91,15 @@ const LoadoutCustomization: React.FC<LoadoutCustomizationProps> = ({
           </TransparentButton>
         </Grid>
         <Grid item md={1} />
-        <Grid
-          item
-          md={1}
-          sx={{
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          }}
-        >
+        <Grid item md={1}>
           <Container maxWidth="lg">
             <ModCustomization />
           </Container>
         </Grid>
         <Grid item md={1}>
           <AbilitiesModification subclass={subclass} />
         </Grid>
-        <Grid item md={1} sx={{ backgroundColor: 'rgba(0, 0, 0, 0.5)', textAlign: 'center' }}>
+        <Grid item md={1} sx={{ textAlign: 'center' }}>
           FREE SPACE FOR SOMETHING
         </Grid>
         <Grid item md={1} sx={{ textAlign: 'center' }}>

diff --git a/src/features/armor-mods/components/ArmorModSelector.tsx b/src/features/armor-mods/components/ArmorModSelector.tsx
@@ -1,7 +1,9 @@
+import React, { useState } from 'react';
 import { Box } from '@mui/system';
 import { ManifestArmorMod, ManifestArmorStatMod } from '../../../types/manifest-types';
-
-import { Tooltip } from '@mui/material';
+import { Tooltip, IconButton } from '@mui/material';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 
 interface ModSelectorProps {
   selected: ManifestArmorMod | ManifestArmorStatMod;
@@ -13,6 +15,17 @@ const lockedModIcon =
   'https://www.bungie.net/common/destiny2_content/icons/1426b518acd10943c31171c99222e6fd.png';
 
 const ArmorModSelector: React.FC<ModSelectorProps> = ({ selected, mods, onSelectMod }) => {
+  const [startIndex, setStartIndex] = useState(0);
+  const modsPerPage = 18; // 3 rows * 6 columns
+
+  const handlePrevious = () => {
+    setStartIndex(Math.max(0, startIndex - modsPerPage));
+  };
+
+  const handleNext = () => {
+    setStartIndex(Math.min(mods.length - modsPerPage, startIndex + modsPerPage));
+  };
+
   return (
     <Box
       sx={{
@@ -32,21 +45,64 @@ const ArmorModSelector: React.FC<ModSelectorProps> = ({ selected, mods, onSelect
           backgroundColor: 'rgba(10, 10, 10, 0.8)',
         }}
       />
-      <Box className="submenu-grid">
-        {mods.map((mod) => (
-          <Tooltip title={mod.name} placement="top" disableInteractive>
-            <Box
-              key={mod.itemHash}
-              className="submenu-item"
-              style={{
-                backgroundImage: `url(${mod.isOwned ? mod.icon : lockedModIcon})`,
-              }}
-              onClick={() => {
-                onSelectMod(mod);
-              }}
-            />
-          </Tooltip>
-        ))}
+      <Box
+        className="submenu-grid"
+        sx={{
+          display: 'none',
+          position: 'absolute',
+          top: '100%',
+          left: 0,
+          backgroundColor: 'rgba(255, 255, 255, 0.1)',
+          backdropFilter: 'blur(5px)',
+          padding: '10px',
+          zIndex: 1000,
+          width: '550px',
+          borderRadius: '0px',
+          boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+        }}
+      >
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <IconButton
+            onClick={handlePrevious}
+            disabled={startIndex === 0}
+            sx={{ color: 'white', padding: '10px' }}
+          >
+            <ChevronLeftIcon />
+          </IconButton>
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(6, 74px)',
+              gap: '5px',
+              justifyContent: 'center',
+            }}
+          >
+            {mods.slice(startIndex, startIndex + modsPerPage).map((mod) => (
+              <Tooltip key={mod.itemHash} title={mod.name} placement="top" disableInteractive>
+                <Box
+                  className="submenu-item"
+                  sx={{
+                    width: '74px',
+                    height: '74px',
+                    backgroundImage: `url(${mod.isOwned ? mod.icon : lockedModIcon})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    cursor: 'pointer',
+                    backgroundColor: 'rgba(10, 10, 10, 0.8)',
+                  }}
+                  onClick={() => onSelectMod(mod)}
+                />
+              </Tooltip>
+            ))}
+          </Box>
+          <IconButton
+            onClick={handleNext}
+            disabled={startIndex + modsPerPage >= mods.length}
+            sx={{ color: 'white', padding: '10px' }}
+          >
+            <ChevronRightIcon />
+          </IconButton>
+        </Box>
       </Box>
     </Box>
   );

diff --git a/src/features/loadouts/components/EquipLoadout.tsx b/src/features/loadouts/components/EquipLoadout.tsx
@@ -46,6 +46,22 @@ const LoadoutDialog = styled(Dialog)(({ theme }) => ({
   },
 }));
 
+const TransparentButton = styled(Button)(({ theme }) => ({
+  background: 'rgba(0, 0, 0, 0.4)',
+  backdropFilter: 'blur(10px)',
+  color: 'white',
+  padding: theme.spacing(1, 2),
+  fontFamily: 'Helvetica, Arial, sans-serif',
+  '&:hover': {
+    background: 'rgba(0, 0, 0, 0.7)',
+    backdropFilter: 'blur(10px)',
+    border: '1px solid rgba(255, 255, 255, 1)',
+  },
+  borderRadius: 0,
+  border: '1px solid rgba(255, 255, 255, 0.5)',
+  transition: 'all 0.3s ease',
+}));
+
 const Transition = React.forwardRef(function Transition(
   props: TransitionProps & {
     children: React.ReactElement<any, any>;
@@ -106,9 +122,7 @@ const EquipLoadout: React.FC = () => {
 
   return (
     <>
-      <Button variant="contained" onClick={onButtonClick}>
-        Equip Loadout
-      </Button>
+      <TransparentButton onClick={onButtonClick}>Equip Loadout</TransparentButton>
       <LoadoutDialog
         open={alertOpen}
         onClose={() => setAlertOpen(false)}

diff --git a/src/features/loadouts/components/ShareLoadout.tsx b/src/features/loadouts/components/ShareLoadout.tsx
@@ -36,15 +36,19 @@ const StyledDialog = styled(Dialog)(({ theme }) => ({
 }));
 
 const TransparentButton = styled(Button)(({ theme }) => ({
-  background: 'transparent',
+  background: 'rgba(0, 0, 0, 0.4)',
+  backdropFilter: 'blur(10px)',
   color: 'white',
   padding: theme.spacing(1, 2),
   fontFamily: 'Helvetica, Arial, sans-serif',
   '&:hover': {
-    background: 'rgba(255, 255, 255, 0.1)',
+    background: 'rgba(0, 0, 0, 0.7)',
+    backdropFilter: 'blur(10px)',
+    border: '1px solid rgba(255, 255, 255, 1)',
   },
   borderRadius: 0,
-  border: '1px solid white',
+  border: '1px solid rgba(255, 255, 255, 0.5)',
+  transition: 'all 0.3s ease',
 }));
 
 const StyledTextField = styled(TextField)(({ theme }) => ({