Add new layout svg icons, fix grid size, style improvements

src/ColumnsBlock/ColumnVariations.jsx

@@ -5,12 +5,13 @@ import { Icon } from '@plone/volto/components';
 export default ({ data, onChange, children, variants }) => {
   return (
     <Segment>
-      <Card.Group>
+      <h4>Select layout:</h4>
+      <Card.Group centered itemsPerRow={6}>
         {variants.map(({ icon, defaultData, title }, index) => (
           <Card key={index} onClick={() => onChange(defaultData)}>
             <Card.Content>
-              <Icon name={icon} />
-              {title ? <Card.Header>{title}</Card.Header> : ''}
+              <Icon name={icon} size="45" />
+              {title ? <p>{title}</p> : ''}
             </Card.Content>
           </Card>
         ))}

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -159,54 +159,55 @@ class ColumnsBlockEdit extends React.Component {
             }}
           />
         ) : (
-          <Grid columns={gridSize} stackable>
+          <Grid columns={gridSize} className="column-grid" stackable>
             {columnList.map(([colId, column], index) => (
               <Grid.Column
                 className="block-column"
                 key={colId}
                 {...(gridSizes[gridCols[index]] || gridCols[index])}
-                style={getStyle(
+              >
+                <div style={getStyle(
                   data?.coldata?.columns?.[colId]?.settings || {},
                 )}
-              >
-                <div className="column-header"></div>
-                <BlocksForm
-                  key={colId}
-                  properties={isEmpty(column) ? emptyBlocksForm() : column}
-                  selectedBlock={
-                    selected ? this.state.colSelections[colId] : null
-                  }
-                  onSelectBlock={(id) =>
-                    this.setState({
-                      colSelections: {
-                        // this invalidates selection in all other columns
-                        [colId]: id,
-                      },
-                    })
-                  }
-                  onChangeFormData={(newFormData) => {
-                    onChangeBlock(block, {
-                      ...data,
-                      coldata: {
-                        ...coldata,
-                        columns: {
-                          ...coldata.columns,
-                          [colId]: newFormData,
-                        },
-                      },
-                    });
-                  }}
-                  onChangeField={(id, value) =>
-                    this.onChangeColumnData(id, value, colId)
-                  }
-                  pathname={pathname}
                 >
-                  {({ draginfo }, editBlock, blockProps) => (
-                    <EditBlockWrapper
-                      draginfo={draginfo}
-                      blockProps={blockProps}
-                      extraControls={
-                        <>
+                  <div className="column-header"></div>
+                  <BlocksForm
+                    key={colId}
+                    properties={isEmpty(column) ? emptyBlocksForm() : column}
+                    selectedBlock={
+                      selected ? this.state.colSelections[colId] : null
+                    }
+                    onSelectBlock={(id) =>
+                      this.setState({
+                        colSelections: {
+                          // this invalidates selection in all other columns
+                          [colId]: id,
+                        },
+                      })
+                    }
+                    onChangeFormData={(newFormData) => {
+                      onChangeBlock(block, {
+                        ...data,
+                        coldata: {
+                          ...coldata,
+                          columns: {
+                            ...coldata.columns,
+                            [colId]: newFormData,
+                          },
+                        },
+                      });
+                    }}
+                    onChangeField={(id, value) =>
+                      this.onChangeColumnData(id, value, colId)
+                    }
+                    pathname={pathname}
+                    >
+                    {({ draginfo }, editBlock, blockProps) => (
+                      <EditBlockWrapper
+                        draginfo={draginfo}
+                        blockProps={blockProps}
+                        extraControls={
+                          <>
                           <Button
                             icon
                             basic
@@ -218,16 +219,17 @@ class ColumnsBlockEdit extends React.Component {
                               });
                               this.props.setSidebarTab(1);
                             }}
-                          >
+                            >
                             <Icon name={tuneSVG} className="" size="18px" />
                           </Button>
-                        </>
+                          </>
                       }
-                    >
+                      >
                       {editBlock}
                     </EditBlockWrapper>
                   )}
                 </BlocksForm>
+                </div>
               </Grid.Column>
             ))}
           </Grid>

src/ColumnsBlock/ColumnsBlockView.jsx

@@ -17,19 +17,21 @@ const ColumnsBlockView = (props) => {
   } = props.data;
   const columnList = getColumns(coldata);
   return (
-    <div>
+    <div className="columns-view">
       {block_title ? <h3>{block_title}</h3> : ''}
-      <Grid columns={gridSize}>
+      <Grid columns={gridSize} className="column-grid">
         {columnList.map(([id, column], index) => {
           return (
             <Grid.Column
               className="demo-column"
               key={id}
               {...(gridSizes[gridCols[index]] || gridCols[index])}
-              style={getStyle(column.settings || {})}
             >
-              {/* <h4>{`Column ${index}`}</h4> */}
-              <RenderBlocks {...props} content={column} />
+              <div className="column-bocks-wrapper"
+                   style={getStyle(column.settings || {})}>
+                {/* <h4>{`Column ${index}`}</h4> */}
+                <RenderBlocks {...props} content={column} />
+              </div>
             </Grid.Column>
           );
         })}

src/ColumnsBlock/styles.less

@@ -15,18 +15,68 @@
     //   margin: 0.3em auto 0.8em auto;
     // }
 
+    .blocks-form {
+      padding: 0.8rem!important;
+    }
+
     .block {
       .block-add-button {
         display: none;
       }
     }
   }
 
+  .ui.cards a.card,
+  .ui.link.cards .card,
+  a.ui.card,
+  .ui.link.card{
+    box-shadow: none;
+    border: 1px solid #edf2f3;
+    &:hover {
+      border: 1px solid #edf2f3;
+      box-shadow: none;
+      background-color: #edf2f3;
+    }
+  }
+
+  .ui.card .content {
+    text-align: center;
+    font-size: 10px !important;
+    padding-top: 1.5em !important;
+    padding-bottom: 1.5em !important;
+
+    p {color:#717171}
+
+    svg {
+      fill: #68778D!important;
+    }
+  }
+
   [data-rbd-draggable-context-id] {
     margin-bottom: 0.3em;
   }
 }
 
+.column-bocks-wrapper {
+  padding: 1rem;
+}
+
+.columns-view {
+  .ui.grid.column-block-grid {
+    display: initial !important;
+  }
+}
+
+.ui.grid.column-grid {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+
+  .column:not(.row),
+  > .row > .column {
+    padding: 0.5rem;
+  }
+}
+
 .block-toolbar {
   background-color: #d9edf4;
   padding: 3px;

src/grid.js

@@ -1,9 +1,9 @@
-import iconA from '@plone/volto/icons/circle-left.svg';
-import iconB from '@plone/volto/icons/circle-menu.svg';
-import iconC from '@plone/volto/icons/circle-minus.svg';
-import iconD from '@plone/volto/icons/circle-plus.svg';
-import iconE from '@plone/volto/icons/circle-right.svg';
-import iconF from '@plone/volto/icons/audio.svg';
+import iconA from './ColumnsBlock/icons/two-half-columns.svg';
+import iconB from './ColumnsBlock/icons/one-third-left.svg';
+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';
 
 export const gridSizes = {
   halfWidth: {
@@ -14,7 +14,7 @@ export const gridSizes = {
   twoThirds: {
     mobile: 12,
     tablet: 8,
-    computer: 9,
+    computer: 8,
   },
   oneThird: {
     mobile: 12,

src/index.js

@@ -1,4 +1,4 @@
-import codeSVG from '@plone/volto/icons/code.svg';
+import columnSVG from './ColumnsBlock/icons/three-columns.svg';
 
 import { ColumnsBlockView, ColumnsBlockEdit } from './ColumnsBlock';
 import ColumnsWidget from './Widgets/ColumnsWidget';
@@ -10,7 +10,7 @@ export default function install(config) {
   config.blocks.blocksConfig[COLUMNSBLOCK] = {
     id: 'columnsBlock',
     title: 'Columns',
-    icon: codeSVG,
+    icon: columnSVG,
     group: 'common',
     view: ColumnsBlockView,
     edit: ColumnsBlockEdit,