[PE mobile] Maked Presentation Settings

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

@@ -169,10 +169,13 @@ class MainController extends Component {
         const storePresentationSettings = this.props.storePresentationSettings;
 
         me.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
-            // const api = Common.EditorApi.get();
             storePresentationSettings.changeSlideSize(width, height);
         });
 
+        me.api.asc_registerCallback('asc_onSendThemeColorSchemes', (arr) => {
+            storePresentationSettings.addSchemes(arr);
+        });
+
         // api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(this.onSendThemeColorSchemes, this));
         // me.api.asc_registerCallback('asc_onDocumentUpdateVersion',      _.bind(me.onUpdateVersion, me));
         // me.api.asc_registerCallback('asc_onServerVersion',              _.bind(me.onServerVersion, me));

apps/presentationeditor/mobile/src/controller/settings/PresentationSettings.jsx

@@ -4,18 +4,33 @@ import {PresentationSettings} from '../../view/settings/PresentationSettings';
 class PresentationSettingsController extends Component {
     constructor(props) {
         super(props);
-        // this.onSlideSize = this.onSlideSize.bind(this);
     }
 
-    onSlideSize(value, slideSizeArr) {
+    onSlideSize(slideSizeArr) {
         const api = Common.EditorApi.get();
-        api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
+        // api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
+        api.changeSlideSize(slideSizeArr[0], slideSizeArr[1]);
     }
 
+    // Color Schemes
+
+    initPageColorSchemes() {
+        const api = Common.EditorApi.get();
+        return api.asc_GetCurrentColorSchemeIndex();
+    }
+
+    onColorSchemeChange(newScheme) {
+        const api = Common.EditorApi.get();
+        api.asc_ChangeColorSchemeByIdx(+newScheme);
+    }
+
+
     render() {
         return (
             <PresentationSettings 
                 onSlideSize={this.onSlideSize}
+                onColorSchemeChange={this.onColorSchemeChange}
+                initPageColorSchemes={this.initPageColorSchemes}
             />
         )
     }

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

@@ -3,3 +3,27 @@
 
 
 }
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: #fff;
+    .item-inner {
+        justify-content: flex-start;
+    }
+    .color-schema-block {
+        display: flex;
+    }
+    .color {
+        min-width: 26px;
+        min-height: 26px;
+        margin: 0 2px 0 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
+    }
+    .item-title {
+        margin-left: 20px;
+        color: #212121;
+    }
+}

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

@@ -22,3 +22,27 @@
         width: auto;
     }
 }
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: #fff;
+    .item-inner {
+        justify-content: flex-start;
+    }
+    .color-schema-block {
+        display: flex;
+    }
+    .color {
+        min-width: 26px;
+        min-height: 26px;
+        margin: 0 2px 0 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
+    }
+    .item-title {
+        margin-left: 20px;
+        color: #212121;
+    }
+}

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

@@ -1,38 +1,28 @@
-import {action, observable, computed} from 'mobx';
+import {action, observable} from 'mobx';
 
 export class storePresentationSettings {
-    @observable widthSlide;
+    @observable slideSize = [];
-    @observable heightSlide;
+    @observable slideSizeValue;
-    @observable slideSize = 0;
 
-    @action changeSlideSize(width, height) {
+    get getSlideSizes() {
-        this.widthSlide = width;
+        return [[254, 190.5], [254, 143]];
-        this.heightSlide = height;
     }
 
-    getSlideSizes() {
+    @action changeSlideSize(width, height) {
-        const slideSizeArr = [[254, 190.5], [254, 143]];
+        this.slideSize[0] = width;
-        return slideSizeArr;
+        this.slideSize[1] = height;
     }
 
     @action changeSlideFormat(value) {
-        this.slideSize = value;
+        this.slideSizeValue = +value;
     }
 
-    @computed get pageSizesIndex() {
+    // Color Schemes
-        const slideSizes = this.getSlideSizes();
-        let ind = -1;
 
-        slideSizes.forEach((size, index) => {
+    @observable allSchemes;
-            if(Math.abs(size[0] - this.widthSlide) < 0.001 && Math.abs(size[1] - this.heightSlide) < 0.001) {
-               ind = index;
-            }
-        });
 
-        if (ind === -1) {
+    @action addSchemes(arr) {
-            ind = -1;
+        this.allSchemes = arr;
-        }
-
-        return ind;
     }
+
 }

apps/presentationeditor/mobile/src/view/settings/PresentationSettings.jsx

@@ -1,50 +1,40 @@
-import React, {Fragment} from "react";
+import React, {useState} from "react";
 import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle, Toggle } from "framework7-react";
+import { Page, Navbar, List, ListItem, BlockTitle } from "framework7-react";
 import { useTranslation } from "react-i18next";
 
 const PagePresentationSettings = props => {
     const { t } = useTranslation();
     const _t = t("View.Settings", { returnObjects: true });
     const store = props.storePresentationSettings;
-    const slideSizeArr = store.getSlideSizes();
+    const slideSizeArr = store.getSlideSizes;
-    console.log(slideSizeArr);
-    const widthSlide = store.widthSlide;
-    const heightSlide = store.heightSlide;
     const slideSize = store.slideSize;
-    console.log(widthSlide, heightSlide);
+    const slideSizeValue = store.slideSizeValue;
+    console.log(slideSize);
   
     return (
         <Page>
             <Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
-            {slideSizeArr.length ? (
+
-                <Fragment>
+            <BlockTitle>{_t.textSlideSize}</BlockTitle>
-                    <BlockTitle>{_t.textSlideSize}</BlockTitle>
+            <List>
-                    <List>
+                <ListItem radio name="slide-size" value="0" checked={slideSizeValue === 0} 
-                        {/* {slideSizeArr.map((size, index) => {
+                    onChange={(e) => {
-                            if(Math.abs(size[0] - widthSlide) < 0.001 && Math.abs(size[1] - heightSlide) < 0.001) {
+                        props.onSlideSize(slideSizeArr[e.target.value]);
-                                console.log(true);
+                        store.changeSlideFormat(e.target.value);
-                                return (
+                    }} title={_t.mniSlideStandard}></ListItem>
-                                    <ListItem radio name="slide-size" value={index} title={index === 0 ? _t.mniSlideStandard : _t.mniSlideWide}></ListItem>
+                <ListItem radio name="slide-size" value="1" checked={slideSizeValue === 1} 
-                                )
+                    onChange={(e) => {
-                            }
+                        props.onSlideSize(slideSizeArr[e.target.value]);
-                        })} */}
+                        store.changeSlideFormat(e.target.value);
-                        <ListItem radio name="slide-size" value="0" checked={slideSize === 0} 
+                    }} title={_t.mniSlideWide}></ListItem>
-                            onChange={() => {
+            </List>
-                                props.onSlideSize(0, slideSizeArr);
-                                store.changeSlideFormat(0);
-                            }} title={_t.mniSlideStandard}></ListItem>
-                        <ListItem radio name="slide-size" value="1" checked={slideSize === 1} 
-                            onChange={() => {
-                                props.onSlideSize(1, slideSizeArr);
-                                store.changeSlideFormat(1);
-                            }} title={_t.mniSlideWide}></ListItem>
-                    </List>
-                </Fragment>
-            ): null}
         
             <List mediaList>
-                <ListItem title={_t.textColorSchemes} link="/color-schemes/"></ListItem>
+                <ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
+                    onColorSchemeChange: props.onColorSchemeChange,
+                    initPageColorSchemes: props.initPageColorSchemes
+                }}></ListItem>
             </List>
         </Page>
     )
@@ -52,16 +42,16 @@ const PagePresentationSettings = props => {
 
 const PagePresentationColorSchemes = props => {
     const { t } = useTranslation();
-    // const curScheme = props.initPageColorSchemes();
+    const curScheme = props.initPageColorSchemes();
-    // const [stateScheme, setScheme] = useState(curScheme);
+    const [stateScheme, setScheme] = useState(curScheme);
     const _t = t('View.Settings', {returnObjects: true});
-    // const storeSettings = props.storeDocumentSettings;
+    const store = props.storePresentationSettings;
-    // const allSchemes = storeSettings.allSchemes;
+    const allSchemes = store.allSchemes;
 
     return (
         <Page>
             <Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
-            {/* <List>
+            <List>
                 {
                     allSchemes ? allSchemes.map((scheme, index) => {
                         return (
@@ -91,7 +81,7 @@ const PagePresentationColorSchemes = props => {
                         )
                     }) : null        
                 }
-            </List> */}
+            </List>
         </Page>
 
     )