Add vertical align to columns

eea · Oct 9, 2020 · 4190788 · 4190788
1 parent 1517b37
commit 4190788
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 10 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -192,7 +192,7 @@ class ColumnsBlockEdit extends React.Component {
                 className="block-column"
                 key={colId}
                 {...(gridSizes[gridCols[index]] || gridCols[index])}
-                style={getStyle(data?.data?.blocks?.[colId]?.settings || {})}
+                {...getStyle(data?.data?.blocks?.[colId]?.settings || {})}
               >
                 <div className="column-header"></div>
                 <BlocksForm

diff --git a/src/ColumnsBlock/ColumnsBlockView.jsx b/src/ColumnsBlock/ColumnsBlockView.jsx
@@ -9,12 +9,7 @@ import { getStyle } from '@eeacms/volto-columns-block/Styles';
 
 const ColumnsBlockView = (props) => {
   const { gridSizes } = blocks.blocksConfig[COLUMNSBLOCK];
-  const {
-    data = {},
-    gridSize = 12,
-    gridCols = [],
-    block_title,
-  } = props.data;
+  const { data = {}, gridSize = 12, gridCols = [], block_title } = props.data;
   const metadata = props.metadata || props.properties;
   const columnList = getColumns(data);
   return (
@@ -27,7 +22,7 @@ const ColumnsBlockView = (props) => {
               key={id}
               {...(gridSizes[gridCols[index]] || gridCols[index])}
               className="column-blocks-wrapper"
-              style={getStyle(column.settings || {})}
+              {...getStyle(column.settings || {})}
             >
               {/* <h4>{`Column ${index}`}</h4> */}
               <RenderBlocks {...props} metadata={metadata} content={column} />

diff --git a/src/Styles/index.js b/src/Styles/index.js
@@ -8,6 +8,9 @@ export function makeStyleSchema({ available_colors }) {
 
 export function getStyle(props) {
   return {
-    backgroundColor: props.backgroundColor,
+    verticalAlign: props.grid_vertical_align,
+    style: {
+      backgroundColor: props.backgroundColor,
+    },
   };
 }
diff --git a/src/Styles/schema.js b/src/Styles/schema.js
@@ -4,7 +4,7 @@ export const StyleSchema = () => ({
     {
       id: 'default',
       title: 'Style',
-      fields: ['backgroundColor'],
+      fields: ['backgroundColor', 'grid_vertical_align'],
     },
   ],
   properties: {
@@ -13,6 +13,14 @@ export const StyleSchema = () => ({
       type: 'color',
       widget: 'simple_color_picker',
     },
+    grid_vertical_align: {
+      title: 'Vertical align',
+      choices: [
+        ['bottom', 'Bottom'],
+        ['middle', 'Middle'],
+        ['top', 'Top'],
+      ],
+    },
   },
   required: [],
 });