add controls group

src/Components/ControlsGroup.jsx

@@ -0,0 +1,67 @@
+import React from 'react'
+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 SearchOutlinedIcon from '@mui/icons-material/SearchOutlined'
+import TreeIcon from '../assets/icons/Tree.svg'
+
+
+/**
+ * OperationsGroup contains tools for sharing, notes, properties, cut
+ * plane, deselect, theme change and about.
+ *
+ * @property {Function} deselectItems deselects currently selected element
+ * @return {React.Component}
+ */
+export default function OperationsGroup({fileOpen}) {
+  const cutPlanes = useStore((state) => state.cutPlanes)
+  const levelInstance = useStore((state) => state.levelInstance)
+  const selectedElement = useStore((state) => state.selectedElement)
+
+  const isSelected = () => {
+    const ifSelected = (
+      selectedElement !== null ||
+      cutPlanes.length !== 0 ||
+      levelInstance !== null
+    )
+    return ifSelected
+  }
+
+  return (
+    <ButtonGroup orientation='horizontal' >
+      {/* <TooltipIconButton
+        title='Open Project'
+        icon={<CreateNewFolderIcon color='secondary'/>}
+        placement='bottom'
+        selected={true}
+        onClick={() => (isSelected)}
+      /> */}
+      <OpenModelControl fileOpen={fileOpen}/>
+      <TooltipIconButton
+        title='Search'
+        icon={<SearchOutlinedIcon/>}
+        placement='bottom'
+        aboutInfo={false}
+        selected={true}
+        onClick={() => (isSelected)}
+      />
+      <TooltipIconButton
+        title='Navigation'
+        icon={<TreeIcon className='icon-share' color='secondary' style={{width: '17px', height: '17px'}}/>}
+        placement='bottom'
+        aboutInfo={false}
+        selected={true}
+        onClick={() => (isSelected)}
+      />
+      <TooltipIconButton
+        title='Project History'
+        icon={<HistoryIcon className='icon-share' color='secondary'/>}
+        placement='bottom'
+        selected={true}
+        onClick={() => (isSelected)}
+      />
+    </ButtonGroup>
+  )
+}

src/Components/SearchBar.jsx

@@ -9,7 +9,6 @@ import {looksLikeLink, githubUrlOrPathToSharePath} from '../ShareRoutes'
 import debug from '../utils/debug'
 import {navWithSearchParamRemoved} from '../utils/navigate'
 import {handleBeforeUnload} from '../utils/event'
-import OpenModelControl from './OpenModelControl'
 import {TooltipIconButton} from './Buttons'
 import HighlightOffIcon from '@mui/icons-material/HighlightOff'
 
@@ -97,7 +96,6 @@ export default function SearchBar({fileOpen}) {
       direction="row"
       sx={{width: '100%'}}
     >
-      <OpenModelControl fileOpen={fileOpen}/>
       <Paper
         component='form'
         onSubmit={onSubmit}

src/Containers/CadView.jsx

@@ -5,8 +5,8 @@ import Box from '@mui/material/Box'
 import useTheme from '@mui/styles/useTheme'
 import {navToDefault} from '../Share'
 import Alert from '../Components/Alert'
+import ControlsGroup from '../Components/ControlsGroup'
 import BranchesControl from '../Components/BranchesControl'
-import {useWindowDimensions} from '../Components/Hooks'
 import Logo from '../Components/Logo'
 import NavPanel from '../Components/NavPanel'
 import SearchBar from '../Components/SearchBar'
@@ -15,6 +15,7 @@ import AppStoreSideDrawer from '../Components/AppStore/AppStoreSideDrawerControl
 import OperationsGroup from '../Components/OperationsGroup'
 import SnackBarMessage from '../Components/SnackbarMessage'
 import {hasValidUrlParams as urlHasCameraParams} from '../Components/CameraControl'
+import {useWindowDimensions} from '../Components/Hooks'
 import {useIsMobile} from '../Components/Hooks'
 import {IfcViewerAPIExtended} from '../Infrastructure/IfcViewerAPIExtended'
 import * as Privacy from '../privacy/Privacy'
@@ -646,8 +647,12 @@ export default function CadView({
           },
         }}
         >
+          <ControlsGroup fileOpen={() => loadLocalFile(navigate)}/>
           {isSearchBarVisible &&
-            <SearchBar fileOpen={() => loadLocalFile(navigate, appPrefix, handleBeforeUnload)}/>}
+          <Box sx={{marginTop: '14px'}}>
+            <SearchBar fileOpen={() => loadLocalFile(navigate, appPrefix, handleBeforeUnload)}/>
+          </Box>
+          }
           {
             modelPath.repo !== undefined &&
             <BranchesControl location={location}/>