Merge branch 'master' into undeletable-first-block

eea · Oct 9, 2020 · bce150c · bce150c
2 parents 1bde90d + abf5158
commit bce150c
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 16 deletions.
diff --git a/src/ColumnsBlock/ColumnVariations.jsx b/src/ColumnsBlock/ColumnVariations.jsx
@@ -6,11 +6,11 @@ export default ({ data, onChange, children, variants }) => {
   return (
     <Segment>
       <h4>Select layout:</h4>
-      <Card.Group centered itemsPerRow={6}>
+      <Card.Group centered itemsPerRow={7}>
         {variants.map(({ icon, defaultData, title }, index) => (
           <Card key={index} onClick={() => onChange(defaultData)}>
             <Card.Content>
-              <Icon name={icon} size="45" />
+              <Icon name={icon} size="55" />
               {title ? <p>{title}</p> : ''}
             </Card.Content>
           </Card>

diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -213,7 +213,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/ColumnsBlock/icons/full-column.svg b/src/ColumnsBlock/icons/full-column.svg
diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
@@ -6,6 +6,12 @@
     // }
   }
 
+  .block-column .ui.block.inner {
+    .block {
+      margin-bottom: 0;
+    }
+  }
+
   .column-grid {
     margin-left: -0.2rem!important;
     margin-right: -0.2rem!important;
@@ -107,10 +113,18 @@
   margin-bottom: 8px;
   position: absolute;
   margin-top: -34px;
-  z-index: 10;
-  right: 0px;
+  z-index: 160;
+  left: 0px;
+
+  .wrapper-column-block {
+    > .ui.basic.button {
+      &:hover {
+        background-color: transparent!important;
+      }
+    }
+  }
 
-  .ui.basic.button {
+  >.ui.basic.button {
     &:hover {
       background-color: transparent!important;
     }

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: [],
 });

diff --git a/src/grid.js b/src/grid.js
@@ -4,6 +4,7 @@ import iconC from './ColumnsBlock/icons/one-third-right.svg';
 import iconD from './ColumnsBlock/icons/three-third-columns.svg';
 import iconE from './ColumnsBlock/icons/three-columns.svg';
 import iconF from './ColumnsBlock/icons/four-quarter-columns.svg';
+import iconG from './ColumnsBlock/icons/full-column.svg';
 
 export const gridSizes = {
   full: {
@@ -93,7 +94,7 @@ export const variants = [
     title: '25 / 25 / 25 / 25',
   },
   {
-    icon: iconF,
+    icon: iconG,
     defaultData: {
       gridSize: 12,
       gridCols: ['full'],