[PE mobile] Almost maked layout settings

apps/presentationeditor/mobile/src/controller/Main.jsx

@@ -192,18 +192,28 @@ class MainController extends Component {
         // me.api.asc_registerCallback('asc_onMeta',                       _.bind(me.onMeta, me));
 
         const storeFocusObjects = this.props.storeFocusObjects;
-        this.api.asc_registerCallback('asc_onFocusObject', objects => {
-            storeFocusObjects.resetFocusObjects(objects);
-        });
-
-        this.api.asc_registerCallback('asc_onUpdateThemeIndex',  themeId => {
-            console.log(themeId);
-        });
-
         const storeLayout = this.props.storeLayout;
 
+        this.api.asc_registerCallback('asc_onFocusObject', objects => {
+
+            console.log(objects);
+            storeFocusObjects.resetFocusObjects(objects);
+
+            const settings = storeFocusObjects.settings;
+            console.log(settings);
+
+            if(settings[0] === "slide") {
+                const slideObject = objects[0].get_ObjectValue();
+                storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
+            }
+        });
+
+        // this.api.asc_registerCallback('asc_onUpdateThemeIndex',  themeId => {
+        //     console.log(themeId);
+        // });
+
         this.api.asc_registerCallback('asc_onUpdateLayout', (layouts) => {
-            console.log(layouts);
+            // console.log(layouts);
             storeLayout.addArrayLayouts(layouts);
         });
     }

apps/presentationeditor/mobile/src/controller/edit/Layout.jsx

@@ -6,9 +6,20 @@ class LayoutController extends Component {
         super(props);
     }
 
+    onLayoutClick(index) {
+        const api = Common.EditorApi.get();
+        let props = new Asc.CAscSlideProps();
+        console.log(api);
+
+        props.LayoutIndex = index;
+        api.SetSlideProps(props);
+
+        console.log(props);
+    }
+
     render() {
         return (
-            <Layout />
+            <Layout onLayoutClick={this.onLayoutClick} />
         );
     }
 }

apps/presentationeditor/mobile/src/less/app-ios.less

@@ -28,8 +28,10 @@
 
     // Layout 
 
-    .list-layouts {
+    .slide-layout {
-        margin: auto;
+        .list {
+            margin: auto;
+        }
         ul {
             display: flex;
             flex-wrap: wrap;
@@ -38,25 +40,32 @@
         li {
             position: relative;
             z-index: 1;
-            margin: 0;
             margin-top: 12px;
             img {
                 box-shadow: 0 0 0 1px rgba(0,0,0,.15);
             }
         }
-        li .item-inner:after {
+        .item-inner {
+            padding-top: 0;
+        }
+        .item-inner:after {
             display: none;
         }
-        li.active .item-inner:after {
+        .item-inner:before {
+            opacity: 0;
             content: '';
             position: absolute;
             width: 22px;
             height: 22px;
-            right: -5px;
+            right: 11px;
-            bottom: -5px;
+            bottom: 0;
+            z-index: 1;
             background-repeat: no-repeat;
             .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
         }
+        .active .item-inner:before {
+            opacity: 1;
+        }
     }
 
 }

apps/presentationeditor/mobile/src/less/app-material.less

@@ -49,8 +49,10 @@
 
     // Layout 
 
-    .list-layouts {
+    .slide-layout {
-        margin: auto;
+        .list {
+            margin: auto;
+        }
         ul {
             display: flex;
             flex-wrap: wrap;
@@ -59,24 +61,31 @@
         li {
             position: relative;
             z-index: 1;
-            margin: 0;
             margin-top: 12px;
             img {
                 box-shadow: 0 0 0 1px rgba(0,0,0,.15);
             }
         }
-        li .item-inner:after {
+        .item-inner {
+            padding-top: 0;
+        }
+        .item-inner:after {
             display: none;
         }
-        li.active .item-inner:after {
+        .item-inner:before {
+            opacity: 0;
             content: '';
             position: absolute;
             width: 22px;
             height: 22px;
-            right: -5px;
+            right: 11px;
-            bottom: -5px;
+            bottom: 0;
+            z-index: 1;
             background-repeat: no-repeat;
             .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
         }
+        .active .item-inner:before {
+            opacity: 1;
+        }
     }
 }

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

@@ -3,9 +3,14 @@ import {action, observable} from 'mobx';
 export class storeLayout {
    
     @observable arrayLayouts;
+    @observable slideLayoutIndex = -1;
   
     @action addArrayLayouts(array) {
         this.arrayLayouts = array;
     }
 
+    @action changeSlideLayoutIndex(index) {
+        this.slideLayoutIndex = index;
+    }
+
 }

apps/presentationeditor/mobile/src/view/edit/Layout.jsx

@@ -1,6 +1,6 @@
-import React, {Fragment} from "react";
+import React from "react";
 import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react";
+import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
 import { useTranslation } from "react-i18next";
 
 const PageLayout = props => {
@@ -8,18 +8,31 @@ const PageLayout = props => {
     const _t = t("View.Edit", { returnObjects: true });
     const store = props.storeLayout;
     const arrayLayouts = JSON.parse(JSON.stringify(store.arrayLayouts));
+    const slideLayoutIndex = store.slideLayoutIndex;
+   
+    console.log(slideLayoutIndex);
     console.log(arrayLayouts);
     console.log(store);
 
+    
+
     return (
-        <Page>
+        <Page className="slide-layout">
-            <Navbar title={_t.textLayout} backLink={_t.textBack} />
+            <Navbar title={_t.textLayout} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
             {arrayLayouts.length ? (
-                <List className="list-layouts">
+                <List>
                     {arrayLayouts.map((elem, index) => {
                         return (
-                            <ListItem key={index}>
+                            <ListItem key={index} className={slideLayoutIndex === index ? "active" : ""} 
-                                <img src={elem.Image} style={{width: elem.Width, height: elem.height}} alt=""/>
+                                onClick={() => {
+                                    store.changeSlideLayoutIndex(index);
+                                    props.onLayoutClick(index);
+                                }}>
+                                <img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
                             </ListItem>
                         )
                     })}