Revert "Draft: Design sprint 1 (#278)" (#279)

This reverts commit f21aac7.
bldrs-ai · Jul 23, 2022 · 9e2aa9a · 9e2aa9a
1 parent f21aac7
commit 9e2aa9a
Show file tree

Hide file tree

Showing 20 changed files with 103 additions and 113 deletions.
diff --git a/src/Components/AboutControl.jsx b/src/Components/AboutControl.jsx
@@ -6,7 +6,7 @@ import Dialog from './Dialog'
 import debug from '../utils/debug'
 import * as Privacy from '../privacy/Privacy'
 import {ControlButton} from './Buttons'
-import AboutIcon from '../assets/2D_Icons/Info.svg'
+import AboutIcon from '../assets/2D_Icons/Wave_person.svg'
 import LogoB from '../assets/LogoB.svg'
 import ShareIcon from '../assets/2D_Icons/Share.svg'
 import OpenIcon from '../assets/2D_Icons/Open.svg'

diff --git a/src/Components/BaseGroup.jsx b/src/Components/BaseGroup.jsx
@@ -1,9 +1,8 @@
 import React from 'react'
 import {makeStyles} from '@mui/styles'
-// import AboutControl from './AboutControl'
-
-// import SampleModelsControl from './SampleModelsControl'
+import AboutControl from './AboutControl'
 import OpenModelControl from './OpenModelControl'
+import SampleModelsControl from './SampleModelsControl'
 
 
 /**
@@ -18,6 +17,8 @@ export default function BaseGroup({installPrefix, fileOpen}) {
   return (
     <div className={classes.root}>
       <OpenModelControl installPrefix={installPrefix} fileOpen={fileOpen}/>
+      <SampleModelsControl/>
+      <AboutControl installPrefix={installPrefix}/>
     </div>
   )
 }
@@ -29,7 +30,5 @@ const useStyles = makeStyles({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
-    // width: '50px',
-    // height: '50px',
   },
 })
diff --git a/src/Components/Buttons.jsx b/src/Components/Buttons.jsx
@@ -29,7 +29,7 @@ export const TooltipIconButton = ({
   return (
     <Tooltip classes={{tooltip: classes.root}} title={title} describeChild placement={placement}
       data-testid={dataTestId}>
-      <IconButton className={classes.root} onClick={onClick}>
+      <IconButton className={classes.root} onClick={onClick} size={size}>
         {icon}
       </IconButton>
     </Tooltip>
@@ -148,13 +148,13 @@ const useStyles = makeStyles((theme) => ({
       width: (props) => props.buttonWidth || '50px',
       height: (props) => props.buttonWidth || '50px',
       border: 'none',
-      // borderRadius: '50%',
+      borderRadius: '50%',
     },
     '& svg': {
-      width: '20px',
-      height: '20px',
+      width: '30px',
+      height: '30px',
       border: 'none',
-      // borderRadius: '50%',
+      borderRadius: '50%',
       fill: theme.palette.primary.contrastText,
     },
   },

diff --git a/src/Components/Logo.jsx b/src/Components/Logo.jsx
@@ -1,9 +1,11 @@
-import React from 'react'
+import React, {useContext} from 'react'
 import {makeStyles, useTheme} from '@mui/styles'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
+import {ColorModeContext} from '../Context/ColorMode'
 import PkgJson from '../../package.json'
-import LogoIcon from '../assets/2D_Icons/Logo_DS1.svg'
+import {TooltipIconButton} from './Buttons'
+import LogoIcon from '../assets/2D_Icons/Logo.svg'
 
 
 /**
@@ -12,8 +14,15 @@ import LogoIcon from '../assets/2D_Icons/Logo_DS1.svg'
  */
 export default function Logo({onClick}) {
   const classes = useStyles(useTheme())
+  const theme = useContext(ColorModeContext)
   return (
     <div className={classes.logoGroup}>
+      <TooltipIconButton
+        title={`Change theme from ${theme.isDay() ? 'Day' : 'Night'}` +
+               ` to ${theme.isDay() ? 'Night' : 'Day'}`}
+        onClick={() => theme.toggleColorMode()}
+        icon={theme.isDay() ? '☼' : '☽'}>
+      </TooltipIconButton>
       <Tooltip title={`Bldrs: ${PkgJson.version}`} describeChild placement="right">
         <IconButton disableRipple onClick={onClick}><LogoIcon/></IconButton>
       </Tooltip>
@@ -25,7 +34,7 @@ export default function Logo({onClick}) {
 const useStyles = makeStyles((theme) => ({
   logoGroup: {
     'position': 'fixed',
-    'top': '20px',
+    'bottom': '90px',
     'left': '25px',
     'width': '140px',
     'height': '50px',

diff --git a/src/Components/OpenModelControl.jsx b/src/Components/OpenModelControl.jsx
@@ -20,7 +20,7 @@ export default function OpenModelControl({fileOpen}) {
       placement='top'
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
-      icon={<OpenFolder style={{height: '50px', width: '50px'}}/>}
+      icon={<OpenFolder/>}
       dialog={
         <OpenModelDialog
           fileOpen={fileOpen}

diff --git a/src/Components/OperationsGroup.jsx b/src/Components/OperationsGroup.jsx
@@ -1,20 +1,15 @@
-import React, {useContext} from 'react'
-import {makeStyles, useTheme} from '@mui/styles'
+import React from 'react'
+import {makeStyles} from '@mui/styles'
 import CameraControl from './CameraControl'
 import ShareControl from './ShareControl'
 import ShortcutsControl from './ShortcutsControl'
 import {TooltipIconButton} from './Buttons'
-// import CutPlaneIcon from '../assets/2D_Icons/CutPlane.svg'
+import CutPlaneIcon from '../assets/2D_Icons/CutPlane.svg'
 import ClearIcon from '../assets/2D_Icons/Clear.svg'
-import Notes from '../assets/2D_Icons/Notes.svg'
+import MarkupIcon from '../assets/2D_Icons/Markup.svg'
 import ListIcon from '../assets/2D_Icons/List.svg'
-import Sun from '../assets/2D_Icons/Sun.svg'
-import Moon from '../assets/2D_Icons/Moon.svg'
+import {useIsMobile} from './Hooks'
 import useStore from '../store/useStore'
-import AboutControl from './AboutControl'
-
-// import SampleModelsControl from './SampleModelsControl'
-import {ColorModeContext} from '../Context/ColorMode'
 
 
 /**
@@ -25,13 +20,13 @@ import {ColorModeContext} from '../Context/ColorMode'
  * @param {function} unSelectItem deselects currently selected element
  * @return {Object}
  */
-export default function OperationsGroup({viewer, unSelectItem, installPrefix}) {
+export default function OperationsGroup({viewer, unSelectItem}) {
   const turnCommentsOn = useStore((state) => state.turnCommentsOn)
   const toggleIsPropertiesOn = useStore((state) => state.toggleIsPropertiesOn)
   const openDrawer = useStore((state) => state.openDrawer)
-  // const selectedElement = useStore((state) => state.selectedElement)
-  const classes = useStyles(useTheme())
-  const theme = useContext(ColorModeContext)
+  const selectedElement = useStore((state) => state.selectedElement)
+  const isCommentsOn = useStore((state) => state.isCommentsOn)
+  const classes = useStyles({isCommentsOn: isCommentsOn})
 
   const toggle = (panel) => {
     openDrawer()
@@ -41,31 +36,33 @@ export default function OperationsGroup({viewer, unSelectItem, installPrefix}) {
 
   return (
     <div className={classes.container}>
-      <ShareControl viewer={viewer}/>
-      <TooltipIconButton
-        title='Notes'
-        icon={<Notes/>}
-        onClick={() => toggle('Notes')}
-      />
-      {/* <TooltipIconButton
-        title="Section plane"
-        onClick={() => viewer.clipper.createPlane()}
-        icon={<CutPlaneIcon/>}/> */}
-      <AboutControl installPrefix={installPrefix}/>
-      <TooltipIconButton title="Clear selection" onClick={unSelectItem} icon={<ClearIcon/>}/>
-      <ShortcutsControl/>
-      <TooltipIconButton
-        title="Properties"
-        onClick={() => toggle('Properties')}
-        icon={<ListIcon/>}/>
-      {/* <SampleModelsControl/> */}
-
-      <TooltipIconButton
-        title={`Change theme from ${theme.isDay() ? 'Day' : 'Night'}` +
-              ` to ${theme.isDay() ? 'Night' : 'Day'}`}
-        onClick={() => theme.toggleColorMode()}
-        icon={theme.isDay() ? <Moon/> : <Sun/>}
-      />
+      <div className={classes.topGroup}>
+        <ShareControl viewer={viewer}/>
+        <TooltipIconButton
+          title='Notes'
+          icon={<MarkupIcon/>}
+          onClick={() => toggle('Notes')}
+        />
+      </div>
+      <div className={classes.lowerGroup}>
+        {
+          selectedElement ?
+          <TooltipIconButton
+            title="Properties"
+            onClick={() => toggle('Properties')}
+            icon={<ListIcon/>}/> :
+          null
+        }
+        {useIsMobile() ?
+          <TooltipIconButton
+            title="Section plane"
+            onClick={() => viewer.clipper.createPlane()}
+            icon={<CutPlaneIcon/>}/> :
+          null
+        }
+        <TooltipIconButton title="Clear selection" onClick={unSelectItem} icon={<ClearIcon/>}/>
+        <ShortcutsControl/>
+      </div>
       {/* Invisible */}
       <CameraControl viewer={viewer}/>
     </div>
@@ -75,14 +72,22 @@ export default function OperationsGroup({viewer, unSelectItem, installPrefix}) {
 
 const useStyles = makeStyles({
   container: {
+    // Actually want 100 - size of settings button
+    height: 'calc(100vh - 40px)',
+    margin: '20px 20px 0 0',
+  },
+  topGroup: {
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'space-around',
-    opacity: .9,
-    height: '340px',
-    background: 'rgba(245, 245, 245, 0.5)',
-    // boxShadow: '0px 0px 5px rgba(0, 0, 0, 0.15)',
-    bordeRadius: '5px 5px 5px 5px',
+    justifyContent: 'space-between',
+    height: '110px',
+    width: '50px',
+  },
+  lowerGroup: {
+    position: 'fixed',
+    bottom: 0,
+    paddingBottom: '70px',
+    minHeight: '150px',
   },
 })
 
diff --git a/src/Components/ShortcutsControl.jsx b/src/Components/ShortcutsControl.jsx
@@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography'
 import {makeStyles} from '@mui/styles'
 import Dialog from './Dialog'
 import {useIsMobile} from './Hooks'
-import QuestionIcon from '../assets/2D_Icons/Knowledge.svg'
+import QuestionIcon from '../assets/2D_Icons/Question.svg'
 import {ControlButton} from './Buttons'
 
 

diff --git a/src/Containers/CadView.jsx b/src/Containers/CadView.jsx
@@ -238,7 +238,7 @@ export default function CadView({
     rootElt.Name = rootProps.Name
     rootElt.LongName = rootProps.LongName
     setRootElement(rootElt)
-    setShowNavPanel(false)
+    setShowNavPanel(true)
   }
 
 
@@ -403,7 +403,6 @@ export default function CadView({
             <OperationsGroup
               viewer={viewer}
               unSelectItem={unSelectItems}
-              installPrefix={installPrefix}
             />}
         </div>
         <div className={isDrawerOpen ? classes.baseGroupOpen : classes.baseGroup}>
@@ -481,7 +480,7 @@ const useStyles = makeStyles({
     // to hardcode for now and look into passing via the theme later.
     top: `20px`,
     left: '20px',
-    display: 'none',
+    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'flex-start',
     alignItems: 'center',
@@ -497,37 +496,32 @@ const useStyles = makeStyles({
   },
   operationsGroup: {
     'position': 'fixed',
-    'top': 30,
+    'top': 0,
     'right': 0,
-    'borderLeft': '1px solid lightGrey',
-    'borderTop': '1px solid lightGrey',
-    'borderBottom': '1px solid lightGrey',
+    'border': 'none',
     'zIndex': 0,
     '@media (max-width: 900px)': {
       right: 0,
-      // height: '50%',
+      height: '50%',
     },
     '@media (max-width: 350px)': {
       top: '75px',
-      // height: '50%',
+      height: '50%',
     },
   },
   operationsGroupOpen: {
     'position': 'fixed',
-    'top': 30,
-    'right': '320px',
+    'top': 0,
+    'right': '308px',
     'border': 'none',
     'zIndex': 0,
     '@media (max-width: 900px)': {
       right: 0,
-      // height: '50%',
-      borderLeft: '1px solid lightGrey',
-      borderTop: '1px solid lightGrey',
-      borderBottom: '1px solid lightGrey',
+      height: '50%',
     },
     '@media (max-width: 350px)': {
       top: '120px',
-      // height: '50%',
+      height: '50%',
     },
   },
   baseGroup: {

diff --git a/src/assets/2D_Icons/Clear.svg b/src/assets/2D_Icons/Clear.svg