* 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@di-pentima.com.ar>
const styles: StyleRulesCallback<CssRules> = theme => ({
root: {
- paddingBottom: theme.spacing.unit
+ paddingBottom: theme.spacing.unit,
+ height: '100%'
},
cardSubheader: {
paddingTop: 0,
<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}
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
</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>);
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";
currentItemUuid?: string;
}
-const Tree = VirtualTree(20);
export class FileTree extends React.Component<FileTreeProps> {
render() {
return <Tree
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'
{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>;
}
}
);
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',
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} />
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}
<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 />
</Grid>
</CardContent>
</Card>
- <div className={classes.card}>
+ <div className={classes.filesCard}>
<CollectionPanelFiles
isWritable={isWritable}
isLoading={isLoadingFiles}
}
} />
</div>
- </>
+ </div>
: null;
}