Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
tiberiuichim committed Sep 27, 2020
1 parent fa1e2f5 commit b3a5321
Show file tree
Hide file tree
Showing 11 changed files with 265 additions and 67 deletions.
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,5 +12,8 @@
"scripts": {
"release": "release-it",
"bootstrap": "./bootstrap"
},
"dependencies": {
"react-color": "2.18.1"
}
}
52 changes: 16 additions & 36 deletions src/ColumnsBlock/ColumnVariations.jsx
Original file line number Diff line number Diff line change
@@ -1,40 +1,20 @@
import React from 'react';
import { Segment, Card } from 'semantic-ui-react';
import { Icon } from '@plone/volto/components';
import { isEqual } from 'lodash';

export default React.memo(
({ data, onChange, children, variants }) => {
// data by default is like { '@type': 'columns }
const mounted = React.useRef();
React.useEffect(() => {
if (!mounted.current) console.log('mount column variations');
mounted.current = true;
});

return Object.keys(data).length === 1 ? (
<Segment>
<Card.Group>
{variants.map(({ icon, defaultData, title }, index) => (
<Card key={index} onClick={() => onChange(defaultData)}>
<Card.Content>
<Icon name={icon} />
{title ? <Card.Header>{title}</Card.Header> : ''}
</Card.Content>
</Card>
))}
</Card.Group>
</Segment>
) : (
children
);
},
(p, n) => {
const res =
isEqual(p.data, n.data) &&
p.selected === n.selected &&
isEqual(n.colSelections, p.colSelections);
console.log('variantions', res);
return res;
},
);
export default ({ data, onChange, children, variants }) => {
return (
<Segment>
<Card.Group>
{variants.map(({ icon, defaultData, title }, index) => (
<Card key={index} onClick={() => onChange(defaultData)}>
<Card.Content>
<Icon name={icon} />
{title ? <Card.Header>{title}</Card.Header> : ''}
</Card.Content>
</Card>
))}
</Card.Group>
</Segment>
);
};
97 changes: 73 additions & 24 deletions src/ColumnsBlock/ColumnsBlockEdit.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Grid } from 'semantic-ui-react';
import { Grid, Segment } from 'semantic-ui-react';
import { isEmpty } from 'lodash';
import { SidebarPortal, Icon, InlineForm } from '@plone/volto/components'; // BlocksForm, Icon,
import { emptyBlocksForm } from '@plone/volto/helpers';
Expand All @@ -9,11 +9,14 @@ import { BlocksForm } from '@eeacms/volto-blocks-form/components';
import { Button } from 'semantic-ui-react';
import { blocks } from '~/config';

import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
import { ColumnsBlockSchema } from './schema';
import { getColumns, empty } from './utils';
import ColumnVariations from './ColumnVariations';
import EditBlockWrapper from './EditBlockWrapper';

import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
import { makeStyleSchema, getStyle } from '@eeacms/volto-columns-block/Styles';

import tuneSVG from '@plone/volto/icons/tune.svg';

import './styles.less';
Expand All @@ -22,16 +25,10 @@ import './styles.less';
* not pretty, there's a lot of render props passing, to please React
* reconciliation algos
*
ColumnsBlockEdit ->
EditBlockWrapper
-> EditBlock
-> dragProps
CBE
-> BlocksForm
-> DragDropList
-> EditBlockWrapper
-> EditBlock
ColumnsBlockEdit -> passes EditBlockWrapper into
-> BlocksForm -> which passes (with EditBlock) into
-> DragDropList -> which renders them all
*/
class ColumnsBlockEdit extends React.Component {
constructor(props) {
Expand Down Expand Up @@ -84,20 +81,38 @@ class ColumnsBlockEdit extends React.Component {
pathname,
selected,
} = this.props;
const { gridSizes, variants } = blocks.blocksConfig[COLUMNSBLOCK];

const { coldata, gridCols, gridSize } = data;
const columnList = getColumns(coldata);

const { gridSizes, variants, available_colors } = blocks.blocksConfig[
COLUMNSBLOCK
];
const ColumnSchema = makeStyleSchema({ available_colors });

return (
<>
<div className="columns-block">
<div className="columns-block">
{Object.keys(data).length === 1 ? (
<ColumnVariations
variants={variants}
data={data}
onChange={(initialData) => {
onChangeBlock(block, {
...data,
...this.createFrom(initialData),
});
}}
/>
) : (
<Grid columns={gridSize} stackable>
{columnList.map(([colId, column], index) => (
<Grid.Column
className="block-column"
key={colId}
{...(gridSizes[gridCols[index]] || gridCols[index])}
style={getStyle(
data?.coldata?.columns?.[colId]?.settings || {},
)}
>
<div className="column-header"></div>
<BlocksForm
Expand Down Expand Up @@ -161,7 +176,7 @@ class ColumnsBlockEdit extends React.Component {
onClick={() => {
this.setState({
showSidebar: true,
activeColumn: 1, //colId,
activeColumn: colId,
colSelections: {},
});
this.props.setSidebarTab(1);
Expand All @@ -179,15 +194,51 @@ class ColumnsBlockEdit extends React.Component {
</Grid.Column>
))}
</Grid>
</div>
{Object.keys(this.state.colSelections).length === 0 && (
)}

{Object.keys(this.state.colSelections).length === 0 ? (
<SidebarPortal selected={true}>
{this.state.activeColumn ? (
<div>{this.state.activeColumn}</div>
<>
<Segment>
<Button onClick={() => this.setState({ activeColumn: null })}>
Edit column block
</Button>
</Segment>
<InlineForm
schema={ColumnSchema}
title="Edit column"
onChangeField={(id, value) => {
const formData = {
...data,
coldata: {
...coldata,
columns: {
...coldata.columns,
[this.state.activeColumn]: {
...coldata.columns?.[this.state.activeColumn],
settings: {
...coldata.columns?.[this.state.activeColumn]
?.settings,
[id]: value,
},
},
},
},
};
console.log('formdata', formData);
onChangeBlock(block, formData);
}}
formData={
data?.coldata?.columns?.[this.state.activeColumn]
?.settings || {}
}
/>
</>
) : (
<InlineForm
schema={ColumnsBlockSchema}
title={ColumnsBlockSchema.title}
title="Edit columns block"
onChangeField={(id, value) => {
onChangeBlock(block, {
...data,
Expand All @@ -198,8 +249,10 @@ class ColumnsBlockEdit extends React.Component {
/>
)}
</SidebarPortal>
) : (
''
)}
</>
</div>
);
}
}
Expand All @@ -210,7 +263,3 @@ export default connect(
},
{ setSidebarTab },
)(ColumnsBlockEdit);
// import columnSVG from '@plone/volto/icons/column.svg';
// import decorateComponentWithProps from 'decorate-component-with-props';
// import dragSVG from '@plone/volto/icons/drag.svg';
// import dotsSVG from '@plone/volto/icons/drag.svg';
2 changes: 2 additions & 0 deletions src/ColumnsBlock/ColumnsBlockView.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { blocks } from '~/config';
import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';

import { getColumns } from './utils';
import { getStyle } from '@eeacms/volto-columns-block/Styles';

const ColumnsBlockView = (props) => {
const { gridSizes } = blocks.blocksConfig[COLUMNSBLOCK];
Expand All @@ -25,6 +26,7 @@ const ColumnsBlockView = (props) => {
className="demo-column"
key={id}
{...(gridSizes[gridCols[index]] || gridCols[index])}
style={getStyle(column.settings || {})}
>
{/* <h4>{`Column ${index}`}</h4> */}
<RenderBlocks {...props} content={column} />
Expand Down
18 changes: 12 additions & 6 deletions src/ColumnsBlock/styles.less
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
.columns-block {
& > .column {
padding: 0px;
& > .column {
padding: 4px !important;
}
}
.block-column {
padding: 0.3em;

.column-header {
width: 100%;
text-align: center;
border-bottom: 6px solid #eaeaea;
margin: 0.3em auto 0.8em auto;
}
// .column-header {
// width: 100%;
// text-align: center;
// border-bottom: 6px solid #eaeaea;
// margin: 0.3em auto 0.8em auto;
// }

.block {
.block-add-button {
Expand Down
13 changes: 13 additions & 0 deletions src/Styles/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { StyleSchema } from './schema';

export function makeStyleSchema({ available_colors }) {
const schema = StyleSchema();
schema.properties.backgroundColor.available_colors = available_colors;
return schema;
}

export function getStyle(props) {
return {
backgroundColor: props.backgroundColor,
};
}
70 changes: 70 additions & 0 deletions src/Styles/schema.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
export const StyleSchema = () => ({
title: 'Styling',
fieldsets: [
{
id: 'default',
title: 'Style',
fields: ['backgroundColor'],
},
],
properties: {
backgroundColor: {
title: 'Background color',
type: 'color',
widget: 'simple_color_picker',
},
},
required: [],
});

export const TextSettingsSchema = {
title: 'Text settings',
fieldsets: [
{
id: 'text_settings',
title: 'Text settings',
fields: ['grid_column_align_text', 'grid_column_text_color'],
},
],
properties: {
grid_column_align_text: {
title: 'Text align',
widget: 'align',
},
grid_column_text_color: {
title: 'Text color',
widget: 'color_picker',
},
},
required: [],
};

export const AdvancedSettingsSchema = {
title: 'Advanced settings',
fieldsets: [
{
id: 'advanced_fullcontrol',
title: 'Advanced settings',
fields: [
'grid_column_margin',
'grid_column_padding',
// 'grid_column_inline_style',
],
},
],
properties: {
grid_column_margin: {
title: 'Margin',
widget: 'textarea',
},
grid_column_padding: {
title: 'Padding',
widget: 'textarea',
},
// grid_column_inline_style: {
// title: 'Inline style',
// widget: 'json_text',
// },
},
required: [],
};
File renamed without changes.
Loading

0 comments on commit b3a5321

Please sign in to comment.