Merge pull request #15 from eea/develop

Added BlockToolbar for copy/paste inside a column + style editwrapper toolbar
eea · Mar 23, 2021 · 529da7d · 529da7d
2 parents e7c652e + ffd916a
commit 529da7d
Show file tree

Hide file tree

Showing 3 changed files with 192 additions and 35 deletions.
diff --git a/src/ColumnsBlock/ColumnsBlockEdit.jsx b/src/ColumnsBlock/ColumnsBlockEdit.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
 import { Grid, Segment } from 'semantic-ui-react';
-import { isEmpty } from 'lodash';
-import { SidebarPortal, Icon } from '@plone/volto/components'; // BlocksForm, Icon,
+import { isEmpty, without } from 'lodash';
+import { SidebarPortal, BlocksToolbar, Icon } from '@plone/volto/components'; // BlocksForm, Icon,
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
-import { emptyBlocksForm } from '@plone/volto/helpers';
+import {
+  emptyBlocksForm,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
 import { setSidebarTab } from '@plone/volto/actions';
 import { connect } from 'react-redux';
 import { BlocksForm } from '@plone/volto/components';
@@ -26,7 +29,7 @@ import { COLUMNSBLOCK } from '@eeacms/volto-columns-block/constants';
 import { variants } from '@eeacms/volto-columns-block/grid';
 import { makeStyleSchema, getStyle } from '@eeacms/volto-columns-block/Styles';
 
-import tuneSVG from '@plone/volto/icons/tune.svg';
+import tuneSVG from '@plone/volto/icons/configuration.svg';
 import upSVG from '@plone/volto/icons/up.svg';
 
 import './styles.less';
@@ -44,6 +47,7 @@ class ColumnsBlockEdit extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
+      multiSelected: [],
       colSelections: {}, // selected block for each column
       showSidebar: false,
       activeColumn: null,
@@ -82,6 +86,32 @@ class ColumnsBlockEdit extends React.Component {
     };
   };
 
+  handleKeyDown = (
+    e,
+    index,
+    block,
+    node,
+    {
+      disableEnter = false,
+      disableArrowUp = false,
+      disableArrowDown = false,
+    } = {},
+  ) => {
+    const hasblockActive = Object.keys(this.state.colSelections).length > 0;
+    if (e.key === 'ArrowUp' && !disableArrowUp && !hasblockActive) {
+      this.props.onFocusPreviousBlock(block, node);
+      e.preventDefault();
+    }
+    if (e.key === 'ArrowDown' && !disableArrowDown && !hasblockActive) {
+      this.props.onFocusNextBlock(block, node);
+      e.preventDefault();
+    }
+    if (e.key === 'Enter' && !disableEnter && !hasblockActive) {
+      this.props.onAddBlock(config.settings.defaultBlockType, index + 1);
+      e.preventDefault();
+    }
+  };
+
   onChangeColumnSettings = (id, value) => {
     const { data, onChangeBlock, block } = this.props;
     const coldata = data.data;
@@ -128,6 +158,58 @@ class ColumnsBlockEdit extends React.Component {
     }
   };
 
+  onSelectBlock = (
+    id,
+    colId,
+    colData,
+    activeBlock,
+    isMultipleSelection,
+    event,
+  ) => {
+    let newMultiSelected = [];
+    let selected = id;
+
+    if (isMultipleSelection) {
+      selected = null;
+      const blocksLayoutFieldname = getBlocksLayoutFieldname(colData);
+
+      const blocks_layout = colData[blocksLayoutFieldname].items;
+
+      if (event.shiftKey) {
+        const anchor =
+          this.state.multiSelected.length > 0
+            ? blocks_layout.indexOf(this.state.multiSelected[0])
+            : blocks_layout.indexOf(activeBlock);
+        const focus = blocks_layout.indexOf(id);
+
+        if (anchor === focus) {
+          newMultiSelected = [id];
+        } else if (focus > anchor) {
+          newMultiSelected = [...blocks_layout.slice(anchor, focus + 1)];
+        } else {
+          newMultiSelected = [...blocks_layout.slice(focus, anchor + 1)];
+        }
+      }
+
+      if ((event.ctrlKey || event.metaKey) && !event.shiftKey) {
+        if (this.state.multiSelected.includes(id)) {
+          selected = null;
+          newMultiSelected = without(this.state.multiSelected, id);
+        } else {
+          newMultiSelected = [...(this.state.multiSelected || []), id];
+        }
+      }
+    }
+
+    this.setState({
+      multiSelected: newMultiSelected,
+      colSelections: {
+        // this invalidates selection in all other columns
+        [colId]: selected,
+      },
+    });
+  };
+
   getColumnsBlockSchema = () => {
     const schema = ColumnsBlockSchema();
     const { data } = this.props;
@@ -200,6 +282,12 @@ class ColumnsBlockEdit extends React.Component {
     const { gridCols, gridSize } = data;
     const coldata = data.data;
     const columnList = getColumns(coldata);
+    const selectedCol =
+      Object.keys(this.state.colSelections).length > 0
+        ? Object.keys(this.state.colSelections)[0]
+        : null;
+    const selectedColData = coldata?.blocks?.[selectedCol] || null;
+    const selectedBlock = this.state.colSelections[selectedCol];
 
     const {
       gridSizes,
@@ -208,15 +296,23 @@ class ColumnsBlockEdit extends React.Component {
     } = config.blocks.blocksConfig[COLUMNSBLOCK];
     const ColumnSchema = makeStyleSchema({ available_colors });
 
-    // TODO: we have blockHasOwnFocusManagement, so we need to implement this:
-    // onKeyDown={(e) => {
-    //   if (e.key === 'Enter') {
-    //     this.onAddBlock(settings.defaultBlockType, index + 1);
-    //     e.preventDefault();
-    //   }
-    // }}
     return (
-      <div role="presentation" className="columns-block">
+      <div
+        role="presentation"
+        className="columns-block"
+        onClick={() => this.props.onSelectBlock(this.props.id)}
+        onKeyDown={(e) => {
+          this.handleKeyDown(
+            e,
+            this.props.index,
+            this.props.block,
+            this.props.blockNode.current,
+          );
+        }}
+        // The tabIndex is required for the keyboard navigation
+        /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+        tabIndex={-1}
+      >
         {data.coldata ? 'old style columns block, safe to remove it' : ''}
         {!data?.data ? (
           <ColumnVariations
@@ -250,14 +346,21 @@ class ColumnsBlockEdit extends React.Component {
                   selectedBlock={
                     selected ? this.state.colSelections[colId] : null
                   }
-                  onSelectBlock={(id) =>
-                    this.setState({
-                      colSelections: {
-                        // this invalidates selection in all other columns
-                        [colId]: id,
-                      },
-                    })
-                  }
+                  onSelectBlock={(id, selected, e) => {
+                    const isMultipleSelection = e
+                      ? e.shiftKey || e.ctrlKey || e.metaKey
+                      : false;
+                    this.onSelectBlock(
+                      id,
+                      colId,
+                      selectedColData,
+                      selectedBlock,
+                      selectedCol !== colId || selectedBlock === id
+                        ? false
+                        : isMultipleSelection,
+                      e,
+                    );
+                  }}
                   onChangeFormData={(newFormData) => {
                     onChangeBlock(block, {
                       ...data,
@@ -300,6 +403,9 @@ class ColumnsBlockEdit extends React.Component {
                           )}
                         </>
                       }
+                      multiSelected={this.state.multiSelected.includes(
+                        blockProps.block,
+                      )}
                     >
                       {editBlock}
                     </EditBlockWrapper>
@@ -310,9 +416,35 @@ class ColumnsBlockEdit extends React.Component {
           </Grid>
         )}
 
+        {selected && selectedColData ? (
+          <BlocksToolbar
+            formData={selectedColData}
+            selectedBlock={selectedBlock}
+            selectedBlocks={this.state.multiSelected}
+            onChangeBlocks={(newBlockData) => {
+              onChangeBlock(block, {
+                ...data,
+                data: {
+                  ...coldata,
+                  blocks: {
+                    ...coldata.blocks,
+                    [selectedCol]: { ...selectedColData, ...newBlockData },
+                  },
+                },
+              });
+            }}
+            onSetSelectedBlocks={(blockIds) => {
+              this.setState({ multiSelected: blockIds });
+            }}
+            onSelectBlock={this.onSelectBlock}
+          />
+        ) : (
+          ''
+        )}
+
         {Object.keys(this.state.colSelections).length === 0 &&
         !data?.readOnlySettings ? (
-          <SidebarPortal selected={true}>
+          <SidebarPortal selected={selected}>
             {this.state.activeColumn ? (
               <>
                 <Segment>

diff --git a/src/ColumnsBlock/EditBlockWrapper.jsx b/src/ColumnsBlock/EditBlockWrapper.jsx
@@ -7,6 +7,7 @@ import includes from 'lodash/includes';
 import isBoolean from 'lodash/isBoolean';
 import { defineMessages, injectIntl } from 'react-intl';
 import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
+import cx from 'classnames';
 
 import dragSVG from '@plone/volto/icons/drag.svg';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
@@ -148,7 +149,13 @@ class EditBlockWrapper extends React.Component {
             </div>
           )}
 
-          <div className={`ui drag block inner ${type}`}>{children}</div>
+          <div
+            className={cx('ui drag block wrapper inner', type, {
+              multiSelected: this.props.multiSelected,
+            })}
+          >
+            {children}
+          </div>
         </div>
       </div>
     );

diff --git a/src/ColumnsBlock/styles.less b/src/ColumnsBlock/styles.less
@@ -41,19 +41,21 @@
 
     .block {
       margin-bottom: 1.5em;
+
+      .block.selected::before {
+        border-top-left-radius: 0;
+      }
+
+      .block-add-button {
+        display: none;
+      }
     }
 
     // .block.selected {
     //   border: 1px solid #826A6A;
     //   padding: 0.3em 0.5em;
     //   border-radius: 2px;
     // }
-
-    .block {
-      .block-add-button {
-        display: none;
-      }
-    }
   }
 
   a.ui.card,
@@ -88,6 +90,22 @@
   [data-rbd-draggable-context-id] {
     margin-bottom: 0.3em;
   }
+
+  .block.wrapper.multiSelected {
+    .block .block::before {
+      z-index: 1;
+      background-color: rgba(120, 192, 215, 0.375);
+    }
+  }
+
+  .delete-button {
+    display: none !important;
+  }
+
+  .blocks-chooser {
+    left: 0;
+    margin-top: 50px;
+  }
 }
 
 .columns-view {
@@ -108,15 +126,15 @@
 
 .block-toolbar {
   position: absolute;
-  z-index: 2;
-  left: 0px;
+  z-index: 3;
+  left: -9px;
   display: flex;
+  padding: 5px;
   border: none;
-  margin-top: -34px;
-  margin-bottom: 8px;
-  background-color: #8dd7ef;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  border: 1px solid #78c0d7bf;
+  border-bottom: 1px solid #fff;
+  margin-top: -45px;
+  background-color: #fff;
 
   .ui.basic.button {
     padding: 3px;