Merge pull request #17 from buildrs/oleg/mobile

Implement mobile layout for the tree and info panels
bldrs-ai · Aug 6, 2021 · 24cd377 · 24cd377
2 parents b2d12a7 + 38cae37
commit 24cd377
Show file tree

Hide file tree

Showing 7 changed files with 297 additions and 146 deletions.
diff --git a/src/Components/elementInfo.js b/src/Components/elementInfo.js
@@ -1,7 +1,7 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
-import {Info} from './info.js';
+import { Info } from "./info.js";
 
 const useStyles = makeStyles((theme) => ({
   contextualMenu: {
@@ -13,6 +13,15 @@ const useStyles = makeStyles((theme) => ({
     flexDirection: "column",
     justifyContent: "space-around",
     alignItems: "center",
+    height: "70%",
+    top: 152,
+    right: 20,
+    "@media (max-width: 900px)": {
+      height: "50%",
+      top: 140,
+      // width: 400,
+      left: 62,
+    },
   },
   paper: {
     padding: theme.spacing(2),
@@ -31,20 +40,23 @@ const ElementsInfo = (elementProps) => {
     <div
       className={classes.contextualMenu}
       style={{
-        height: 'auto',
+        height: "auto",
         position: "absolute",
-        top: 130,
-        right: 34,
       }}
     >
-      <Paper elevation={3} className={classes.paper} style={{
-               position: 'absolute',
-               width: 'auto',
-               height: 'auto',
-               top: '0px',
-               right: '0px',
-               minHeight: '20%' }}>
-        <Info elementProps={elementProps}/>
+      <Paper
+        elevation={3}
+        className={classes.paper}
+        style={{
+          position: "absolute",
+          width: "auto",
+          height: "auto",
+          top: "0px",
+          right: "0px",
+          minHeight: "20%",
+        }}
+      >
+        <Info elementProps={elementProps} />
       </Paper>
     </div>
   );

diff --git a/src/Components/elementsTree.js b/src/Components/elementsTree.js
@@ -1,7 +1,12 @@
 import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import Paper from "@material-ui/core/Paper";
-import ElementsTreeStructure from './tree.js';
+import ElementsTreeStructure from "./tree.js";
+import Tabs from "@material-ui/core/Tabs";
+import Tab from "@material-ui/core/Tab";
+import Typography from "@material-ui/core/Typography";
+import Box from "@material-ui/core/Box";
+import { Info } from "./info";
 
 const useStyles = makeStyles((theme) => ({
   contextualMenu: {
@@ -12,7 +17,11 @@ const useStyles = makeStyles((theme) => ({
     justifyContent: "space-around",
     alignItems: "center",
     overflow: "scroll",
-    marginLeft: '-5px'
+    marginLeft: "-5px",
+    height: "70%",
+    "@media (max-width: 900px)": {
+      height: "50%",
+    },
   },
   paper: {
     padding: theme.spacing(2),
@@ -24,27 +33,78 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
+function TabPanel(props) {
+  const { children, value, index, ...other } = props;
 
-const ElementsTree = ({ viewer, ifcElement, onElementSelect }) => {
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box p={3}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+function a11yProps(index) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+const ElementsTree = ({
+  viewer,
+  ifcElement,
+  onElementSelect,
+  elementProps,
+}) => {
   const classes = useStyles();
+  console.log("element prop", elementProps);
+  const [value, setValue] = React.useState(0);
+  const handleChange = (event, newValue) => {
+    setValue(newValue);
+  };
   return (
     <Paper
-      className = {classes.contextualMenu}
-      style = {{
-        position: 'absolute',
+      className={classes.contextualMenu}
+      style={{
+        position: "absolute",
         top: 144,
         left: 24,
-        height: '70%',
-        overflow: 'auto'
+
+        overflow: "auto",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "flex-start",
       }}
     >
-      <ElementsTreeStructure
-        viewer = {viewer}
-        ifcElement = {ifcElement}
-        onElementSelect = {onElementSelect}
-        showChildren = {true}
-        parentOpen = {true}
-      />
+      <Tabs
+        value={value}
+        onChange={handleChange}
+        aria-label="simple tabs example"
+      >
+        <Tab label="Tree" {...a11yProps(0)} />
+        <Tab label="Info" {...a11yProps(1)} />
+      </Tabs>
+      <TabPanel value={value} index={0}>
+        <ElementsTreeStructure
+          viewer={viewer}
+          ifcElement={ifcElement}
+          onElementSelect={onElementSelect}
+          showChildren={true}
+          parentOpen={true}
+        />
+      </TabPanel>
+      <TabPanel value={value} index={1}>
+        <Info elementProps={elementProps} />
+      </TabPanel>
     </Paper>
   );
 };

diff --git a/src/Components/info.js b/src/Components/info.js
@@ -1,17 +1,58 @@
+import React from "react";
+
+const Row = ({ firstColumn, secondColumn }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        width: 270,
+        justifyContent: "flex-start",
+        fontSize: 12,
+        marginBottom: 5,
+      }}
+    >
+      <div
+        style={{
+          minWidth: 100,
+          marginRight: 20,
+          border: "1px solid lightGray",
+        }}
+      >
+        {firstColumn}
+      </div>
+      <div
+        style={{
+          minWidth: 150,
+          border: "1px solid lightGray",
+          wordWrap: "break-word",
+        }}
+      >
+        {secondColumn}
+      </div>
+    </div>
+  );
+};
+
 const Info = (elementProps) => {
   elementProps = elementProps.elementProps;
   let serial = 0;
   return (
     <table>
       <tbody>
-      {
-        Object.keys(elementProps).map(
-          key => <tr key={serial++}><td>{key}</td><td>{JSON.stringify(elementProps[key])}</td></tr>
-        )
-      }
+        {Object.keys(elementProps).map((key) => (
+          // <tr key={serial++}>
+          <Row
+            firstColumn={key}
+            secondColumn={JSON.stringify(elementProps[key])}
+          />
+          // <td>{key}</td>
+          // <td>{JSON.stringify(elementProps[key])}</td>
+          // </tr>
+        ))}
       </tbody>
     </table>
   );
 };
 
-export {Info};
+export { Info };
diff --git a/src/Components/menuButton.js b/src/Components/menuButton.js
@@ -2,31 +2,47 @@ import React from "react";
 import { makeStyles } from "@material-ui/core/styles";
 import MenuIcon from "@material-ui/icons/Menu";
 import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined";
 
 const useStyles = makeStyles((theme) => ({
   menuButton: {
+    border: "2px solid lime",
     "@media (max-width: 1280px)": {
       border: "2px solid lime",
     },
   },
+  menuButtonDisabled: {
+    "@media (max-width: 1280px)": {},
+  },
 }));
 
-const MenuButton = ({ onClick }) => {
+const MenuButton = ({ onClick, disabled, open }) => {
   const classes = useStyles();
   return (
     <IconButton
       edge="start"
-      className={classes.menuButton}
+      className={disabled ? classes.menuButtonDisabled : classes.menuButton}
       color="secondary"
       aria-label="menu"
       onClick={onClick}
+      disabled={disabled}
     >
-      <MenuIcon
-        style={{
-          width: 30,
-          height: 30,
-        }}
-      />
+      {open ? (
+        <CloseIcon
+          style={{
+            width: 30,
+            height: 30,
+          }}
+        />
+      ) : (
+        <InfoOutlinedIcon
+          style={{
+            width: 30,
+            height: 30,
+          }}
+        />
+      )}
     </IconButton>
   );
 };

diff --git a/src/Components/searchInput.js b/src/Components/searchInput.js
@@ -5,6 +5,7 @@ import InputBase from "@material-ui/core/InputBase";
 import IconButton from "@material-ui/core/IconButton";
 import MenuIcon from "@material-ui/icons/Menu";
 import SearchIcon from "@material-ui/icons/Search";
+import CloseIcon from "@material-ui/icons/Close";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -26,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default function SearchInput({ onClickMenu }) {
+export default function SearchInput({ onClickMenu, disabled, open }) {
   const classes = useStyles();
 
   return (
@@ -35,7 +36,9 @@ export default function SearchInput({ onClickMenu }) {
         className={classes.iconButton}
         aria-label="menu"
         onClick={onClickMenu}
+        disabled={disabled}
       >
+        {/* {open ? <CloseIcon /> : <MenuIcon />} */}
         <MenuIcon />
       </IconButton>
       <InputBase