Connect mutation to add blocks to relevant UI elements

As part of inline editing for Elemental it has previously been only possible to edit existing elements. Now it is possible to add new ones to the relevant list for the pop over - both the add button above the list, or the in-between button that pops up on hovering the area close to the junction between two elements in the list. For this work it was necessary to expose the ID of the elemental area they belong to, in order to ensure elements are added to it as children. There have been a few scss linting issues tidied up also.
silverstripe · Oct 15, 2018 · d6d66be · d6d66be
1 parent 13836aa
commit d6d66be
Show file tree

Hide file tree

Showing 18 changed files with 124 additions and 71 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/dist/styles/bundle.css b/client/dist/styles/bundle.css
diff --git a/client/src/components/ElementEditor/AddElementPopover.js b/client/src/components/ElementEditor/AddElementPopover.js
@@ -3,6 +3,7 @@ import { Button, Input, InputGroup, InputGroupAddon, Popover } from 'reactstrap'
 import classNames from 'classnames';
 import { elementTypeType } from 'types/elementTypeType';
 import i18n from 'i18n';
+import addElementMutation from 'state/editor/addElementMutation';
 
 /**
  * The AddElementPopover component used in the context of an ElementEditor shows the
@@ -23,6 +24,19 @@ class AddElementPopover extends Component {
     };
   }
 
+  /**
+   * click handler that preserves the details of what was clicked
+   */
+  getElementButtonClickHandler(elementType) {
+    return (event) => {
+      const { actions: { handleAddBlock }, elementalAreaId, insertAfterElement } = this.props;
+      event.preventDefault();
+      handleAddBlock(elementType.name.replace(/-/g, '\\'), elementalAreaId, insertAfterElement);
+      this.handleToggle();
+      event.stopPropagation();
+    };
+  }
+
   /**
    * Pass toggle to parent and clear the search input
    */
@@ -81,7 +95,7 @@ class AddElementPopover extends Component {
    * @returns {DOMElement}
    */
   renderElementButtons() {
-    const { baseAddHref } = this.props;
+    const { baseAddHref, elementalAreaId } = this.props;
     let { elementTypes } = this.props;
     const { searchValue } = this.state;
 
@@ -110,8 +124,10 @@ class AddElementPopover extends Component {
             )
           }
           key={elementType.name}
+          name={elementType.name}
           href={`${baseAddHref}/${elementType.name}`}
-          onClick={this.handleToggle}
+          onClick={this.getElementButtonClickHandler(elementType)}
+          elementalAreaId={elementalAreaId}
         >
           {elementType.title}
         </Button>
@@ -180,6 +196,10 @@ AddElementPopover.propTypes = {
   placement: PropTypes.string,
   target: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]).isRequired,
   toggle: PropTypes.func.isRequired,
+  elementalAreaId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  insertAfterElement: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
-export default AddElementPopover;
+export { AddElementPopover as Component };
+
+export default addElementMutation(AddElementPopover);
diff --git a/client/src/components/ElementEditor/AddElementPopover.scss b/client/src/components/ElementEditor/AddElementPopover.scss
@@ -23,9 +23,11 @@
     :nth-child(odd) {
       margin-right: $panel-padding-x/2;
     }
+
     :nth-child(even) {
       margin-right: 0;
     }
+
     :nth-last-child(-n+2) {
       margin-bottom: 0;
     }
@@ -44,7 +46,7 @@
     padding: $panel-padding-x/2;
     text-align: start;
     margin-bottom: 4px;
-    border: 0px;
+    border: 0;
     max-height: 40px;
   }
 
@@ -64,7 +66,7 @@
       &:hover,
       &:active {
         box-shadow: none;
-        border: none;
+        border: 0;
         border-bottom: 1px solid $border-color-light;
         border-radius: 0;
         outline: none;
@@ -85,7 +87,7 @@
   }
 
   &__inline {
-    z-index:1;
+    z-index: 1;
   }
 }
 

diff --git a/client/src/components/ElementEditor/AddNewButton.js b/client/src/components/ElementEditor/AddNewButton.js
@@ -26,7 +26,7 @@ class AddNewButton extends Component {
    * @returns {DOMElement}
    */
   render() {
-    const { AddElementPopoverComponent, elementTypes, baseAddHref } = this.props;
+    const { AddElementPopoverComponent, elementTypes, baseAddHref, elementalAreaId } = this.props;
     const buttonAttributes = {
       id: 'AddButton',
       color: 'primary',
@@ -45,6 +45,7 @@ class AddNewButton extends Component {
           elementTypes={elementTypes}
           baseAddHref={baseAddHref}
           toggle={this.toggle}
+          elementalAreaId={elementalAreaId}
         />
       </div>
     );
@@ -55,6 +56,7 @@ AddNewButton.defaultProps = {};
 AddNewButton.propTypes = {
   baseAddHref: PropTypes.string.isRequired, // temp until elements can be added inline
   elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
+  elementalAreaId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 };
 
 export { AddNewButton as Component };

diff --git a/client/src/components/ElementEditor/Element.js b/client/src/components/ElementEditor/Element.js
@@ -144,8 +144,7 @@ class Element extends Component {
       ContentComponent,
       link,
       editTabs,
-      pageId,
-      activeTab
+      activeTab,
     } = this.props;
 
     const { previewExpanded } = this.state;
@@ -187,7 +186,6 @@ class Element extends Component {
           elementType={element.BlockSchema.type}
           fontIcon={element.BlockSchema.iconClass}
           link={link}
-          pageId={pageId}
           editTabs={editTabs}
           previewExpanded={previewExpanded}
           expandable={element.InlineEditable}

diff --git a/client/src/components/ElementEditor/ElementEditor.js b/client/src/components/ElementEditor/ElementEditor.js
@@ -8,12 +8,28 @@ import { elementTypeType } from 'types/elementTypeType';
  */
 class ElementEditor extends PureComponent {
   render() {
-    const { ToolbarComponent, ListComponent, pageId, elementTypes, baseAddHref } = this.props;
+    const {
+      ToolbarComponent,
+      ListComponent,
+      pageId,
+      elementalAreaId,
+      elementTypes,
+      baseAddHref,
+    } = this.props;
 
     return (
       <div className="element-editor">
-        <ToolbarComponent elementTypes={elementTypes} baseAddHref={baseAddHref} />
-        <ListComponent elementTypes={elementTypes} pageId={pageId} baseAddHref={baseAddHref} />
+        <ToolbarComponent
+          elementTypes={elementTypes}
+          baseAddHref={baseAddHref}
+          elementalAreaId={elementalAreaId}
+        />
+        <ListComponent
+          elementTypes={elementTypes}
+          pageId={pageId}
+          baseAddHref={baseAddHref}
+          elementalAreaId={elementalAreaId}
+        />
       </div>
     );
   }
@@ -22,6 +38,7 @@ class ElementEditor extends PureComponent {
 ElementEditor.propTypes = {
   elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
   pageId: PropTypes.number.isRequired,
+  elementalAreaId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   baseAddHref: PropTypes.string.isRequired,
 };
 

diff --git a/client/src/components/ElementEditor/ElementList.js b/client/src/components/ElementEditor/ElementList.js
@@ -33,9 +33,9 @@ class ElementList extends Component {
       ElementComponent,
       HoverBarComponent,
       blocks,
-      pageId,
       elementTypes,
-      baseAddHref
+      baseAddHref,
+      elementalAreaId,
     } = this.props;
 
     // Blocks can be either null or an empty array
@@ -51,12 +51,12 @@ class ElementList extends Component {
       <div key={element.ID}>
         <ElementComponent
           element={element}
-          pageId={pageId}
           editTabs={this.getEditTabs(element)}
           link={element.BlockSchema.actions.edit}
         />
         <HoverBarComponent
           baseAddHref={baseAddHref}
+          elementalAreaId={elementalAreaId}
           elementId={element.ID}
           elementTypes={elementTypes}
         />
@@ -99,6 +99,7 @@ ElementList.propTypes = {
   blocks: PropTypes.arrayOf(elementType),
   loading: PropTypes.bool,
   baseAddHref: PropTypes.string.isRequired,
+  elementalAreaId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
 };
 
 ElementList.defaultProps = {

diff --git a/client/src/components/ElementEditor/Header.scss b/client/src/components/ElementEditor/Header.scss
@@ -47,10 +47,6 @@
     width: unset;
   }
 
-  &__version-state {
-    box-shadow: $gallery-item-shadow;
-  }
-
   // Draft/modified state icons copied from asset-admin - see GalleryItem.scss
   &__version-state {
     border: 1px solid $state-draft;

diff --git a/client/src/components/ElementEditor/HoverBar.js b/client/src/components/ElementEditor/HoverBar.js
@@ -55,7 +55,8 @@ class HoverBar extends Component {
       this.setState({
         timeoutRef,
       });
-    } else { // mouse entered within 'instantaneous' hover area
+    } else {
+      // mouse entered within 'instantaneous' hover area
       this.setState({
         instAreaActive: true,
       });
@@ -69,15 +70,14 @@ class HoverBar extends Component {
    *
    */
   handleMouseLeave() {
-     clearTimeout(this.state.timeoutRef);
+    clearTimeout(this.state.timeoutRef);
 
-      if (this.state.popoverOpen) {
-        return;
-      }
-      this.setState({ delayAreaActive: false, instAreaActive: false });
+    if (this.state.popoverOpen) {
+      return;
+    }
+    this.setState({ delayAreaActive: false, instAreaActive: false });
   }
 
-
   toggle() {
     this.setState({
       popoverOpen: !this.state.popoverOpen
@@ -97,7 +97,7 @@ class HoverBar extends Component {
       'element-editor__add-block-hover-bar',
       {
         'element-editor__add-block-hover-bar--delay': !calledInstantaneously,
-        'element-editor__add-block-hover-bar--inst': calledInstantaneously,
+        'element-editor__add-block-hover-bar--inst': calledInstantaneously
       }
     );
 
@@ -117,52 +117,58 @@ class HoverBar extends Component {
    * @returns {DOMElement}
    */
   render() {
-    const { AddElementPopoverComponent, elementTypes, baseAddHref, elementId } = this.props;
+    const {
+      AddElementPopoverComponent,
+      elementTypes,
+      baseAddHref,
+      elementId,
+      elementalAreaId
+    } = this.props;
     const { popoverOpen } = this.state;
 
-   return (
-     <div className="element-editor__add-block-area-container" id={`AddBlockArea_${elementId}`}>
-       <div
-         className="element-editor__add-block-area"
-         onMouseEnter={this.handleMouseEnter}
-         onMouseLeave={this.handleMouseLeave}
-       >
-
-         {/* render the hover bar in the corresponding style */}
-         {
-            (this.state.delayAreaActive && this.renderHoverBar(false)) ||
-            (this.state.instAreaActive && this.renderHoverBar(true))
-          }
-
-         {/* render the popover */}
-         {(this.state.delayAreaActive || this.state.instAreaActive) &&
-         <AddElementPopoverComponent
-           placement="bottom-end"
-           target={`AddBlockHoverBar_${elementId}`}
-           isOpen={popoverOpen}
-           elementTypes={elementTypes}
-           baseAddHref={baseAddHref}
-           toggle={this.toggle}
-           container={`#AddBlockArea_${elementId}`}
-         />
-          }
-       </div>
-     </div>
+    return (
+      <div className="element-editor__add-block-area-container" id={`AddBlockArea_${elementId}`}>
+        <div
+          className="element-editor__add-block-area"
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
+          {/* render the hover bar in the corresponding style */}
+          {(this.state.delayAreaActive && this.renderHoverBar(false)) ||
+            (this.state.instAreaActive && this.renderHoverBar(true))}
+
+          {/* render the popover */}
+          {(this.state.delayAreaActive || this.state.instAreaActive) && (
+            <AddElementPopoverComponent
+              placement="bottom-end"
+              target={`AddBlockHoverBar_${elementId}`}
+              isOpen={popoverOpen}
+              elementTypes={elementTypes}
+              baseAddHref={baseAddHref}
+              toggle={this.toggle}
+              container={`#AddBlockArea_${elementId}`}
+              elementalAreaId={elementalAreaId}
+              insertAfterElement={elementId}
+            />
+          )}
+        </div>
+      </div>
     );
   }
 }
 
 HoverBar.propTypes = {
   baseAddHref: PropTypes.string.isRequired,
   elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
-  elementId: PropTypes.string.isRequired,
+  elementId: PropTypes.number.isRequired,
+  elementalAreaId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired
 };
 export { HoverBar as Component };
 
 export default inject(
   ['AddElementPopover'],
-  (AddElementPopoverComponent) => ({
-    AddElementPopoverComponent,
+  AddElementPopoverComponent => ({
+    AddElementPopoverComponent
   }),
   () => 'ElementEditor.ElementList.HoverBar'
 )(HoverBar);
diff --git a/client/src/components/ElementEditor/HoverBar.scss b/client/src/components/ElementEditor/HoverBar.scss
@@ -21,7 +21,7 @@
   align-self: center;
   width: 100%;
   -webkit-appearance: button;
-  border: none;
+  border: 0;
   position: absolute;
   display: flex;
   justify-content: flex-end;

diff --git a/client/src/components/ElementEditor/Summary.scss b/client/src/components/ElementEditor/Summary.scss
@@ -9,6 +9,7 @@
     height: 36px;
     margin: (-$spacer-xs * 0.8) $spacer-sm (-$spacer-xs * 0.8) 0;
   }
+
   &__content {
     color: $gray-600;
     line-height: 1.3; // Help ensure the container element height is around 102px
@@ -17,5 +18,4 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
 }