Add padding for columns

eea · Oct 13, 2021 · f945477 · f945477
1 parent 0e4783f
commit f945477
Show file tree

Hide file tree

Showing 10 changed files with 979 additions and 14 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -12,6 +12,7 @@ import { connect } from 'react-redux';
 import { BlocksForm } from '@plone/volto/components';
 import { Button } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
+import cx from 'classnames';
 
 import { ColumnsBlockSchema } from './schema';
 import {
@@ -345,7 +346,10 @@ class ColumnsBlockEdit extends React.Component {
             <Grid columns={gridSize} className="column-grid" stackable>
               {columnList.map(([colId, column], index) => (
                 <Grid.Column
-                  className="block-column"
+                  className={cx(
+                    'block-column',
+                    data?.data?.blocks?.[colId]?.settings?.column_class,
+                  )}
                   key={colId}
                   {...(gridSizes[gridCols[index]] || gridCols[index])}
                   {...getStyle(data?.data?.blocks?.[colId]?.settings || {})}

diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx
@@ -8,6 +8,17 @@ import cx from 'classnames';
 import { getColumns } from './utils';
 import { getStyle } from '@eeacms/volto-columns-block/Styles';
 
+const getSide = (side, v) => {
+  return `${v?.[side] ? `${v[side]}${v.unit ? v.unit : 'px'}` : '0'}`;
+};
+
+const getSides = (v) => {
+  return `${getSide('top', v)} ${getSide('right', v)} ${getSide(
+    'bottom',
+    v,
+  )} ${getSide('left', v)}`;
+};
+
 const ColumnsBlockView = (props) => {
   const { gridSizes } = config.blocks.blocksConfig[COLUMNSBLOCK];
   const { data = {}, gridSize = 12, gridCols = [] } = props.data;
@@ -33,7 +44,17 @@ const ColumnsBlockView = (props) => {
               )}
               {...getStyle(column.settings || {})}
             >
-              <RenderBlocks {...props} metadata={metadata} content={column} />
+              <div
+                style={
+                  column.settings?.padding
+                    ? {
+                        padding: getSides(column.settings?.padding),
+                      }
+                    : {}
+                }
+              >
+                <RenderBlocks {...props} metadata={metadata} content={column} />
+              </div>
             </Grid.Column>
           );
         })}

diff --git a/src/Styles/schema.js b/src/Styles/schema.js
@@ -4,7 +4,17 @@ export const StyleSchema = () => ({
     {
       id: 'default',
       title: 'Style',
-      fields: ['backgroundColor', 'grid_vertical_align', 'column_class'],
+      fields: ['grid_vertical_align'],
+    },
+    {
+      id: 'styling',
+      title: 'Styling',
+      fields: ['backgroundColor', 'padding'],
+    },
+    {
+      id: 'advanced',
+      title: 'Advanced',
+      fields: ['column_class'],
     },
   ],
   properties: {
@@ -21,6 +31,10 @@ export const StyleSchema = () => ({
         ['top', 'Top'],
       ],
     },
+    padding: {
+      title: 'Padding',
+      widget: 'quad_size',
+    },
     column_class: {
       title: 'Custom CSS Class',
       description: 'A custom CSS class, aplicable to this column',

diff --git a/src/Widgets/QuadSize.jsx b/src/Widgets/QuadSize.jsx
@@ -0,0 +1,151 @@
+import React from 'react';
+import { Field, FormFieldWrapper } from '@plone/volto/components';
+import { Grid } from 'semantic-ui-react';
+import { Slider } from './Slider';
+
+const fields = {
+  unitField: {
+    title: 'Unit',
+    columns: 2,
+    placeholder: 'Unit',
+    defaultValue: 'px',
+    choices: [
+      ['px', 'px'],
+      ['%', 'percentage'],
+      ['em', 'em'],
+      ['rem', 'rem'],
+    ],
+  },
+};
+
+const getMax = (unit) => {
+  switch (unit) {
+    case '%':
+      return 100;
+    case 'px':
+      return 100;
+    case 'em':
+      return 24;
+    case 'rem':
+      return 24;
+    default:
+      return 10;
+  }
+};
+
+const QuadSizeWidget = (props) => {
+  const {
+    value = {},
+    id,
+    onChange,
+    sliderSettings = {
+      max: 12,
+      min: 0,
+      step: 1,
+      start: 0,
+    },
+  } = props;
+  const {
+    top = 0,
+    right = 0,
+    bottom = 0,
+    left = 0,
+    unit = 'px',
+    unlock = false,
+  } = value;
+  const settings = {
+    ...sliderSettings,
+    max: getMax(unit),
+  };
+  // console.log('value', value);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Field
+        columns={2}
+        id={`${id}-unit`}
+        {...fields.unitField}
+        onChange={(fid, val) => onChange(id, { ...value, unit: val })}
+        value={value.unit || 'px'}
+      />
+
+      {unlock ? (
+        <Grid columns={2}>
+          <Grid.Column width={3}></Grid.Column>
+          <Grid.Column width={6}>
+            <Slider
+              settings={{
+                onChange: (val) => onChange(id, { ...value, top: val }),
+                ...settings,
+              }}
+              value={top}
+              extra={<strong>{top}</strong>}
+            />
+          </Grid.Column>
+          <Grid.Column width={3}></Grid.Column>
+          <Grid.Column>
+            <Slider
+              settings={{
+                onChange: (val) => onChange(id, { ...value, left: val }),
+                ...settings,
+              }}
+              value={left}
+              extra={<strong>{left}</strong>}
+            />
+          </Grid.Column>
+          <Grid.Column>
+            <Slider
+              settings={{
+                onChange: (val) => onChange(id, { ...value, right: val }),
+                ...settings,
+              }}
+              value={right}
+              extra={<strong>{right}</strong>}
+            />
+          </Grid.Column>
+          <Grid.Column width={3}></Grid.Column>
+          <Grid.Column width={6}>
+            <Slider
+              settings={{
+                onChange: (val) => onChange(id, { ...value, bottom: val }),
+                ...settings,
+              }}
+              extra={<strong>{bottom}</strong>}
+              value={bottom}
+            />
+          </Grid.Column>
+          <Grid.Column width={3}></Grid.Column>
+        </Grid>
+      ) : (
+        <Field
+          id={`${id}-slider`}
+          settings={settings}
+          onChange={(fid, val) => {
+            onChange(id, {
+              ...value,
+              top: val,
+              left: val,
+              bottom: val,
+              right: val,
+            });
+          }}
+          value={top}
+          title="Size"
+          widget="slider"
+          columns={2}
+        />
+      )}
+
+      <Field
+        id={`${id}-lockSize`}
+        onChange={(fid, val) => onChange(id, { ...value, unlock: val })}
+        value={unlock}
+        title="Customize"
+        type="boolean"
+        columns={1}
+      />
+    </FormFieldWrapper>
+  );
+};
+
+export default QuadSizeWidget;