From 3e6e71966e66a919e5a754e152ced21e2fb51491 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Mon, 25 Jan 2021 20:12:50 +0300
Subject: [PATCH] [PE mobile] Added the ability to insert slides

---
 .../mobile/resources/less/common-ios.less     |  2 +-
 .../mobile/src/controller/add/AddSlide.jsx    | 20 ++++++++++++++++--
 .../mobile/src/store/slideSettings.js         | 18 ++++++++++++++++
 .../mobile/src/view/add/AddSlide.jsx          | 21 +++++++++++++++----
 4 files changed, 54 insertions(+), 7 deletions(-)

diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less
index ee582bc7b..c4e29da77 100644
--- a/apps/common/mobile/resources/less/common-ios.less
+++ b/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;
         }
diff --git a/apps/presentationeditor/mobile/src/controller/add/AddSlide.jsx b/apps/presentationeditor/mobile/src/controller/add/AddSlide.jsx
index 5723596ce..6c2cb706b 100644
--- a/apps/presentationeditor/mobile/src/controller/add/AddSlide.jsx
+++ b/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}
             />
         )
     }
diff --git a/apps/presentationeditor/mobile/src/store/slideSettings.js b/apps/presentationeditor/mobile/src/store/slideSettings.js
index 0899b7bbc..37ee3ec4c 100644
--- a/apps/presentationeditor/mobile/src/store/slideSettings.js
+++ b/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;
diff --git a/apps/presentationeditor/mobile/src/view/add/AddSlide.jsx b/apps/presentationeditor/mobile/src/view/add/AddSlide.jsx
index 3a4daa85c..96b50c267 100644
--- a/apps/presentationeditor/mobile/src/view/add/AddSlide.jsx
+++ b/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};
\ No newline at end of file
+export default  inject("storeSlideSettings")(observer(AddSlide));
\ No newline at end of file