geosolutions-it#5728: Make size of Paragraph section configurable (ge…

…osolutions-it#5796)
mricca · Sep 8, 2020 · 4caa5a0 · 4caa5a0
1 parent eb499e3
commit 4caa5a0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 7 deletions.
diff --git a/web/client/components/geostory/contents/Column.jsx b/web/client/components/geostory/contents/Column.jsx
@@ -43,6 +43,7 @@ export default ({
     expandable,
     mediaViewer,
     contentToolbar,
+    overrideTools,
     storyFonts
 }) => (
     <Contents
@@ -69,7 +70,8 @@ export default ({
             [MediaTypes.IMAGE]: ['editMedia', size(), 'showCaption', 'remove'],
             [MediaTypes.MAP]: ['editMedia', 'editMap', size(true), 'showCaption', 'remove'],
             [ContentTypes.WEBPAGE]: ['editURL', size(true), 'remove'],
-            [MediaTypes.VIDEO]: ['editMedia', 'muted', 'autoplay', 'loop', 'showCaption', 'remove']
+            [MediaTypes.VIDEO]: ['editMedia', 'muted', 'autoplay', 'loop', 'showCaption', 'remove'],
+            ...overrideTools
         }}
         addButtons={[{
             glyph: 'sheet',

diff --git a/web/client/components/geostory/contents/__tests__/Column-test.jsx b/web/client/components/geostory/contents/__tests__/Column-test.jsx
@@ -43,12 +43,20 @@ describe('Column component', () => {
     });
     describe('Column contents has proper toolbars', () => {
         it('text', () => {
-            // text content should contain only delete button
-            ReactDOM.render(<Column mode={Modes.EDIT} contents={[{ type: ContentTypes.TEXT, html: '<p id="TEST_HTML">something</p>' }]} />, document.getElementById("container"));
+            const size = () => ({id: 'size'});
+            const overrideTools =  {
+                [ContentTypes.TEXT]: [size(), 'remove']
+            };
+            // text content should contain only size and delete button
+            ReactDOM.render(<Column
+                mode={Modes.EDIT}
+                overrideTools={overrideTools}
+                contents={[{ type: ContentTypes.TEXT, html: '<p id="TEST_HTML">something</p>' }]} />, document.getElementById("container"));
             const textToolbar = document.querySelector('.ms-content-toolbar .btn-group');
             expect(textToolbar).toExist();
-            expect(textToolbar.querySelectorAll('button').length).toBe(1);
-            expect(textToolbar.querySelector('button .glyphicon-trash')).toExist(); // align tool
+            expect(textToolbar.querySelectorAll('button').length).toBe(2);
+            expect(textToolbar.querySelector('button .glyphicon-trash')).toExist(); // delete button
+            expect(textToolbar.querySelector('button .glyphicon-resize-horizontal')).toExist(); // resize button
         });
         it('media', () => {
             // media and image contents must have edit, resize and align tools

diff --git a/web/client/components/geostory/layouts/sections/Paragraph.jsx b/web/client/components/geostory/layouts/sections/Paragraph.jsx
@@ -7,10 +7,16 @@
  */
 import React from "react";
 import AddBar from '../../common/AddBar';
-import { SectionTypes, Modes, SectionTemplates} from '../../../../utils/GeoStoryUtils';
+import { SectionTypes, ContentTypes, Modes, SectionTemplates} from '../../../../utils/GeoStoryUtils';
 
 import SectionContents from "../../contents/SectionContents";
 
+const size = (pullRight) => ({
+    id: 'size',
+    filterOptions: ({ value }) => value !== 'full',
+    pullRight
+});
+
 
 /**
  * Paragraph Section Type.
@@ -53,7 +59,10 @@ export default ({
             contentProps={{
                 expandable: expandableMedia,
                 mediaViewer,
-                contentToolbar
+                contentToolbar,
+                overrideTools: {
+                    [ContentTypes.TEXT]: [size(true), 'remove']
+                }
             }}
             storyFonts={storyFonts}
         />