Fix item properties (#104)

* new build; * add build * another build * new build * correct build * assets update about fix the toolbar details * build * build * change the logo * add abstracted logo * added 3D theme * new build * add the icons * update icons * pass tests * tst description * delete icons * fix mising icons + format * resolve errors * fix docs in search, ifc and tree utils * fix react component etc * fix utils * fix the comments * fix spacing * fix the tests * more fixes * add export default * fix lint errors * fix ifc errors * add the errors * es lint warnings * fix * buid * fix errors in the icon group * console fix * build * build * fix the lint errors * add yarn lint rules * add tooltips to properties * table layout * style properties
bldrs-ai · Feb 16, 2022 · eb7855d · eb7855d
1 parent 16df4a3
commit eb7855d
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 24 deletions.
diff --git a/.eslintignore b/.eslintignore
diff --git a/docs/index.js b/docs/index.js
@@ -155564,7 +155564,7 @@ var Toggle_default = Toggle;
 
 // package.json
 var name = "buildrs";
-var version = "0.1.0-r297";
+var version = "0.1.0-r293";
 var main = "src/index.jsx";
 var homepage = "https://github.com/buildrs/Share";
 var scripts = {

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

diff --git a/src/Components/ItemProperties.jsx b/src/Components/ItemProperties.jsx
@@ -3,6 +3,7 @@ import Accordion from '@mui/material/Accordion'
 import AccordionSummary from '@mui/material/AccordionSummary'
 import AccordionDetails from '@mui/material/AccordionDetails'
 import Typography from '@mui/material/Typography'
+import Tooltip from '@mui/material/Tooltip'
 import {makeStyles} from '@mui/styles'
 import debug from '../utils/debug'
 import {
@@ -49,7 +50,8 @@ export default function ItemProperties({viewer, element}) {
  */
 async function createPropertyTable(props, viewer, serial = 0, isPset = false) {
   return (
-    <table key={serial + '-table'} style={{borderBottom: '1px solid lighgrey'}}>
+    <table key={serial + '-table'}
+      style={{borderBottom: '1px solid lighgrey', tableLayout: 'fixed'}}>
       <tbody>
         {
           await Promise.all(
@@ -90,7 +92,9 @@ async function createPsetsList(element, viewer, classes) {
                         aria-controls="panel1a-content"
                         id="panel1a-header"
                       >
-                        <Typography>{decodeIFCString(ps.Name.value) || 'Property Set'}</Typography>
+                        <Typography className = {classes.accordionTitle}>
+                          {decodeIFCString(ps.Name.value) || 'Property Set'}
+                        </Typography>
                       </AccordionSummary>
                       <AccordionDetails className = {classes.accordianDetails}>
                         {await createPropertyTable(ps, viewer, 0, true)}
@@ -234,7 +238,7 @@ async function unpackHelper(eltArr, viewer, serial, ifcToRowCb) {
       <tr key={serial++}>
         <td>
           <table>
-            <tbody>{rows}</tbody>
+            <tbody >{rows}</tbody>
           </table>
         </td>
       </tr>
@@ -260,28 +264,32 @@ function row(d1, d2, serial) {
   }
   return (
     <tr key={serial}>
-      <td key="a"
-        style={{
-          maxWidth: '150px',
-          overflowWrap: 'break-word',
+      <Tooltip title={d1} placement="top">
+        <div style ={{
           fontFamily: 'Helvetica',
           fontSize: '14px',
           fontWeight: 200,
-          color: '#696969',
-          paddingLeft: '4px',
-          paddingRight: '4px',
-        }}>{d1}</td>
-      <td key="b"
-        style={{
-          maxWidth: '200px',
+          width: '150px',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
           overflowWrap: 'break-word',
-          fontFamily: 'Helvetica',
-          fontSize: '14px',
-          fontWeight: 200,
-          color: '#696969',
-          paddingLeft: '4px',
-          paddingRight: '4px',
-        }}>{d2}</td>
+          wordBreak: 'break-all',
+        }}>{d1}</div>
+      </Tooltip>
+      <Tooltip title={d2} placement="top">
+        <td key="b"
+          style={{
+            width: '150px',
+            textOverflow: 'ellipsis',
+            overflowWrap: 'break-word',
+            fontFamily: 'Helvetica',
+            fontSize: '14px',
+            fontWeight: 200,
+            paddingLeft: '4px',
+            paddingRight: '4px',
+            cursor: 'default',
+          }}>{d2}</td>
+      </Tooltip>
     </tr>
   )
 }
@@ -345,5 +353,9 @@ const useStyles = makeStyles({
   accordianDetails: {
     overflow: 'scroll',
   },
-
+  accordionTitle: {
+    width: '200px',
+    textOverflow: 'ellipsis',
+    overflowWrap: 'break-word',
+  },
 })