WIP on columns

src/ColumnsBlock/ColumnControls.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+export default (props) => {
+  // selector for column sizes
+  return <div>25 33 50 66 75</div>;
+
+  // 25% 25% 50% 75%-> grid de 4 coloane
+  // 33% 66% -> grid de 3 coloane
+  //
+  //
+  // 4 coloane:
+  //  25 25 25 25
+  //
+  //  3 coloane
+  //  25 50 25
+  //  50 25 25
+  //  25 25 50
+  //  33 33 33
+  //
+  //  2 coloane
+  //  25 75
+  //  50 50
+  //  75 25
+  //  33 66
+  //  66 33
+  //
+  //  100% ---> pt mobile
+};

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -6,6 +6,10 @@ import { emptyBlocksForm } from '@plone/volto/helpers';
 
 import { ColumnsBlockSchema } from './schema';
 import { getColumns, empty } from './utils';
+import DeviceSelect from './DeviceSelect';
+import ColumnControls from './ColumnControls';
+
+import moreIcon from '@plone/volto/icons/more.svg';
 
 import './styles.less';
 
@@ -58,6 +62,9 @@ class ColumnsBlockEdit extends React.Component {
     return (
       <>
         <div className="columns-block">
+          <DeviceSelect />
+          <ColumnControls />
+          <hr class="splitter" />
           {/* {<h3>{data.block_title}</h3>} */}
           <Grid columns={columnList.length}>
             {columnList.map(([colId, column], index) => {

src/ColumnsBlock/DeviceSelect.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '@plone/volto/components';
+
+import computerIcon from './icons/desktop-computer.svg';
+import mobileIcon from './icons/device-mobile.svg';
+import tabletIcon from './icons/device-tablet.svg';
+
+export default (props) => {
+  return (
+    <div>
+      <Icon name={computerIcon} size="18px" />
+      <Icon name={tabletIcon} size="18px" />
+      <Icon name={mobileIcon} size="18px" />
+    </div>
+  );
+};

src/ColumnsBlock/icons/Readme.md

@@ -0,0 +1 @@
+Icons from MIT licensed https://github.com/tailwindlabs/heroicons

src/ColumnsBlock/styles.less

@@ -2,6 +2,18 @@
   .block-column {
     padding: 0.3em;
   }
+
+  .splitter {
+    background-color: red;
+    height: 10px;
+  }
+
+  .block-column {
+    border-top: 4px solid gray;
+    border-radius: 6px;
+    padding: 0.3em 1em 0em 1em;
+    margin-top: 0.3em;
+  }
 }
 
 .drag-drop-list-widget {