Merge branch 'master'

[arvados-workbench2.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 df277e33fa505f6b323d17a6de744c8e1b7ad52a..17bbe85e0d7f1748ee23ec692d7d501e13e7cafc 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,58 +6,63 @@ 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 { CollectionPanelFilesState } from '../../store/collection-panel/collection-panel-files/collection-panel-files-state';
+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>>;
-    onItemContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
-    onCommonContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
+    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;
 }
 
-export const CollectionPanelFiles = ({ onItemContextMenu, onCommonContextMenu, ...treeProps }: CollectionPanelFilesProps) =>
-    <div>
-        <FileTree onContextMenu={onItemContextMenu} {...treeProps} />
-    </div>;
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader';
 
-export const collectionPanelItems: Array<TreeItem<FileTreeData>> = [{
-    active: false,
-    data: {
-        name: "Directory 1",
-        type: "directory"
+const styles: StyleRulesCallback<CssRules> = theme => ({
+    root: {
+        paddingBottom: theme.spacing.unit
     },
-    id: "Directory 1",
-    open: true,
-    status: TreeItemStatus.LOADED,
-    items: [{
-        active: false,
-        data: {
-            name: "Directory 1.1",
-            type: "directory"
-        },
-        id: "Directory 1.1",
-        open: false,
-        status: TreeItemStatus.LOADED,
-        items: []
-    }, {
-        active: false,
-        data: {
-            name: "File 1.1",
-            type: "file"
-        },
-        id: "File 1.1",
-        open: false,
-        status: TreeItemStatus.LOADED,
-        items: []
-    }]
-}, {
-    active: false,
-    data: {
-        name: "Directory 2",
-        type: "directory"
+    cardSubheader: {
+        paddingTop: 0,
+        paddingBottom: 0
     },
-    id: "Directory 2",
-    open: false,
-    status: TreeItemStatus.LOADED
-}]; 
+    nameHeader: {
+        marginLeft: '75px'
+    },
+    fileSizeHeader: {
+        marginRight: '65px'
+    }
+});
+
+export const CollectionPanelFiles = withStyles(styles)(
+    ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
+        <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 />
+                    </IconButton>
+                } />
+            <Grid container justify="space-between">
+                <Typography variant="caption" className={classes.nameHeader}>
+                    Name
+                    </Typography>
+                <Typography variant="caption" className={classes.fileSizeHeader}>
+                    File size
+                    </Typography>
+            </Grid>
+            <FileTree onMenuOpen={onItemMenuOpen} {...treeProps} />
+        </Card>);