NEW Add content for 'Add Block' popover widget

client/src/boot/registerComponents.js

@@ -8,6 +8,7 @@ import Header from 'components/ElementEditor/Header';
 import Content from 'components/ElementEditor/Content';
 import Summary from 'components/ElementEditor/Summary';
 import FormBuilder from 'components/ElementEditor/FormBuilder';
+import AddElementPopoverContent from 'components/ElementEditor/AddElementPopoverContent';
 
 export default () => {
   Injector.component.registerMany({
@@ -20,5 +21,6 @@ export default () => {
     ElementContent: Content,
     ElementSummary: Summary,
     ElementFormBuilder: FormBuilder,
+    AddElementPopoverContent,
   });
 };

client/src/components/ElementEditor/AddElementPopoverContent.js

@@ -0,0 +1,60 @@
+/* global window */
+
+import React, { Component, PropTypes } from 'react';
+import { Button } from 'reactstrap';
+import classNames from 'classnames';
+
+/**
+ * The AddElementPopoverContent component used in the context of an ElementEditor shows the
+ * available elements that can be added to an ElementalArea.
+ */
+class AddElementPopoverContent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.renderElementButtons = this.renderElementButtons.bind(this);
+  }
+
+  renderElementButtons() {
+    const { elementTypes } = this.props;
+
+    return elementTypes.map((elementType) =>
+      (
+        <Button
+          className={
+            classNames(
+              elementType.icon,
+              'btn--icon-xl',
+              'element-editor-add-element-content__button'
+            )
+          }
+          key={elementType.ID}
+        >
+          {elementType.title}
+        </Button>
+      )
+    );
+  }
+
+  render() {
+    return (
+      <div className="element-editor-add-element-content">
+        <div className="element-editor-add-element-content__button-container">
+          {this.renderElementButtons()}
+        </div>
+      </div>
+    );
+  }
+}
+AddElementPopoverContent.propTypes = {
+  elementTypes: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    icon: PropTypes.string,
+  })),
+};
+
+AddElementPopoverContent.defaultProps = {
+
+};
+
+export default AddElementPopoverContent;

client/src/components/ElementEditor/AddElementPopoverContent.scss

@@ -0,0 +1,43 @@
+.element-editor-add-element-content {
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+    padding: 16px 20px 20px 20px;
+    box-shadow: $z-depth-1;
+    border-radius: $border-radius-sm;
+    max-height: 500px; // Placeholder, value TBC
+    overflow-y: scroll;
+
+  &__button-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    :nth-child(odd) {
+      margin-right: 10px;
+    }
+    :nth-child(even) {
+      margin-right: 0;
+    }
+  }
+
+  &__button {
+    min-width: calc(100% * (1 / 2) - 5px);
+    padding: 7px 0 7px 2px;
+    text-align: start;
+    margin-bottom: 10px;
+
+    &::before {
+      margin-right: 12px;
+      font-size: 2.3rem;
+
+    }
+  }
+
+  // Adds necessary specificity to override default font-size
+  & &__button::before {
+    font-size: 2.3rem;
+  }
+}
+
+

client/src/components/ElementEditor/ElementEditor.js

@@ -12,7 +12,7 @@ class ElementEditor extends PureComponent {
     return (
       <div className="element-editor">
         <ToolbarComponent elementTypes={elementTypes} baseAddHref={baseAddHref} />
-        <ListComponent pageId={pageId} />
+        <ListComponent elementTypes={elementTypes} pageId={pageId} />
       </div>
     );
   }

client/src/components/ElementEditor/ElementList.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { elementType } from 'types/elementType';
 import { inject } from 'lib/Injector';
+import AddElementPopoverContent from 'components/ElementEditor/AddElementPopoverContent';
 
 class ElementList extends Component {
   /**
@@ -39,10 +40,12 @@ class ElementList extends Component {
   }
 
   render() {
+    const { elementTypes } = this.props;
     return (
       <div className="elemental-editor__list">
         {this.renderLoading()}
         {this.renderBlocks()}
+        <AddElementPopoverContent elementTypes={elementTypes} />
       </div>
     );
   }
@@ -51,6 +54,7 @@ class ElementList extends Component {
 ElementList.propTypes = {
   // @todo support either ElementList or Element children in an array (or both)
   blocks: PropTypes.arrayOf(elementType),
+  elementTypes: PropTypes.array.isRequired,
   loading: PropTypes.bool,
 };
 

client/src/styles/bundle.scss

@@ -17,3 +17,4 @@
 @import "../components/ElementEditor/ElementList";
 @import "../components/ElementEditor/AddNewButton";
 @import "../components/ElementEditor/Toolbar";
+@import "../components/ElementEditor/AddElementPopoverContent";

src/Forms/ElementalAreaField.php

@@ -5,6 +5,7 @@
 use DNADesign\Elemental\Models\BaseElement;
 use DNADesign\Elemental\Models\ElementalArea;
 use SilverStripe\Control\Controller;
+use SilverStripe\Core\Config\Config;
 use SilverStripe\Core\Injector\Injector;
 use SilverStripe\Forms\CompositeField;
 use SilverStripe\Forms\FieldGroup;
@@ -118,6 +119,7 @@ public function getSchemaDataDefaults()
             $blockTypes[] = [
                 'value' => str_replace('\\', '-', $className),
                 'title' => $blockTitle,
+                'icon' => Config::inst()->get($className, 'icon'),
             ];
         }