Merge pull request #331 from MetaCell/feature/328

328-Fix nested/tree style
MetaCell · Nov 30, 2023 · 2303c1b · 2303c1b
2 parents 76c44a1 + a27f129
commit 2303c1b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/applications/portal/frontend/src/components/common/SwitchLabel.jsx b/applications/portal/frontend/src/components/common/SwitchLabel.jsx
@@ -19,12 +19,12 @@ const SwitchLabel = ({ label, isParentLabel }) => {
     return (
         <Tooltip title={label} placement="top">
             <Box display="flex" alignItems="center" justifyContent="space-between">
-                <div style={{ display: 'flex' }}>
+                <div style={{ display: 'flex', gap: '0.25rem' }}>
                     <Typography className={`${classes.label} ${isParentLabel ? 'ellipsis-parent' : 'ellipsis'}`}>
                         {label.substr(0, MAX_STR_LENGTH_SIDEBAR)}
                     </Typography>
                     {
-                        isParentLabel && <span style={{ color: 'rgba(255, 255, 255, 0.40)', fontWeight: 400, fontSize: '0.65rem' }}> -parent</span>
+                        isParentLabel && <span style={{ color: 'rgba(255, 255, 255, 0.40)', fontWeight: 400, fontSize: '0.65rem' }}> - parent</span>
                     }
                 </div>
             </Box>

diff --git a/applications/portal/frontend/src/components/sidebar/CustomAccordionSummary.jsx b/applications/portal/frontend/src/components/sidebar/CustomAccordionSummary.jsx
@@ -102,11 +102,14 @@ const CustomAccordionSummary = ({
             }
             className={isParent ? 'nested' : 'nested_child_element'}
         >
-            <span className='population-color'
+            <span className='population-color' style={{
+                paddingRight: hasEditPermission && status === POPULATION_FINISHED_STATE?"0.5rem": "1.75rem"
+            }}
                   onClick={(event) => handlePopoverClick(event, population.id)}>
                 <Box style={{backgroundColor: getRGBAString(getRGBAColor())}}
                      component="span"
-                     className='square'/>
+                     className='square'
+                />
                 {hasEditPermission && status === POPULATION_FINISHED_STATE &&
                     <ArrowDropDownIcon fontSize='small' style={{opacity: POPULATION_ICONS_OPACITY}}/>}
             </span>
@@ -135,7 +138,6 @@ const CustomAccordionSummary = ({
                         labelPlacement="start"
                         onChange={() => isParent ? handlePopulationSwitch(population.children, !checked) : handlePopulationSwitch(population.id)}
                         checked={checked}
-                        style={populationTextStyle(status !== POPULATION_FINISHED_STATE)}
                         disabled={status !== POPULATION_FINISHED_STATE}
                     />
                 ) : (
@@ -160,7 +162,6 @@ const CustomAccordionSummary = ({
                             disabled={status !== POPULATION_FINISHED_STATE}
                             labelPlacement="start"
                             className={'population-label-parent'}
-                            style={populationTextStyle(status !== POPULATION_FINISHED_STATE)}
                         />
                     </Box>
                 )

diff --git a/applications/portal/frontend/src/components/sidebar/ExperimentSidebar.jsx b/applications/portal/frontend/src/components/sidebar/ExperimentSidebar.jsx
@@ -81,7 +81,7 @@ const useStyles = makeStyles({
                 overflow: 'hidden',
             },
             '& .ellipsis': { width: '100%' },
-            '& .ellipsis-parent': { width: '3rem' },
+            '& .ellipsis-parent': { maxWidth: '3rem' },
             '& .MuiAccordionSummary-root': {
                 padding: '0.5rem 1rem 0.5rem 3rem',
                 flexDirection: 'row-reverse',
@@ -91,10 +91,10 @@ const useStyles = makeStyles({
                         display: 'block'
                     },
                     '& .ellipsis': {
-                        width: '5.25rem'
+                        maxWidth: '5.25rem'
                     },
                     '& .ellipsis-parent': {
-                        width: '2rem'
+                        maxWidth: '2rem'
                     }
                 },
                 '&.nested': {
@@ -112,7 +112,8 @@ const useStyles = makeStyles({
                     },
                     '& .trail-icon': {
                         width: 'auto',
-                        height: 'auto'
+                        height: 'auto',
+                        opacity: 'unset'
                     }
                 }
             },
@@ -153,8 +154,7 @@ const useStyles = makeStyles({
             alignItems: 'center',
             lineHeight: '0.938rem',
             fontWeight: 400,
-            fontSize: '0.75rem',
-            paddingRight: '0.5rem',
+            fontSize: '0.75rem'
         },
 
         '& .population-switch': {