[ARVADOS-WORKBENCH2] updated: 1.4.1-374-g9a637098
Git user
git at public.arvados.org
Tue Jun 30 20:21:53 UTC 2020
Summary of changes:
.../collection-panel-files.tsx | 38 +++++++++---------
src/components/file-tree/file-tree.tsx | 3 +-
src/components/tree/virtual-tree.tsx | 11 ++----
.../collection-files-item-action-set.ts | 19 ++++-----
src/views/collection-panel/collection-panel.tsx | 46 ++++++++++++++++++----
5 files changed, 72 insertions(+), 45 deletions(-)
via 9a63709896ad2b3beaed1d5e5b959351dc4d2701 (commit)
via 44c5f86e438c3651904a1d5c9ccf6cd4089f5f86 (commit)
via 9ab0347489bd312c986c3ff2f9489a83545f213f (commit)
from 159c84a15b7739c02dc4bc0d9626b515e8426b92 (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 9a63709896ad2b3beaed1d5e5b959351dc4d2701
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Tue Jun 30 17:19:01 2020 -0300
15610: Replaces the 'loading files...' string with a circular spinner.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index c8875f70..c7db48c4 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -6,7 +6,7 @@ import * as React from 'react';
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 { IconButton, Grid, Typography, StyleRulesCallback, withStyles, WithStyles, CardHeader, Card, Button, Tooltip, CircularProgress } from '@material-ui/core';
import { CustomizeTableIcon } from '~/components/icon/icon';
import { DownloadIcon } from '~/components/icon/icon';
@@ -99,7 +99,7 @@ export const CollectionPanelFiles =
</Typography>
</Grid>
{ isLoading
- ? <div className={classes.centeredLabel}>(loading files...)</div>
+ ? <div className={classes.centeredLabel}><CircularProgress /></div>
: <div style={{height: 'calc(100% - 60px)'}}><FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /></div> }
</>
}
commit 44c5f86e438c3651904a1d5c9ccf6cd4089f5f86
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Tue Jun 30 17:11:45 2020 -0300
15610: Temporarily disables file renaming menu item, until it's fixed.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
index 4c6874c6..2ded3736 100644
--- a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
@@ -3,9 +3,9 @@
// SPDX-License-Identifier: AGPL-3.0
import { ContextMenuActionSet } from "../context-menu-action-set";
-import { RenameIcon, RemoveIcon } from "~/components/icon/icon";
+import { RemoveIcon } from "~/components/icon/icon";
import { DownloadCollectionFileAction } from "../actions/download-collection-file-action";
-import { openFileRemoveDialog, openRenameFileDialog } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
+import { openFileRemoveDialog } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
import { CollectionFileViewerAction } from '~/views-components/context-menu/actions/collection-file-viewer-action';
@@ -21,13 +21,14 @@ export const readOnlyCollectionFilesItemActionSet: ContextMenuActionSet = [[
]];
export const collectionFilesItemActionSet: ContextMenuActionSet = readOnlyCollectionFilesItemActionSet.concat([[
- {
- name: "Rename",
- icon: RenameIcon,
- execute: (dispatch, resource) => {
- dispatch<any>(openRenameFileDialog({ name: resource.name, id: resource.uuid }));
- }
- },
+ // FIXME: This isn't working. Maybe something related to WebDAV?
+ // {
+ // name: "Rename",
+ // icon: RenameIcon,
+ // execute: (dispatch, resource) => {
+ // dispatch<any>(openRenameFileDialog({ name: resource.name, id: resource.uuid }));
+ // }
+ // },
{
name: "Remove",
icon: RemoveIcon,
commit 9ab0347489bd312c986c3ff2f9489a83545f213f
Author: Lucas Di Pentima <lucas at di-pentima.com.ar>
Date: Tue Jun 30 16:29:43 2020 -0300
15610: Fixes layout issues with the collection panel file listing.
* VirtualTree now just occupies all available space.
* VirtualTree's root container expands so that it occupies the remaining
height of the browser window.
* Reduced vertical padding on many places to show more information on screen.
* Moved file listing 'hamburger' button next to the 'upload button' to save
vertical space.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas at di-pentima.com.ar>
diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 4d7e9384..c8875f70 100644
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -29,7 +29,8 @@ type CssRules = 'root' | 'cardSubheader' | 'nameHeader' | 'fileSizeHeader' | 'up
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
- paddingBottom: theme.spacing.unit
+ paddingBottom: theme.spacing.unit,
+ height: '100%'
},
cardSubheader: {
paddingTop: 0,
@@ -61,9 +62,10 @@ export const CollectionPanelFiles =
<Card data-cy='collection-files-panel' className={classes.root}>
<CardHeader
title="Files"
+ className={classes.cardSubheader}
classes={{ action: classes.button }}
- action={
- isWritable &&
+ action={<>
+ {isWritable &&
<Button
data-cy='upload-button'
onClick={onUploadDataClick}
@@ -72,24 +74,22 @@ export const CollectionPanelFiles =
size='small'>
<DownloadIcon className={classes.uploadIcon} />
Upload data
- </Button>
- } />
+ </Button>}
+ {!tooManyFiles &&
+ <Tooltip title="More options" disableFocusListener>
+ <IconButton
+ data-cy='collection-files-panel-options-btn'
+ onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
+ <CustomizeTableIcon />
+ </IconButton>
+ </Tooltip>}
+ </>
+ } />
{ tooManyFiles
? <div className={classes.centeredLabel}>
File listing may take some time, please click to browse: <Button onClick={loadFilesFunc}><DownloadIcon/>Show files</Button>
</div>
: <>
- <CardHeader
- className={classes.cardSubheader}
- action={
- <Tooltip title="More options" disableFocusListener>
- <IconButton
- data-cy='collection-files-panel-options-btn'
- onClick={(ev) => onOptionsMenuOpen(ev, isWritable)}>
- <CustomizeTableIcon />
- </IconButton>
- </Tooltip>
- } />
<Grid container justify="space-between">
<Typography variant="caption" className={classes.nameHeader}>
Name
@@ -100,7 +100,7 @@ export const CollectionPanelFiles =
</Grid>
{ isLoading
? <div className={classes.centeredLabel}>(loading files...)</div>
- : <FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /> }
+ : <div style={{height: 'calc(100% - 60px)'}}><FileTree onMenuOpen={(ev, item) => onItemMenuOpen(ev, item, isWritable)} {...treeProps} /></div> }
</>
}
</Card>);
diff --git a/src/components/file-tree/file-tree.tsx b/src/components/file-tree/file-tree.tsx
index d4b47be9..b5d98c08 100644
--- a/src/components/file-tree/file-tree.tsx
+++ b/src/components/file-tree/file-tree.tsx
@@ -4,7 +4,7 @@
import * as React from "react";
import { TreeItem, TreeItemStatus } from "../tree/tree";
-import { VirtualTree } from "../tree/virtual-tree";
+import { VirtualTree as Tree } from "../tree/virtual-tree";
import { FileTreeData } from "./file-tree-data";
import { FileTreeItem } from "./file-tree-item";
@@ -17,7 +17,6 @@ export interface FileTreeProps {
currentItemUuid?: string;
}
-const Tree = VirtualTree(20);
export class FileTree extends React.Component<FileTreeProps> {
render() {
return <Tree
diff --git a/src/components/tree/virtual-tree.tsx b/src/components/tree/virtual-tree.tsx
index 9330fbe5..59fe34b1 100644
--- a/src/components/tree/virtual-tree.tsx
+++ b/src/components/tree/virtual-tree.tsx
@@ -13,7 +13,6 @@ import { ArvadosTheme } from '~/common/custom-theme';
import { TreeItem, TreeProps, TreeItemStatus } from './tree';
import { ListItem, Radio, Checkbox, CircularProgress, ListItemIcon } from '@material-ui/core';
import { SidePanelRightArrowIcon } from '../icon/icon';
-import { min } from 'lodash';
type CssRules = 'list'
| 'listItem'
@@ -179,20 +178,16 @@ export const VirtualList = <T, _>(height: number, width: number, items: VirtualT
{Row(items, render, treeProps)}
</FixedSizeList>;
-export const VirtualTree = (maxElements: number) => withStyles(styles)(
+export const VirtualTree = withStyles(styles)(
class Component<T> extends React.Component<TreeProps<T> & WithStyles<CssRules>, {}> {
render(): ReactElement<any> {
const { items, render } = this.props;
- // Virtual list viewport's maximum height
- const itemsQty = items && items.length || 0;
- const viewportHeight = min([itemsQty, maxElements])! * itemSize;
-
- return <div style={{height: viewportHeight}}><AutoSizer>
+ return <AutoSizer>
{({ height, width }) => {
return VirtualList(height, width, items || [], render, this.props);
}}
- </AutoSizer></div>;
+ </AutoSizer>;
}
}
);
diff --git a/src/views/collection-panel/collection-panel.tsx b/src/views/collection-panel/collection-panel.tsx
index 1cfa48de..ea69b0df 100644
--- a/src/views/collection-panel/collection-panel.tsx
+++ b/src/views/collection-panel/collection-panel.tsx
@@ -31,11 +31,42 @@ import { getUserUuid } from '~/common/getuser';
import { getProgressIndicator } from '~/store/progress-indicator/progress-indicator-reducer';
import { COLLECTION_PANEL_LOAD_FILES, loadCollectionFiles, COLLECTION_PANEL_LOAD_FILES_THRESHOLD } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
-type CssRules = 'card' | 'iconHeader' | 'tag' | 'label' | 'value' | 'link' | 'centeredLabel' | 'readOnlyIcon';
+type CssRules = 'root'
+ | 'card'
+ | 'cardHeader'
+ | 'filesCard'
+ | 'cardContent'
+ | 'iconHeader'
+ | 'tag'
+ | 'label'
+ | 'value'
+ | 'link'
+ | 'centeredLabel'
+ | 'readOnlyIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ root: {
+ display: 'flex',
+ flexFlow: 'column',
+ height: 'calc(100vh - 130px)', // (100% viewport height) - (top bar + breadcrumbs)
+ },
card: {
- marginBottom: theme.spacing.unit * 2
+ marginBottom: theme.spacing.unit * 2,
+ },
+ cardHeader: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: 0,
+ },
+ filesCard: {
+ marginBottom: theme.spacing.unit * 2,
+ flex: 1,
+ },
+ cardContent: {
+ paddingTop: 0,
+ paddingBottom: theme.spacing.unit,
+ '&:last-child': {
+ paddingBottom: theme.spacing.unit,
+ }
},
iconHeader: {
fontSize: '1.875rem',
@@ -101,9 +132,10 @@ export const CollectionPanel = withStyles(styles)(
render() {
const { classes, item, dispatch, isWritable, isLoadingFiles, tooManyFiles } = this.props;
return item
- ? <>
+ ? <div className={classes.root}>
<Card data-cy='collection-info-panel' className={classes.card}>
<CardHeader
+ className={classes.cardHeader}
avatar={
<IconButton onClick={this.openCollectionDetails}>
<CollectionIcon className={classes.iconHeader} />
@@ -133,7 +165,7 @@ export const CollectionPanel = withStyles(styles)(
titleTypographyProps={this.titleProps}
subheader={item.description}
subheaderTypographyProps={this.titleProps} />
- <CardContent>
+ <CardContent className={classes.cardContent}>
<Grid container direction="column">
<Grid item xs={10}>
<DetailsAttribute classLabel={classes.label} classValue={classes.value}
@@ -160,7 +192,7 @@ export const CollectionPanel = withStyles(styles)(
<Card data-cy='collection-properties-panel' className={classes.card}>
<CardHeader title="Properties" />
- <CardContent>
+ <CardContent className={classes.cardContent}>
<Grid container direction="column">
{isWritable && <Grid item xs={12}>
<CollectionTagForm />
@@ -189,7 +221,7 @@ export const CollectionPanel = withStyles(styles)(
</Grid>
</CardContent>
</Card>
- <div className={classes.card}>
+ <div className={classes.filesCard}>
<CollectionPanelFiles
isWritable={isWritable}
isLoading={isLoadingFiles}
@@ -200,7 +232,7 @@ export const CollectionPanel = withStyles(styles)(
}
} />
</div>
- </>
+ </div>
: null;
}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list