OpenConceptLab/ocl_issues#1530 | table selection control row is stick…

…y now
OpenConceptLab · Mar 30, 2023 · 77c66cb · 77c66cb
1 parent 7d01474
commit 77c66cb
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 18 deletions.
diff --git a/src/components/search/ResultsTable.jsx b/src/components/search/ResultsTable.jsx
@@ -865,8 +865,8 @@ const ResultsTable = (
                     {
                       selectedCount > 0 &&
                       <TableRow colSpan={selectionRowColumnsCount} style={{backgroundColor: 'rgba(0, 0, 0, 0.09)'}}>
-                        <TableCell colSpan={columnsCount} align='left' style={{backgroundColor: 'rgba(0, 0, 0, 0.09)'}}>
-                          <span className='flex-vertical-center' style={{paddingTop: '3px'}}>
+                        <TableCell colSpan={columnsCount} align='left' style={{backgroundColor: 'rgba(224, 224, 224, 1)'}}>
+                          <span className='flex-vertical-center'>
                             <span style={{margin: '0px 10px', whiteSpace: 'pre'}}>{selectedCount} Selected</span>
                             {
                               !asReference &&
@@ -885,11 +885,11 @@ const ResultsTable = (
                     <TableRow style={theadStyles}>
                       {
                         (isConceptContainer || isValueSet || isConceptMap) &&
-                        <TableCell style={theadStyles} />
+                          <TableCell style={{...theadStyles, top: selectedCount > 0 ? 40 : 0}} />
                       }
                       {
                         isSelectable &&
-                        <TableCell style={{maxWidth: '30px', padding: '2px', ...theadStyles}} align="center">
+                          <TableCell style={{maxWidth: '30px', padding: '2px', ...theadStyles, top: selectedCount > 0 ? 40 : 0}} align="center">
                           <Checkbox checked={isAllSelected} indeterminate={isSomeSelected} size='small' style={{color: theadTextColor, padding: '0px'}} onChange={onAllSelect} />
                         </TableCell>
                       }
@@ -901,7 +901,7 @@ const ResultsTable = (
                               key={column.id}
                               sortDirection={orderBy === column.id ? order : false}
                               align={column.align || 'left'}
-                              style={{color: theadTextColor, ...theadStyles}}>
+                              style={{color: theadTextColor, ...theadStyles, top: selectedCount > 0 ? 40 : 0}}>
                               {
                                 column.tooltip ?
                                 <Tooltip arrow placement='top' title={column.tooltip}>
@@ -927,7 +927,7 @@ const ResultsTable = (
                               }
                             </TableCell>
                           ) : (
-                            <TableCell key={column.id} align={column.align || 'left'} style={{color: theadTextColor, ...theadStyles}}>
+                            <TableCell key={column.id} align={column.align || 'left'} style={{color: theadTextColor, ...theadStyles, top: selectedCount > 0 ? 40 : 0}}>
                               {
                                 column.translation ?
                                   <span>
@@ -958,11 +958,11 @@ const ResultsTable = (
                       }
                       {
                         !isSelectable &&
-                        <TableCell style={theadStyles} />
+                          <TableCell style={{...theadStyles, top: selectedCount > 0 ? 40 : 0}} />
                       }
                       {
                         (resourceDefinition.expandible || shouldShowPin) &&
-                        <TableCell style={theadStyles} />
+                          <TableCell style={{...theadStyles, top: selectedCount > 0 ? 40 : 0}} />
                       }
                     </TableRow>
                   </TableHead>

diff --git a/src/components/search/SelectedResourceControls.jsx b/src/components/search/SelectedResourceControls.jsx
@@ -57,16 +57,18 @@ const SelectedResourceControls = ({
     <span style={{display: 'inline-flex', width: 'max-content'}}>
       {
         shouldShowDownloadOption &&
-        <DownloadButton
-          includeCSV
-          formats={['json']}
-          resource={selectedItems}
-          buttonFunc={
-            attrs =>
-              <Chip icon={<DownloadIcon fontSize='small' />} {...buttonProps} {...attrs} className='selected-control-chip' label='Download' />
-          }
-          queryParams={{verbose: true, includeInverseMappings: true, includeSummary: true }}
-        />
+          <span>
+            <DownloadButton
+              includeCSV
+              formats={['json']}
+              resource={selectedItems}
+              buttonFunc={
+                attrs =>
+                <Chip icon={<DownloadIcon fontSize='small' />} {...buttonProps} {...attrs} className='selected-control-chip' label='Download' />
+              }
+              queryParams={{verbose: true, includeInverseMappings: true, includeSummary: true }}
+            />
+          </span>
       }
       {
         shouldShowCreateSimilarOption &&