Improve layout editing of column grid

eea · Sep 28, 2020 · c5c1b96 · c5c1b96
1 parent 54057c7
commit c5c1b96
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -19,6 +19,7 @@ import { variants } from '@eeacms/volto-columns-block/grid';
 import { makeStyleSchema, getStyle } from '@eeacms/volto-columns-block/Styles';
 
 import tuneSVG from '@plone/volto/icons/tune.svg';
+import upSVG from '@plone/volto/icons/up.svg';
 
 import './styles.less';
 
@@ -127,7 +128,7 @@ class ColumnsBlockEdit extends React.Component {
     const available_variants = variants.filter(
       ({ defaultData }) => defaultData.gridCols.length === gridCols.length,
     );
-    schema.properties.layout.choices = available_variants.map(
+    schema.properties.gridCols.choices = available_variants.map(
       ({ defaultData, title }) => [defaultData.gridCols, title],
     );
     return schema;
@@ -238,6 +239,7 @@ class ColumnsBlockEdit extends React.Component {
               <>
                 <Segment>
                   <Button onClick={() => this.setState({ activeColumn: null })}>
+                    <Icon name={upSVG} size="14px" />
                     Edit parent column block
                   </Button>
                 </Segment>

diff --git a/src/ColumnsBlock/schema.js b/src/ColumnsBlock/schema.js
@@ -21,7 +21,7 @@ export const ColumnsBlockSchema = () => ({
     {
       id: 'default',
       title: 'Default',
-      fields: ['coldata', 'layout'], //  'nrColumns', 'block_title'
+      fields: ['coldata', 'gridCols'], //  'nrColumns', 'block_title'
     },
   ],
   properties: {
@@ -34,7 +34,7 @@ export const ColumnsBlockSchema = () => ({
       type: 'columns',
       schema: ColumnSchema,
     },
-    layout: {
+    gridCols: {
       title: 'Layout',
       choices: [],
     },

diff --git a/src/grid.js b/src/grid.js
@@ -19,7 +19,7 @@ export const gridSizes = {
   oneThird: {
     mobile: 12,
     tablet: 4,
-    computer: 3,
+    computer: 4,
   },
   halfWidthBig: {
     mobile: 12,