[PE mobile] Maked Themes and Layout Settings

apps/common/mobile/resources/less/common.less

@@ -44,3 +44,113 @@
     padding: 0 16px;
     box-sizing: border-box;
 }
+
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: @white;
+    .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;
+    }
+}
+
+
+// Layout 
+
+.slide-layout {
+    .list {
+        margin: auto;
+    }
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+    li {
+        position: relative;
+        z-index: 1;
+        margin-top: 12px;
+        img {
+            box-shadow: 0 0 0 1px rgba(0,0,0,.15);
+        }
+    }
+    .item-inner {
+        padding-top: 0;
+    }
+    .item-inner:after {
+        display: none;
+    }
+    .item-inner:before {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        right: 11px;
+        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;
+    }
+}
+
+// Theme 
+
+.slide-theme .item-theme {
+    background-image: url(../img/themes/themes.png);
+}
+
+.slide-theme {
+    .item-inner:after {
+        display: none;
+    }
+    .list {
+        margin: auto;
+    }
+    ul {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        padding-left: 18px;
+        padding-right: 18px;
+        padding-bottom: 14px;
+    }
+    .item-theme {
+        position: relative;
+        margin: 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15);
+        width: 85px;
+        height: 38px;
+        margin-top: 14px;
+    }
+    .item-theme.active:before {
+        content: '';
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        right: -5px;
+        bottom: -5px;
+        z-index: 1;
+        .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>');
+    }
+}
+

apps/presentationeditor/mobile/locale/en.json

@@ -86,7 +86,13 @@
       "textStyle": "Style",
       "textLayout": "Layout",
       "textTransition": "Transition",
-      "textBack": "Back"
+      "textBack": "Back",
+      "textEffect": "Effect",
+      "textType": "Type",
+      "textDuration": "Duration",
+      "textStartOnClick": "Start On Click",
+      "textDelay": "Delay",
+      "textApplyAll": "Apply to All Slides"
     }
   }
 }

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", "storePresentationSettings", "storeLayout")
+@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeLayout", "storeTheme")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -195,7 +195,6 @@ class MainController extends Component {
         const storeLayout = this.props.storeLayout;
 
         this.api.asc_registerCallback('asc_onFocusObject', objects => {
-
             console.log(objects);
             storeFocusObjects.resetFocusObjects(objects);
 
@@ -208,14 +207,23 @@ class MainController extends Component {
             }
         });
 
-        // this.api.asc_registerCallback('asc_onUpdateThemeIndex',  themeId => {
+        const storeTheme = this.props.storeTheme;
-        //     console.log(themeId);
-        // });
 
-        this.api.asc_registerCallback('asc_onUpdateLayout', (layouts) => {
+        this.api.asc_registerCallback('asc_onInitEditorStyles', themes => {
+            // console.log(themes);
+            storeTheme.addArrayThemes(themes);
+        });
+
+        this.api.asc_registerCallback('asc_onUpdateThemeIndex',  themeId => {
+            // console.log(themeId);
+            storeTheme.changeSlideThemeIndex(themeId);
+        });
+
+        this.api.asc_registerCallback('asc_onUpdateLayout', layouts => {
             // console.log(layouts);
             storeLayout.addArrayLayouts(layouts);
         });
+
     }
 
     _onDocumentContentReady() {

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

@@ -8,13 +8,7 @@ class LayoutController extends Component {
 
     onLayoutClick(index) {
         const api = Common.EditorApi.get();
-        let props = new Asc.CAscSlideProps();
+        api.ChangeLayout(index);
-        console.log(api);
-
-        props.LayoutIndex = index;
-        api.SetSlideProps(props);
-
-        console.log(props);
     }
 
     render() {

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

@@ -0,0 +1,21 @@
+import React, { Component } from "react";
+import Theme from "../../view/edit/Theme";
+
+class ThemeController extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    onThemeClick(index) {
+        const api = Common.EditorApi.get();
+        api.ChangeTheme(index);
+    }
+
+    render() {
+        return (
+            <Theme onThemeClick={this.onThemeClick} />
+        );
+    }
+}
+
+export default ThemeController;

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

@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import Transition from "../../view/edit/Transition";
+
+class TransitionController extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <Transition />
+        );
+    }
+}
+
+export default TransitionController;

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

@@ -1,72 +1,6 @@
 
 .device-ios {
 
-    // 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;
-        }
-    }
-
-
-    // Layout 
-
-    .slide-layout {
-        .list {
-            margin: auto;
-        }
-        ul {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-        }
-        li {
-            position: relative;
-            z-index: 1;
-            margin-top: 12px;
-            img {
-                box-shadow: 0 0 0 1px rgba(0,0,0,.15);
-            }
-        }
-        .item-inner {
-            padding-top: 0;
-        }
-        .item-inner:after {
-            display: none;
-        }
-        .item-inner:before {
-            opacity: 0;
-            content: '';
-            position: absolute;
-            width: 22px;
-            height: 22px;
-            right: 11px;
-            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

@@ -22,70 +22,4 @@
         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;
-        }
-    }
-
-    // Layout 
-
-    .slide-layout {
-        .list {
-            margin: auto;
-        }
-        ul {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-        }
-        li {
-            position: relative;
-            z-index: 1;
-            margin-top: 12px;
-            img {
-                box-shadow: 0 0 0 1px rgba(0,0,0,.15);
-            }
-        }
-        .item-inner {
-            padding-top: 0;
-        }
-        .item-inner:after {
-            display: none;
-        }
-        .item-inner:before {
-            opacity: 0;
-            content: '';
-            position: absolute;
-            width: 22px;
-            height: 22px;
-            right: 11px;
-            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/mainStore.js

@@ -7,6 +7,8 @@ import {storeApplicationSettings} from './applicationSettings';
 import {storePresentationInfo} from './presentationInfo';
 import {storePresentationSettings} from './presentationSettings';
 import { storeLayout } from './layout';
+import { storeTransition } from './transition';
+import { storeTheme } from './theme';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -22,7 +24,9 @@ export const stores = {
     storeApplicationSettings: new storeApplicationSettings(),
     storePresentationInfo: new storePresentationInfo(),
     storePresentationSettings: new storePresentationSettings(),
-    storeLayout: new storeLayout()
+    storeLayout: new storeLayout(),
+    storeTransition: new storeTransition(),
+    storeTheme: new storeTheme()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

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

@@ -0,0 +1,15 @@
+import {action, observable} from 'mobx';
+
+export class storeTheme {
+
+    @observable arrayThemes;
+    @observable slideThemeIndex;
+  
+    @action addArrayThemes(array) {
+        this.arrayThemes = array;
+    }
+
+    @action changeSlideThemeIndex(index) {
+        this.slideThemeIndex = index;
+    }
+}

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

@@ -0,0 +1,16 @@
+import {action, observable} from 'mobx';
+
+export class storeTransition {
+   
+    // @observable arrayLayouts;
+    // @observable slideLayoutIndex = -1;
+  
+    // @action addArrayLayouts(array) {
+    //     this.arrayLayouts = array;
+    // }
+
+    // @action changeSlideLayoutIndex(index) {
+    //     this.slideLayoutIndex = index;
+    // }
+
+}

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

@@ -8,6 +8,8 @@ import {Device} from '../../../../../common/mobile/utils/device';
 import EditSlideController from "../../controller/edit/EditSlide";
 import EditTextController from "../../controller/edit/EditText";
 import LayoutController from "../../controller/edit/Layout";
+import TransitionController from '../../controller/edit/Transition';
+import ThemeController from '../../controller/edit/Theme';
 //import EditShapeController from "../../controller/edit/EditShape";
 //import EditImageController from "../../controller/edit/EditImage";
 //import EditTableController from "../../controller/edit/EditTable";
@@ -18,6 +20,14 @@ const routes = [
     {
         path: '/layout/',
         component: LayoutController
+    },
+    {
+        path: '/theme/',
+        component: ThemeController
+    },
+    {
+        path: '/transition/',
+        component: TransitionController
     }
 ];
 

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

@@ -12,9 +12,9 @@ const EditSlide = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textTheme} link="#"></ListItem>
+                <ListItem title={_t.textTheme} link="/theme/"></ListItem>
                 <ListItem title={_t.textLayout} link="/layout/"></ListItem>
-                <ListItem title={_t.textTransition} link="#"></ListItem>
+                <ListItem title={_t.textTransition} link="/transition/"></ListItem>
                 <ListItem title={_t.textStyle} link="#"></ListItem>
             </List>
         </Fragment>

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

@@ -12,10 +12,7 @@ const PageLayout = props => {
    
     console.log(slideLayoutIndex);
     console.log(arrayLayouts);
-    console.log(store);
+   
-
-    
-
     return (
         <Page className="slide-layout">
             <Navbar title={_t.textLayout} backLink={_t.textBack}>

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, NavRight, Link } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageTheme = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const store = props.storeTheme;
+    const arrayThemes = JSON.parse(JSON.stringify(store.arrayThemes));
+    const slideThemeIndex = store.slideThemeIndex;
+    const defaultThemes = arrayThemes[0];
+    const docThemes = arrayThemes[1];
+   
+    console.log(slideThemeIndex);
+    console.log(arrayThemes);
+  
+    return (
+        <Page className="slide-theme">
+            <Navbar title={_t.textTheme} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            {arrayThemes.length ? (
+                <List>
+                    {defaultThemes.map((elem, index) => {
+                        return (
+                            <ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"} 
+                                style={{backgroundPosition: "0 " + index * -38 + "px"}} 
+                                onClick={() => {
+                                    store.changeSlideThemeIndex(elem.Index);
+                                    props.onThemeClick(elem.Index);
+                                }}>
+                            </ListItem>
+                        );
+                    })}
+                    {docThemes.map((elem, index) => {
+                        return (
+                            <ListItem key={elem.Index} className={elem.Index === slideThemeIndex ? "item-theme active" : "item-theme"}
+                                style={{backgroundPosition: "0 -0px", backgroundImage: "url(" + elem.ThemeInfo.Thumbnail + ")"}}
+                                onClick={() => {
+                                    store.changeSlideThemeIndex(elem.Index);
+                                    props.onThemeClick(elem.Index);
+                                }}>
+                            </ListItem>
+                        );
+                    })}
+                </List>
+            ) : null}
+        </Page>
+    );
+};
+
+const Theme = inject("storeTheme")(observer(PageTheme));
+
+export default Theme;

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

@@ -0,0 +1,35 @@
+import React, {Fragment} from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, BlockTitle, NavRight, Link } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageTransition = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    // const storeInfo = props.storePresentationInfo;
+    // const dataApp = props.getAppProps();
+    // const dataModified = props.getModified;
+    // const dataModifiedBy = props.getModifiedBy;
+    // const creators = props.getCreators;
+    // const dataDoc = JSON.parse(JSON.stringify(storeInfo.dataDoc));
+    
+    return (
+        <Page>
+            <Navbar title={_t.textTransition} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            <List>
+                <ListItem link="#" title={_t.textEffect} after="None"></ListItem>
+                <ListItem link="#" title={_t.textType}></ListItem>
+                <ListItem link="#" title={_t.textDuration}></ListItem>
+            </List>
+
+        </Page>
+    );
+};
+
+const Transition = inject("storeTransition")(observer(PageTransition));
+
+export default Transition;