#44 new window component init

MetaCell · Nov 4, 2022 · 56a7e41 · 56a7e41
1 parent d8db6a5
commit 56a7e41
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 24 deletions.
diff --git a/src/assets/styles/variables.js b/src/assets/styles/variables.js
@@ -62,6 +62,7 @@ const vars = {
   listBorderColor: 'rgba(0, 0, 0, 0.04)',
 
   headerBorderColor: '#E7E7E7',
+  dialogBorderColor: 'rgba(0, 0, 0, 0.1)',
   dividerColor: 'rgba(118, 120, 125, 0.12)',
 
   dropdownBg: 'rgba(246, 246, 248, 0.8)',

diff --git a/src/components/common/Header.js b/src/components/common/Header.js
@@ -5,8 +5,16 @@ import { Button, Chip, List, ListItemButton, Typography } from '@mui/material';
 import PSYLOGO from '../../assets/svg/new-logo.svg';
 import vars from '../../assets/styles/variables';
 import { CustomBreadcrumbsWithMenu } from './Breadcrumbs';
+import Dialog from '@mui/material/Dialog';
+import UndoIcon from '@mui/icons-material/Undo';
 
-const { textWhite, listSelectedTextColor, headerBorderColor } = vars;
+const {
+  textWhite,
+  listSelectedTextColor,
+  breadcrumbTextColor,
+  dialogBorderColor,
+  headerBorderColor,
+} = vars;
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -98,32 +106,99 @@ const breadcrumbs = [
 
 const Header = () => {
   const classes = useStyles();
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
 
-  return (
-    <Box className={classes.root}>
-      <Box className={classes.leftSection}>
-        <img src={PSYLOGO} alt="new-logo" aria-describedby="logo" />
+  const handleClick = (event) => {
+    if (event) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
 
-        <CustomBreadcrumbsWithMenu breadcrumbs={breadcrumbs} />
-      </Box>
-      <Box className={classes.middleSection}>
-        <List className="headerSwitch" component="nav">
-          <ListItemButton disableRipple selected>
-            <Typography>Build</Typography>
-          </ListItemButton>
-          <ListItemButton disableRipple disabled>
-            <Typography>Test</Typography>
-            <Chip label="SOON" />
-          </ListItemButton>
-        </List>
-      </Box>
-      <Box className={classes.rightSection}>
-        <Button disabled disableElevation variant="contained">
-          Share
-          <Chip label="SOON" color="primary" />
-        </Button>
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const id = open ? 'composition-popper' : undefined;
+
+  return (
+    <>
+      <Dialog
+        id={id}
+        open={open}
+        hideBackdrop
+        PaperProps={{
+          sx: {
+            position: 'fixed',
+            top: 96,
+            left: 60,
+            width: 'calc(100VW - 24.25rem)',
+            maxWidth: 'calc(100VW - 24.25rem)',
+            height: 'calc(100Vh - 11rem)',
+            border: `2px solid ${dialogBorderColor}`,
+            background: headerBorderColor,
+            borderRadius: '0.75rem',
+            m: 0,
+          },
+        }}
+        aria-labelledby="composition-popper"
+      >
+        <Typography>Composition 2</Typography>
+      </Dialog>
+      <Box className={classes.root}>
+        <Box className={classes.leftSection}>
+          <img src={PSYLOGO} alt="new-logo" aria-describedby="logo" />
+
+          <CustomBreadcrumbsWithMenu breadcrumbs={breadcrumbs} />
+        </Box>
+        <Box className={classes.middleSection}>
+          <List className="headerSwitch" component="nav">
+            <ListItemButton disableRipple selected>
+              <Typography>Build</Typography>
+            </ListItemButton>
+            <ListItemButton disableRipple disabled>
+              <Typography>Test</Typography>
+              <Chip label="SOON" />
+            </ListItemButton>
+
+            {/* modal button TODO remover later */}
+            <ListItemButton disableRipple onClick={handleClick}>
+              <Typography>Composition</Typography>
+            </ListItemButton>
+          </List>
+        </Box>
+        <Box className={classes.rightSection}>
+          <Button disabled disableElevation variant="contained">
+            Share
+            <Chip label="SOON" color="primary" />
+          </Button>
+        </Box>
       </Box>
-    </Box>
+      {open && (
+        <Box
+          sx={{
+            position: 'absolute',
+            bottom: '1rem',
+            left: 'calc(50% - 153px/2 + 0.5px)',
+            zIndex: 9999,
+          }}
+        >
+          <Button
+            startIcon={<UndoIcon fontSize="small" />}
+            size="small"
+            variant="contained"
+            sx={{
+              backgroundColor: breadcrumbTextColor,
+              '&:hover': {
+                backgroundColor: listSelectedTextColor,
+              },
+            }}
+            onClick={handleClose}
+          >
+            Return to parent
+          </Button>
+        </Box>
+      )}
+    </>
   );
 };