From 56c002cf60515edace118d3378818f371b11251a Mon Sep 17 00:00:00 2001
From: pkupczyk <piotr.kupczyk@id.ethz.ch>
Date: Sat, 13 Jun 2020 14:30:30 +0200
Subject: [PATCH] Layout : extract Container compomponent to have consistent
paddings across the application
---
.../common/browser/BrowserButtons.jsx | 6 +--
.../js/components/common/form/Container.jsx | 21 ++++++++++
.../components/common/grid/ColumnConfig.jsx | 40 ++++++++++---------
.../common/grid/ColumnConfigRow.jsx | 2 +-
.../components/types/form/TypeFormButtons.jsx | 6 +--
.../types/form/TypeFormParametersProperty.jsx | 8 ++--
.../types/form/TypeFormParametersSection.jsx | 8 ++--
.../types/form/TypeFormParametersType.jsx | 8 ++--
.../components/types/form/TypeFormPreview.jsx | 10 ++---
9 files changed, 63 insertions(+), 46 deletions(-)
create mode 100644 openbis_ng_ui/src/js/components/common/form/Container.jsx
diff --git a/openbis_ng_ui/src/js/components/common/browser/BrowserButtons.jsx b/openbis_ng_ui/src/js/components/common/browser/BrowserButtons.jsx
index c4b42fc046a..c71a88016e0 100644
--- a/openbis_ng_ui/src/js/components/common/browser/BrowserButtons.jsx
+++ b/openbis_ng_ui/src/js/components/common/browser/BrowserButtons.jsx
@@ -1,11 +1,11 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import Container from '@src/js/components/common/form/Container.jsx'
import Button from '@src/js/components/common/form/Button.jsx'
import logger from '@src/js/common/logger.js'
const styles = theme => ({
container: {
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
display: 'flex',
borderWidth: '1px 0px 0px 0px',
borderColor: theme.palette.background.secondary,
@@ -24,7 +24,7 @@ class BrowserButtons extends React.Component {
const { controller, classes, addEnabled, removeEnabled } = this.props
return (
- <div className={classes.container}>
+ <Container className={classes.container}>
<Button
label='Add'
classes={{ root: classes.button }}
@@ -37,7 +37,7 @@ class BrowserButtons extends React.Component {
onClick={controller.nodeRemove}
disabled={!removeEnabled}
/>
- </div>
+ </Container>
)
}
}
diff --git a/openbis_ng_ui/src/js/components/common/form/Container.jsx b/openbis_ng_ui/src/js/components/common/form/Container.jsx
new file mode 100644
index 00000000000..2407e82a65f
--- /dev/null
+++ b/openbis_ng_ui/src/js/components/common/form/Container.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
+
+const styles = theme => ({
+ container: {
+ padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
+ }
+})
+
+class Container extends React.Component {
+ render() {
+ const { children, onClick, className, classes } = this.props
+ return (
+ <div className={`${classes.container} ${className}`} onClick={onClick}>
+ {children}
+ </div>
+ )
+ }
+}
+
+export default withStyles(styles)(Container)
diff --git a/openbis_ng_ui/src/js/components/common/grid/ColumnConfig.jsx b/openbis_ng_ui/src/js/components/common/grid/ColumnConfig.jsx
index 45ee9dc4c5c..d7648c0358d 100644
--- a/openbis_ng_ui/src/js/components/common/grid/ColumnConfig.jsx
+++ b/openbis_ng_ui/src/js/components/common/grid/ColumnConfig.jsx
@@ -2,6 +2,7 @@ import _ from 'lodash'
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import { DragDropContext, Droppable } from 'react-beautiful-dnd'
+import Container from '@src/js/components/common/form/Container.jsx'
import IconButton from '@material-ui/core/IconButton'
import SettingsIcon from '@material-ui/icons/Settings'
import Popover from '@material-ui/core/Popover'
@@ -9,16 +10,15 @@ import logger from '@src/js/common/logger.js'
import ColumnConfigRow from './ColumnConfigRow.jsx'
-const styles = theme => ({
+const styles = () => ({
container: {
display: 'flex',
alignItems: 'center'
},
columns: {
listStyle: 'none',
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
- paddingBottom: 0,
- margin: 0
+ margin: 0,
+ padding: 0
}
})
@@ -79,21 +79,23 @@ class ColumnConfig extends React.Component {
<DragDropContext onDragEnd={this.handleDragEnd}>
<Droppable droppableId='root'>
{provided => (
- <ol
- ref={provided.innerRef}
- {...provided.droppableProps}
- className={classes.columns}
- >
- {columns.map((column, index) => (
- <ColumnConfigRow
- key={column.field}
- column={column}
- index={index}
- onVisibleChange={onVisibleChange}
- />
- ))}
- {provided.placeholder}
- </ol>
+ <Container>
+ <ol
+ ref={provided.innerRef}
+ {...provided.droppableProps}
+ className={classes.columns}
+ >
+ {columns.map((column, index) => (
+ <ColumnConfigRow
+ key={column.field}
+ column={column}
+ index={index}
+ onVisibleChange={onVisibleChange}
+ />
+ ))}
+ {provided.placeholder}
+ </ol>
+ </Container>
)}
</Droppable>
</DragDropContext>
diff --git a/openbis_ng_ui/src/js/components/common/grid/ColumnConfigRow.jsx b/openbis_ng_ui/src/js/components/common/grid/ColumnConfigRow.jsx
index da102e761d1..ad6a1b2366e 100644
--- a/openbis_ng_ui/src/js/components/common/grid/ColumnConfigRow.jsx
+++ b/openbis_ng_ui/src/js/components/common/grid/ColumnConfigRow.jsx
@@ -9,7 +9,7 @@ const styles = theme => ({
row: {
display: 'flex',
alignItems: 'center',
- paddingBottom: theme.spacing(1)
+ padding: `${theme.spacing(1) / 2}px 0px`
},
label: {
marginLeft: 0
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx
index 22e1a025f1d..08f59a7b9f1 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx
@@ -1,11 +1,11 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import Container from '@src/js/components/common/form/Container.jsx'
import Button from '@src/js/components/common/form/Button.jsx'
import logger from '@src/js/common/logger.js'
const styles = theme => ({
container: {
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`,
display: 'flex'
},
button: {
@@ -35,7 +35,7 @@ class TypeFormButtons extends React.PureComponent {
} = this.props
return (
- <div className={classes.container}>
+ <Container className={classes.container}>
<Button
name='addSection'
label='Add Section'
@@ -63,7 +63,7 @@ class TypeFormButtons extends React.PureComponent {
classes={{ root: classes.button }}
onClick={onSave}
/>
- </div>
+ </Container>
)
}
}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
index c47bea5954f..5b9a40d253e 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersProperty.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import Container from '@src/js/components/common/form/Container.jsx'
import AutocompleterField from '@src/js/components/common/form/AutocompleterField.jsx'
import CheckboxField from '@src/js/components/common/form/CheckboxField.jsx'
import TextField from '@src/js/components/common/form/TextField.jsx'
@@ -11,9 +12,6 @@ import TypeFormMessage from './TypeFormMessage.jsx'
import TypeFormHeader from './TypeFormHeader.jsx'
const styles = theme => ({
- container: {
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
- },
header: {
paddingBottom: theme.spacing(1)
},
@@ -105,7 +103,7 @@ class TypeFormParametersProperty extends React.PureComponent {
const { classes } = this.props
return (
- <div className={classes.container}>
+ <Container>
<TypeFormHeader className={classes.header}>Property</TypeFormHeader>
{this.renderMessageGlobal(property)}
{this.renderMessageUsage(property)}
@@ -123,7 +121,7 @@ class TypeFormParametersProperty extends React.PureComponent {
{this.renderVisible(property)}
{this.renderMandatory(property)}
{this.renderInitialValue(property)}
- </div>
+ </Container>
)
}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx
index fdae7b73654..00f889990fa 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersSection.jsx
@@ -1,14 +1,12 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import Container from '@src/js/components/common/form/Container.jsx'
import TextField from '@src/js/components/common/form/TextField.jsx'
import logger from '@src/js/common/logger.js'
import TypeFormHeader from './TypeFormHeader.jsx'
const styles = theme => ({
- container: {
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
- },
header: {
paddingBottom: theme.spacing(1)
},
@@ -75,10 +73,10 @@ class TypeFormParametersSection extends React.PureComponent {
const { classes } = this.props
return (
- <div className={classes.container}>
+ <Container>
<TypeFormHeader className={classes.header}>Section</TypeFormHeader>
{this.renderName(section)}
- </div>
+ </Container>
)
}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx
index 339c2e8463b..fec37933406 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormParametersType.jsx
@@ -1,5 +1,6 @@
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
+import Container from '@src/js/components/common/form/Container.jsx'
import CheckboxField from '@src/js/components/common/form/CheckboxField.jsx'
import TextField from '@src/js/components/common/form/TextField.jsx'
import SelectField from '@src/js/components/common/form/SelectField.jsx'
@@ -9,9 +10,6 @@ import TypeFormMessage from './TypeFormMessage.jsx'
import TypeFormHeader from './TypeFormHeader.jsx'
const styles = theme => ({
- container: {
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
- },
header: {
paddingBottom: theme.spacing(1)
},
@@ -98,7 +96,7 @@ class TypeFormParametersType extends React.PureComponent {
const { classes } = this.props
return (
- <div className={classes.container}>
+ <Container>
<TypeFormHeader className={classes.header}>Type</TypeFormHeader>
{this.renderMessageUsage(type)}
{this.renderCode(type)}
@@ -114,7 +112,7 @@ class TypeFormParametersType extends React.PureComponent {
{this.renderMainDataSetPattern(type)}
{this.renderMainDataSetPath(type)}
{this.renderDisallowDeletion(type)}
- </div>
+ </Container>
)
}
diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx
index 09fc7c5a672..edc8b241f3e 100644
--- a/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/TypeFormPreview.jsx
@@ -2,17 +2,17 @@ import _ from 'lodash'
import React from 'react'
import { DragDropContext, Droppable } from 'react-beautiful-dnd'
import { withStyles } from '@material-ui/core/styles'
+import Container from '@src/js/components/common/form/Container.jsx'
import logger from '@src/js/common/logger.js'
import TypeFormPreviewHeader from './TypeFormPreviewHeader.jsx'
import TypeFormPreviewProperty from './TypeFormPreviewProperty.jsx'
import TypeFormPreviewSection from './TypeFormPreviewSection.jsx'
-const styles = theme => ({
+const styles = () => ({
container: {
flex: '1 1 auto',
- display: 'flex',
- padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
+ display: 'flex'
},
form: {
width: '100%'
@@ -76,7 +76,7 @@ class TypeFormPreview extends React.PureComponent {
const { classes, type, sections } = this.props
return (
- <div className={classes.container} onClick={this.handleClick}>
+ <Container className={classes.container} onClick={this.handleClick}>
<div className={classes.form}>
<TypeFormPreviewHeader type={type} />
<DragDropContext
@@ -99,7 +99,7 @@ class TypeFormPreview extends React.PureComponent {
</Droppable>
</DragDropContext>
</div>
- </div>
+ </Container>
)
}
--
GitLab