Merge branch 'main' into 19462-colorscheme refs #19462

[arvados-workbench2.git] / src / components / column-selector / column-selector.tsx

diff --git a/src/components/column-selector/column-selector.tsx b/src/components/column-selector/column-selector.tsx
index 441d8ec83da77a5ce688744776da168b3860ccf8..2323987b7d51f38f52e16e41038e10ec6805d140 100644 (file)
--- a/src/components/column-selector/column-selector.tsx
+++ b/src/components/column-selector/column-selector.tsx
@@ -10,7 +10,6 @@ import { Popover } from "../popover/popover";
 import { IconButtonProps } from '@material-ui/core/IconButton';
 import { DataColumns } from '../data-table/data-table';
 import { ArvadosTheme } from "common/custom-theme";
-import { ResourceName } from 'views-components/data-explorer/renderers';
 
 interface ColumnSelectorDataProps {
     columns: DataColumns<any>;
@@ -18,12 +17,18 @@ interface ColumnSelectorDataProps {
     className?: string;
 }
 
-type CssRules = "checkbox";
+type CssRules = "checkbox" | "listItem" | "listItemText";
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     checkbox: {
         width: 24,
         height: 24
+    },
+    listItem: {
+        padding: 0
+    },
+    listItemText: {
+        paddingTop: '0.2rem'
     }
 });
 
@@ -31,15 +36,7 @@ export type ColumnSelectorProps = ColumnSelectorDataProps & WithStyles<CssRules>
 
 export const ColumnSelector = withStyles(styles)(
     ({ columns, onColumnToggle, classes }: ColumnSelectorProps) =>
-    {console.log('COLUMN_SELECTOR',columns)
-    columns = [...columns, {
-        name:'bananas',
-        selected: false,
-        configurable: true, filters:{}, render: (uuid)=><ResourceName uuid='uuid'/>
-    }
-]
-    console.log('COLUMN_SELECTOR',columns)
-       return <Popover triggerComponent={ColumnSelectorTrigger}>
+        <Popover triggerComponent={ColumnSelectorTrigger}>
             <Paper>
                 <List dense>
                     {columns
@@ -48,20 +45,22 @@ export const ColumnSelector = withStyles(styles)(
                             <ListItem
                                 button
                                 key={index}
+                                className={classes.listItem}
                                 onClick={() => onColumnToggle(column)}>
                                 <Checkbox
                                     disableRipple
                                     color="primary"
                                     checked={column.selected}
                                     className={classes.checkbox} />
-                                <ListItemText>
+                                <ListItemText 
+                                    className={classes.listItemText}>
                                     {column.name}
                                 </ListItemText>
                             </ListItem>
                         )}
                 </List>
             </Paper>
-        </Popover>}
+        </Popover>
 );
 
 export const ColumnSelectorTrigger = (props: IconButtonProps) =>
@@ -70,3 +69,5 @@ export const ColumnSelectorTrigger = (props: IconButtonProps) =>
             <MenuIcon aria-label="Select columns" />
         </IconButton>
     </Tooltip>;
+
+