[PE mobile] Added the ability to insert slides

apps/common/mobile/resources/less/common-ios.less

@@ -366,7 +366,7 @@
         }
     }
 
-    .dataview, #add-table, #add-shape {
+    .dataview, #add-table, #add-shape, #add-slide {
         &.page-content {
             background-color: @white;
         }

apps/presentationeditor/mobile/src/controller/add/AddSlide.jsx

@@ -3,15 +3,31 @@ import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import {observer, inject} from "mobx-react";
 
-import { AddSlide } from '../../view/add/AddSlide';
+import AddSlide from '../../view/add/AddSlide';
 
 class AddSlideController extends Component {
     constructor (props) {
         super(props);
+        this.onSlideLayout = this.onSlideLayout.bind(this);
     }
+
+    closeModal () {
+        if ( Device.phone ) {
+            f7.sheet.close('.add-popup', true);
+        } else {
+            f7.popover.close('#add-popover');
+        }
+    }
+
+    onSlideLayout (type) {
+        const api = Common.EditorApi.get();
+        api.AddSlide(type);
+        this.closeModal();
+    }
+
     render () {
         return (
-            <AddSlide
+            <AddSlide onSlideLayout={this.onSlideLayout}
             />
         )
     }

apps/presentationeditor/mobile/src/store/slideSettings.js

@@ -41,6 +41,24 @@ export class storeSlideSettings {
     @action addArrayLayouts(array) {
         this.arrayLayouts = array;
     }
+    @computed get slideLayouts () {
+        const layouts = [];
+        const columns = 2;
+        let row = -1;
+        this.arrayLayouts.forEach((item, index)=>{
+            if (0 == index % columns) {
+                layouts.push([]);
+                row++
+            }
+            layouts[row].push({
+                type: item.getIndex(),
+                image: item.get_Image(),
+                width: item.get_Width(),
+                height: item.get_Height()
+            });
+        });
+        return layouts;
+    }
 
     @action changeSlideLayoutIndex(index) {
         this.slideLayoutIndex = index;

apps/presentationeditor/mobile/src/view/add/AddSlide.jsx

@@ -5,11 +5,24 @@ import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
 const AddSlide = props => {
+    const layouts = props.storeSlideSettings.slideLayouts;
     return (
-        <Fragment>
-
-        </Fragment>
+        <div className={'dataview slide-layout'}>
+            {layouts.map((row, rowIndex) => {
+                return (
+                    <ul key={`row-${rowIndex}`} className={'row'}>
+                        {row.map((layout, index) => {
+                            return (
+                                <li key={`item-${rowIndex}-${index}`} onClick={() => {props.onSlideLayout(layout.type)}}>
+                                    <img src={layout.image} width={layout.width} height={layout.height}/>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                )
+            })}
+        </div>
     )
 };
 
-export {AddSlide};
+export default  inject("storeSlideSettings")(observer(AddSlide));