From 2c20b775ba0e8a616415fc0fb9ca9d1606cea049 Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Mon, 24 Jul 2023 19:18:00 +0200
Subject: [PATCH] SSDM-13579: Split the toolbar component to left and right.
---
.../database/data-browser/LeftToolbar.jsx | 56 +++++
.../database/data-browser/RightToolbar.jsx | 205 +++++++++++++++++
.../database/data-browser/Toolbar.jsx | 210 ++----------------
3 files changed, 278 insertions(+), 193 deletions(-)
create mode 100644 ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
create mode 100644 ui-admin/src/js/components/database/data-browser/RightToolbar.jsx
diff --git a/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx b/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
new file mode 100644
index 00000000000..4124fb40506
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/LeftToolbar.jsx
@@ -0,0 +1,56 @@
+/*
+ * Copyright ETH 2023 Zürich, Scientific IT Services
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React from 'react'
+import Button from '@material-ui/core/Button'
+import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined'
+import messages from '@src/js/common/messages.js'
+import { withStyles } from '@material-ui/core/styles'
+
+const color = 'secondary'
+
+const styles = theme => ({
+ buttons: {
+ flex: '1 0 auto',
+ display: 'flex',
+ alignItems: 'center',
+ whiteSpace: 'nowrap'
+ },
+ toggleButton: {}
+})
+
+class LeftToolbar extends React.Component {
+ render() {
+ const { buttonSize, controller, classes } = this.props
+ return (
+ <div className={classes.buttons}>
+ <Button
+ classes={{ root: classes.button }}
+ color={color}
+ size={buttonSize}
+ variant='outlined'
+ startIcon={<CreateNewFolderIcon />}
+ onClick={controller.handleNewFolderClick}
+ >
+ {messages.get(messages.NEW_FOLDER)}
+ </Button>
+ </div>
+ )
+ }
+}
+
+export default withStyles(styles)(LeftToolbar)
diff --git a/ui-admin/src/js/components/database/data-browser/RightToolbar.jsx b/ui-admin/src/js/components/database/data-browser/RightToolbar.jsx
new file mode 100644
index 00000000000..900695c17f7
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/RightToolbar.jsx
@@ -0,0 +1,205 @@
+/*
+ * Copyright ETH 2023 Zürich, Scientific IT Services
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import React from 'react'
+import { ToggleButton } from '@material-ui/lab'
+import messages from '@src/js/common/messages.js'
+import InfoIcon from '@material-ui/icons/InfoOutlined'
+import IconButton from '@material-ui/core/IconButton'
+import SearchIcon from '@material-ui/icons/Search'
+import ViewComfyIcon from '@material-ui/icons/ViewComfy'
+import ViewListIcon from '@material-ui/icons/ViewList'
+import SettingsIcon from '@material-ui/icons/Settings'
+import Button from '@material-ui/core/Button'
+import PublishIcon from '@material-ui/icons/Publish'
+import Popover from '@material-ui/core/Popover'
+import Container from '@src/js/components/common/form/Container.jsx'
+import { withStyles } from '@material-ui/core/styles'
+import autoBind from 'auto-bind'
+import UploadButton from '@src/js/components/database/data-browser/UploadButton.jsx'
+import FileIcon from '@material-ui/icons/InsertDriveFileOutlined'
+import FolderIcon from '@material-ui/icons/FolderOpen'
+
+const color = 'secondary'
+const iconButtonSize = 'medium'
+
+const styles = theme => ({
+ buttons: {
+ flex: '0 0 auto',
+ display: 'flex',
+ alignItems: 'center',
+ whiteSpace: 'nowrap'
+ },
+ uploadButtonsContainer: {
+ display: 'flex',
+ flexDirection: 'column',
+ '&>button': {
+ marginBottom: theme.spacing(1)
+ },
+ '&>button:nth-last-child(1)': {
+ marginBottom: 0
+ }
+ },
+ toggleButton: {
+ border: 'none',
+ borderRadius: '50%',
+ display: 'inline-flex',
+ padding: theme.spacing(1.5) + 'px',
+ '& *': {
+ color: theme.palette[color].main
+ }
+ }
+})
+
+class RightToolbar extends React.Component {
+ constructor(props, context) {
+ super(props, context)
+ autoBind(this)
+
+ const { controller } = this.props
+
+ this.state = {
+ uploadButtonsPopup: null
+ }
+ }
+
+ handleOpen(event) {
+ this.setState({
+ uploadButtonsPopup: event.currentTarget
+ })
+ }
+
+ handleClose() {
+ this.setState({
+ uploadButtonsPopup: null
+ })
+ }
+
+ renderUploadButtons() {
+ const { classes, buttonSize } = this.props
+ return (
+ <div className={classes.uploadButtonsContainer}>
+ <UploadButton
+ classes={{ root: classes.button }}
+ color={color}
+ size={buttonSize}
+ variant='contained'
+ startIcon={<FileIcon />}
+ onClick={this.handleUploadFiles}
+ >
+ Upload file
+ </UploadButton>
+ <UploadButton
+ classes={{ root: classes.button }}
+ color={color}
+ size={buttonSize}
+ variant='contained'
+ startIcon={<FolderIcon />}
+ onClick={this.handleUploadFolders}
+ >
+ Upload folder
+ </UploadButton>
+ </div>
+ )
+ }
+
+ render() {
+ const { classes, onViewTypeChange, buttonSize } = this.props
+ const { uploadButtonsPopup } = this.state
+ return (
+ <div className={[classes.buttons, classes.rightSection].join(' ')}>
+ <ToggleButton
+ classes={{ root: classes.toggleButton }}
+ color={color}
+ size={buttonSize}
+ selected={this.props.selected}
+ onChange={this.props.onChange}
+ value={messages.get(messages.INFO)}
+ aria-label={messages.get(messages.INFO)}
+ >
+ <InfoIcon />
+ </ToggleButton>
+ <IconButton
+ classes={{ root: classes.button }}
+ color={color}
+ size={iconButtonSize}
+ variant='outlined'
+ >
+ <SearchIcon />
+ </IconButton>
+ {this.props.viewType === 'list' && (
+ <IconButton
+ classes={{ root: classes.button }}
+ color={color}
+ size={iconButtonSize}
+ variant='outlined'
+ onClick={() => onViewTypeChange('grid')}
+ >
+ <ViewComfyIcon />
+ </IconButton>
+ )}
+ {this.props.viewType === 'grid' && (
+ <IconButton
+ classes={{ root: classes.button }}
+ color={color}
+ size={iconButtonSize}
+ variant='outlined'
+ onClick={() => onViewTypeChange('list')}
+ >
+ <ViewListIcon />
+ </IconButton>
+ )}
+ <IconButton
+ classes={{ root: classes.button }}
+ color={color}
+ size={iconButtonSize}
+ variant='outlined'
+ >
+ <SettingsIcon />
+ </IconButton>
+ <Button
+ classes={{ root: classes.button }}
+ color={color}
+ size={buttonSize}
+ variant='outlined'
+ startIcon={<PublishIcon />}
+ onClick={this.handleOpen}
+ >
+ {messages.get(messages.UPLOAD)}
+ </Button>
+ <Popover
+ id={'toolbar.columns-popup-id'}
+ open={Boolean(uploadButtonsPopup)}
+ anchorEl={uploadButtonsPopup}
+ onClose={this.handleClose}
+ anchorOrigin={{
+ vertical: 'bottom',
+ horizontal: 'left'
+ }}
+ transformOrigin={{
+ vertical: 'top',
+ horizontal: 'left'
+ }}
+ >
+ <Container square={true}>{this.renderUploadButtons()}</Container>
+ </Popover>
+ </div>
+ )
+ }
+}
+
+export default withStyles(styles)(RightToolbar)
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 a47f350d550..bf038fcaab6 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -17,224 +17,48 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
-import messages from '@src/js/common/messages.js'
-import FileIcon from '@material-ui/icons/InsertDriveFileOutlined'
-import FolderIcon from '@material-ui/icons/FolderOpen'
-import ViewComfyIcon from '@material-ui/icons/ViewComfy'
-import ViewListIcon from '@material-ui/icons/ViewList'
-import PublishIcon from '@material-ui/icons/Publish'
-import SettingsIcon from '@material-ui/icons/Settings'
-import SearchIcon from '@material-ui/icons/Search'
-import InfoIcon from '@material-ui/icons/InfoOutlined'
-import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined'
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";
-import UploadButton from "@src/js/components/database/data-browser/UploadButton.jsx";
-import { Folder, InsertDriveFile } from "@material-ui/icons";
+import LeftToolbar from '@src/js/components/database/data-browser/LeftToolbar.jsx'
+import RightToolbar from '@src/js/components/database/data-browser/RightToolbar.jsx'
-const color = 'secondary'
const buttonSize = 'small'
-const iconButtonSize = 'medium'
-const styles = (theme) => ({
+const styles = theme => ({
toolbar: {
flex: '0 0 auto',
display: 'flex',
whiteSpace: 'nowrap',
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1)
- },
- buttons: {
- flex: '0 0 auto',
- display: 'flex',
- alignItems: 'center',
- whiteSpace: 'nowrap',
- },
- leftSection: {
- flexGrow: 1,
- },
- rightSection: {
- flexShrink: 0
- },
- toggleButton: {
- border: 'none',
- borderRadius: '50%',
- display: 'inline-flex',
- padding: theme.spacing(1.5) + 'px',
- '& *': {
- color: theme.palette[color].main
- }
- },
- uploadButtonsContainer: {
- display: 'flex',
- flexDirection: 'column',
- '&>button': {
- marginBottom: theme.spacing(1)
- },
- '&>button:nth-last-child(1)': {
- marginBottom: 0
- }
- },
+ }
})
class Toolbar extends React.Component {
-
constructor(props, context) {
super(props, context)
autoBind(this)
this.controller = this.props.controller
- this.state = {
- el: null
- }
- }
-
- handleOpen(event) {
- this.setState({
- el: event.currentTarget
- })
- }
-
- handleClose() {
- this.setState({
- el: null
- })
}
- handleUploadFiles() {
+ handleUploadFiles() {}
- }
-
- handleUploadFolders() {
-
- }
-
- renderUploadButtons() {
- const { classes } = this.props
- return (
- <div className={classes.uploadButtonsContainer}>
- <UploadButton
- classes={{ root: classes.button }}
- color={color}
- size={buttonSize}
- variant='contained'
- startIcon={<FileIcon />}
- onClick={this.handleUploadFiles}
- >
- Upload file
- </UploadButton>
- <UploadButton
- classes={{ root: classes.button }}
- color={color}
- size={buttonSize}
- variant='contained'
- startIcon={<FolderIcon />}
- onClick={this.handleUploadFolders}
- >
- Upload folder
- </UploadButton>
- </div>
- )
- }
+ handleUploadFolders() {}
render() {
- const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } = this.props
- const { el } = this.state
+ const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } =
+ this.props
return (
<div className={classes.toolbar}>
- <div className={[classes.buttons, classes.leftSection].join(' ')}>
- <Button
- classes={{ root: classes.button }}
- color={color}
- size={buttonSize}
- variant='outlined'
- startIcon={<CreateNewFolderIcon />}
- onClick={this.controller.handleNewFolderClick}
- >
- {messages.get(messages.NEW_FOLDER)}
- </Button>
- </div>
- <div className={[classes.buttons, classes.rightSection].join(' ')}>
- <ToggleButton
- classes={{ root: classes.toggleButton }}
- color={color}
- size={buttonSize}
- selected={showInfo}
- onChange={onShowInfoChange}
- value={messages.get(messages.INFO)}
- aria-label={messages.get(messages.INFO)}
- >
- <InfoIcon />
- </ToggleButton>
- <IconButton
- classes={{ root: classes.button }}
- color={color}
- size={iconButtonSize}
- variant='outlined'
- >
- <SearchIcon />
- </IconButton>
- {viewType === 'list' && (
- <IconButton
- classes={{ root: classes.button }}
- color={color}
- size={iconButtonSize}
- variant='outlined'
- onClick={() => onViewTypeChange('grid')}
- >
- <ViewComfyIcon />
- </IconButton>
- )}
- {viewType === 'grid' && (
- <IconButton
- classes={{ root: classes.button }}
- color={color}
- size={iconButtonSize}
- variant='outlined'
- onClick={() => onViewTypeChange('list')}
- >
- <ViewListIcon />
- </IconButton>
- )}
- <IconButton
- classes={{ root: classes.button }}
- color={color}
- size={iconButtonSize}
- variant='outlined'
- >
- <SettingsIcon />
- </IconButton>
- <Button
- classes={{ root: classes.button }}
- color={color}
- size={buttonSize}
- variant='outlined'
- startIcon={<PublishIcon />}
- 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>
+ <LeftToolbar buttonSize={buttonSize} controller={this.controller} />
+ <RightToolbar
+ buttonSize={buttonSize}
+ selected={showInfo}
+ onChange={onShowInfoChange}
+ viewType={viewType}
+ onViewTypeChange={onViewTypeChange}
+ controller={this.controller}
+ />
</div>
)
}
--
GitLab