[ARVADOS-WORKBENCH2] updated: 1.1.4-444-g91c6da4

[Git user]

Summary of changes:
 .../collection-panel-files.tsx                     | 43 ++++++++++++++++++----
 src/components/file-tree/file-tree-item.tsx        |  2 +-
 src/components/file-tree/file-tree.tsx             |  4 +-
 src/views/workbench/workbench.tsx                  |  4 +-
 4 files changed, 40 insertions(+), 13 deletions(-)

       via  91c6da4c4f84498a8473a0245a70c024ca9910d7 (commit)
      from  55bb503e1b885a53ca20fc120c862c7af2db33af (commit)

Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.


commit 91c6da4c4f84498a8473a0245a70c024ca9910d7
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date:   Mon Jul 30 12:50:16 2018 +0200

    Add headers and menu button to collection-panel-files
    
    Feature #13855
    
    Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index df277e3..af2c19a 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,20 +6,46 @@ 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 } 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;
+    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 = 'nameHeader' | 'fileSizeHeader';
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+    nameHeader: {
+        marginLeft: '75px'
+    },
+    fileSizeHeader: {
+        marginRight: '50px'
+    }
+});
+
+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,
@@ -44,7 +70,8 @@ export const collectionPanelItems: Array<TreeItem<FileTreeData>> = [{
         active: false,
         data: {
             name: "File 1.1",
-            type: "file"
+            type: "file",
+            size: 20033
         },
         id: "File 1.1",
         open: false,
diff --git a/src/components/file-tree/file-tree-item.tsx b/src/components/file-tree/file-tree-item.tsx
index e65c6cd..71e37f1 100644
--- a/src/components/file-tree/file-tree-item.tsx
+++ b/src/components/file-tree/file-tree-item.tsx
@@ -16,7 +16,7 @@ const fileTreeItemStyle: StyleRulesCallback<CssRules> = theme => ({
     root: {
         display: "flex",
         alignItems: "center",
-        paddingRight: `${theme.spacing.unit}px`
+        paddingRight: `${theme.spacing.unit * 1.5}px`
     },
     spacer: {
         flex: "1"
diff --git a/src/components/file-tree/file-tree.tsx b/src/components/file-tree/file-tree.tsx
index bb70f25..06fc8b7 100644
--- a/src/components/file-tree/file-tree.tsx
+++ b/src/components/file-tree/file-tree.tsx
@@ -9,7 +9,7 @@ import { FileTreeItem } from "./file-tree-item";
 
 export interface FileTreeProps {
     items: Array<TreeItem<FileTreeData>>;
-    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
+    onMenuOpen: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onSelectionToggle: (event: React.MouseEvent<HTMLElement>, item: TreeItem<FileTreeData>) => void;
     onCollapseToggle: (id: string, status: TreeItemStatus) => void;
 }
@@ -29,7 +29,7 @@ export class FileTree extends React.Component<FileTreeProps> {
 
     handleContextMenu = (event: React.MouseEvent<any>, item: TreeItem<FileTreeData>) => {
         event.stopPropagation();
-        this.props.onContextMenu(event, item);
+        this.props.onMenuOpen(event, item);
     }
 
     handleToggle = (id: string, status: TreeItemStatus) => {
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index e932fba..1b6e05d 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -218,8 +218,8 @@ export const Workbench = withStyles(styles)(
                                         items={collectionPanelItems} 
                                         onCollapseToggle={console.log}
                                         onSelectionToggle={console.log}
-                                        onItemContextMenu={console.log}
-                                        onCommonContextMenu={console.log}
+                                        onItemMenuOpen={console.log}
+                                        onOptionsMenuOpen={console.log}
                                         />} />
                                 </Switch>
                             </div>

-----------------------------------------------------------------------


hooks/post-receive
--