About description + Guide&Team links + help tooltips

src/Components/About/AboutControl.jsx

@@ -2,14 +2,14 @@ import React, {useState} from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 import {getCookieBoolean, setCookieBoolean} from '../../privacy/Privacy'
+import useStore from '../../store/useStore'
 import Dialog from '../Dialog'
 import {ControlButton} from '../Buttons'
-import AboutGuide from './AboutGuide'
+import AboutDescription from './AboutDescription'
 import PrivacyControl from './PrivacyControl'
 import AboutIcon from '../../assets/icons/Information.svg'
 import LogoB from '../../assets/LogoB.svg'
 import {Helmet} from 'react-helmet-async'
-import useStore from '../../store/useStore'
 
 
 /**
@@ -25,12 +25,19 @@ export default function AboutControl() {
     name: 'isFirstTime',
     defaultValue: true,
   }))
+  const setIsDialogDisplayedLocal = (value) => {
+    setIsDialogDisplayed(value)
+  }
+  const setIsDialogDisplayedForDialog = () => {
+    setIsDialogDisplayed(false)
+    setCookieBoolean({component: 'about', name: 'isFirstTime', value: false})
+  }
 
   return (
     <ControlButton
-      title='About bldrs'
+      title='About'
       isDialogDisplayed={isDialogDisplayed}
-      setIsDialogDisplayed={setIsDialogDisplayed}
+      setIsDialogDisplayed={setIsDialogDisplayedLocal}
       icon={
         <AboutIcon
           style={{
@@ -42,10 +49,7 @@ export default function AboutControl() {
       dialog={
         <AboutDialog
           isDialogDisplayed={isAboutDialogSuppressed ? false : isDialogDisplayed}
-          setIsDialogDisplayed={() => {
-            setIsDialogDisplayed(false)
-            setCookieBoolean({component: 'about', name: 'isFirstTime', value: false})
-          }}
+          setIsDialogDisplayed={setIsDialogDisplayedForDialog}
         />
       }
     />
@@ -72,7 +76,7 @@ function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
       headerText={''}
       isDialogDisplayed={isDialogDisplayed}
       setIsDialogDisplayed={setIsDialogDisplayed}
-      content={<AboutContent/>}
+      content={<AboutContent setIsDialogDisplayed={setIsDialogDisplayed}/>}
       actionTitle='OK'
       actionCb={() => setIsDialogDisplayed(false)}
     />
@@ -85,7 +89,7 @@ function AboutDialog({isDialogDisplayed, setIsDialogDisplayed}) {
  *
  * @return {React.ReactElement} React component
  */
-function AboutContent() {
+function AboutContent({setIsDialogDisplayed}) {
   return (
     <Box sx={{'& a': {textDecoration: 'none'}}}>
       <Helmet>
@@ -95,7 +99,7 @@ function AboutContent() {
       <a href='https://github.com/bldrs-ai/Share' target='_new'>
         github.com/bldrs-ai/Share
       </a>
-      <AboutGuide/>
+      <AboutDescription setIsDialogDisplayed={setIsDialogDisplayed}/>
       <PrivacyControl/>
     </Box>)
 }

src/Components/About/AboutControl.test.jsx

@@ -7,13 +7,13 @@ import AboutControl from './AboutControl'
 describe('About control tests', () => {
   test('renders the AboutControl button', () => {
     const {getByTitle} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About bldrs')
+    const aboutControl = getByTitle('About')
     expect(aboutControl).toBeInTheDocument()
   })
 
-  test('renders AbotDialog when control is pressed', () => {
+  test('renders AboutDialog when control is pressed', () => {
     const {getByTitle, getByText} = render(<MockComponent><AboutControl/></MockComponent>)
-    const aboutControl = getByTitle('About bldrs')
+    const aboutControl = getByTitle('About')
     fireEvent.click(aboutControl)
     const dialogTitle = getByText('build every thing together')
     expect(dialogTitle).toBeInTheDocument()

src/Components/About/AboutDescription.jsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import useTheme from '@mui/styles/useTheme'
+
+
+/**
+ * A miniature view of the App to show as a guide in the About dialog.
+ *
+ * @return {React.ReactComponent}
+ */
+export default function AboutDescription({setIsDialogDisplayed}) {
+  const theme = useTheme()
+
+
+  /**
+   * Close About dialog when a link is clicked
+   */
+  function onClickLink() {
+    setIsDialogDisplayed(false)
+  }
+  return (
+    <Box
+      sx={{
+        width: '260px',
+        height: '160px',
+        fontSize: '.9em',
+        fontWeight: 'bold',
+        borderRadius: '3px',
+        margin: '2em 0',
+        padding: '.3em 1em .5em .5em',
+        color: theme.palette.primary.contrastText,
+        backgroundColor: theme.palette.primary.secondary,
+        border: `1px solid ${theme.palette.primary.main}`,
+        textAlign: 'left',
+      }}
+    >
+      <Box
+        sx={{
+          padding: '10px 10px',
+        }}
+      >
+        <Typography variant={'h5'}>
+            Cross-functional online collaboration unlocks team flow,
+            productivity and creativity.
+            Open workspaces, open standards and open source code is the most powerful way to work.
+            Cooperation is the unfair advantage.
+        </Typography>
+        <Box
+          sx={{
+            marginRight: '-6px',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+            position: 'relative',
+            top: '1.4em',
+          }}
+        >
+          <a
+            href='https://bldrs.ai/share/v/p/index.ifc#c:-113.444,0.464,81.43,-23.595,24.522,10.88::i:1493510953'
+            onClick={onClickLink}
+          >
+            <Typography sx={{textDecoration: 'underline', marginLeft: '10px'}}>Guide</Typography>
+          </a>
+          <a
+            // eslint-disable-next-line max-len
+            href='https://bldrs.ai/share/v/gh/OlegMoshkovich/Logo/main/IFC_STUDY.ifc#c:40.821,-10.247,39.647,5.918,-13.326,-13.866::i:1605443723'
+            onClick={onClickLink}
+          >
+            <Typography sx={{textDecoration: 'underline', marginLeft: '10px'}}>Team</Typography>
+          </a>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+

src/Components/BranchesControl.jsx

@@ -116,7 +116,7 @@ export default function Branches() {
             }}
             onChange={(e) => handleSelect(e)}
             variant='outlined'
-            label='Git Branches / Project Versions'
+            label='Project Iterations'
             value={selected}
             select
             role="button"

src/Components/Buttons.jsx

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button'
 import ToggleButton from '@mui/material/ToggleButton'
 import Tooltip from '@mui/material/Tooltip'
 import {assertDefined} from '../utils/assert'
-import {useIsMobile} from './Hooks'
+import useStore from '../store/useStore'
 import CloseIcon from '../assets/icons/Close.svg'
 
 
@@ -25,21 +25,34 @@ export function TooltipIconButton({
   selected = false,
   size = 'medium',
   dataTestId = '',
+  aboutInfo = true,
 }) {
   assertDefined(title, onClick, icon)
-  const isMobile = useIsMobile()
+  const [openLocal, setOpenLocal] = React.useState(false)
+  const isHelpTooltips = useStore((state) => state.isHelpTooltips)
+  const open = aboutInfo ? isHelpTooltips : false
+  const handleClose = () => {
+    setOpenLocal(false)
+  }
+  const handleOpen = () => {
+    setOpenLocal(true)
+  }
   return (
     <>
-      {isMobile ?
-       <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
-         {icon}
-       </ToggleButton> :
-       <Tooltip title={title} describeChild placement={placement} data-testid={dataTestId}>
-         <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
-           {icon}
-         </ToggleButton>
-       </Tooltip>
-      }
+      <Tooltip
+        open={openLocal || open}
+        onClose={handleClose}
+        onOpen={handleOpen}
+        title={title}
+        describeChild
+        placement={placement}
+        data-testid={dataTestId}
+        PopperProps={{style: {zIndex: 0}}}
+      >
+        <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
+          {icon}
+        </ToggleButton>
+      </Tooltip>
     </>
   )
 }
@@ -89,6 +102,7 @@ export function CloseButton({onClick}) {
       placement='bottom'
       icon={<CloseIcon style={{width: '15px', height: '15px'}}/>}
       size='medium'
+      aboutInfo={false}
     />
   )
 }

src/Components/Buttons.test.jsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {fireEvent, render} from '@testing-library/react'
+import {fireEvent, render, renderHook, act} from '@testing-library/react'
 import {MockComponent} from '../__mocks__/MockComponent'
 import {TooltipIconButton} from './Buttons'
+import useStore from '../store/useStore'
 import QuestionIcon from '../assets/icons/Question.svg'
 
 
@@ -25,4 +26,20 @@ describe('<TooltipIconButton />', () => {
     const tooltip = await rendered.findByRole('tooltip')
     expect(tooltip).toBeInTheDocument()
   })
+  test('show tooltip when the help is activated', async () => {
+    const {result} = renderHook(() => useStore((state) => state))
+    await act(() => {
+      result.current.toggleIsHelpTooltips()
+    })
+    const {getByText} = render(
+        <MockComponent>
+          <TooltipIconButton
+            title={'TestTooltip'}
+            // eslint-disable-next-line no-empty-function
+            onClick={() => {}}
+            icon={<QuestionIcon/>}
+          />
+        </MockComponent>)
+    expect(await getByText('TestTooltip')).toBeVisible()
+  })
 })

src/Components/Dialog.jsx

@@ -42,6 +42,7 @@ export default function Dialog({
       onClose={close}
       sx={{
         textAlign: 'center',
+        zIndex: 1000,
       }}
       PaperProps={{variant: 'control'}}
     >

src/Components/Logo.jsx

@@ -43,6 +43,7 @@ export default function Logo({onClick}) {
         placement="right"
         icon={<LogoIcon/>}
         onClick={onClick}
+        aboutInfo={false}
       />
     </Box>
   )

src/Components/Notes/NoteCard.jsx

@@ -298,6 +298,7 @@ const CardFooter = ({
             placement='bottom'
             onClick={onClickCamera}
             icon={<CameraIcon/>}
+            aboutInfo={false}
           />}
         {selected &&
           <TooltipIconButton

src/Components/OpenModelControl.jsx

@@ -37,9 +37,9 @@ export default function OpenModelControl({fileOpen}) {
           title={'Open IFC'}
           onClick={() => setIsDialogDisplayed(true)}
           icon={<OpenIcon/>}
-          placement={'top'}
+          placement={'right'}
           selected={isDialogDisplayed}
-          dataTestId='open-ifc'
+          dataTestId='open-ifc'ß
         />
       </Paper>
       {isDialogDisplayed &&

src/Components/OperationsGroup.jsx

@@ -5,6 +5,7 @@ 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'
 import CutPlaneMenu from './CutPlaneMenu'
@@ -16,6 +17,7 @@ import ListIcon from '../assets/icons/List.svg'
 import MoonIcon from '../assets/icons/Moon.svg'
 import NotesIcon from '../assets/icons/Notes.svg'
 import SunIcon from '../assets/icons/Sun.svg'
+import QuestionIcon from '../assets/icons/Question.svg'
 
 
 /**
@@ -38,6 +40,13 @@ export default function OperationsGroup({deselectItems}) {
   const isCollaborationGroupVisible = useStore((state) => state.isCollaborationGroupVisible)
   const isModelInteractionGroupVisible = useStore((state) => state.isModelInteractionGroupVisible)
   const isSettingsVisible = useStore((state) => state.isSettingsVisible)
+  const toggleIsHelpTooltips = useStore((state) => state.toggleIsHelpTooltips)
+  const isHelpTooltips = useStore((state) => state.isHelpTooltips)
+  const turnOffIsHelpTooltips = useStore((state) => state.turnOffIsHelpTooltips)
+  const isMobile = useIsMobile()
+  const turnOffTooltips = () => {
+    return isMobile ? turnOffIsHelpTooltips() : null
+  }
 
   const isSelected = () => {
     const ifSelected = (
@@ -104,11 +113,18 @@ export default function OperationsGroup({deselectItems}) {
            title='Notes'
            icon={<NotesIcon/>}
            selected={isNotesOn}
-           onClick={() => toggle('Notes')}
+           onClick={() => {
+             turnOffTooltips()
+             toggle('Notes')
+           }
+           }
          />
          <TooltipIconButton
            title='Properties'
-           onClick={() => toggle('Properties')}
+           onClick={() => {
+             turnOffTooltips()
+             toggle('Properties')
+           }}
            selected={isPropertiesOn}
            icon={<ListIcon/>}
          />
@@ -120,6 +136,7 @@ export default function OperationsGroup({deselectItems}) {
            selected={isSelected()}
            icon={<ClearIcon/>}
          />
+
        </ButtonGroup>
       }
 
@@ -130,6 +147,12 @@ export default function OperationsGroup({deselectItems}) {
            onClick={() => theme.toggleColorMode()}
            icon={theme.palette.mode === 'light' ? <MoonIcon/> : <SunIcon/>}
          />
+         <TooltipIconButton
+           title='Help'
+           onClick={() => toggleIsHelpTooltips()}
+           selected={isHelpTooltips}
+           icon={<QuestionIcon/>}
+         />
          <AboutControl/>
        </ButtonGroup>
       }