From 3ca1ac9a121d38fba5b150a6f64634fbba60dca7 Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Sun, 19 May 2019 14:45:02 +0200
Subject: [PATCH] SSDM-7569 NEW openBIS UI - General Template/Infrastructure
for Forms - Visualisation/Creation/Edit - improve form layout
---
.../objectType/ObjectTypePropertyPreview.jsx | 72 +++++++++++--------
.../objectType/ObjectTypePropertyRow.jsx | 33 ++++-----
2 files changed, 59 insertions(+), 46 deletions(-)
diff --git a/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyPreview.jsx b/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyPreview.jsx
index 5f909f49381..8f31eebb101 100644
--- a/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyPreview.jsx
+++ b/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyPreview.jsx
@@ -1,16 +1,23 @@
import _ from 'lodash'
import React from 'react'
-import FormControl from '@material-ui/core/FormControl'
import FormControlLabel from '@material-ui/core/FormControlLabel'
-import FormHelperText from '@material-ui/core/FormHelperText'
import TextField from '@material-ui/core/TextField'
-import Select from '@material-ui/core/Select'
import MenuItem from '@material-ui/core/MenuItem'
import Checkbox from '@material-ui/core/Checkbox'
+import InfoIcon from '@material-ui/icons/InfoOutlined'
+import Tooltip from '@material-ui/core/Tooltip'
import {withStyles} from '@material-ui/core/styles'
import logger from '../../../common/logger.js'
const styles = () => ({
+ container: {
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ boolean: {
+ width: '100%'
+ }
})
class ObjectTypePropertyPreview extends React.Component {
@@ -39,6 +46,19 @@ class ObjectTypePropertyPreview extends React.Component {
render(){
logger.log(logger.DEBUG, 'ObjectTypePropertyPreview.render')
+ const {classes} = this.props
+
+ return (
+ <div className={classes.container}>
+ {this.renderField()}
+ <Tooltip title={this.getDescription()}>
+ <InfoIcon />
+ </Tooltip>
+ </div>
+ )
+ }
+
+ renderField(){
const {propertyType} = this.props
switch(propertyType.dataType){
@@ -59,14 +79,12 @@ class ObjectTypePropertyPreview extends React.Component {
}
renderBoolean(){
+ const {classes} = this.props
return (
- <FormControl>
- <FormControlLabel
- control={<Checkbox />}
- label={this.getLabel()}
- />
- <FormHelperText>{this.getDescription()}</FormHelperText>
- </FormControl>
+ <FormControlLabel classes={{ root: classes.boolean }}
+ control={<Checkbox />}
+ label={this.getLabel()}
+ />
)
}
@@ -74,7 +92,7 @@ class ObjectTypePropertyPreview extends React.Component {
return (
<TextField
label={this.getLabel()}
- helperText={this.getDescription()}
+ fullWidth={true}
variant="filled"
/>
)
@@ -84,8 +102,8 @@ class ObjectTypePropertyPreview extends React.Component {
return (
<TextField
label={this.getLabel()}
- helperText={this.getDescription()}
multiline={true}
+ fullWidth={true}
variant="filled"
/>
)
@@ -95,8 +113,8 @@ class ObjectTypePropertyPreview extends React.Component {
return (
<TextField
label={this.getLabel()}
- helperText={this.getDescription()}
type="number"
+ fullWidth={true}
variant="filled"
/>
)
@@ -104,21 +122,19 @@ class ObjectTypePropertyPreview extends React.Component {
renderVocabulary(){
return (
- <FormControl>
- <FormControlLabel
- control={
- <Select value={this.getValue('vocabulary')} onChange={this.handleChange('vocabulary')}>
- <MenuItem value=""></MenuItem>
- {this.getTerms().map(term => (
- <MenuItem key={term.code} value={term.code}>{term.label || term.code}</MenuItem>
- ))}
- </Select>
- }
- label={this.getLabel()}
- labelPlacement="top"
- />
- <FormHelperText>{this.getDescription()}</FormHelperText>
- </FormControl>
+ <TextField
+ select
+ label={this.getLabel()}
+ value={this.getValue('vocabulary')}
+ onChange={this.handleChange('vocabulary')}
+ fullWidth={true}
+ variant="filled"
+ >
+ <MenuItem value=""></MenuItem>
+ {this.getTerms().map(term => (
+ <MenuItem key={term.code} value={term.code}>{term.label || term.code}</MenuItem>
+ ))}
+ </TextField>
)
}
diff --git a/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyRow.jsx b/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyRow.jsx
index e15a1860c23..a2e582d2ec1 100644
--- a/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyRow.jsx
+++ b/openbis_ng_ui/src/components/types/objectType/ObjectTypePropertyRow.jsx
@@ -5,9 +5,7 @@ import { DropTarget } from 'react-dnd'
import MenuItem from '@material-ui/core/MenuItem'
import TableCell from '@material-ui/core/TableCell'
import TableRow from '@material-ui/core/TableRow'
-import FormControl from '@material-ui/core/FormControl'
-import FormHelperText from '@material-ui/core/FormHelperText'
-import Select from '@material-ui/core/Select'
+import TextField from '@material-ui/core/TextField'
import Checkbox from '@material-ui/core/Checkbox'
import DragHandleIcon from '@material-ui/icons/DragHandle'
import RootRef from '@material-ui/core/RootRef'
@@ -147,21 +145,20 @@ class ObjectTypeTableRow extends React.Component {
const {property, propertyTypes} = this.props
return (
- <FormControl error={property.errors['propertyType'] ? true : false}>
- <Select
- value={property.propertyType ? property.propertyType.code : ''}
- onClick={event => {event.stopPropagation()}}
- onChange={this.handleChangePropertyType}
- >
- <MenuItem value=""></MenuItem>
- {propertyTypes && propertyTypes.map(propertyType => (
- <MenuItem key={propertyType.code} value={propertyType.code}>{propertyType.code}</MenuItem>
- ))}
- </Select>
- {property.errors['type'] &&
- <FormHelperText>{property.errors['type']}</FormHelperText>
- }
- </FormControl>
+ <TextField
+ select
+ value={property.propertyType ? property.propertyType.code : ''}
+ onClick={event => {event.stopPropagation()}}
+ onChange={this.handleChangePropertyType}
+ fullWidth={true}
+ error={property.errors['propertyType'] ? true : false}
+ helperText={property.errors['propertyType']}
+ >
+ <MenuItem value=""></MenuItem>
+ {propertyTypes && propertyTypes.map(propertyType => (
+ <MenuItem key={propertyType.code} value={propertyType.code}>{propertyType.code}</MenuItem>
+ ))}
+ </TextField>
)
}
--
GitLab