fr-115_Toolbar (#120)

* replace favicon * capitalize icons * icons update * add base group and update cadview * renamed icons folder * add icons * adjust base group, nav panel and search bar * adjust NavTree, ItemProperties, NavPanel * adjust settings, connect cadView itemPanel state * adjust settings, connect cadView itemPanel state * fix icon paths * rename iconGroup to operationGroup * test * build * change item properties open/close pattern * toggle icons on open/close * clean up * fix icons + add no element message * clean up * fix comments * address comments * comments * format * auto space
bldrs-ai · Feb 23, 2022 · bec50aa · bec50aa
1 parent fb455cc
commit bec50aa
Show file tree

Hide file tree

Showing 58 changed files with 3,582 additions and 3,505 deletions.
diff --git a/docs/favicon.ico b/docs/favicon.ico
diff --git a/docs/favicon__.ico b/docs/favicon__.ico
diff --git a/docs/index.html b/docs/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Bldrs Share" />

diff --git a/docs/index.js b/docs/index.js
diff --git a/docs/index.js.map b/docs/index.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "buildrs",
-  "version": "0.1.0-r249",
+  "version": "0.1.0-r265",
   "main": "src/index.jsx",
   "homepage": "https://github.com/buildrs/Share",
   "scripts": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon__.ico b/public/favicon__.ico
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Bldrs Share" />

diff --git a/src/Components/AboutPanel.jsx b/src/Components/AboutPanel.jsx
@@ -1,8 +1,9 @@
-import React from 'react'
+import React, {useState} from 'react'
 import Paper from '@mui/material/Paper'
-import Typography from '@mui/material/Typography'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
 import {makeStyles} from '@mui/styles'
-import About from '../assets/3D/attention.svg'
+import About from '../assets/Icons/Warning.svg'
 
 
 /**
@@ -11,13 +12,15 @@ import About from '../assets/3D/attention.svg'
  * @return {Object} The AboutControl react component.
  */
 export default function AboutControl({offsetTop}) {
-  const [open, setOpen]=React.useState(true)
+  const [open, setOpen] = useState(true)
   const classes = useStyles()
   return (
     <div >
-      <Typography className = {classes.about} onClick={() => {
-        setOpen(!open)
-      }}>About</Typography>
+      <Tooltip title="About" placement="top">
+        <IconButton onClick={() => setOpen(!open)}>
+          <About className={classes.icon}/>
+        </IconButton>
+      </Tooltip>
       {open && <AboutPanel openToggle={()=>{
         setOpen(!open)
       }} offsetTopCssStr={offsetTop}/>}
@@ -63,7 +66,7 @@ function AboutPanel({openToggle, offsetTopCssStr}) {
 
 const useStyles = makeStyles({
   container: {
-    position: 'absolute',
+    position: 'fixed',
     top: '0px',
     left: '0px',
     width: '100%',

diff --git a/src/Components/BaseGroup.jsx b/src/Components/BaseGroup.jsx
@@ -0,0 +1,50 @@
+import React from 'react'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import {makeStyles} from '@mui/styles'
+import Settings from './Settings'
+import AboutControl from './AboutPanel'
+import Open from '../assets/Icons/Open.svg'
+
+
+/**
+ * Base group contains Settings, ModelUpload, About
+ * @param {function} fileOpen opens a file dialog for new model upload
+ * @param {Number} offsetTop
+ * @return {Object} React component.
+ */
+export default function BaseGroup({fileOpen, offsetTop}) {
+  const classes = useStyles()
+  return (
+    <div className = {classes.container}>
+      <AboutControl offsetTop = {offsetTop}/>
+      <Tooltip title="Upload Model" placement="top">
+        <IconButton
+          aria-label='account of current user'
+          aria-controls='menu-appbar'
+          aria-haspopup='true'
+          onClick={fileOpen}
+          color='inherit'
+        >
+          <Open className = {classes.icon}/>
+        </IconButton>
+      </Tooltip>
+      <Settings />
+    </div>
+  )
+}
+
+
+const useStyles = makeStyles({
+  icon: {
+    'width': '30px',
+    'height': '30px',
+  },
+  container: {
+    'display': 'flex',
+    'flexDirection': 'row',
+    'justifyContent': 'space-between',
+    'width': '140px',
+    'alignItems': 'center',
+  },
+})
diff --git a/src/Components/GuidePanel.jsx b/src/Components/GuidePanel.jsx
@@ -2,8 +2,8 @@ import React, {useState} from 'react'
 import IconButton from '@mui/material/IconButton'
 import Paper from '@mui/material/Paper'
 import {makeStyles} from '@mui/styles'
-import Close from '../assets/3D/clear.svg'
-import Question from '../assets/3D/help.svg'
+import Close from '../assets/Icons/Clear.svg'
+import Question from '../assets/Icons/Question.svg'
 
 
 /**

diff --git a/src/Components/ItemPanel.jsx b/src/Components/ItemPanel.jsx
@@ -1,30 +1,43 @@
 import React, {useState} from 'react'
+import IconButton from '@mui/material/IconButton'
 import {makeStyles} from '@mui/styles'
 import ItemProperties from './ItemProperties'
 import ItemPropertiesDrawer from './ItemPropertiesDrawer'
-import MenuButton from '../Components/MenuButton'
+import Hamburger from '../assets/Icons/Menu.svg'
 
 
 /**
- * Container for ItemProperties.  ItemProperties is wrapped in an
+ * Container for ItemProperties. ItemProperties is wrapped in an
  * ItemPropertiesDrawer to toggle hiding.
  * @param {Object} model IFC model
  * @param {Object} element The currently selected IFC element
  * @param {Number} topOffset Screen offset position
+ * @param {function} onClickCb
  * @return {Object} The ItemPanelButton react component
  */
-export default function ItemPanelButton({model, element, topOffset}) {
+export default function ItemPanelButton({model, element, topOffset, onClickCb}) {
   const [showItemPanel, setShowItemPanel] = useState(false)
   const classes = useStyles({topOffset: topOffset})
+
   return (
     <div className={classes.toggleButton}>
-      <MenuButton onClick={() => setShowItemPanel(!showItemPanel)} />
-      {showItemPanel &&
-       <ItemPropertiesDrawer
-         content={<ItemProperties model={model} element={element} />}
-         title={'IFC Information'}
-         onClose={() => setShowItemPanel(false)}
-       />}
+      <IconButton onClick={() => {
+        setShowItemPanel(!showItemPanel)
+        onClickCb()
+      }} >
+        <Hamburger className={classes.icon}/>
+      </IconButton>
+      {
+        showItemPanel
+          && <ItemPropertiesDrawer
+               content={<ItemProperties model={model} element={element} />}
+               title={'IFC Information'}
+               onClose={() => {
+                 setShowItemPanel(false)
+                 onClickCb()
+               }}
+            />
+      }
     </div>
   )
 }
@@ -39,6 +52,14 @@ const useStyles = makeStyles({
       right: '10px',
     },
   },
+  toggleButtonOpen: {
+    'position': 'absolute',
+    'top': (props) =>`${props.topOffset}px`,
+    'right': '360px',
+    '@media (max-width: 900px)': {
+      right: '10px',
+    },
+  },
   itemPanel: {
     'position': 'absolute',
     'top': '0px',
@@ -72,4 +93,8 @@ const useStyles = makeStyles({
     marginRight: '10px',
     cursor: 'pointer',
   },
+  icon: {
+    width: '30px',
+    height: '30px',
+  },
 })
diff --git a/src/Components/ItemProperties.jsx b/src/Components/ItemProperties.jsx
@@ -1,12 +1,12 @@
-import React, {useEffect, useState} from 'react'
+import React, { useEffect, useState } from 'react'
 import Tooltip from '@mui/material/Tooltip'
-import {makeStyles} from '@mui/styles'
+import { makeStyles } from '@mui/styles'
 import debug from '../utils/debug'
 import {
   decodeIFCString,
   deref,
 } from '../utils/Ifc'
-import {stoi} from '../utils/strings'
+import { stoi } from '../utils/strings'
 import Toggle from './Toggle'
 import ExpansionPanel from './ExpansionPanel'
 
@@ -17,7 +17,7 @@ import ExpansionPanel from './ExpansionPanel'
  * @param {Object} element The currently selected IFC element
  * @return {Object} The ItemProperties react component
  */
-export default function ItemProperties({model, element}) {
+export default function ItemProperties({ model, element }) {
   const [propTable, setPropTable] = useState(null)
   const [psetsList, setPsetsList] = useState(null)
   const [expandAll, setExpandAll] = useState(false)
@@ -32,13 +32,19 @@ export default function ItemProperties({model, element}) {
 
   return (
     <div className={classes.propsContainer}>
-      <h2 className={classes.sectionTitle}>Properties</h2>
-      {propTable || 'Loading...'}
-      <h2 className={classes.sectionTitle}>
-        <div>Property Sets</div>
-        <Toggle onChange={() => setExpandAll(!expandAll)} />
-      </h2>
-      {psetsList || 'Loading...'}
+      {
+        Object.keys(element).length === 0
+          ? <h2 className={classes.noElement}>No element selected</h2>
+          : <>
+            <h2 className={classes.sectionTitle}>Properties</h2>
+            {propTable || 'Loading...'}
+            <h2 className={classes.sectionTitle}>
+              Property Sets
+              <Toggle onChange={() => setExpandAll(!expandAll)} />
+            </h2>
+            {psetsList || 'Loading...'}
+          </>
+      }
     </div>)
 }
 
@@ -50,7 +56,7 @@ export default function ItemProperties({model, element}) {
  *
  * @param {Object} model IFC model
  * @param {Object} ifcProps Caller should pass the root IFC element.
- *    Recursive calls will pass children
+ * Recursive calls will pass children
  * @param {Number} serial
  * @param {boolean} isPset Is property set
  * @return {Object} A property table react component
@@ -91,20 +97,20 @@ async function createPsetsList(model, element, classes, expandAll) {
   return (
     <ul className={classes.psetsList}>
       {await Promise.all(
-          psets.map(
-              async (ps, ndx) => {
-                return (
-                  <li key={ndx} className={classes.section}>
-                    <ExpansionPanel
-                      summary={decodeIFCString(ps.Name.value) || 'Property Set'}
-                      detail={await createPropertyTable(model, ps, 0, true)}
-                      expandState={expandAll}
-                      classes={classes}
-                    />
-                  </li>
-                )
-              },
-          ))}
+        psets.map(
+          async (ps, ndx) => {
+            return (
+              <li key={ndx} className={classes.section}>
+                <ExpansionPanel
+                  summary={decodeIFCString(ps.Name.value) || 'Property Set'}
+                  detail={await createPropertyTable(model, ps, 0, true)}
+                  expandState={expandAll}
+                  classes={classes}
+                />
+              </li>
+            )
+          },
+        ))}
     </ul>
   )
 }
@@ -149,9 +155,9 @@ async function prettyProps(model, propName, propValue, serial = 0) {
     case 'RefLatitude':
     case 'RefLongitude':
       return row(label, dms(
-          await deref(propValue[0]),
-          await deref(propValue[1]),
-          await deref(propValue[2])), serial)
+        await deref(propValue[0]),
+        await deref(propValue[1]),
+        await deref(propValue[2])), serial)
     case 'expressID':
       return row('Express Id', propValue, serial)
     case 'Quantities':
@@ -164,11 +170,11 @@ async function prettyProps(model, propName, propValue, serial = 0) {
         return null
       }
       return row(
-          label,
-          await deref(
-              propValue, model, serial,
-              async (v, mdl, srl) => await createPropertyTable(mdl, v, srl)),
-          serial)
+        label,
+        await deref(
+          propValue, model, serial,
+          async (v, mdl, srl) => await createPropertyTable(mdl, v, srl)),
+        serial)
     }
   }
 }
@@ -285,9 +291,9 @@ function row(d1, d2, serial) {
  * @param {Object} d2 Table cell data 2
  * @return {Object} The react component
  */
-function Row({d1, d2}) {
+function Row({ d1, d2 }) {
   if (d1 === null || d1 === undefined ||
-      d1 === null || d1 === undefined) {
+    d1 === null || d1 === undefined) {
     debug().warn('Row with invalid data: ', d1, d2)
   }
   return (
@@ -364,17 +370,22 @@ const useStyles = makeStyles({
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItem: 'center',
+    alignItems: 'center',
     maxWidth: '320px',
     overflowWrap: 'break-word',
     fontFamily: 'Helvetica',
     fontSize: '20px',
     fontWeight: 200,
-    color: '#696969',
     paddingLeft: '4px',
     paddingRight: '4px',
-    paddingBottom: '10px',
-    borderBottom: '1px solid lightgrey',
+    borderBottom: '1px solid grey',
+  },
+  noElement: {
+    maxWidth: '320px',
+    fontFamily: 'Helvetica',
+    fontSize: '20px',
+    fontWeight: 200,
+    width: '300px',
   },
   icons: {
     width: '20px',