diff --git a/openbis_ng_ui/package.json b/openbis_ng_ui/package.json index 2ebec20c513a647d3b9291b8f888a3ddcaf5b0d0..074ed6cbb6f59e342288b496997ceb4660b6841a 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 b5c1f23e5757dddc2aa8431da7e91c6d8ff9c8f9..6bf2924c95ae6e1959c363301d26d2f156a0778c 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 42fbddedde696a607c8c913358f6076d6bde6737..feed2d6c13079ec615786142f64edbae66301272 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> ) }