X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/91c6da4c4f84498a8473a0245a70c024ca9910d7..dd7f09cfb3bee05df6208fd6b1621a9fa7c8308f:/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 af2c19a0..0a443907 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -3,88 +3,81 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 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 } from '@material-ui/core';
-import { CustomizeTableIcon } from '../icon/icon';
+import { TreeItem, TreeItemStatus } from '~/components/tree/tree';
+import { FileTreeData } from '~/components/file-tree/file-tree-data';
+import { FileTree } from '~/components/file-tree/file-tree';
+import { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip } from '@material-ui/core';
+import { CustomizeTableIcon } from '~/components/icon/icon';
+import { DownloadIcon } from '~/components/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;
+    onFileClick: (id: string) => void;
+    currentItemUuid?: string;
 }
 
-type CssRules = 'nameHeader' | 'fileSizeHeader';
+type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'uploadIcon' | 'button';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
+    root: {
+        paddingBottom: theme.spacing.unit
+    },
+    cardSubheader: {
+        paddingTop: 0,
+        paddingBottom: 0
+    },
     nameHeader: {
         marginLeft: '75px'
     },
     fileSizeHeader: {
-        marginRight: '50px'
+        marginRight: '65px'
+    },
+    uploadIcon: {
+        transform: 'rotate(180deg)'
+    },
+    button: {
+        marginRight: -theme.spacing.unit,
+        marginTop: '0px'
     }
 });
 
-export const CollectionPanelFiles = withStyles(styles)(
-    ({ onItemMenuOpen, onOptionsMenuOpen, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
-        <div>
-            <Grid container justify="flex-end">
-                <IconButton onClick={onOptionsMenuOpen}>
-                    <CustomizeTableIcon />
-                </IconButton>
-            </Grid>
-            <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} />
-        </div>);
-
-export const collectionPanelItems: Array<TreeItem<FileTreeData>> = [{
-    active: false,
-    data: {
-        name: "Directory 1",
-        type: "directory"
-    },
-    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",
-            size: 20033
-        },
-        id: "File 1.1",
-        open: false,
-        status: TreeItemStatus.LOADED,
-        items: []
-    }]
-}, {
-    active: false,
-    data: {
-        name: "Directory 2",
-        type: "directory"
-    },
-    id: "Directory 2",
-    open: false,
-    status: TreeItemStatus.LOADED
-}]; 
+export const CollectionPanelFiles =
+    withStyles(styles)(
+        ({ onItemMenuOpen, onOptionsMenuOpen, onUploadDataClick, classes, ...treeProps }: CollectionPanelFilesProps & WithStyles<CssRules>) =>
+            <Card className={classes.root}>
+                <CardHeader
+                    title="Files"
+                    classes={{ action: classes.button }}
+                    action={
+                        <Button onClick={onUploadDataClick}
+                            variant='contained'
+                            color='primary'
+                            size='small'>
+                            <DownloadIcon className={classes.uploadIcon} />
+                            Upload data
+                    </Button>
+                    } />
+                <CardHeader
+                    className={classes.cardSubheader}
+                    action={
+                        <Tooltip title="More options" disableFocusListener>
+                            <IconButton onClick={onOptionsMenuOpen}>
+                                <CustomizeTableIcon />
+                            </IconButton>
+                        </Tooltip>
+                    } />
+                <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>);