diff --git a/src/ColumnsBlock/BlockWrapper.jsx b/src/ColumnsBlock/BlockWrapper.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/ColumnsBlock/ColumnControls.jsx b/src/ColumnsBlock/ColumnControls.jsx
new file mode 100644
index 0000000..01fd520
--- /dev/null
+++ b/src/ColumnsBlock/ColumnControls.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+export default (props) => {
+ // selector for column sizes
+ return
25 33 50 66 75
;
+
+ // 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
+};
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
index 01a90c4..befeeb5 100644
--- a/src/ColumnsBlock/ColumnsBlockEdit.jsx
+++ b/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 (
<>
+
+
+
{/* {
{data.block_title}
} */}
{columnList.map(([colId, column], index) => {
diff --git a/src/ColumnsBlock/DeviceSelect.jsx b/src/ColumnsBlock/DeviceSelect.jsx
new file mode 100644
index 0000000..ae2653e
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+};
diff --git a/src/ColumnsBlock/icons/Readme.md b/src/ColumnsBlock/icons/Readme.md
new file mode 100644
index 0000000..d18ee76
--- /dev/null
+++ b/src/ColumnsBlock/icons/Readme.md
@@ -0,0 +1 @@
+Icons from MIT licensed https://github.com/tailwindlabs/heroicons
diff --git a/src/ColumnsBlock/icons/desktop-computer.svg b/src/ColumnsBlock/icons/desktop-computer.svg
new file mode 100644
index 0000000..f787a77
--- /dev/null
+++ b/src/ColumnsBlock/icons/desktop-computer.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/ColumnsBlock/icons/device-mobile.svg b/src/ColumnsBlock/icons/device-mobile.svg
new file mode 100644
index 0000000..dbf10df
--- /dev/null
+++ b/src/ColumnsBlock/icons/device-mobile.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/ColumnsBlock/icons/device-tablet.svg b/src/ColumnsBlock/icons/device-tablet.svg
new file mode 100644
index 0000000..af31d08
--- /dev/null
+++ b/src/ColumnsBlock/icons/device-tablet.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/ColumnsBlock/icons/view-boards.svg b/src/ColumnsBlock/icons/view-boards.svg
new file mode 100644
index 0000000..707adff
--- /dev/null
+++ b/src/ColumnsBlock/icons/view-boards.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
index c668d5f..906b051 100644
--- a/src/ColumnsBlock/styles.less
+++ b/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 {