Merge 71db4bb into a6b0b82

plone · Jul 24, 2018 · 402856c · 402856c
2 parents a6b0b82 + 71db4bb
commit 402856c
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 60 deletions.
diff --git a/src/components/manage/Tiles/Text/Edit.jsx b/src/components/manage/Tiles/Text/Edit.jsx
@@ -14,8 +14,9 @@ import { defineMessages, injectIntl, intlShape } from 'react-intl';
 import { isEqual } from 'lodash';
 
 import {
-  extendedBlockRenderMap,
   blockStyleFn,
+  customTiles,
+  extendedBlockRenderMap,
   inlineToolbarButtons,
   plugins,
 } from '~/config';
@@ -85,6 +86,7 @@ export default class Edit extends Component {
         editorState,
         inlineToolbarPlugin,
         addNewTileOpened: false,
+        customTilesOpened: false,
       };
     }
 
@@ -156,9 +158,14 @@ export default class Edit extends Component {
 
   handleClickOutside = e => {
     if (this.ref && doesNodeContainClick(this.ref, e)) return;
-    this.setState(() => ({ addNewTileOpened: false }));
+    this.setState(() => ({
+      addNewTileOpened: false,
+      customTilesOpened: false,
+    }));
   };
 
+  openCustomTileMenu = () => this.setState(() => ({ customTilesOpened: true }));
+
   /**
    * Render method.
    * @method render
@@ -231,42 +238,65 @@ export default class Edit extends Component {
             <Icon name={addSVG} className="tile-add-button" size="24px" />
           </Button>
         )}
-        {this.state.addNewTileOpened && (
-          <div className="add-tile toolbar">
-            <Button.Group>
-              <Button
-                icon
-                basic
-                onClick={this.props.onChangeTile.bind(this, this.props.tile, {
-                  '@type': 'image',
-                })}
-              >
-                <Icon name={cameraSVG} size="24px" />
-              </Button>
-            </Button.Group>
-            <Button.Group>
-              <Button
-                icon
-                basic
-                onClick={this.props.onChangeTile.bind(this, this.props.tile, {
-                  '@type': 'video',
-                })}
-              >
-                <Icon name={videoSVG} size="24px" />
-              </Button>
-            </Button.Group>
-            <div className="separator" />
-            <Button.Group>
-              <Button
-                icon
-                basic
-                onClick={this.props.onAddTile.bind(this, 'templatedtiles')}
-              >
-                <Icon name={TemplatedTilesSVG} size="24px" />
-              </Button>
-            </Button.Group>
-          </div>
-        )}
+        {this.state.addNewTileOpened &&
+          !this.state.customTilesOpened && (
+            <div className="add-tile toolbar">
+              <Button.Group>
+                <Button
+                  icon
+                  basic
+                  onClick={this.props.onChangeTile.bind(this, this.props.tile, {
+                    '@type': 'image',
+                  })}
+                >
+                  <Icon name={cameraSVG} size="24px" />
+                </Button>
+              </Button.Group>
+              <Button.Group>
+                <Button
+                  icon
+                  basic
+                  onClick={this.props.onChangeTile.bind(this, this.props.tile, {
+                    '@type': 'video',
+                  })}
+                >
+                  <Icon name={videoSVG} size="24px" />
+                </Button>
+              </Button.Group>
+              {customTiles.length !== 0 && (
+                <React.Fragment>
+                  <div className="separator" />
+                  <Button.Group>
+                    <Button icon basic onClick={this.openCustomTileMenu}>
+                      <Icon name={TemplatedTilesSVG} size="24px" />
+                    </Button>
+                  </Button.Group>
+                </React.Fragment>
+              )}
+            </div>
+          )}
+        {this.state.addNewTileOpened &&
+          this.state.customTilesOpened && (
+            <div className="add-tile toolbar">
+              {customTiles.map(tile => (
+                <Button.Group>
+                  <Button
+                    icon
+                    basic
+                    onClick={this.props.onChangeTile.bind(
+                      this,
+                      this.props.tile,
+                      {
+                        '@type': tile.title,
+                      },
+                    )}
+                  >
+                    <Icon name={tile.icon} size="24px" />
+                  </Button>
+                </Button.Group>
+              ))}
+            </div>
+          )}
         {this.props.selected && (
           <Button
             icon

diff --git a/src/config/Tiles.jsx b/src/config/Tiles.jsx
@@ -8,6 +8,8 @@ import {
   EditVideoTile,
 } from '../components';
 
+const customTiles = [];
+
 const messagesTiles = defineMessages({
   title: {
     id: 'title',
@@ -31,24 +33,6 @@ const messagesTiles = defineMessages({
   },
 });
 
-const AvailableTiles = [
-  {
-    id: 'title',
-  },
-  {
-    id: 'description',
-  },
-  {
-    id: 'text',
-  },
-  {
-    id: 'image',
-  },
-  {
-    id: 'video',
-  },
-];
-
 const getDefaultEditTileView = type => {
   switch (type) {
     case 'title':
@@ -66,4 +50,4 @@ const getDefaultEditTileView = type => {
   }
 };
 
-export { AvailableTiles, getDefaultEditTileView, messagesTiles };
+export { customTiles, getDefaultEditTileView, messagesTiles };
diff --git a/src/config/index.js b/src/config/index.js
@@ -12,7 +12,7 @@ import ToHTMLRenderers, {
 import { extendedBlockRenderMap, blockStyleFn } from './RichTextEditor/Blocks';
 import plugins, { inlineToolbarButtons } from './RichTextEditor/Plugins';
 import FromHTMLCustomBlockFn from './RichTextEditor/FromHTML';
-import { AvailableTiles, getDefaultEditTileView, messagesTiles } from './Tiles';
+import { customTiles, getDefaultEditTileView, messagesTiles } from './Tiles';
 
 export { layoutViews, contentTypesViews, defaultView };
 export { widgetMapping, defaultWidget };
@@ -26,7 +26,7 @@ export {
   ToHTMLRenderers,
   ToHTMLOptions,
 };
-export { AvailableTiles, getDefaultEditTileView, messagesTiles };
+export { customTiles, getDefaultEditTileView, messagesTiles };
 
 export default defaults(
   {},

diff --git a/theme/themes/pastanaga/globals/site.overrides b/theme/themes/pastanaga/globals/site.overrides
@@ -226,7 +226,8 @@ body {
     &.add-tile {
       z-index: 100;
       top: -10px;
-      left: 49px;
+      left: -9px;
+      transform: none;
     }
   }