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 {