Merge pull request #443 from creative-commoners/pulls/4.0/transmutation

Pulls/4.0/transmutation
silverstripe · Oct 16, 2018 · f7a4c73 · f7a4c73
2 parents cd60cf4 + a280eca
commit f7a4c73
Show file tree

Hide file tree

Showing 24 changed files with 205 additions and 95 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/boot/registerTransforms.js b/client/src/boot/registerTransforms.js
@@ -3,6 +3,7 @@ import readOneBlockQuery from 'state/history/readOneBlockQuery';
 import HistoricElementViewFactory from 'components/HistoricElementView/HistoricElementView';
 import revertToBlockVersionMutation from 'state/history/revertToBlockVersionMutation';
 import readBlocksForPageQuery from 'state/editor/readBlocksForPageQuery';
+import addElementToArea from 'state/editor/addElementMutation';
 import ArchiveAction from 'components/ElementActions/ArchiveAction';
 import PublishAction from 'components/ElementActions/PublishAction';
 import SaveAction from 'components/ElementActions/SaveAction';
@@ -59,6 +60,18 @@ export default () => {
     }
   );
 
+  Injector.transform(
+    'cms-element-adder',
+    (updater) => {
+      // Add GraphQL query for adding elements to an ElementEditor (ElementalArea)
+      updater.component(
+        'AddElementPopover',
+        addElementToArea,
+        'ElementAddButton'
+      );
+    }
+  );
+
   // Add elemental editor actions
   Injector.transform('element-actions', (updater) => {
     updater.component('ElementActions', SaveAction, 'ElementActionsWithSave');

diff --git a/client/src/components/ElementEditor/AddElementPopover.js b/client/src/components/ElementEditor/AddElementPopover.js
@@ -17,12 +17,45 @@ class AddElementPopover extends Component {
     this.handleSearchValueChange = this.handleSearchValueChange.bind(this);
     this.handleClear = this.handleClear.bind(this);
     this.handleToggle = this.handleToggle.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.getElementButtonClickHandler = this.getElementButtonClickHandler.bind(this);
 
     this.state = {
       searchValue: ''
     };
   }
 
+  /**
+   * click handler that preserves the details of what was clicked
+   * @param {object} elementType in the shape of types/elmementTypeType
+   * @returns {function}
+   */
+  getElementButtonClickHandler(elementType) {
+    return (event) => {
+      const {
+        actions: { handleAddElementToArea },
+        elementalAreaId,
+        insertAfterElement
+      } = this.props;
+
+      event.preventDefault();
+      handleAddElementToArea(elementType.name.replace(/-/g, '\\'), elementalAreaId, insertAfterElement);
+      this.handleToggle();
+    };
+  }
+
+  /**
+   * Allow closure via `esc` from within popover
+   */
+  handleKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        this.handleToggle();
+        break;
+      default:
+    }
+  }
+
   /**
    * Pass toggle to parent and clear the search input
    */
@@ -81,7 +114,7 @@ class AddElementPopover extends Component {
    * @returns {DOMElement}
    */
   renderElementButtons() {
-    const { baseAddHref } = this.props;
+    const { elementalAreaId } = this.props;
     let { elementTypes } = this.props;
     const { searchValue } = this.state;
 
@@ -110,8 +143,9 @@ class AddElementPopover extends Component {
             )
           }
           key={elementType.name}
-          href={`${baseAddHref}/${elementType.name}`}
-          onClick={this.handleToggle}
+          name={elementType.name}
+          onClick={this.getElementButtonClickHandler(elementType)}
+          elementalAreaId={elementalAreaId}
         >
           {elementType.title}
         </Button>
@@ -152,6 +186,7 @@ class AddElementPopover extends Component {
         placement={placement}
         target={target}
         toggle={this.handleToggle}
+        onKeyDown={this.handleKeyDown}
       >
         <InputGroup className="element-editor-add-element__search">
           <Input
@@ -172,14 +207,15 @@ class AddElementPopover extends Component {
 }
 
 AddElementPopover.propTypes = {
-  baseAddHref: PropTypes.string.isRequired,
   container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]),
   elementTypes: PropTypes.arrayOf(elementTypeType),
   extraClass: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
   isOpen: PropTypes.bool.isRequired,
   placement: PropTypes.string,
   target: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.object]).isRequired,
   toggle: PropTypes.func.isRequired,
+  elementalAreaId: PropTypes.number.isRequired,
+  insertAfterElement: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 export default 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,9 +26,9 @@ class AddNewButton extends Component {
    * @returns {DOMElement}
    */
   render() {
-    const { AddElementPopoverComponent, elementTypes, baseAddHref } = this.props;
+    const { AddElementPopoverComponent, elementTypes, elementalAreaId } = this.props;
     const buttonAttributes = {
-      id: 'AddButton',
+      id: `ElementalArea${elementalAreaId}_AddButton`,
       color: 'primary',
       onClick: this.toggle
     };
@@ -43,8 +43,9 @@ class AddNewButton extends Component {
           target={buttonAttributes.id}
           isOpen={this.state.popoverOpen}
           elementTypes={elementTypes}
-          baseAddHref={baseAddHref}
           toggle={this.toggle}
+          elementalAreaId={elementalAreaId}
+          insertAfterElement={0}
         />
       </div>
     );
@@ -53,8 +54,8 @@ class AddNewButton extends Component {
 
 AddNewButton.defaultProps = {};
 AddNewButton.propTypes = {
-  baseAddHref: PropTypes.string.isRequired, // temp until elements can be added inline
   elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
+  elementalAreaId: PropTypes.number.isRequired,
 };
 
 export { AddNewButton as Component };

diff --git a/client/src/components/ElementEditor/Content.js b/client/src/components/ElementEditor/Content.js
@@ -17,7 +17,7 @@ class Content extends PureComponent {
 
     return (
       <div className="element-editor-content">
-        {!previewExpanded && (content || fileUrl) &&
+        {!previewExpanded &&
           // Show summary
           <SummaryComponent
             content={content}

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
@@ -12,14 +12,26 @@ import { loadElementFormStateName } from 'state/editor/loadElementFormStateName'
 class ElementEditor extends PureComponent {
   render() {
     const {
-      ToolbarComponent, ListComponent,
-      fieldName, pageId, elementTypes, baseAddHref, formState,
+      fieldName,
+      formState,
+      ToolbarComponent,
+      ListComponent,
+      pageId,
+      elementalAreaId,
+      elementTypes,
     } = this.props;
 
     return (
       <div className="element-editor">
-        <ToolbarComponent elementTypes={elementTypes} baseAddHref={baseAddHref} />
-        <ListComponent elementTypes={elementTypes} pageId={pageId} baseAddHref={baseAddHref} />
+        <ToolbarComponent
+          elementTypes={elementTypes}
+          elementalAreaId={elementalAreaId}
+        />
+        <ListComponent
+          elementTypes={elementTypes}
+          pageId={pageId}
+          elementalAreaId={elementalAreaId}
+        />
         <input name={fieldName} type="hidden" value={JSON.stringify(formState)} />
       </div>
     );
@@ -30,7 +42,7 @@ ElementEditor.propTypes = {
   fieldName: PropTypes.string,
   elementTypes: PropTypes.arrayOf(elementTypeType).isRequired,
   pageId: PropTypes.number.isRequired,
-  baseAddHref: PropTypes.string.isRequired,
+  elementalAreaId: PropTypes.number.isRequired,
 };
 
 ElementEditor.defaultProps = {};

diff --git a/client/src/components/ElementEditor/ElementList.js b/client/src/components/ElementEditor/ElementList.js
@@ -33,9 +33,8 @@ class ElementList extends Component {
       ElementComponent,
       HoverBarComponent,
       blocks,
-      pageId,
       elementTypes,
-      baseAddHref
+      elementalAreaId,
     } = this.props;
 
     // Blocks can be either null or an empty array
@@ -51,12 +50,11 @@ 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}
         />
@@ -98,7 +96,7 @@ ElementList.propTypes = {
   // @todo support either ElementList or Element children in an array (or both)
   blocks: PropTypes.arrayOf(elementType),
   loading: PropTypes.bool,
-  baseAddHref: PropTypes.string.isRequired,
+  elementalAreaId: PropTypes.number.isRequired,
 };
 
 ElementList.defaultProps = {

diff --git a/client/src/components/ElementEditor/Header.js b/client/src/components/ElementEditor/Header.js
@@ -67,6 +67,11 @@ class Header extends Component {
       ElementActionsComponent,
     } = this.props;
 
+    const noTitle = i18n.inject(i18n._t('ElementHeader.NOTITLE', 'Untitled {type} block'), { type: elementType });
+    const titleClasses = classNames({
+      'element-editor-header__title': true,
+      'element-editor-header__title--none': !title,
+    });
     const expandTitle = i18n._t('ElementHeader.EXPAND', 'Show editable fields');
     const expandCaretClasses = classNames(
       'element-editor-header__expand',
@@ -92,20 +97,19 @@ class Header extends Component {
               {elementType}
             </Tooltip>
           </div>
-          <h3 className="element-editor-header__title">{title}</h3>
+          <h3 className={titleClasses}>{title || noTitle}</h3>
         </div>
         <div
           className="element-editor-header__actions"
 
         >
           {expandable &&
-          <div
-            role="none"
-            onClick={(event) => event.stopPropagation()
-            }
-          >
-            <ElementActionsComponent {...this.props} />
-          </div>
+            <div
+              role="none"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <ElementActionsComponent {...this.props} />
+            </div>
           }
           <i className={expandCaretClasses} title={expandTitle} />
         </div>

diff --git a/client/src/components/ElementEditor/Header.scss b/client/src/components/ElementEditor/Header.scss
@@ -11,6 +11,11 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &--none {
+      font-style: italic;
+      color: lighten($body-color, 20);
+    }
   }
 
   &__info,
@@ -47,10 +52,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;