introduce circle variant for to the toggle button

bldrs-ai · Oct 20, 2023 · 205b2f2 · 205b2f2
1 parent e02465e
commit 205b2f2
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 7 deletions.
diff --git a/src/Components/Buttons.jsx b/src/Components/Buttons.jsx
@@ -28,6 +28,7 @@ export function TooltipIconButton({
   size = 'medium',
   dataTestId = '',
   aboutInfo = true,
+  variant = 'circle',
 }) {
   assertDefined(title, onClick, icon)
   const [openLocal, setOpenLocal] = React.useState(false)
@@ -51,7 +52,7 @@ export function TooltipIconButton({
         data-testid={dataTestId || title}
         PopperProps={{style: {zIndex: 0}}}
       >
-        <ToggleButton selected={selected} onClick={onClick} value={''} size={size}>
+        <ToggleButton selected={selected} onClick={onClick} value={''} size={size} variant={variant}>
           {icon}
         </ToggleButton>
       </Tooltip>

diff --git a/src/Components/CutPlaneMenu.jsx b/src/Components/CutPlaneMenu.jsx
@@ -99,6 +99,7 @@ export default function CutPlaneMenu() {
       <TooltipIconButton
         title={'Section'}
         placement='top'
+        variant='solid'
         icon={<CropOutlinedIcon className='icon-share' color='secondary'/>}
         onClick={handleClick}
         selected={anchorEl !== null || !!cutPlanes.length}

diff --git a/src/Components/MiscGroup.jsx b/src/Components/MiscGroup.jsx
@@ -59,8 +59,9 @@ export default function MiscGroup({deselectItems, viewer, repo}) {
           <>
             <TooltipIconButton
               title={`${theme.palette.mode === 'light' ? 'Day' : 'Night'} theme`}
-              onClick={() => theme.toggleColorMode()}
+              onClick={() => theme.toggleColorMode()}kk
               placement={'top'}
+              variant='solid'
               icon={
                 theme.palette.mode === 'light' ?
                   <WbSunnyOutlinedIcon className='icon-share' color='secondary'/> :
@@ -79,6 +80,7 @@ export default function MiscGroup({deselectItems, viewer, repo}) {
               showTitle={true}
               title='Isolate'
               placement='top'
+              variant='solid'
               onClick={() => {
                 viewer.isolator.toggleIsolationMode()
                 setIsIsolate(!isIsolate)
@@ -91,6 +93,7 @@ export default function MiscGroup({deselectItems, viewer, repo}) {
               showTitle={true}
               title='Hide'
               placement='top'
+              variant='solid'
               onClick={() => {
                 viewer.isolator.hideSelectedElements()
                 setIsHidden(true)
@@ -103,6 +106,7 @@ export default function MiscGroup({deselectItems, viewer, repo}) {
           <TooltipIconButton
             title='Un-hide all'
             placement='top'
+            variant='solid'
             onClick={() => {
               viewer.isolator.unHideAllElements()
               setIsHidden(false)
@@ -115,6 +119,7 @@ export default function MiscGroup({deselectItems, viewer, repo}) {
             <TooltipIconButton
               title='Clear'
               placement='top'
+              variant='solid'
               onClick={() => {
                 if (isIsolate) {
                   setIsIsolate(!isIsolate)

diff --git a/src/Components/OpenModelControl.jsx b/src/Components/OpenModelControl.jsx
@@ -140,7 +140,7 @@ function OpenModelDialog({isDialogDisplayed, setIsDialogDisplayed, fileOpen, org
           sx={{paddingTop: '6px', width: '280px'}}
         >
           <SampleModelFileSelector setIsDialogDisplayed={setIsDialogDisplayed}/>
-          {!isAuthenticated ?
+          {isAuthenticated ?
           <Stack>
             <Typography variant='body1' sx={{margin: '14px 0px 20px 0px', fontWeight: 400}}>PROJECTS</Typography>
             <Selector label={'Organization'} list={orgNamesArrWithAt} selected={selectedOrgName} setSelected={selectOrg}/>
@@ -195,7 +195,7 @@ function SampleModelFileSelector({setIsDialogDisplayed}) {
       4: '/share/v/gh/Swiss-Property-AG/Seestrasse-Public/main/SEESTRASSE.ifc#c:119.61,50.37,73.68,16.18,11.25,5.74',
       // eslint-disable-next-line max-len
       5: '/share/v/gh/sujal23ks/BCF/main/packages/fileimport-service/ifc/ifcs/171210AISC_Sculpture_brep.ifc/120010/120020/120023/4998/2867#c:-163.46,16.12,223.99,12.03,-28.04,-15.28',
-      6: '/share/v/gh/OlegMoshkovich/Logo/main/IFC_STUDY.ifc/103/25873/113/122/743#c:43,-19.686,-27.346,5.365,-11.53,0.934',
+      6: '/share/v/gh/OlegMoshkovich/Logo/main/IFC_STUDY.ifc/103/25873/113/122/743#c:59.624,-24.034,-59.987,5.532,-15.137,1.721',
     }
     window.removeEventListener('beforeunload', handleBeforeUnload)
     navigate({pathname: modelPath[e.target.value]})

diff --git a/src/theme/Components.js b/src/theme/Components.js
@@ -58,7 +58,7 @@ export function getComponentOverrides(palette, typography) {
         {
           props: {variant: 'contained'},
           style: ({theme}) => ({
-            backgroundColor: theme.palette.scene.background,
+            // backgroundColor: theme.palette.scene.background,
             boxShadow: theme.shadows[0],
             opacity: .9,
           }),
@@ -86,10 +86,27 @@ export function getComponentOverrides(palette, typography) {
         },
         sizeSmall: {
           border: 'none',
-          width: '60px',
-          height: '60px',
+          width: '30px',
+          height: '30px',
         },
       },
+      variants: [
+        {
+          props: {variant: 'circle'},
+          style: {
+            'width': '40px',
+            'height': '40px',
+            'borderRadius': '10px',
+            'border': 'none',
+            'margin': '0px 4px 2px 0px',
+            'backgroundColor': palette.scene.background,
+            '&.Mui-selected, &.Mui-selected:hover': {
+              backgroundColor: palette.primary.background,
+              opacity: .9,
+            },
+          },
+        },
+      ],
     },
     MuiDialog: {
       styleOverrides: {