From cf3e011ea284bd0bf616e7f0facac0bb629cfdee Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Fri, 21 Jul 2023 16:12:53 +0200
Subject: [PATCH] SSDM-13579: Added two upload buttons in a popup.
---
.../database/data-browser/DataBrowser.jsx | 3 +-
.../database/data-browser/Toolbar.jsx | 78 +++++++++++++++++--
2 files changed, 73 insertions(+), 8 deletions(-)
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 0480d50fe64..1b3c736405f 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 3f91c29e551..b01b934b5fa 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>
)
--
GitLab