diff --git a/package.json b/package.json index eeba395..b247002 100644 --- a/package.json +++ b/package.json @@ -12,5 +12,8 @@ "scripts": { "release": "release-it", "bootstrap": "./bootstrap" + }, + "dependencies": { + "react-color": "2.18.1" } } diff --git a/src/ColumnsBlock/ColumnVariations.jsx b/src/ColumnsBlock/ColumnVariations.jsx index c148ee0..b48c90c 100644 --- a/src/ColumnsBlock/ColumnVariations.jsx +++ b/src/ColumnsBlock/ColumnVariations.jsx @@ -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 ? ( - - - {variants.map(({ icon, defaultData, title }, index) => ( - onChange(defaultData)}> - - - {title ? {title} : ''} - - - ))} - - - ) : ( - 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 ( + + + {variants.map(({ icon, defaultData, title }, index) => ( + onChange(defaultData)}> + + + {title ? {title} : ''} + + + ))} + + + ); +}; diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx index 22fceca..a0495e4 100644 --- a/src/ColumnsBlock/ColumnsBlockEdit.jsx +++ b/src/ColumnsBlock/ColumnsBlockEdit.jsx @@ -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'; @@ -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'; @@ -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) { @@ -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 ( - <> -
+
+ {Object.keys(data).length === 1 ? ( + { + onChangeBlock(block, { + ...data, + ...this.createFrom(initialData), + }); + }} + /> + ) : ( {columnList.map(([colId, column], index) => (
{ this.setState({ showSidebar: true, - activeColumn: 1, //colId, + activeColumn: colId, colSelections: {}, }); this.props.setSidebarTab(1); @@ -179,15 +194,51 @@ class ColumnsBlockEdit extends React.Component { ))} -
- {Object.keys(this.state.colSelections).length === 0 && ( + )} + + {Object.keys(this.state.colSelections).length === 0 ? ( {this.state.activeColumn ? ( -
{this.state.activeColumn}
+ <> + + + + { + 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 || {} + } + /> + ) : ( { onChangeBlock(block, { ...data, @@ -198,8 +249,10 @@ class ColumnsBlockEdit extends React.Component { /> )} + ) : ( + '' )} - +
); } } @@ -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'; diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx index 2e898ca..129cb36 100644 --- a/src/ColumnsBlock/ColumnsBlockView.jsx +++ b/src/ColumnsBlock/ColumnsBlockView.jsx @@ -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]; @@ -25,6 +26,7 @@ const ColumnsBlockView = (props) => { className="demo-column" key={id} {...(gridSizes[gridCols[index]] || gridCols[index])} + style={getStyle(column.settings || {})} > {/*

{`Column ${index}`}

*/} diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less index cce1dfb..7ba9e21 100644 --- a/src/ColumnsBlock/styles.less +++ b/src/ColumnsBlock/styles.less @@ -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 { diff --git a/src/Styles/index.js b/src/Styles/index.js new file mode 100644 index 0000000..e16f8ff --- /dev/null +++ b/src/Styles/index.js @@ -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, + }; +} diff --git a/src/Styles/schema.js b/src/Styles/schema.js new file mode 100644 index 0000000..4e44ee8 --- /dev/null +++ b/src/Styles/schema.js @@ -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: [], +}; diff --git a/src/ColumnsWidget/ColumnsWidget.jsx b/src/Widgets/ColumnsWidget.jsx similarity index 100% rename from src/ColumnsWidget/ColumnsWidget.jsx rename to src/Widgets/ColumnsWidget.jsx diff --git a/src/Widgets/SimpleColorPickerWidget.jsx b/src/Widgets/SimpleColorPickerWidget.jsx new file mode 100644 index 0000000..27a4795 --- /dev/null +++ b/src/Widgets/SimpleColorPickerWidget.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { GithubPicker } from 'react-color'; +import { FormFieldWrapper, Icon } from '@plone/volto/components'; +import { Button } from 'semantic-ui-react'; +import clearSVG from '@plone/volto/icons/clear.svg'; + +export default (props) => { + const { id, value, onChange, available_colors } = props; + const [showPicker, setShowPicker] = React.useState(false); + + return ( + +
+ + + + + + {showPicker ? ( + { + setShowPicker(false); + onChange(id, value.hex); + }} + /> + ) : ( + '' + )} +
+ + ); +}; diff --git a/src/ColumnsWidget/index.js b/src/Widgets/index.js similarity index 100% rename from src/ColumnsWidget/index.js rename to src/Widgets/index.js diff --git a/src/index.js b/src/index.js index cae4d11..eb47e44 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,8 @@ import codeSVG from '@plone/volto/icons/code.svg'; import { ColumnsBlockView, ColumnsBlockEdit } from './ColumnsBlock'; -import ColumnsWidget from './ColumnsWidget'; +import ColumnsWidget from './Widgets/ColumnsWidget'; +import ColorPickerWidget from './Widgets/SimpleColorPickerWidget.jsx'; import { gridSizes, variants } from './grid'; import { COLUMNSBLOCK } from './constants'; @@ -23,9 +24,28 @@ export default function install(config) { }, gridSizes, variants, + available_colors: [ + // '#B80000', + // '#DB3E00', + // '#FCCB00', + // '#008B02', + // '#006B76', + // '#1273DE', + // '#004DCF', + // '#5300EB', + '#EB9694', + '#FAD0C3', + '#FEF3BD', + '#C1E1C5', + '#BEDADC', + '#C4DEF6', + '#BED3F3', + '#D4C4FB', + ], }; config.widgets.type.columns = ColumnsWidget; + config.widgets.widget.simple_color_picker = ColorPickerWidget; return config; }