From ec8c1c7c52e51fcc08d60ec85b35a014234de3dd Mon Sep 17 00:00:00 2001
From: vkovtun <viktor.kovtun@id.ethz.ch>
Date: Sat, 12 Aug 2023 15:59:43 +0200
Subject: [PATCH] SSDM-13579: Replaced links with buttons in the navigation
bar.
---
.../database/data-browser/NavigationBar.jsx | 48 +++++++++++++------
1 file changed, 34 insertions(+), 14 deletions(-)
diff --git a/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx b/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx
index 5f22ac05561..ad2d1a821dc 100644
--- a/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/NavigationBar.jsx
@@ -20,13 +20,13 @@ import { withStyles } from '@material-ui/core/styles'
import autoBind from 'auto-bind'
import logger from "@src/js/common/logger.js";
import Container from "@src/js/components/common/form/Container.jsx";
-import Link from "@material-ui/core/Link";
import HomeIcon from "@material-ui/icons/Home";
import IconButton from "@material-ui/core/IconButton";
+import Button from "@material-ui/core/Button";
const color = 'default'
const buttonSize = 'small'
-const iconButtonSize = 'small'
+const iconButtonSize = 'medium'
const styles = theme => ({
containerDefault: {
@@ -36,15 +36,31 @@ const styles = theme => ({
marginLeft: theme.spacing(1),
marginRight: theme.spacing(1),
fontSize: '1.125rem',
- '& *': {
- fontSize: '1.125rem'
+ alignItems: 'center',
+ '&>*': {
+ minWidth: 'auto',
+ fontSize: '1.125rem',
+ textTransform: 'none',
+ padding: '0 0.25rem',
+ margin: '0.25rem'
},
- '& *:not(:first-child):last-child': {
+ '&>*:first-child': {
+ padding: '0 0',
+ margin: '0.25rem 0.5rem 0.25rem 0.25rem'
+ },
+ '&>*:first-child svg': {
+ width: '31.5px',
+ height: '31.5px'
+ },
+ '&>*:not(:first-child):last-child': {
pointerEvents: 'none',
color: 'inherit',
fontWeight: 'bold'
}
},
+ homeButton: {
+ marginRight: '1rem'
+ }
})
class NavigationBar extends React.Component {
@@ -67,10 +83,10 @@ class NavigationBar extends React.Component {
return { folders, paths }
}
- renderLinks() {
+ renderItems() {
const { classes, path, onPathChange } = this.props
const { folders, paths } = this.splitPath(path)
- const components = new Array(2 * paths.length + 2)
+ const components = new Array(2 * paths.length + 1)
components[0] = <IconButton
key='root'
@@ -84,18 +100,22 @@ class NavigationBar extends React.Component {
<HomeIcon />
</IconButton>
for (let i = 0; i < paths.length; i++) {
- components[2 * i + 2] = '/'
- components[2 * i + 3] = <Link
+ components[2 * i + 1] = '/'
+ components[2 * i + 2] = <Button
key={'path-' + i}
- classes={{ root: classes.link }}
- component="button"
+ classes={{ root: classes.button }}
+ color={color}
+ size={buttonSize}
+ variant='text'
onClick={() => onPathChange(paths[i])}
>
{folders[i]}
- </Link>
+ </Button>
}
- return components
+ return components.length === 1
+ ? [components[0], '/']
+ : components
}
render() {
@@ -104,7 +124,7 @@ class NavigationBar extends React.Component {
return (
<Container classes={{ containerDefault: classes.containerDefault }}>
- { this.renderLinks() }
+ { this.renderItems() }
</Container>
)
}
--
GitLab