Merge branch '13855-data-collection-files-card'

[arvados.git] / src / components / collection-panel-files / collection-panel-files.tsx

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 27354db18a91187f73b501f932aa6a271fc40c00..17bbe85e0d7f1748ee23ec692d7d501e13e7cafc 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,28 +6,33 @@ import * as React from 'react';
 import { TreeItem, TreeItemStatus } from '../tree/tree';
 import { FileTreeData } from '../file-tree/file-tree-data';
 import { FileTree } from '../file-tree/file-tree';
-import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, CardContent, Card } from '@material-ui/core';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, CardContent, Card, Button } from '@material-ui/core';
 import { CustomizeTableIcon } from '../icon/icon';
 
 export interface CollectionPanelFilesProps {
     items: Array<TreeItem<FileTreeData>>;
+    onUploadDataClick: () => void;
     onItemMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onOptionsMenuOpen: (event: React.MouseEvent<HTMLElement>) => void;
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
 }
 
-type CssRules = 'root' | 'nameHeader' | 'fileSizeHeader';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     root: {
         paddingBottom: theme.spacing.unit
     },
+    cardSubheader: {
+        paddingTop: 0,
+        paddingBottom: 0
+    },
     nameHeader: {
         marginLeft: '75px'
     },
     fileSizeHeader: {
-        marginRight: '50px'
+        marginRight: '65px'
     }
 });
 
@@ -36,6 +41,16 @@ export const CollectionPanelFiles = withStyles(styles)(
         <Card className={classes.root}>
             <CardHeader
                 title="Files"
+                action={
+                    <Button 
+                        variant='raised' 
+                        color='primary'
+                        size='small'>
+                        Upload data
+                    </Button>
+                } />
+            <CardHeader
+                className={classes.cardSubheader}
                 action={
                     <IconButton onClick={onOptionsMenuOpen}>
                         <CustomizeTableIcon />
@@ -51,4 +66,3 @@ export const CollectionPanelFiles = withStyles(styles)(
             </Grid>
             <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
         </Card>);
-