diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx index 0480d50fe647c294bd2f5f215289b5ac6a149ca5..1b3c736405f9a01f05c12a5d13f23fe61af08324 100644 --- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx +++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx @@ -146,8 +146,7 @@ class DataBrowser extends React.Component { <div className={[classes.flexContainer, classes.boundary, classes.content].join(' ')}> {viewType === 'list' && ( <Grid - // id={id} - // settingsId={id} + id='data-browser-grid' filterModes={[GridFilterOptions.COLUMN_FILTERS]} header='Files' classes={{ container: classes.grid }} diff --git a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx index 3f91c29e551cb803f13595efac4f9b6c025d1c09..b01b934b5facd093a301950e19629ba151f57041 100644 --- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx +++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx @@ -29,8 +29,12 @@ import autoBind from 'auto-bind' import { ToggleButton } from '@material-ui/lab' import Button from '@material-ui/core/Button' import IconButton from '@material-ui/core/IconButton' +import Container from "@src/js/components/common/form/Container.jsx"; +import Popover from "@material-ui/core/Popover"; const color = 'secondary' +const buttonSize = 'small' +const iconButtonSize = 'medium' const styles = (theme) => ({ toolbar: { @@ -60,6 +64,13 @@ const styles = (theme) => ({ '& *': { color: theme.palette[color].main } + }, + uploadButtonsContainer: { + display: 'flex', + flexDirection: 'column' + }, + marginBottom: { + marginBottom: theme.spacing(1) } }) @@ -70,13 +81,52 @@ class Toolbar extends React.Component { autoBind(this) this.controller = this.props.controller + this.state = { + el: null + } + } + + handleOpen(event) { + this.setState({ + el: event.currentTarget + }) + } + + handleClose() { + this.setState({ + el: null + }) + } + + renderUploadButtons() { + const { classes } = this.props + return ( + <div className={classes.uploadButtonsContainer}> + <Button + classes={{ root: [classes.button, classes.marginBottom].join(' ') }} + color={color} + size={buttonSize} + variant='contained' + // onClick={this.controller.handleNewFolderClick} + > + File upload + </Button> + <Button + classes={{ root: classes.button }} + color={color} + size={buttonSize} + variant='contained' + // onClick={this.controller.handleNewFolderClick} + > + Folder upload + </Button> + </div> + ) } render() { - const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } = - this.props - const buttonSize = 'small' - const iconButtonSize = 'medium' + const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } = this.props + const { el } = this.state return ( <div className={classes.toolbar}> <div className={[classes.buttons, classes.leftSection].join(' ')}> @@ -145,12 +195,28 @@ class Toolbar extends React.Component { classes={{ root: classes.button }} color={color} size={buttonSize} - variant='contained' + variant='outlined' startIcon={<PublishIcon />} - onClick={this.controller.handleUploadClick} + onClick={this.handleOpen} > {messages.get(messages.UPLOAD)} </Button> + <Popover + id={'toolbar.columns-popup-id'} + open={Boolean(el)} + anchorEl={el} + onClose={this.handleClose} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left' + }} + transformOrigin={{ + vertical: 'top', + horizontal: 'left' + }} + > + <Container square={true}>{this.renderUploadButtons()}</Container> + </Popover> </div> </div> )