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 a4ca4ee27a17e6e724ccfeaf2fb4a28096912f2a..5f702d0fcf5f2330bef83abb56adae2d2b04e986 100644 --- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx +++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx @@ -48,7 +48,7 @@ const styles = theme => ({ }, content: { flex: '1 1 100%', - height: 'calc(100vh - ' + theme.spacing(10) + 'px)', + height: 0, overflowY: 'hidden' } }) 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 b65048fd9e2808871e23e4dee480105ac068abac..f26c5ab8000894e36b168ac3271fe665fb7fcb02 100644 --- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx +++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx @@ -28,6 +28,7 @@ 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' const color = 'secondary' @@ -37,15 +38,13 @@ const styles = (theme) => ({ display: 'flex', whiteSpace: 'nowrap', marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1) + marginBottom: theme.spacing(1), + marginRight: theme.spacing(1) }, buttons: { flex: '0 0 auto', display: 'flex', whiteSpace: 'nowrap', - '& button': { - marginRight: theme.spacing(1) - } }, leftSection: { flexGrow: 1, @@ -54,8 +53,10 @@ const styles = (theme) => ({ flexShrink: 0 }, toggleButton: { - marginRight: theme.spacing(1), - border: '1px solid ' + theme.palette[color].main + '80', + border: 'none', + borderRadius: '50%', + display: 'inline-flex', + padding: theme.spacing(1.5) + 'px', '& *': { color: theme.palette[color].main } @@ -72,14 +73,15 @@ class Toolbar extends React.Component { render() { const { viewType, onViewTypeChange, classes, showInfo, onShowInfoChange } = this.props - const size = 'small' + const buttonSize = 'small' + const iconButtonSize = 'medium' return ( <div className={classes.toolbar}> <div className={[classes.buttons, classes.leftSection].join(' ')}> <Button classes={{ root: classes.button }} color={color} - size={size} + size={buttonSize} variant='outlined' startIcon={<CreateNewFolderIcon />} > @@ -90,7 +92,7 @@ class Toolbar extends React.Component { <ToggleButton classes={{ root: classes.toggleButton }} color={color} - size={size} + size={buttonSize} selected={showInfo} onChange={onShowInfoChange} value={messages.get(messages.INFO)} @@ -98,52 +100,50 @@ class Toolbar extends React.Component { > <InfoIcon /> </ToggleButton> - <Button + <IconButton classes={{ root: classes.button }} color={color} - size={size} + size={iconButtonSize} variant='outlined' > <SearchIcon /> - </Button> + </IconButton> {viewType === 'list' && ( - <Button + <IconButton classes={{ root: classes.button }} color={color} - size={size} + size={iconButtonSize} variant='outlined' onClick={() => onViewTypeChange('grid')} > <ViewComfyIcon /> - </Button> + </IconButton> )} {viewType === 'grid' && ( - <Button + <IconButton classes={{ root: classes.button }} color={color} - size={size} + size={iconButtonSize} variant='outlined' onClick={() => onViewTypeChange('list')} > <ViewListIcon /> - </Button> + </IconButton> )} - <Button + <IconButton classes={{ root: classes.button }} color={color} - size={size} + size={iconButtonSize} variant='outlined' - onClick={() => onViewTypeChange('list')} > <SettingsIcon /> - </Button> + </IconButton> <Button classes={{ root: classes.button }} color={color} - size={size} + size={buttonSize} variant='contained' startIcon={<PublishIcon />} - onClick={() => onViewTypeChange('list')} > {messages.get(messages.UPLOAD)} </Button>