unify styles in the top left coner

bldrs-ai · Oct 8, 2023 · f53754e · f53754e
1 parent 1548937
commit f53754e
Show file tree

Hide file tree

Showing 6 changed files with 159 additions and 153 deletions.
diff --git a/src/Components/ControlsGroup.jsx b/src/Components/ControlsGroup.jsx
@@ -3,10 +3,9 @@ import ButtonGroup from '@mui/material/ButtonGroup'
 import OpenModelControl from './OpenModelControl'
 import useStore from '../store/useStore'
 import {TooltipIconButton} from './Buttons'
-import HistoryIcon from '@mui/icons-material/History'
+// import HistoryIcon from '@mui/icons-material/History'
 import SearchIcon from '@mui/icons-material/Search'
 import TreeIcon from '../assets/icons/Tree.svg'
-import useTheme from '@mui/styles/useTheme'
 
 
 /**
@@ -18,36 +17,39 @@ import useTheme from '@mui/styles/useTheme'
  */
 export default function OperationsGroup({fileOpen}) {
   const toggleIsNavigationVisible = useStore((state) => state.toggleIsNavigationVisible)
-  // const isNavigationVisible = useStore((state) => state.isNavigationVisible)
+  const isNavigationVisible = useStore((state) => state.isNavigationVisible)
   const toggleIsSearchVisible = useStore((state) => state.toggleIsSearchVisible)
-  // const isSearchVisible = useStore((state) => state.isSearchVisible)
-  const theme = useTheme()
+  const isSearchVisible = useStore((state) => state.isSearchVisible)
 
   return (
-    <ButtonGroup orientation='horizontal' sx={{border: `1px solid ${theme.palette.primary.background}`}} >
+    <ButtonGroup
+      orientation='horizontal'
+      variant='contained'
+    >
       <OpenModelControl fileOpen={fileOpen}/>
       <TooltipIconButton
         title='Search'
         icon={<SearchIcon className='icon-share' color='secondary'/>}
         placement='bottom'
-        selected={true}
+        aboutInfo={false}
+        selected={isSearchVisible}
         onClick={toggleIsSearchVisible}
       />
       <TooltipIconButton
         title='Navigation'
         icon={<TreeIcon className='icon-share' color='secondary' style={{width: '17px', height: '17px'}}/>}
         placement='bottom'
         aboutInfo={false}
-        selected={true}
+        selected={isNavigationVisible}
         onClick={toggleIsNavigationVisible}
       />
-      <TooltipIconButton
+      {/* <TooltipIconButton
         title='Project History'
         icon={<HistoryIcon className='icon-share' color='secondary'/>}
         placement='bottom'
-        selected={true}
+        selected={false}
         onClick={toggleIsNavigationVisible}
-      />
+      /> */}
     </ButtonGroup>
   )
 }
diff --git a/src/Components/NavPanel.jsx b/src/Components/NavPanel.jsx
@@ -5,6 +5,7 @@ import Paper from '@mui/material/Paper'
 import ToggleButton from '@mui/material/ToggleButton'
 import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
 import Tooltip from '@mui/material/Tooltip'
+import Typography from '@mui/material/Typography'
 import TreeView from '@mui/lab/TreeView'
 import {styled} from '@mui/material/styles'
 import NavTree from './NavTree'
@@ -80,7 +81,7 @@ export default function NavPanel({
     }}
     >
       <Paper
-        elevation={0}
+        elevation={1}
         aria-label='Navigation Panel'
         variant='control'
         sx={{
@@ -91,12 +92,12 @@ export default function NavPanel({
           'justifyContent': 'space-around',
           'alignItems': 'center',
           'maxHeight': '400px',
-          '&:hover #togglegrp': {
-            visibility: 'visible !important',
-          },
-          '&:hover svg': {
-            visibility: 'visible !important',
-          },
+          // '&:hover #togglegrp': {
+          //   visibility: 'visible !important',
+          // },
+          // '&:hover svg': {
+          //   visibility: 'visible !important',
+          // },
           '@media (max-width: 900px)': {
             maxHeight: '292px',
             top: '86px',
@@ -146,6 +147,7 @@ export default function NavPanel({
               </Tooltip>
             </ToggleButton>
           </StyledToggleButtonGroup>}
+          <Typography variant='overline' sx={{marginLeft: '1em'}}>Spatial Navigation</Typography>
           <TreeView
             aria-label={isNavTree ? 'IFC Navigator' : 'IFC Types Navigator'}
             defaultCollapseIcon={<NodeOpenIcon className='icon-share icon-nav-caret'/>}
@@ -162,7 +164,7 @@ export default function NavPanel({
             }}
             key='tree'
             sx={{
-              'padding': existNavTypesInFeature ? '7px 0 14px 0' : '14px 0',
+              'padding': existNavTypesInFeature ? '7px 0 14px 0' : '4px 0px 10px 0px',
               'maxWidth': '400px',
               'overflowY': 'auto',
               'overflowX': 'hidden',

diff --git a/src/Components/OpenModelControl.jsx b/src/Components/OpenModelControl.jsx
@@ -17,6 +17,7 @@ import {getOrganizations, getRepositories, getFiles, getUserRepositories} from '
 import {RectangularButton} from '../Components/Buttons'
 import UploadIcon from '../assets/icons/Upload.svg'
 import CreateNewFolderIcon from '@mui/icons-material/CreateNewFolder'
+import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined'
 
 
 /**
@@ -54,9 +55,9 @@ export default function OpenModelControl({fileOpen}) {
       <TooltipIconButton
         title={'Open IFC'}
         onClick={() => setIsDialogDisplayed(true)}
-        icon={<CreateNewFolderIcon className='icon-share' color='secondary'/>}
+        icon={<CreateNewFolderOutlinedIcon className='icon-share' color='secondary'/>}
         placement={'bottom'}
-        selected={true}
+        selected={isDialogDisplayed}
         dataTestId='open-ifc'
       />
       {isDialogDisplayed &&

diff --git a/src/Components/OperationsGroup.jsx b/src/Components/OperationsGroup.jsx
@@ -3,8 +3,6 @@ import Box from '@mui/material/Box'
 import ButtonGroup from '@mui/material/ButtonGroup'
 import useTheme from '@mui/styles/useTheme'
 import useStore from '../store/useStore'
-import {assertDefined} from '../utils/assert'
-import {hexToRgba} from '../utils/color'
 import {useIsMobile} from './Hooks'
 import AboutControl from './About/AboutControl'
 import CameraControl from './CameraControl'
@@ -73,95 +71,77 @@ export default function OperationsGroup({deselectItems}) {
   }
 
   const theme = useTheme()
-  // When the model has dark/black colors, then the icons (also dark)
-  // disappear. This keeps them visible.
-  const bgOpacity = 0.2
-  const bgColor = hexToRgba(assertDefined(theme.palette.scene.background), bgOpacity)
   return (
-    <Box
-      sx={{
-        'display': 'flex',
-        'flexDirection': 'column',
-        'backgroundColor': `${bgColor}`,
-        'padding': '1em',
-        '@media (max-width: 900px)': {
-          padding: '1em 0.5em',
-        },
-      }}
-    >
+    <ButtonGroup orientation='vertical' variant='contained' sx={{margin: '1em'}}>
       {isLoginVisible &&
-       <ButtonGroup orientation='vertical'>
          <AuthNav/>
-       </ButtonGroup>
       }
 
       {isCollaborationGroupVisible &&
-       <ButtonGroup orientation='vertical' sx={{marginTop: '10px'}}>
-         <ShareControl/>
-       </ButtonGroup>
+      <Box>
+        <ShareControl/>
+      </Box>
       }
 
       {isModelInteractionGroupVisible &&
-       <ButtonGroup orientation='vertical'>
-         <TooltipIconButton
-           title='Notes'
-           icon={<ChatOutlinedIcon className='icon-share' color='secondary'/>}
-           selected={isNotesOn}
-           onClick={() => {
-             turnOffTooltips()
-             toggle('Notes')
-           }}
-         />
-         <TooltipIconButton
-           title='Properties'
-           onClick={() => {
-             turnOffTooltips()
-             toggle('Properties')
-           }}
-           selected={isPropertiesOn}
-           icon={<FormatListBulletedOutlinedIcon className='icon-share' color='secondary'/>}
-         />
-         <CutPlaneMenu/>
-         {/* <ExtractLevelsMenu/> */}
-         <TooltipIconButton
-           title='Clear'
-           onClick={deselectItems}
-           selected={isSelected()}
-           icon={<HighlightOffIcon className='icon-share'color='secondary'/>}
-         />
-
-       </ButtonGroup>
+      <>
+        <TooltipIconButton
+          title='Notes'
+          icon={<ChatOutlinedIcon className='icon-share' color='secondary'/>}
+          selected={isNotesOn}
+          onClick={() => {
+            turnOffTooltips()
+            toggle('Notes')
+          }}
+        />
+        <TooltipIconButton
+          title='Properties'
+          onClick={() => {
+            turnOffTooltips()
+            toggle('Properties')
+          }}
+          selected={isPropertiesOn}
+          icon={<FormatListBulletedOutlinedIcon className='icon-share' color='secondary'/>}
+        />
+        <CutPlaneMenu/>
+        <TooltipIconButton
+          title='Clear'
+          onClick={deselectItems}
+          selected={isSelected()}
+          icon={<HighlightOffIcon className='icon-share'color='secondary'/>}
+        />
+      </>
       }
 
       {isSettingsVisible &&
-       <ButtonGroup orientation='vertical'>
-         {isAppStoreEnabled &&
+      <>
+        {isAppStoreEnabled &&
          <TooltipIconButton
            title='Open App Store'
            icon={<AppStoreIcon/>}
            selected={isAppStoreOpen}
            onClick={() => toggleAppStoreDrawer()}
          />
-         }
-         <TooltipIconButton
-           title={`${theme.palette.mode === 'light' ? 'Day' : 'Night'} theme`}
-           onClick={() => theme.toggleColorMode()}
-           icon={
+        }
+        <TooltipIconButton
+          title={`${theme.palette.mode === 'light' ? 'Day' : 'Night'} theme`}
+          onClick={() => theme.toggleColorMode()}
+          icon={
              theme.palette.mode === 'light' ?
                <WbSunnyOutlinedIcon className='icon-share' color='secondary'/> :
                <NightlightOutlinedIcon className='icon-share' color='secondary'/> }
-         />
-         <AboutControl/>
-         <TooltipIconButton
-           title='Help'
-           onClick={() => toggleIsHelpTooltips()}
-           selected={isHelpTooltips}
-           icon={<HelpOutlineIcon className='icon-share' color='secondary'/>}
-         />
-       </ButtonGroup>
+        />
+        <AboutControl/>
+        <TooltipIconButton
+          title='Help'
+          onClick={() => toggleIsHelpTooltips()}
+          selected={isHelpTooltips}
+          icon={<HelpOutlineIcon className='icon-share' color='secondary'/>}
+        />
+      </>
       }
       {/* Invisible */}
       <CameraControl/>
-    </Box>
+    </ButtonGroup>
   )
 }