Merge branch 'feature/mobile-apps-on-reactjs-pe-presentation-settings' into feature/mobile-apps-on-reactjs

apps/presentationeditor/mobile/locale/en.json

@@ -62,7 +62,11 @@
       "textAuthor": "Author",
       "textPresentationTitle": "Presentation Title",
       "textOwner": "Owner",
-      "textUploaded": "Uploaded"
+      "textUploaded": "Uploaded",
+      "textSlideSize": "Slide Size",
+      "mniSlideStandard": "Standard (4:3)",
+      "mniSlideWide": "Widescreen (16:9)",
+      "textColorSchemes": "Color Schemes"
     },
     "Add": {
       "textSlide": "Slide",

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

@@ -4,7 +4,7 @@ import { inject } from "mobx-react";
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo")
+@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -167,9 +167,22 @@ 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) => {
+            storePresentationSettings.changeSizeIndex(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));
         // me.api.asc_registerCallback('asc_onAdvancedOptions',            _.bind(me.onAdvancedOptions, me));

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

@@ -0,0 +1,49 @@
+import React, {Component} from 'React';
+import { observer, inject } from "mobx-react";
+import {PresentationSettings} from '../../view/settings/PresentationSettings';
+
+class PresentationSettingsController extends Component {
+    constructor(props) {
+        super(props);
+        this.initSlideSize = this.initSlideSize.bind(this);
+    }
+
+    initSlideSize() {
+        if (!this.init) {
+            const api = Common.EditorApi.get();
+            this.props.storePresentationSettings.changeSizeIndex(api.get_PresentationWidth(), api.get_PresentationHeight());
+            this.init = true;
+        }
+    }
+
+    onSlideSize(slideSizeArr) {
+        const api = Common.EditorApi.get();
+        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
+                initSlideSize={this.initSlideSize}
+                onSlideSize={this.onSlideSize}
+                onColorSchemeChange={this.onColorSchemeChange}
+                initPageColorSchemes={this.initPageColorSchemes}
+            />
+        )
+    }
+}
+
+export default inject("storePresentationSettings")(observer(PresentationSettingsController));

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/mainStore.js

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

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

@@ -0,0 +1,27 @@
+import {action, observable} from 'mobx';
+
+export class storePresentationSettings {
+    slideSize = [[254, 190.5], [254, 143]];
+    @observable slideSizeIndex;
+
+    get getSlideSizes() {
+        return this.slideSize;
+    }
+
+    @action changeSizeIndex(width, height) {
+        this.slideSize.forEach((array, index) => {
+            if(Math.abs(array[0] - width) < 0.001 && Math.abs((array[1] - height)) < 0.001) {
+                this.slideSizeIndex = index;
+            }
+        })
+    }
+
+    // Color Schemes
+
+    @observable allSchemes;
+
+    @action addSchemes(arr) {
+        this.allSchemes = arr;
+    }
+
+}

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

@@ -0,0 +1,86 @@
+import React, {useState} from "react";
+import { observer, inject } from "mobx-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 });
+    props.initSlideSize();
+    const store = props.storePresentationSettings;
+    const slideSizeArr = store.getSlideSizes;
+    const slideSizeIndex = store.slideSizeIndex;
+
+    return (
+        <Page>
+            <Navbar title={_t.textPresentationSettings} backLink={_t.textBack} />
+
+            <BlockTitle>{_t.textSlideSize}</BlockTitle>
+            <List>
+                <ListItem radio name="slide-size" checked={slideSizeIndex === 0} 
+                    onChange={() => props.onSlideSize(slideSizeArr[0])} title={_t.mniSlideStandard}></ListItem>
+                <ListItem radio name="slide-size" checked={slideSizeIndex === 1}
+                    onChange={() => props.onSlideSize(slideSizeArr[1])} title={_t.mniSlideWide}></ListItem>
+            </List>
+        
+            <List mediaList>
+                <ListItem title={_t.textColorSchemes} link="/color-schemes/" routeProps={{
+                    onColorSchemeChange: props.onColorSchemeChange,
+                    initPageColorSchemes: props.initPageColorSchemes
+                }}></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 store = props.storePresentationSettings;
+    const allSchemes = store.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

@@ -7,6 +7,8 @@ import ApplicationSettingsController from "../../controller/settings/Application
 import { MacrosSettings } from "./ApplicationSettings";
 import DownloadController from "../../controller/settings/Download";
 import PresentationInfoController from "../../controller/settings/PresentationInfo";
+import PresentationSettingsController from "../../controller/settings/PresentationSettings";
+import { PresentationColorSchemes } from "./PresentationSettings";
 
 const routes = [
     {
@@ -28,6 +30,14 @@ const routes = [
     {
         path: '/presentation-info/',
         component: PresentationInfoController
+    },
+    {
+        path: '/presentation-settings/',
+        component: PresentationSettingsController
+    },
+    {
+        path: '/color-schemes/',
+        component: PresentationColorSchemes
     }
     /*{
         path: '/presentation-settings/',
@@ -52,6 +62,21 @@ const SettingsList = withTranslation()(props => {
             props.onOptionClick(page)
     };
 
+    const closeModal = () => {
+        if (Device.phone) {
+            f7.sheet.close('.settings-popup', true);
+        } else {
+            f7.popover.close('#settings-popover');
+        }
+    }
+
+    const onPrint = () => {
+        closeModal();
+        const api = Common.EditorApi.get();
+        api.asc_Print();
+    }
+
+
     return (
         <View style={props.style} stackPages={true} routes={routes}>
             <Page>
@@ -71,7 +96,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
                         <Icon slot="media" icon="icon-download"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textPrint}>
+                    <ListItem title={_t.textPrint} onClick={onPrint}>
                         <Icon slot="media" icon="icon-print"></Icon>
                     </ListItem>
                     <ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>