[PE mobile] Make Transition settings

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

@@ -154,3 +154,50 @@
     }
 }
 
+// Transition 
+
+.slide-transition {
+    .splitter {
+        display: flex;
+        align-items: center;
+        color: @black;
+        label {
+            margin: 0 5px;
+        }
+    }
+    .buttons-row {
+        display: flex;
+        margin: 0;
+        min-width: 90px;
+        margin-left: 10px;
+        .button {
+            width: 100%;
+        }
+        .button:first-child {
+            border-radius: 5px 0 0 5px;
+            border-left-width: 1px;
+            border-left-style: solid;
+        }
+        .button:last-child {
+            border-radius: 0 5px 5px 0;
+        }
+    }
+    .range-slider {
+        .range-bar {
+            height: 2px;
+        }
+        .range-bar-active {
+            background: transparent;
+        }
+    }
+    .slide-apply-all {
+        color: @themeColor;
+        border: 0;
+        .item-inner {
+            justify-content: center;
+        }
+    }
+}
+
+
+

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", "storeTheme")
+@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeLayout", "storeTheme", "storeTransition")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -193,6 +193,7 @@ class MainController extends Component {
 
         const storeFocusObjects = this.props.storeFocusObjects;
         const storeLayout = this.props.storeLayout;
+        const storeTransition = this.props.storeTransition;
 
         this.api.asc_registerCallback('asc_onFocusObject', objects => {
             console.log(objects);
@@ -204,6 +205,9 @@ class MainController extends Component {
             if(settings[0] === "slide") {
                 const slideObject = objects[0].get_ObjectValue();
                 storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
+                // const timing = slideObject.get_transition();
+                // console.log(timing);
+                storeTransition.addTransitionObj(slideObject.get_transition());
             }
         });
 

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

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

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

@@ -6,6 +6,29 @@ class TransitionController extends Component {
         super(props);
     }
 
+    initTransitionView(timing) {
+ 
+        const _effect = timing.get_TransitionType();
+        // me.getView('EditSlide').fillEffectTypes(_effect);
+        // $('#edit-slide-effect .item-after').text(me.getView('EditSlide').getEffectName(_effect));
+        // $('#edit-slide-effect-type').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None);
+        // $('#edit-slide-duration').toggleClass('disabled', _effect == Asc.c_oAscSlideTransitionTypes.None);
+
+        // _effectType = timing.get_TransitionOption();
+        // $('#edit-slide-effect-type .item-after').text((_effect != Asc.c_oAscSlideTransitionTypes.None) ? me.getView('EditSlide').getEffectTypeName(_effectType) : '');
+
+        // _effectDuration = timing.get_TransitionDuration();
+        // $('#edit-slide-duration .item-after label').text((_effectDuration!==null && _effectDuration!==undefined) ?  (parseInt(_effectDuration/1000.) + ' ' + me.textSec) : '');
+
+        // $('#edit-slide-start-click input:checkbox').prop('checked', !!timing.get_SlideAdvanceOnMouseClick());
+        // $('#edit-slide-delay input:checkbox').prop('checked', !!timing.get_SlideAdvanceAfter());
+        // $('#edit-slide-delay .item-content:nth-child(2)').toggleClass('disabled',!timing.get_SlideAdvanceAfter());
+
+        // _effectDelay = timing.get_SlideAdvanceDuration();
+        // $('#edit-slide-delay .item-content:nth-child(2) .item-after').text((_effectDelay!==null && _effectDelay!==undefined) ? (parseInt(_effectDelay/1000.) + ' ' + me.textSec) : '');
+        // $('#edit-slide-delay .item-content:nth-child(2) input').val([(_effectDelay!==null && _effectDelay!==undefined) ? parseInt(_effectDelay/1000.) : 0]);
+    }
+
     render() {
         return (
             <Transition />
@@ -13,4 +36,8 @@ class TransitionController extends Component {
     }
 }
 
+// const initTransitionView = (timing) => {
+        
+// }
+
 export default TransitionController;

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

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

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

@@ -0,0 +1,5 @@
+import {action, observable} from 'mobx';
+
+export class storeEffect {
+
+}

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

@@ -9,6 +9,8 @@ import {storePresentationSettings} from './presentationSettings';
 import { storeLayout } from './layout';
 import { storeTransition } from './transition';
 import { storeTheme } from './theme';
+import { storeEffect } from './effect';
+import { storeType } from './type';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -26,7 +28,9 @@ export const stores = {
     storePresentationSettings: new storePresentationSettings(),
     storeLayout: new storeLayout(),
     storeTransition: new storeTransition(),
-    storeTheme: new storeTheme()
+    storeTheme: new storeTheme(),
+    storeEffect: new storeEffect(),
+    storeType: new storeType()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

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

@@ -2,15 +2,14 @@ import {action, observable} from 'mobx';
 
 export class storeTransition {
    
-    // @observable arrayLayouts;
+    @observable isDelay = false;
-    // @observable slideLayoutIndex = -1;
+    @observable transitionObj = {};
-  
-    // @action addArrayLayouts(array) {
-    //     this.arrayLayouts = array;
-    // }
 
-    // @action changeSlideLayoutIndex(index) {
+    @action toggleDelay() {
-    //     this.slideLayoutIndex = index;
+        this.isDelay = !this.isDelay;
-    // }
+    }
 
+    @action addTransitionObj(obj) {
+        this.transitionObj = obj;
+    }
 }

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

@@ -0,0 +1,5 @@
+import {action, observable} from 'mobx';
+
+export class storeType {
+
+}

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

@@ -10,6 +10,8 @@ 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 EffectController from '../../controller/edit/Effect';
+import TypeController from '../../controller/edit/Type';
 //import EditShapeController from "../../controller/edit/EditShape";
 //import EditImageController from "../../controller/edit/EditImage";
 //import EditTableController from "../../controller/edit/EditTable";
@@ -28,6 +30,14 @@ const routes = [
     {
         path: '/transition/',
         component: TransitionController
+    },
+    {
+        path: '/effect/',
+        component: EffectController
+    },
+    {
+        path: '/type/',
+        component: TypeController
     }
 ];
 

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

@@ -0,0 +1,24 @@
+import React, {useState} from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageEffect= props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    
+    return (
+        <Page>
+            <Navbar title={_t.textEffect} backLink={_t.textBack} />
+            <List mediaList>
+                <ListItem radio name="editslide-effect"></ListItem>
+                <ListItem radio name="editslide-effect"></ListItem>
+                <ListItem radio name="editslide-effect"></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const Effect = inject("storeEffect")(observer(PageEffect));
+
+export default Effect;

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

@@ -1,12 +1,14 @@
-import React, {Fragment} from "react";
+import React, {useState} from "react";
 import { observer, inject } from "mobx-react";
-import { Page, Navbar, List, ListItem, BlockTitle, NavRight, Link } from "framework7-react";
+import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } 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 [stateRange, changeRange] = useState(0);
+    const store = props.storeTransition;
+    const isDelay = store.isDelay;
     // const dataApp = props.getAppProps();
     // const dataModified = props.getModified;
     // const dataModifiedBy = props.getModifiedBy;
@@ -14,18 +16,48 @@ const PageTransition = props => {
     // const dataDoc = JSON.parse(JSON.stringify(storeInfo.dataDoc));
     
     return (
-        <Page>
+        <Page className="slide-transition">
             <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="/effect/" title={_t.textEffect} after="None"></ListItem>
-                <ListItem link="#" title={_t.textType}></ListItem>
+                <ListItem link="/type/" title={_t.textType}>
-                <ListItem link="#" title={_t.textDuration}></ListItem>
+                    <div slot="after"></div>
+                </ListItem>
+                <ListItem title={_t.textDuration}>
+                    <div slot="after" className="splitter">
+                        <label>2 s</label>
+                        <p className="buttons-row">
+                            <span className="button">-</span>  
+                            <span className="button">+</span>
+                        </p>
+                    </div>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem>
+                    <span>{_t.textStartOnClick}</span>
+                    <Toggle />
+                </ListItem>
+                <ListItem>
+                    <span>{_t.textDelay}</span>
+                    <Toggle checked={isDelay} onChange={store.toggleDelay.bind(store)} />
+                </ListItem>
+                <ListItem>
+                    <ListItemCell className="flex-shrink-3">
+                        <Range min={0} max={300} step={1} value={stateRange} onRangeChange={changeRange.bind(this)} disabled={!isDelay}></Range>
+                    </ListItemCell>
+                    <ListItemCell className="width-auto flex-shrink-0">
+                        <span>{stateRange} s</span>
+                    </ListItemCell>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem className="slide-apply-all">{_t.textApplyAll}</ListItem>
             </List>
-
         </Page>
     );
 };

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

@@ -0,0 +1,28 @@
+import React, {useState} from "react";
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, List, ListItem, NavRight, Link, Toggle, Range, ListItemCell } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageType= props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+
+    return (
+        <Page>
+            <Navbar title={_t.textType} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            <List mediaList>
+                <ListItem radio name="editslide-effect-type"></ListItem>
+                <ListItem radio name="editslide-effect-type"></ListItem>
+                <ListItem radio name="editslide-effect-type"></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const Type = inject("storeType")(observer(PageType));
+
+export default Type;