Oleg/UI clean up

src/App.css

@@ -36,3 +36,27 @@
     transform: rotate(360deg);
   }
 }
+
+.fileInput::-webkit-file-upload-button {
+  visibility: hidden;
+}
+.fileInput::before {
+  content: "Select some files";
+  display: inline-block;
+  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
+  border: 1px solid #999;
+  border-radius: 3px;
+  padding: 5px 8px;
+  outline: none;
+  white-space: nowrap;
+  cursor: pointer;
+  text-shadow: 1px 1px #fff;
+  font-weight: 700;
+  font-size: 10pt;
+}
+.fileInput:hover::before {
+  border-color: black;
+}
+.fileInput:active::before {
+  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
+}

src/App.js

@@ -1,6 +1,6 @@
 import "./App.css";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
-import Home from "./Containers/Home";
+import CadView from "./Containers/CadView";
 import { createTheme, ThemeProvider } from "@material-ui/core/styles";
 import { grey } from "@material-ui/core/colors";
 
@@ -22,7 +22,7 @@ function App() {
       <Router>
         <Switch>
           <Route path="/">
-            <Home />
+            <CadView />
           </Route>
         </Switch>
       </Router>

src/Components/elementInfo.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+
+const useStyles = makeStyles((theme) => ({
+  contextualMenu: {
+    width: 240,
+    height: 300,
+    border: "1px solid lime",
+    marginLeft: "24px",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-around",
+    alignItems: "center",
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+    height: "50px",
+    width: "160px",
+  },
+}));
+
+const ElementsInfo = () => {
+  const classes = useStyles();
+  return (
+    <div
+      className={classes.contextualMenu}
+      style={{
+        height: 460,
+        position: "absolute",
+        top: 130,
+        right: 34,
+      }}
+    >
+      <Paper elevation={3} className={classes.paper} style={{ height: 20 }}>
+        <div>element data</div>
+      </Paper>
+      <Paper elevation={3} className={classes.paper} style={{ height: 40 }}>
+        <div>parameters</div>
+      </Paper>
+      <Paper elevation={3} className={classes.paper} style={{ height: 20 }}>
+        <div>comments</div>
+      </Paper>
+      <Paper elevation={3} className={classes.paper}>
+        <div>...</div>
+      </Paper>
+      <Paper elevation={3} className={classes.paper}>
+        <div>...</div>
+      </Paper>
+    </div>
+  );
+};
+
+export default ElementsInfo;

src/Components/elementsTree.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import Paper from "@material-ui/core/Paper";
+
+const useStyles = makeStyles((theme) => ({
+  contextualMenu: {
+    width: 300,
+    height: 500,
+    border: "1px solid lime",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-around",
+    alignItems: "center",
+  },
+  paper: {
+    padding: theme.spacing(2),
+    display: "flex",
+    overflow: "auto",
+    flexDirection: "column",
+    height: "120px",
+    width: "220px",
+  },
+}));
+
+const ElementsTree = () => {
+  const classes = useStyles();
+  return (
+    <div
+      className={classes.contextualMenu}
+      style={{
+        position: "absolute",
+        top: 144,
+        left: 24,
+      }}
+    >
+      <Paper elevation={3} className={classes.paper} style={{ height: 80 }}>
+        <div>ifc elements</div>
+      </Paper>
+
+      <Paper elevation={3} className={classes.paper}>
+        <div>workflow menu 1</div>
+      </Paper>
+
+      <Paper elevation={3} className={classes.paper}>
+        <div>workflow menu 2</div>
+      </Paper>
+    </div>
+  );
+};
+
+export default ElementsTree;

src/Components/ifcViewer.js

@@ -1,22 +1,18 @@
 import React from "react";
 import { IfcViewerAPI } from "web-ifc-viewer";
-import Button from "@material-ui/core/Button";
-
+import "../App.css";
 
 export default class Viewer extends React.Component {
-
   state = {
     loaded: false,
-    loading_ifc: false
+    loading_ifc: false,
   };
 
-
   constructor(props) {
     super(props);
     this.viewer = null;
   }
 
-
   componentDidMount() {
     const container = document.getElementById("viewer-container");
     this.viewer = new IfcViewerAPI({ container });
@@ -27,63 +23,76 @@ export default class Viewer extends React.Component {
     this.viewer.addGrid();
     window.onmousemove = this.viewer.prepickIfcItem;
     window.ondblclick = this.viewer.addClippingPlane;
-    window.onkeydown = event => {
+    window.onkeydown = (event) => {
       this.viewer.removeClippingPlane();
     };
+    //create load ifc input
+    const inputElement = document.createElement("input");
+    inputElement.setAttribute("type", "file");
+    inputElement.classList.add("hidden");
+    inputElement.addEventListener(
+      "change",
+      (event) => {
+        this.loadIfc(event);
+      },
+      false
+    );
+    document.getElementById("fileInput").appendChild(inputElement);
   }
 
-
   async loadIfc(event) {
-    this.setState({ loading_ifc: true })
+    this.setState({ loading_ifc: true });
     await this.viewer.loadIfc(event.target.files[0], true);
-    this.setState({ loaded: true, loading_ifc: false })
+    this.setState({ loaded: true, loading_ifc: false });
   }
 
-
   openFileDialog() {
     const inputElement = document.createElement("input");
     inputElement.setAttribute("type", "file");
     inputElement.classList.add("hidden");
-    inputElement.addEventListener("change", event => { this.loadIfc(event); }, false);
+    inputElement.addEventListener(
+      "change",
+      (event) => {
+        this.loadIfc(event);
+      },
+      false
+    );
     document.getElementById("fileInput").appendChild(inputElement);
   }
 
-
   render() {
     return (
-      <div style={{ width: '80%', height: '80%', margin: 'auto' }}>
+      <div>
         <div
           id="viewer-container"
           style={{
-            position: 'relative',
-            top: '0px',
-            left: '0px',
-            textAlign: 'center',
-            color: 'blue',
-            width: '800px',
-            height: '640px',
-            margin: 'auto'
-          }}></div>
+            position: "absolute",
+            top: "0px",
+            left: "0px",
+            textAlign: "center",
+            color: "blue",
+            width: "100vw",
+            height: "100vh",
+            margin: "auto",
+          }}
+        ></div>
         <div
           id="fileInput"
           style={{
-            position: 'relative',
-            top: '0px',
-            left: '0px',
-            color: 'blue',
-            textAlign: 'center',
-            overflow: 'hidden'
-          }}></div>
-        <Button
-          variant="contained"
-          color="primary"
-          size="small"
-          onClick={(event) => {
-            this.openFileDialog();
+            position: "absolute",
+            bottom: "30px",
+            width: 300,
+            height: 30,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            left: "43%",
+            color: "blue",
+            textAlign: "center",
+            overflow: "hidden",
+            border: "1px solid lime",
           }}
-        >
-          Load ifc
-        </Button>
+        ></div>
       </div>
     );
   }