Property refactor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "builders",
-  "version": "0.1.0-r215",
+  "version": "0.1.0-r221",
   "main": "src/index.jsx",
   "homepage": "https://buildrs.github.io/",
   "scripts": {

src/Components/AboutPanel.jsx

@@ -5,9 +5,10 @@ import ItemProperties from './ItemProperties';
 import Close from '../assets/Close.svg'
 
 
-const useStyles = makeStyles((theme) => ({
+const useStyles = makeStyles({
   panel: {
     position: 'absolute',
+    top: (props) => props.offsetTop,
     left: 0,
     right: 0,
     width: '500px',
@@ -29,24 +30,24 @@ const useStyles = makeStyles((theme) => ({
         height:'20px',
     },
   }
-}));
+});
 
 
-const AboutIcon = () => {
-  const [open, setOpen] = React.useState(true);
+const AboutIcon = ({offsetTop}) => {
+  const [open, setOpen]=React.useState(true);
   return (
     <div onClick={() => { setOpen(!open) }}>
-      About {open && <AboutPanel openToggle={()=>{setOpen(!open)}}/>}
+      About {open && <AboutPanel openToggle={()=>{setOpen(!open)}} offsetTop={offsetTop}/>}
     </div>);
 };
 
 
-const AboutPanel = ({openToggle}) => {
-  const classes = useStyles();
+const AboutPanel = ({openToggle, offsetTop}) => {
+  const classes = useStyles({offsetTop:offsetTop});
 
   return (
     <Paper elevation={3} className={classes.panel}>
-      <div className = {classes.closeButton} onClick={openToggle}><Close/></div>
+      <div className = {classes.closeButton} onClick = {openToggle}><Close/></div>
       <h1>About</h1>
       <p><strong>BLDRS</strong> is a collaborative integration environment for IFC files.
         We are just getting started!  Stay tuned for the upcoming MVP release.</p>

src/Components/ItemPanel.jsx

@@ -1,12 +1,21 @@
-import React from 'react';
+import React, {useState} from 'react';
 import { makeStyles } from '@mui/styles';
 import Paper from '@mui/material/Paper';
 import ItemProperties from './ItemProperties';
 import Close from '../assets/Close.svg'
+import MenuButton from '../Components/MenuButton';
 
 
-const useStyles = makeStyles(() => ({
-  paper: {
+const useStyles = makeStyles({
+  toggleButton: {
+    position: 'absolute',
+    top: (props) =>`${props.topOffset}px`,
+    right: '20px',
+  },
+  itemPanel:{
+    position: 'absolute',
+    top: '0px',
+    right: '0px',
     height: '400px',
     width: '400px',
     overflow: 'auto',
@@ -32,12 +41,29 @@ const useStyles = makeStyles(() => ({
     marginRight:'10px',
     cursor:'pointer'
   },
-}));
 
-const ItemPanel = ({viewer, element, close}) => {
-  const classes = useStyles();
+});
+
+const ItemPanelButton = ({viewer, element, topOffset}) =>{
+  const [showItemPanel,setShowItemPanel] = useState(true);
+  const classes = useStyles({topOffset:topOffset});
+  return(
+      <div className={classes.toggleButton}>
+        <MenuButton onClick={() => setShowItemPanel(!showItemPanel)} />
+        {showItemPanel && <ItemPanel
+          viewer = {viewer}
+          element = {element}
+          close = {()=>setShowItemPanel(false)}
+          topOffset = {topOffset}
+        />}
+      </div>
+  )
+}
+
+const ItemPanel = ({viewer, element, close, topOffset}) => {
+  const classes = useStyles({topOffset:topOffset});
   return (
-      <Paper elevation={3} className={classes.paper}>
+      <Paper elevation={3} className={classes.itemPanel}>
         <div className = {classes.titleContainer}>
           <div className = {classes.title}>Properties</div>
           <Close className = {classes.close} onClick = {close}/>
@@ -48,4 +74,4 @@ const ItemPanel = ({viewer, element, close}) => {
 };
 
 
-export default ItemPanel;
+export default ItemPanelButton;

src/Components/ToolBar.jsx

@@ -55,7 +55,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-const ToolBar = ({ fileOpen, onClickShare }) => {
+const ToolBar = ({ fileOpen, onClickShare, offsetTop }) => {
   const classes = useStyles();
   return (
     <AppBar
@@ -79,7 +79,7 @@ const ToolBar = ({ fileOpen, onClickShare }) => {
           </IconButton>
         </div>
         <div className = {classes.rightContainer}>
-        <AboutIcon/>
+        <AboutIcon offsetTop = {offsetTop}/>
         <div className = {classes.profile}>{<LoginMenu />}</div>
       </div>
       </Toolbar>

src/Containers/CadView.jsx

@@ -3,8 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { IfcViewerAPI } from 'web-ifc-viewer';
 import { makeStyles } from '@mui/styles';
 import SearchIndex from './SearchIndex.js';
-import MenuButton from '../Components/MenuButton';
-import ItemPanel from '../Components/ItemPanel';
+import ItemPanelButton from '../Components/ItemPanel';
 import ShortCutsPanel from '../Components/ShortcutsPanel.jsx';
 import NavPanel from '../Components/NavPanel';
 import SearchBar from '../Components/SearchBar';
@@ -56,16 +55,6 @@ const useStyles = makeStyles((theme) => ({
     height: '100vh',
     margin: 'auto',
   },
-  itemPanelToggleButton: {
-    position: 'absolute',
-    top: `${PANEL_TOP}px`,
-    right: '20px',
-  },
-  itemPanelContainer:{
-    position: 'absolute',
-    top: `${PANEL_TOP}px`,
-    right: '20px',
-  },
   aboutPanelContainer: {
     position: 'absolute',
     top: `${PANEL_TOP}px`,
@@ -337,7 +326,8 @@ const CadView = () => {
       <div style={{ zIndex: 100 }}>
         <ToolBar
           fileOpen={fileOpen}
-          onClickShare={onClickShare}/>
+          onClickShare={onClickShare}
+          offsetTop={PANEL_TOP}/>
         <SnackBarMessage
           message={loadingMessage}
           open={isLoading}
@@ -354,9 +344,7 @@ const CadView = () => {
             />
           )}
         </div>
-        <div className={classes.itemPanelToggleButton}>
-          <MenuButton onClick={() => setShowItemPanel(!showItemPanel)} />
-        </div>
+
         {showNavPanel &&
           <NavPanel
             viewer={viewer}
@@ -368,9 +356,11 @@ const CadView = () => {
             setExpandedElements={setExpandedElements}
           />}
         <div className={classes.itemPanelContainer}>
-          <div>{showItemPanel &&
-            <ItemPanel viewer={viewer} element={selectedElement} close = {()=>setShowItemPanel(false)}/>}
-          </div>
+            <ItemPanelButton
+              viewer={viewer}
+              element={selectedElement}
+              close = {()=>setShowItemPanel(false)}
+              topOffset = {PANEL_TOP}/>
         </div>
         <div className={classes.shortCutPanelContainer}>
           {showShortCuts && <ShortCutsPanel close = {()=>setShowShortCuts(false)} />}