Merge pull request #72 from eea/develop

feat(ColumnsBlockEdit.jsx): add delete column style button to the sidebar

Author: avoinea

CHANGELOG.md

@@ -4,6 +4,20 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [6.3.0](https://github.com/eea/volto-columns-block/compare/6.2.0...6.3.0) - 5 April 2023
+
+#### :rocket: New Features
+
+- feat(ColumnsBlockEdit.jsx): add eraser icon for delete column style button [Miu Razvan - [`f966f37`](https://github.com/eea/volto-columns-block/commit/f966f375fe4384d8889ba41c36350156d378a113)]
+- feat(ColumnsBlockEdit.jsx): add delete column style button to the sidebar [Miu Razvan - [`9d895c2`](https://github.com/eea/volto-columns-block/commit/9d895c2ca446d3d683baeefc18eea602566f90d4)]
+
+#### :nail_care: Enhancements
+
+- refactor(eraserIcon): Change title tooltip to Clear column style [Alin Voinea - [`8b07013`](https://github.com/eea/volto-columns-block/commit/8b07013fb9596bde8a4519dd330cce0dfa082b95)]
+
+#### :hammer_and_wrench: Others
+
+- Release 6.3.0 [Alin Voinea - [`fed302e`](https://github.com/eea/volto-columns-block/commit/fed302e7ebe668db040e560d070367d22b283a01)]
 ### [6.2.0](https://github.com/eea/volto-columns-block/compare/6.1.0...6.2.0) - 4 April 2023
 
 #### :house: Internal changes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-columns-block",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "volto-columns-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

src/ColumnsBlock/ColumnsBlockEdit.jsx

@@ -33,7 +33,7 @@ import { makeStyleSchema, getStyle } from '../Styles';
 
 import tuneSVG from '@plone/volto/icons/column.svg';
 import upSVG from '@plone/volto/icons/up.svg';
-
+import eraserSVG from './icons/eraser.svg';
 import '../less/columns.less';
 
 const messages = defineMessages({
@@ -175,6 +175,25 @@ class ColumnsBlockEdit extends React.Component {
     }
   };
 
+  deleteColumnStyle = () => {
+    const colId = this.state.activeColumn;
+    const { onChangeBlock, block, data } = this.props;
+    const coldata = data.data;
+    onChangeBlock(block, {
+      ...data,
+      data: {
+        ...coldata,
+        blocks: {
+          ...coldata.blocks,
+          [colId]: {
+            ...coldata.blocks?.[colId],
+            settings: {},
+          },
+        },
+      },
+    });
+  };
+
   onSelectBlock = (
     id,
     colId,
@@ -498,14 +517,29 @@ class ColumnsBlockEdit extends React.Component {
           <SidebarPortal selected={selected}>
             {this.state.activeColumn ? (
               <>
-                <Segment>
+                <Segment
+                  style={{
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                  }}
+                >
                   <Button onClick={() => this.setState({ activeColumn: null })}>
                     <Icon name={upSVG} size="14px" />
                     <FormattedMessage
                       id="Edit parent columns block"
                       defaultMessage="Edit parent columns block"
                     />
                   </Button>
+                  <button
+                    onClick={this.deleteColumnStyle}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    <Icon
+                      name={eraserSVG}
+                      size="24px"
+                      title="Clear column style"
+                    />
+                  </button>
                 </Segment>
                 <BlockDataForm
                   schema={ColumnSchema}