From f6f01042895caedad5bd66065e9132a6fefdf613 Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Sun, 27 Oct 2019 19:37:55 +0100
Subject: [PATCH] SSDM-7583 : ObjectTypeForm - make the main browser and object
type form params section resizable
---
openbis_ng_ui/package.json | 1 +
.../js/components/common/browser/Browser.jsx | 49 +++++++++++++------
.../types/objectType/ObjectType.jsx | 32 ++++++++----
3 files changed, 57 insertions(+), 25 deletions(-)
diff --git a/openbis_ng_ui/package.json b/openbis_ng_ui/package.json
index 2ebec20c513..074ed6cbb6f 100644
--- a/openbis_ng_ui/package.json
+++ b/openbis_ng_ui/package.json
@@ -12,6 +12,7 @@
"npm": "^6.11.3",
"path-to-regexp": "^3.1.0",
"prop-types": "^15.7.2",
+ "re-resizable": "^6.1.0",
"react": "^16.10.1",
"react-beautiful-dnd": "^11.0.5",
"react-dom": "^16.10.1",
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 b5c1f23e575..6bf2924c95a 100644
--- a/openbis_ng_ui/src/js/components/common/browser/Browser.jsx
+++ b/openbis_ng_ui/src/js/components/common/browser/Browser.jsx
@@ -1,6 +1,7 @@
import React from 'react'
import _ from 'lodash'
import Paper from '@material-ui/core/Paper'
+import { Resizable } from 're-resizable'
import { connect } from 'react-redux'
import { withStyles } from '@material-ui/core/styles'
import logger from '../../../common/logger.js'
@@ -11,10 +12,12 @@ import FilterField from './../form/FilterField.jsx'
import BrowserNodes from './BrowserNodes.jsx'
const styles = {
- container: {
+ resizable: {
display: 'flex',
- flexDirection: 'column',
- minWidth: '300px'
+ flexDirection: 'column'
+ },
+ paper: {
+ height: '100%'
}
}
@@ -59,19 +62,33 @@ class Browser extends React.PureComponent {
const classes = this.props.classes
return (
- <Paper square={true} elevation={3} classes={{ root: classes.container }}>
- <FilterField
- filter={this.props.filter}
- filterChange={this.props.filterChange}
- />
- <BrowserNodes
- nodes={this.props.nodes}
- nodeSelect={this.props.nodeSelect}
- nodeExpand={this.props.nodeExpand}
- nodeCollapse={this.props.nodeCollapse}
- level={0}
- />
- </Paper>
+ <Resizable
+ enable={{
+ right: true,
+ left: false,
+ top: false,
+ bottom: false,
+ topRight: false,
+ bottomRight: false,
+ bottomLeft: false,
+ topLeft: false
+ }}
+ className={classes.resizable}
+ >
+ <Paper square={true} elevation={3} classes={{ root: classes.paper }}>
+ <FilterField
+ filter={this.props.filter}
+ filterChange={this.props.filterChange}
+ />
+ <BrowserNodes
+ nodes={this.props.nodes}
+ nodeSelect={this.props.nodeSelect}
+ nodeExpand={this.props.nodeExpand}
+ nodeCollapse={this.props.nodeCollapse}
+ level={0}
+ />
+ </Paper>
+ </Resizable>
)
}
}
diff --git a/openbis_ng_ui/src/js/components/types/objectType/ObjectType.jsx b/openbis_ng_ui/src/js/components/types/objectType/ObjectType.jsx
index 42fbddedde6..feed2d6c130 100644
--- a/openbis_ng_ui/src/js/components/types/objectType/ObjectType.jsx
+++ b/openbis_ng_ui/src/js/components/types/objectType/ObjectType.jsx
@@ -1,6 +1,7 @@
import _ from 'lodash'
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import { Resizable } from 're-resizable'
import ObjectTypePreview from './ObjectTypePreview.jsx'
import ObjectTypeParameters from './ObjectTypeParameters.jsx'
import ObjectTypeButtons from './ObjectTypeButtons.jsx'
@@ -511,15 +512,28 @@ class ObjectType extends React.PureComponent {
/>
</div>
</div>
- <div className={classes.parameters}>
- <ObjectTypeParameters
- type={type}
- properties={properties}
- sections={sections}
- selection={selection}
- onChange={this.handleChange}
- />
- </div>
+ <Resizable
+ enable={{
+ left: true,
+ top: false,
+ right: false,
+ bottom: false,
+ topRight: false,
+ bottomRight: false,
+ bottomLeft: false,
+ topLeft: false
+ }}
+ >
+ <div className={classes.parameters}>
+ <ObjectTypeParameters
+ type={type}
+ properties={properties}
+ sections={sections}
+ selection={selection}
+ onChange={this.handleChange}
+ />
+ </div>
+ </Resizable>
</div>
)
}
--
GitLab