From 946b3d50f549fe6e0f973f42a42d89e6ff466840 Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Tue, 3 Jan 2023 15:09:31 +0100
Subject: [PATCH] SSDM-11608 : Admin UI : navigation collapse all
---
.../js/components/common/browser/Browser.jsx | 21 ++++++++------
.../browser/BrowserNodeAutoShowSelected.jsx | 29 +++++++++++--------
.../common/browser/BrowserNodeCollapseAll.jsx | 7 +++--
.../common/browser/BrowserNodeSetAsRoot.jsx | 2 +-
.../common/browser/BrowserNodeSortings.jsx | 2 +-
5 files changed, 36 insertions(+), 25 deletions(-)
diff --git a/openbis_ng_ui/src/js/components/common/browser/Browser.jsx b/openbis_ng_ui/src/js/components/common/browser/Browser.jsx
index f338560f830..e70a32e1fb2 100644
--- a/openbis_ng_ui/src/js/components/common/browser/Browser.jsx
+++ b/openbis_ng_ui/src/js/components/common/browser/Browser.jsx
@@ -5,6 +5,7 @@ import FilterField from '@src/js/components/common/form/FilterField.jsx'
import BrowserRoot from '@src/js/components/common/browser/BrowserRoot.jsx'
import BrowserNode from '@src/js/components/common/browser/BrowserNode.jsx'
import BrowserNodeAutoShowSelected from '@src/js/components/common/browser/BrowserNodeAutoShowSelected.jsx'
+import BrowserNodeCollapseAll from '@src/js/components/common/browser/BrowserNodeCollapseAll.jsx'
import logger from '@src/js/common/logger.js'
const styles = theme => ({
@@ -21,9 +22,6 @@ const styles = theme => ({
marginRight: '16px',
display: 'flex'
},
- filterButton: {
- marginLeft: '16px'
- },
nodes: {
height: '100%',
overflow: 'auto'
@@ -124,12 +122,17 @@ class Browser extends React.PureComponent {
loading={controller.isLoading() || controller.isTreeLoading()}
endAdornments={
<div className={classes.filterButtons}>
- <div className={classes.filterButton}>
- <BrowserNodeAutoShowSelected
- value={controller.isAutoShowSelectedObject()}
- onClick={controller.changeAutoShowSelectedObject}
- />
- </div>
+ <BrowserNodeAutoShowSelected
+ value={controller.isAutoShowSelectedObject()}
+ onClick={controller.changeAutoShowSelectedObject}
+ />
+ <BrowserNodeCollapseAll
+ node={
+ controller.getNodeSetAsRoot() ||
+ controller.getRoot() || { canHaveChildren: true }
+ }
+ onClick={controller.collapseAllNodes}
+ />
</div>
}
/>
diff --git a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeAutoShowSelected.jsx b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeAutoShowSelected.jsx
index 5620b668cde..6b14266ef1a 100644
--- a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeAutoShowSelected.jsx
+++ b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeAutoShowSelected.jsx
@@ -8,7 +8,10 @@ import LocationDisabled from '@material-ui/icons/LocationDisabled'
import messages from '@src/js/common/messages.js'
import logger from '@src/js/common/logger.js'
-const styles = () => ({
+const styles = theme => ({
+ container: {
+ paddingLeft: theme.spacing(2)
+ },
button: {
padding: '4px',
margin: '-4px'
@@ -34,17 +37,19 @@ class BrowserNodeAutoShowSelected extends React.PureComponent {
return (
<Tooltip title={messages.get(messages.AUTO_SHOW_SELECTED)}>
- <IconButton
- size='small'
- onClick={this.handleClick}
- classes={{ root: classes.button }}
- >
- {value ? (
- <MyLocation fontSize='small' />
- ) : (
- <LocationDisabled fontSize='small' />
- )}
- </IconButton>
+ <div className={classes.container}>
+ <IconButton
+ size='small'
+ onClick={this.handleClick}
+ classes={{ root: classes.button }}
+ >
+ {value ? (
+ <MyLocation fontSize='small' />
+ ) : (
+ <LocationDisabled fontSize='small' />
+ )}
+ </IconButton>
+ </div>
</Tooltip>
)
}
diff --git a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeCollapseAll.jsx b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeCollapseAll.jsx
index 4cfdfa20aae..cd97d36e80b 100644
--- a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeCollapseAll.jsx
+++ b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeCollapseAll.jsx
@@ -6,10 +6,11 @@ import IconButton from '@material-ui/core/IconButton'
import UnfoldLessIcon from '@material-ui/icons/UnfoldLess'
import messages from '@src/js/common/messages.js'
import logger from '@src/js/common/logger.js'
+import id from 'date-fns/esm/locale/id/index.js'
const styles = theme => ({
container: {
- paddingLeft: theme.spacing(1)
+ paddingLeft: theme.spacing(2)
},
button: {
padding: '4px',
@@ -27,7 +28,9 @@ class BrowserNodeCollapseAll extends React.PureComponent {
event.preventDefault()
event.stopPropagation()
const { node } = this.props
- this.props.onClick(node.id)
+ if (node.id) {
+ this.props.onClick(node.id)
+ }
}
render() {
diff --git a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSetAsRoot.jsx b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSetAsRoot.jsx
index 8939cb6dd28..aad6c2b3b5a 100644
--- a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSetAsRoot.jsx
+++ b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSetAsRoot.jsx
@@ -9,7 +9,7 @@ import logger from '@src/js/common/logger.js'
const styles = theme => ({
container: {
- paddingLeft: theme.spacing(1)
+ paddingLeft: theme.spacing(2)
},
button: {
padding: '4px',
diff --git a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSortings.jsx b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSortings.jsx
index 0cf4e5cfb05..daaafcaef9c 100644
--- a/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSortings.jsx
+++ b/openbis_ng_ui/src/js/components/common/browser/BrowserNodeSortings.jsx
@@ -14,7 +14,7 @@ import logger from '@src/js/common/logger.js'
const styles = theme => ({
container: {
- paddingLeft: theme.spacing(1)
+ paddingLeft: theme.spacing(2)
},
button: {
padding: '4px',
--
GitLab