[PE mobile] Make Presentation Settings

apps/presentationeditor/mobile/locale/en.json

@@ -48,7 +48,11 @@
       "textShowNotification": "Show Notification",
       "textDisableAllMacrosWithNotification": "Disable all macros with notification",
       "textEnableAll": "Enable All",
-      "textEnableAllMacrosWithoutNotification": "Enable all macros without notification"
+      "textEnableAllMacrosWithoutNotification": "Enable all macros without notification",
+      "textSlideSize": "Slide Size",
+      "mniSlideStandard": "Standard (4:3)",
+      "mniSlideWide": "Widescreen (16:9)",
+      "textColorSchemes": "Color Schemes"
     }
   }
 }

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

@@ -4,6 +4,7 @@ import { inject } from "mobx-react";
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
+@inject("storePresentationSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -160,9 +161,19 @@ class MainController extends Component {
 
     bindEvents() {
         const me = this;
+        
         // me.api.asc_registerCallback('asc_onError',                      _.bind(me.onError, me));
         me.api.asc_registerCallback('asc_onDocumentContentReady',       me._onDocumentContentReady.bind(me));
         me.api.asc_registerCallback('asc_onOpenDocumentProgress',       me._onOpenDocumentProgress.bind(me));
+
+        const storePresentationSettings = this.props.storePresentationSettings;
+
+        me.api.asc_registerCallback('asc_onPresentationSize', (width, height) => {
+            // const api = Common.EditorApi.get();
+            storePresentationSettings.changeSlideSize(width, height);
+        });
+
+        // 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));
         // me.api.asc_registerCallback('asc_onAdvancedOptions',            _.bind(me.onAdvancedOptions, me));

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

@@ -0,0 +1,24 @@
+import React, {Component} from 'React';
+import {PresentationSettings} from '../../view/settings/PresentationSettings';
+
+class PresentationSettingsController extends Component {
+    constructor(props) {
+        super(props);
+        // this.onSlideSize = this.onSlideSize.bind(this);
+    }
+
+    onSlideSize(value, slideSizeArr) {
+        const api = Common.EditorApi.get();
+        api.changeSlideSize(slideSizeArr[value][0], slideSizeArr[value][1]);
+    }
+
+    render() {
+        return (
+            <PresentationSettings 
+                onSlideSize={this.onSlideSize}
+            />
+        )
+    }
+}
+
+export default PresentationSettingsController;

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

@@ -3,6 +3,7 @@
 // import {storeFocusObjects} from "./focusObjects";
 import {storeUsers} from '../../../../common/mobile/lib/store/users';
 import {storeApplicationSettings} from './applicationSettings';
+import {storePresentationSettings} from './presentationSettings';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -14,7 +15,8 @@ export const stores = {
     // storeFocusObjects: new storeFocusObjects(),
     // storeDocumentSettings: new storeDocumentSettings(),
     users: new storeUsers(),
-    storeApplicationSettings: new storeApplicationSettings()
+    storeApplicationSettings: new storeApplicationSettings(),
+    storePresentationSettings: new storePresentationSettings()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

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

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

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

@@ -0,0 +1,103 @@
+import React, {Fragment} from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, BlockTitle, Toggle } 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();
+    console.log(slideSizeArr);
+    const widthSlide = store.widthSlide;
+    const heightSlide = store.heightSlide;
+    const slideSize = store.slideSize;
+    console.log(widthSlide, heightSlide);
+  
+    return (
+        <Page>
+            <Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
+            {slideSizeArr.length ? (
+                <Fragment>
+                    <BlockTitle>{_t.textSlideSize}</BlockTitle>
+                    <List>
+                        {/* {slideSizeArr.map((size, index) => {
+                            if(Math.abs(size[0] - widthSlide) < 0.001 && Math.abs(size[1] - heightSlide) < 0.001) {
+                                console.log(true);
+                                return (
+                                    <ListItem radio name="slide-size" value={index} title={index === 0 ? _t.mniSlideStandard : _t.mniSlideWide}></ListItem>
+                                )
+                            }
+                        })} */}
+                        <ListItem radio name="slide-size" value="0" checked={slideSize === 0} 
+                            onChange={() => {
+                                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>
+            </List>
+        </Page>
+    )
+}
+
+const PagePresentationColorSchemes = props => {
+    const { t } = useTranslation();
+    // const curScheme = props.initPageColorSchemes();
+    // const [stateScheme, setScheme] = useState(curScheme);
+    const _t = t('View.Settings', {returnObjects: true});
+    // const storeSettings = props.storeDocumentSettings;
+    // const allSchemes = storeSettings.allSchemes;
+
+    return (
+        <Page>
+            <Navbar title={_t.textColorSchemes} backLink={_t.textBack} />
+            {/* <List>
+                {
+                    allSchemes ? allSchemes.map((scheme, index) => {
+                        return (
+                            <ListItem radio={true} className="color-schemes-menu" key={index} title={scheme.get_name()} checked={stateScheme === index} 
+                                onChange={() => {
+                                    if(index !== curScheme) {
+                                        setScheme(index);
+                                        props.onColorSchemeChange(index);
+                                    };
+                            }}>
+                                <div slot="before-title">
+                                    <span className="color-schema-block">
+                                        {
+                                            scheme.get_colors().map((elem, index) => {
+                                                if(index >=2 && index < 7) {
+                                                    let clr = {background: "#" + Common.Utils.ThemeColor.getHexColor(elem.get_r(), elem.get_g(), elem.get_b())};
+                                                    return (
+                                                        <span className="color" key={index} style={clr}></span>
+                                                    )
+                                                }
+                                            })
+                                        }
+                                       
+                                    </span>
+                                </div>
+                            </ListItem>
+                        )
+                    }) : null        
+                }
+            </List> */}
+        </Page>
+
+    )
+};
+
+const PresentationSettings = inject("storePresentationSettings")(observer(PagePresentationSettings));
+const PresentationColorSchemes = inject("storePresentationSettings")(observer(PagePresentationColorSchemes));
+
+export { PresentationSettings, PresentationColorSchemes }

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

@@ -5,6 +5,8 @@ import {f7} from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
 import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
 import { MacrosSettings } from "./ApplicationSettings";
+import PresentationSettingsController from "../../controller/settings/PresentationSettings";
+import { PresentationColorSchemes } from "./PresentationSettings";
 
 const routes = [
     {
@@ -18,6 +20,14 @@ const routes = [
     {
         path: '/macros-settings/',
         component: MacrosSettings
+    },
+    {
+        path: '/presentation-settings/',
+        component: PresentationSettingsController
+    },
+    {
+        path: '/color-schemes/',
+        component: PresentationColorSchemes
     }
     /*{
         path: '/presentation-settings/',