From a1519cc7f51e499fe3a55d2346f4193622404b7a Mon Sep 17 00:00:00 2001
From: vkovtun <vkovtun@ethz.ch>
Date: Wed, 19 Jul 2023 17:40:53 +0200
Subject: [PATCH] SSDM-13579: New toolbar buttons layout and style.
---
.../database/data-browser/DataBrowser.jsx | 3 +-
.../database/data-browser/Toolbar.jsx | 85 +++++++++++++------
2 files changed, 62 insertions(+), 26 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 72c50635e51..c66995b91b9 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -7,7 +7,6 @@ import DescriptionIcon from '@material-ui/icons/DescriptionOutlined'
import AudioIcon from '@material-ui/icons/MusicNoteOutlined'
import VideoIcon from '@material-ui/icons/LocalMovies'
import ImageIcon from '@material-ui/icons/Image'
-import Paper from '@material-ui/core/Paper'
import Grid from '@src/js/components/common/grid/Grid.jsx'
import GridFilterOptions from '@src/js/components/common/grid/GridFilterOptions.js'
import AppController from '@src/js/components/AppController.js'
@@ -20,7 +19,7 @@ const styles = theme => ({
columnFlexContainer: {
flexDirection: 'column',
display: 'flex',
- height: '100vh'
+ height: 'calc(100vh - ' + theme.spacing(10) + 'px)'
},
boundary: {
padding: theme.spacing(1),
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 f34118393bb..cada7bd16e2 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -18,7 +18,6 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import messages from '@src/js/common/messages.js'
-import Button from '@src/js/components/common/form/Button.jsx'
import ViewComfyIcon from '@material-ui/icons/ViewComfy'
import ViewListIcon from '@material-ui/icons/ViewList'
import PublishIcon from '@material-ui/icons/Publish'
@@ -28,6 +27,9 @@ 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'
+
+const color = 'secondary'
const styles = (theme) => ({
buttons: {
@@ -38,6 +40,13 @@ const styles = (theme) => ({
'& button': {
marginRight: theme.spacing(1)
}
+ },
+ toggleButton: {
+ marginRight: theme.spacing(1),
+ border: '1px solid ' + theme.palette[color].main,
+ '& *': {
+ color: theme.palette[color].main
+ }
}
})
@@ -51,50 +60,78 @@ class Toolbar extends React.Component {
render() {
const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } =
this.props
+ const size = 'small'
return (
<div className={classes.buttons}>
+ <Button
+ classes={{ root: classes.button }}
+ color={color}
+ size={size}
+ variant='outlined'
+ startIcon={<CreateNewFolderIcon />}
+ >
+ {messages.get(messages.NEW_FOLDER)}
+ </Button>
<ToggleButton
- styles={{ root: classes.button }}
+ classes={{ root: classes.toggleButton }}
+ color={color}
+ size={size}
selected={showInfo}
onChange={onShowInfoChange}
value={messages.get(messages.INFO)}
aria-label={messages.get(messages.INFO)}
- size='small'
>
<InfoIcon />
</ToggleButton>
<Button
- styles={{ root: classes.button }}
- label={messages.get(messages.NEW_FOLDER)}
- startIcon={<CreateNewFolderIcon />}
- />
- <Button
- styles={{ root: classes.button }}
- label={messages.get(messages.SEARCH)}
- startIcon={<SearchIcon />}
- />
+ classes={{ root: classes.button }}
+ color={color}
+ size={size}
+ variant='outlined'
+ >
+ <SearchIcon />
+ </Button>
{viewType === 'list' && (
<Button
- styles={{ root: classes.button }}
- label={<ViewComfyIcon />}
- onClick={() => onViewTypeChange('grid')}
- />
+ classes={{ root: classes.button }}
+ color={color}
+ size={size}
+ variant='outlined'
+ onClick={() => onViewTypeChange('grid')}
+ >
+ <ViewComfyIcon />
+ </Button>
)}
{viewType === 'grid' && (
<Button
- styles={{ root: classes.button }}
- label={<ViewListIcon />}
+ classes={{ root: classes.button }}
+ color={color}
+ size={size}
+ variant='outlined'
onClick={() => onViewTypeChange('list')}
- />
+ >
+ <ViewListIcon />
+ </Button>
)}
<Button
- styles={{ root: classes.button }}
- label={<SettingsIcon />} />
+ classes={{ root: classes.button }}
+ color={color}
+ size={size}
+ variant='outlined'
+ onClick={() => onViewTypeChange('list')}
+ >
+ <SettingsIcon />
+ </Button>
<Button
- styles={{ root: classes.button }}
- label={messages.get(messages.UPLOAD)}
+ classes={{ root: classes.button }}
+ color={color}
+ size={size}
+ variant='contained'
startIcon={<PublishIcon />}
- />
+ onClick={() => onViewTypeChange('list')}
+ >
+ {messages.get(messages.UPLOAD)}
+ </Button>
</div>
)
}
--
GitLab