Merge pull request #19 from eea/develop

Release - Visual improvements (#18)
eea · Sep 6, 2021 · a240e31 · a240e31
2 parents ef73244 + de5459f
commit a240e31
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 68 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,15 @@ 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).
 
+#### [3.3.1](https://github.com/eea/volto-accordion-block/compare/3.3.0...3.3.1)
+
+- Visual improvements [`#18`](https://github.com/eea/volto-accordion-block/pull/18)
+
 #### [3.3.0](https://github.com/eea/volto-accordion-block/compare/3.2.4...3.3.0)
 
+> 30 August 2021
+
+- Release [`#17`](https://github.com/eea/volto-accordion-block/pull/17)
 - use custom title icons [`#16`](https://github.com/eea/volto-accordion-block/pull/16)
 - Release 3.3.0 [`2cbb1d5`](https://github.com/eea/volto-accordion-block/commit/2cbb1d53ce62b9cb42751c4c4997577ba4165649)
 - Add Sonarqube tag using forests-frontend addons list [`ab257ac`](https://github.com/eea/volto-accordion-block/commit/ab257acb0c2c8e38b906fcce8f6e148e4690d473)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-accordion-block",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "volto-accordion-block: Volto accordion block",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/components/manage/Blocks/Accordion/EditBlockWrapper.jsx b/src/components/manage/Blocks/Accordion/EditBlockWrapper.jsx
@@ -86,6 +86,9 @@ class EditBlockWrapper extends React.Component {
       ? data.required
       : includes(config.blocks.requiredBlocks, type);
 
+    const allowedBlocksFromConfig =
+      blockProps.blocksConfig.accordion?.allowedBlocks;
+
     return (
       <div ref={this.blockNode}>
         <div
@@ -144,7 +147,7 @@ class EditBlockWrapper extends React.Component {
                       className="delete-button-accordion-block"
                       aria-label={intl.formatMessage(messages.delete)}
                     >
-                      <Icon name={trashSVG} size="19px" />
+                      <Icon name={trashSVG} size="19px" color="#e40166" />
                     </Button>
                   )}
                   {this.state.addNewBlockOpened && (
@@ -158,7 +161,7 @@ class EditBlockWrapper extends React.Component {
                         this.setState({ addNewBlockOpened: false });
                       }}
                       currentBlock={block}
-                      allowedBlocks={allowedBlocks}
+                      allowedBlocks={allowedBlocks || allowedBlocksFromConfig}
                     />
                   )}
                 </>

diff --git a/src/components/manage/Blocks/Accordion/editor.less b/src/components/manage/Blocks/Accordion/editor.less
@@ -7,6 +7,10 @@
 
 // Edit
 .block-editor-accordion {
+  .block:last-child {
+    margin-bottom: 1em;
+  }
+
   [data-rbd-draggable-context-id] {
     margin-bottom: 1rem;
   }

diff --git a/src/components/manage/Widgets/PanelsWidget.jsx b/src/components/manage/Widgets/PanelsWidget.jsx
@@ -2,13 +2,14 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import { omit, without } from 'lodash';
 import move from 'lodash-move';
+import { Button } from 'semantic-ui-react';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
 import { DragDropList } from '@plone/volto/components';
 import { emptyBlocksForm } from '@plone/volto/helpers';
 
+import addSVG from '@plone/volto/icons/add.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
-import plusSVG from '@plone/volto/icons/circle-plus.svg';
 
 import './editor.less';
 
@@ -26,17 +27,50 @@ const empty = () => {
 };
 
 const PanelsWidget = (props) => {
-  const { value = {}, id, onChange } = props;
+  const { fieldSet, value = {}, id, onChange, schema } = props;
   const { blocks = {} } = value;
   const itemsList = (value.blocks_layout?.items || []).map((id) => [
     id,
     blocks[id],
   ]);
 
+  const objectSchema = typeof schema === 'function' ? schema(props) : schema;
+
   return (
-    <FormFieldWrapper {...props} draggable={false} className="panels-widget">
+    <div className="panels-widget">
+      <FormFieldWrapper {...props} noForInFieldLabel draggable={false}>
+        <div className="add-item-button-wrapper">
+          <Button
+            compact
+            icon
+            aria-label={objectSchema.addMessage || `Add ${objectSchema.title}`}
+            onClick={() => {
+              const [newId, newData] = empty();
+              onChange(id, {
+                ...value,
+                blocks: {
+                  ...value.blocks,
+                  [newId]: newData,
+                },
+                blocks_layout: {
+                  ...value.blocks_layout,
+                  items: [...value.blocks_layout?.items, newId],
+                },
+              });
+            }}
+          >
+            <Icon name={addSVG} size="18px" />
+            &nbsp;
+            {/* Custom addMessage in schema, else default to english */}
+            {objectSchema.addMessage || `Add ${objectSchema.title}`}
+          </Button>
+        </div>
+      </FormFieldWrapper>
       <div className="items-area">
         <DragDropList
+          forwardedAriaLabelledBy={`fieldset-${
+            fieldSet || 'default'
+          }-field-label-${id}`}
           childList={itemsList}
           onMoveItem={(result) => {
             const { source, destination } = result;
@@ -53,70 +87,56 @@ const PanelsWidget = (props) => {
           }}
         >
           {(dragProps) => {
-            const { childId, index, draginfo } = dragProps;
+            const { child, childId, index, draginfo } = dragProps;
             return (
-              <div ref={draginfo.innerRef} {...draginfo.draggableProps}>
-                <div style={{ position: 'relative' }}>
-                  <div
+              <div
+                ref={draginfo.innerRef}
+                {...draginfo.draggableProps}
+                key={childId}
+              >
+                <div className="panel-item" style={{ position: 'relative' }}>
+                  <button
                     style={{
                       visibility: 'visible',
                       display: 'inline-block',
                     }}
                     {...draginfo.dragHandleProps}
-                    className="drag handle wrapper"
+                    className="drag handle"
                   >
                     <Icon name={dragSVG} size="18px" />
+                  </button>
+                  <div className="label">
+                    {child.title || `Panel ${index + 1}`}
                   </div>
-                  <div className="item-area">
-                    <div className="label">Panel {index + 1}</div>
-                    {value.blocks_layout?.items?.length > 1 ? (
-                      <button
-                        onClick={() => {
-                          const newFormData = {
-                            ...value,
-                            blocks: omit({ ...value.blocks }, [childId]),
-                            blocks_layout: {
-                              ...value.blocks_layout,
-                              items: without(
-                                [...value.blocks_layout?.items],
-                                childId,
-                              ),
-                            },
-                          };
-                          onChange(id, newFormData);
-                        }}
-                      >
-                        <Icon name={trashSVG} size="18px" />
-                      </button>
-                    ) : (
-                      ''
-                    )}
-                  </div>
+                  {value.blocks_layout?.items?.length > 1 ? (
+                    <button
+                      onClick={() => {
+                        const newFormData = {
+                          ...value,
+                          blocks: omit({ ...value.blocks }, [childId]),
+                          blocks_layout: {
+                            ...value.blocks_layout,
+                            items: without(
+                              [...value.blocks_layout?.items],
+                              childId,
+                            ),
+                          },
+                        };
+                        onChange(id, newFormData);
+                      }}
+                    >
+                      <Icon name={trashSVG} size="18px" color="#e40166" />
+                    </button>
+                  ) : (
+                    ''
+                  )}
                 </div>
               </div>
             );
           }}
         </DragDropList>
-        <button
-          onClick={() => {
-            const [newId, newData] = empty();
-            onChange(id, {
-              ...value,
-              blocks: {
-                ...value.blocks,
-                [newId]: newData,
-              },
-              blocks_layout: {
-                ...value.blocks_layout,
-                items: [...value.blocks_layout?.items, newId],
-              },
-            });
-          }}
-        >
-          <Icon name={plusSVG} size="18px" />
-        </button>
       </div>
-    </FormFieldWrapper>
+    </div>
   );
 };
 

diff --git a/src/components/manage/Widgets/editor.less b/src/components/manage/Widgets/editor.less
@@ -1,6 +1,17 @@
 .panels-widget {
   .items-area {
     padding: 1em 0em;
+    margin-right: 10px;
+    margin-left: 10px;
+
+    .panel-item {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      padding: 12px 9px;
+      border: 1px solid #ddd;
+      background: #f3f4f5;
+    }
 
     [data-rbd-draggable-context-id] {
       margin-bottom: 0.3em;
@@ -9,18 +20,5 @@
     .drag.handle.wrapper {
       min-height: auto;
     }
-
-    .item-area {
-      display: flex;
-
-      .label {
-        flex-grow: 2;
-        padding-left: 1em;
-      }
-
-      button {
-        flex-grow: 0;
-      }
-    }
   }
 }