[PE mobile] Refactoring Slide Settings, added duplicates and remove slides

apps/common/mobile/resources/less/common-material.less

@@ -35,27 +35,32 @@
     }
     .button {
         --f7-button-text-color: @themeColor;
+        border: 1px solid @themeColor;
+        color: @themeColor;
         text-align: center;
         display: block;
-        border-radius: 2px;
+        // border-radius: 2px;
-        line-height: 36px;
+        line-height: 27px;
+        border-radius: 5px;
+        // line-height: 36px;
         box-sizing: border-box;
         appearance: none;
         background: 0 0;
         margin: 0;
-        height: 36px;
+        // height: 36px;
+        height: 29px;
         white-space: nowrap;
         text-overflow: ellipsis;
         font-size: 14px;
         text-transform: uppercase;
         font-family: inherit;
         cursor: pointer;
-        min-width: 64px;
+        // min-width: 64px;
-        padding: 0 8px;
+        // padding: 0 8px;
+        padding: 0 10px;
         position: relative;
         overflow: hidden;
         outline: 0;
-        border: none;
         -webkit-transition-duration: .3s;
         transition-duration: .3s;
         -webkit-transform: translate3d(0,0,0);

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

@@ -3,6 +3,7 @@
 @black: #000000;
 @gray: #c4c4c4;
 @green: #4cd964;
+@brightred: #f00;
 @background-normal: @white;
 @autoColor: @black;
 
@@ -182,6 +183,12 @@
     }
 }
 
+.style-effect, .style-type {
+    .list .item-title {
+        font-weight: normal; 
+    }
+}
+
 .range-slider-delay {
     width: 100%;
     margin: 4px 0 5px 0;
@@ -216,22 +223,31 @@
     }
 }
 
-.apply-all {
+.list {
-    color: @themeColor;
+    .apply-all, .duplicate-slide, .delete-slide {
         border: 0;
+        .item-content {
+            padding-left: 0;
+        }
         .item-inner {
             justify-content: center;
+            padding-right: 0;
         }
-    &__elem {
         .item-link .item-inner::before {
             display: none;
         }
     }
+    .apply-all, .duplicate-slide {
+        color: @themeColor;
+    }
+    .delete-slide {
+        color: @brightred;
+    }
 }
 
 .item-color-auto {
     .color-auto {
-        width:22px;
+        width: 22px;
         height: 22px;
         background-color: @autoColor;
     }

apps/presentationeditor/mobile/locale/en.json

@@ -124,7 +124,10 @@
       "textZoomRotate": "Zoom and Rotate",
       "textSec": "s",
       "textAddCustomColor": "Add Custom Color",
-      "textFill": "Fill"
+      "textFill": "Fill",
+      "textCustomColor": "Custom Color",
+      "textDuplicateSlide": "Duplicate Slide",
+      "textDeleteSlide": "Delete Slide"
     }
   },
   "Common": {

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

@@ -5,7 +5,7 @@ import { f7 } from "framework7-react";
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeLayout", "storeTheme", "storeTransition")
+@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -193,36 +193,26 @@ class MainController extends Component {
         // me.api.asc_registerCallback('asc_onMeta',                       _.bind(me.onMeta, me));
 
         const storeFocusObjects = this.props.storeFocusObjects;
-        const storeLayout = this.props.storeLayout;
+        const storeSlideSettings = this.props.storeSlideSettings;
         
         this.api.asc_registerCallback('asc_onFocusObject', objects => {
             // console.log(objects);
             storeFocusObjects.resetFocusObjects(objects);
-
-            // const settings = storeFocusObjects.settings;
-
-            // if(settings[0] === "slide") {
-            //     const slideObject = objects[0].get_ObjectValue();
-            //     storeLayout.changeSlideLayoutIndex(slideObject.get_LayoutIndex());
-            //     storeTransition.initTransition(slideObject.get_transition());
-            // }
         });
 
-        const storeTheme = this.props.storeTheme;
-
         this.api.asc_registerCallback('asc_onInitEditorStyles', themes => {
             // console.log(themes);
-            storeTheme.addArrayThemes(themes);
+            storeSlideSettings.addArrayThemes(themes);
         });
 
         this.api.asc_registerCallback('asc_onUpdateThemeIndex',  themeId => {
             // console.log(themeId);
-            storeTheme.changeSlideThemeIndex(themeId);
+            storeSlideSettings.changeSlideThemeIndex(themeId);
         });
 
         this.api.asc_registerCallback('asc_onUpdateLayout', layouts => {
             // console.log(layouts);
-            storeLayout.addArrayLayouts(layouts);
+            storeSlideSettings.addArrayLayouts(layouts);
         });
 
         this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {

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

@@ -1,17 +1,158 @@
 import React, {Component} from 'react';
 import { f7 } from 'framework7-react';
 import {Device} from '../../../../../common/mobile/utils/device';
-import {observer, inject} from "mobx-react";
-
 import { EditSlide } from '../../view/edit/EditSlide';
 
 class EditSlideController extends Component {
     constructor (props) {
         super(props);
+        this.onDuplicateSlide = this.onDuplicateSlide.bind(this);
+        this.onRemoveSlide = this.onRemoveSlide.bind(this);
     }
+
+    onThemeClick(index) {
+        const api = Common.EditorApi.get();
+        api.ChangeTheme(index);
+    }
+
+    onLayoutClick(index) {
+        const api = Common.EditorApi.get();
+        api.ChangeLayout(index);
+    }
+
+    onApplyAll() {
+        const api = Common.EditorApi.get();
+        api.SlideTransitionApplyToAll();
+    };
+
+    changeDuration(duration) {
+        const api = Common.EditorApi.get();
+
+        let props = new Asc.CAscSlideProps(),
+            timing = new Asc.CAscSlideTransition(),
+            _effectDuration = duration * 1000;
+
+        timing.put_TransitionDuration(_effectDuration);
+        props.put_transition(timing);
+        api.SetSlideProps(props);
+    };
+
+    onStartClick(value) {
+        const api = Common.EditorApi.get();
+
+        let props = new Asc.CAscSlideProps(),
+            timing = new Asc.CAscSlideTransition();
+
+        timing.put_SlideAdvanceOnMouseClick(value);
+        props.put_transition(timing);
+        api.SetSlideProps(props);
+    };
+
+    onDelayCheck(value, _effectDelay) {
+        const api = Common.EditorApi.get();
+
+        let props = new Asc.CAscSlideProps(),
+            timing = new Asc.CAscSlideTransition();
+
+        timing.put_SlideAdvanceAfter(value);
+        timing.put_SlideAdvanceDuration(_effectDelay);
+        props.put_transition(timing);
+        api.SetSlideProps(props);
+    };
+
+    onDelay(value) {
+        const api = Common.EditorApi.get();
+
+        let props = new Asc.CAscSlideProps(),
+            timing = new Asc.CAscSlideTransition(),
+            _effectDelay = value * 1000;
+
+        timing.put_SlideAdvanceDuration(_effectDelay);
+        props.put_transition(timing);
+        api.SetSlideProps(props);
+    };
+
+    onEffectClick(value, effectType) {
+        const api = Common.EditorApi.get();
+
+        let props = new Asc.CAscSlideProps(),
+            timing = new Asc.CAscSlideTransition();
+        //  _effectType = this.fillEffectTypes(value);
+
+        timing.put_TransitionType(value);
+        timing.put_TransitionOption(effectType);
+        props.put_transition(timing);
+        api.SetSlideProps(props);
+    };
+
+    onEffectTypeClick(value, effect) {
+        const api = Common.EditorApi.get();
+
+        let props = new Asc.CAscSlideProps(),
+            timing = new Asc.CAscSlideTransition();
+
+        timing.put_TransitionType(effect);
+        timing.put_TransitionOption(value);
+        props.put_transition(timing);
+        api.SetSlideProps(props);
+    }
+
+    onFillColor(color) {
+        const api = Common.EditorApi.get();
+
+        let props = new Asc.CAscSlideProps(),
+            fill = new Asc.asc_CShapeFill();
+
+        if (color == 'transparent') {
+            fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
+            fill.put_fill(null);
+        } else {
+            fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
+            fill.put_fill(new Asc.asc_CFillSolid());
+            fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
+        }
+
+        props.put_background(fill);
+        api.SetSlideProps(props);
+        
+    };
+
+    closeModal() {
+        if (Device.phone) {
+            f7.sheet.close('#edit-sheet', true);
+        } else {
+            f7.popover.close('#edit-popover');
+        }
+    };
+
+    onDuplicateSlide() {
+        const api = Common.EditorApi.get();
+        api.DublicateSlide();
+        this.closeModal();
+    };
+
+    onRemoveSlide() {
+        const api = Common.EditorApi.get();
+        api.DeleteSlide();
+        this.closeModal();
+    };
+
     render () {
         return (
-            <EditSlide />
+            <EditSlide 
+                onThemeClick={this.onThemeClick}
+                onLayoutClick={this.onLayoutClick}
+                onApplyAll={this.onApplyAll} 
+                changeDuration={this.changeDuration}
+                onStartClick={this.onStartClick}
+                onDelayCheck={this.onDelayCheck}
+                onDelay={this.onDelay}
+                onEffectClick={this.onEffectClick}
+                onEffectTypeClick={this.onEffectTypeClick}
+                onFillColor={this.onFillColor}
+                onDuplicateSlide={this.onDuplicateSlide}
+                onRemoveSlide={this.onRemoveSlide}
+            />
         )
     }
 }

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

@@ -1,16 +0,0 @@
-// 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/Layout.jsx

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

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

@@ -1,36 +0,0 @@
-import React, { Component } from "react";
-import { StyleFillColor } from "../../view/edit/StyleSlideSettings";
-
-class StyleSlideController extends Component {
-    constructor(props) {
-        super(props);
-    }
-
-    onFillColor(color) {
-        const api = Common.EditorApi.get();
-
-        let props = new Asc.CAscSlideProps(),
-            fill = new Asc.asc_CShapeFill();
-
-        if (color == 'transparent') {
-            fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
-            fill.put_fill(null);
-        } else {
-            fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
-            fill.put_fill(new Asc.asc_CFillSolid());
-            fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
-        }
-
-        props.put_background(fill);
-        api.SetSlideProps(props);
-        
-    };
-
-    render() {
-        return (
-            <StyleFillColor onFillColor={this.onFillColor} />
-        );
-    }
-}
-
-export default StyleSlideController;

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

@@ -1,21 +0,0 @@
-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

@@ -1,101 +0,0 @@
-import React, { Component } from "react";
-import {Transition} from "../../view/edit/Transition";
-class TransitionController extends Component {
-    constructor(props) {
-        super(props);
-    };
-
-    onApplyAll() {
-        const api = Common.EditorApi.get();
-        api.SlideTransitionApplyToAll();
-    };
-
-    changeDuration(duration) {
-        const api = Common.EditorApi.get();
-
-        let props = new Asc.CAscSlideProps(),
-            timing = new Asc.CAscSlideTransition(),
-            _effectDuration = duration * 1000;
-
-        timing.put_TransitionDuration(_effectDuration);
-        props.put_transition(timing);
-        api.SetSlideProps(props);
-    };
-
-    onStartClick(value) {
-        const api = Common.EditorApi.get();
-
-        let props = new Asc.CAscSlideProps(),
-            timing = new Asc.CAscSlideTransition();
-
-        timing.put_SlideAdvanceOnMouseClick(value);
-        props.put_transition(timing);
-        api.SetSlideProps(props);
-    };
-
-    onDelayCheck(value, _effectDelay) {
-        const api = Common.EditorApi.get();
-
-        let props = new Asc.CAscSlideProps(),
-            timing = new Asc.CAscSlideTransition();
-
-        timing.put_SlideAdvanceAfter(value);
-        timing.put_SlideAdvanceDuration(_effectDelay);
-        props.put_transition(timing);
-        api.SetSlideProps(props);
-    };
-
-    onDelay(value) {
-        const api = Common.EditorApi.get();
-
-        let props = new Asc.CAscSlideProps(),
-            timing = new Asc.CAscSlideTransition(),
-            _effectDelay = value * 1000;
-
-        timing.put_SlideAdvanceDuration(_effectDelay);
-        props.put_transition(timing);
-        api.SetSlideProps(props);
-    };
-
-    onEffectClick(value, effectType) {
-        const api = Common.EditorApi.get();
-
-        let props = new Asc.CAscSlideProps(),
-            timing = new Asc.CAscSlideTransition();
-        //  _effectType = this.fillEffectTypes(value);
-
-        timing.put_TransitionType(value);
-        timing.put_TransitionOption(effectType);
-        props.put_transition(timing);
-        api.SetSlideProps(props);
-    };
-
-    onEffectTypeClick(value, effect) {
-        const api = Common.EditorApi.get();
-
-        let props = new Asc.CAscSlideProps(),
-            timing = new Asc.CAscSlideTransition();
-
-        timing.put_TransitionType(effect);
-        timing.put_TransitionOption(value);
-        props.put_transition(timing);
-        api.SetSlideProps(props);
-    }
-
-    render() {
-        return (
-            <Transition 
-                onApplyAll={this.onApplyAll} 
-                changeDuration={this.changeDuration}
-                onStartClick={this.onStartClick}
-                onDelayCheck={this.onDelayCheck}
-                onDelay={this.onDelay}
-                onEffectClick={this.onEffectClick}
-                onEffectTypeClick={this.onEffectTypeClick}
-            />
-        );
-    }
-}
-
-
-export default TransitionController;

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

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

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

@@ -6,11 +6,8 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users';
 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 { storeSlideStyle } from './styleSlide';
 import { storePalette } from './palette';
+import { storeSlideSettings } from './slideSettings';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -26,10 +23,7 @@ export const stores = {
     storeApplicationSettings: new storeApplicationSettings(),
     storePresentationInfo: new storePresentationInfo(),
     storePresentationSettings: new storePresentationSettings(),
-    storeLayout: new storeLayout(),
+    storeSlideSettings: new storeSlideSettings(),
-    storeTransition: new storeTransition(),
-    storeTheme: new storeTheme(),
-    storeSlideStyle: new storeSlideStyle(),
     storePalette: new storePalette()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),

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

@@ -1,7 +1,14 @@
-import {action, observable} from 'mobx';
+import {action, observable, computed} from 'mobx';
 
-export class storeSlideStyle {
+export class storeSlideSettings {
+    
+    @observable arrayLayouts;
+    @observable slideLayoutIndex = -1;
     @observable fillColor = undefined;
+    @observable arrayThemes;
+    @observable slideThemeIndex;
+    @observable effect;
+    @observable type;
     
     @action getFillColor (slideObject) {
     
@@ -31,4 +38,27 @@ export class storeSlideStyle {
         this.fillColor = color;
     }
 
+    @action addArrayLayouts(array) {
+        this.arrayLayouts = array;
+    }
+
+    @action changeSlideLayoutIndex(index) {
+        this.slideLayoutIndex = index;
+    }
+
+    @action addArrayThemes(array) {
+        this.arrayThemes = array;
+    }
+
+    @action changeSlideThemeIndex(index) {
+        this.slideThemeIndex = index;
+    }
+
+    @action changeEffect(value) {
+        this.effect = value;
+    }
+
+    @action changeType(value) {
+        this.type = value;
+    }
 }

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

@@ -1,15 +0,0 @@
-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

@@ -1,15 +0,0 @@
-import {action, observable} from 'mobx';
-
-export class storeTransition {
-
-    @observable effect;
-    @observable type;
-    
-    @action changeEffect(value) {
-        this.effect = value;
-    }
-
-    @action changeType(value) {
-        this.type = value;
-    }
-}

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

@@ -7,13 +7,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 { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
-import TransitionController from '../../controller/edit/Transition';
+
-import ThemeController from '../../controller/edit/Theme';
-import StyleSlideController from '../../controller/edit/StyleSlideSettings';
-import { CustomFillColor } from './StyleSlideSettings';
-import { Effect } from './Transition';
-import { Type } from './Transition';
 //import EditShapeController from "../../controller/edit/EditShape";
 //import EditImageController from "../../controller/edit/EditImage";
 //import EditTableController from "../../controller/edit/EditTable";
@@ -23,15 +18,15 @@ import { Type } from './Transition';
 const routes = [
     {
         path: '/layout/',
-        component: LayoutController
+        component: Layout
     },
     {
         path: '/theme/',
-        component: ThemeController
+        component: Theme
     },
     {
         path: '/transition/',
-        component: TransitionController
+        component: Transition
     },
     {
         path: '/effect/',
@@ -43,7 +38,7 @@ const routes = [
     },
     {
         path: '/style/',
-        component: StyleSlideController
+        component: StyleFillColor
     },
     {
         path: '/edit-custom-color/',

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

@@ -1,9 +1,9 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon, View} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell} from 'framework7-react';
-import {f7} from 'framework7-react';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { useTranslation } from 'react-i18next';
-import {Device} from '../../../../../common/mobile/utils/device';
+// import {Device} from '../../../../../common/mobile/utils/device';
 
 const EditSlide = props => {
     const { t } = useTranslation();
@@ -12,13 +12,443 @@ const EditSlide = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textTheme} link="/theme/"></ListItem>
+                <ListItem title={_t.textTheme} link="/theme/" routeProps={{
-                <ListItem title={_t.textLayout} link="/layout/"></ListItem>
+                    onThemeClick: props.onThemeClick
-                <ListItem title={_t.textTransition} link="/transition/"></ListItem>
+                }}></ListItem>
-                <ListItem title={_t.textStyle} link="/style/"></ListItem>
+                <ListItem title={_t.textLayout} link="/layout/" routeProps={{
+                    onLayoutClick: props.onLayoutClick
+                }}></ListItem>
+                <ListItem title={_t.textTransition} link="/transition/" routeProps={{
+                    onEffectClick: props.onEffectClick,
+                    onEffectTypeClick: props.onEffectTypeClick,
+                    changeDuration: props.changeDuration,
+                    onStartClick: props.onStartClick,
+                    onDelayCheck: props.onDelayCheck,
+                    onDelay: props.onDelay,
+                    onApplyAll: props.onApplyAll
+                }}></ListItem>
+                <ListItem title={_t.textStyle} link="/style/" routeProps={{
+                    onFillColor: props.onFillColor
+                }}></ListItem>
+            </List>
+            <List>
+                <ListItem href="#" className="duplicate-slide" onClick={props.onDuplicateSlide}>{_t.textDuplicateSlide}</ListItem>
+                <ListItem href="#" className="delete-slide" onClick={props.onRemoveSlide}>{_t.textDeleteSlide}</ListItem>
             </List>
         </Fragment>
     )
 };
 
-export {EditSlide};
+const PageTheme = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const storeSlideSettings = props.storeSlideSettings;
+    const arrayThemes = storeSlideSettings.arrayThemes;
+    const slideThemeIndex = storeSlideSettings.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 className="slide-theme__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={() => {
+                                    storeSlideSettings.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={() => {
+                                    storeSlideSettings.changeSlideThemeIndex(elem.Index);
+                                    props.onThemeClick(elem.Index);
+                                }}>
+                            </ListItem>
+                        );
+                    })}
+                </List>
+            ) : null}
+        </Page>
+    );
+};
+
+const PageLayout = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const storeFocusObjects = props.storeFocusObjects;
+    const storeSlideSettings = props.storeSlideSettings;
+    storeSlideSettings.changeSlideLayoutIndex(storeFocusObjects.slideObject.get_LayoutIndex());
+    const arrayLayouts = storeSlideSettings.arrayLayouts;
+    const slideLayoutIndex = storeSlideSettings.slideLayoutIndex;
+   
+    // console.log(slideLayoutIndex);
+    // console.log(arrayLayouts);
+   
+    return (
+        <Page className="slide-layout">
+            <Navbar title={_t.textLayout} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            {arrayLayouts.length ? (
+                <List className="slide-layout__list">
+                    {arrayLayouts.map((elem, index) => {
+                        return (
+                            <ListItem key={index} className={slideLayoutIndex === index ? "active" : ""} 
+                                onClick={() => {
+                                    storeSlideSettings.changeSlideLayoutIndex(index);
+                                    props.onLayoutClick(index);
+                                }}>
+                                <img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
+                            </ListItem>
+                        )
+                    })}
+                </List>
+            ) : null}
+        </Page>
+    );
+};
+
+const PageTransition = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const _arrEffect = [
+        {displayValue: _t.textNone,    value: Asc.c_oAscSlideTransitionTypes.None},
+        {displayValue: _t.textFade,    value: Asc.c_oAscSlideTransitionTypes.Fade},
+        {displayValue: _t.textPush,    value: Asc.c_oAscSlideTransitionTypes.Push},
+        {displayValue: _t.textWipe,    value: Asc.c_oAscSlideTransitionTypes.Wipe},
+        {displayValue: _t.textSplit,   value: Asc.c_oAscSlideTransitionTypes.Split},
+        {displayValue: _t.textUnCover, value: Asc.c_oAscSlideTransitionTypes.UnCover},
+        {displayValue: _t.textCover,   value: Asc.c_oAscSlideTransitionTypes.Cover},
+        {displayValue: _t.textClock,   value: Asc.c_oAscSlideTransitionTypes.Clock},
+        {displayValue: _t.textZoom,    value: Asc.c_oAscSlideTransitionTypes.Zoom}
+    ];
+    const _arrEffectType = [
+        {displayValue: _t.textSmoothly,           value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
+        {displayValue: _t.textBlack,              value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
+        {displayValue: _t.textLeft,               value: Asc.c_oAscSlideTransitionParams.Param_Left},
+        {displayValue: _t.textTop,                value: Asc.c_oAscSlideTransitionParams.Param_Top},
+        {displayValue: _t.textRight,              value: Asc.c_oAscSlideTransitionParams.Param_Right},
+        {displayValue: _t.textBottom,             value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
+        {displayValue: _t.textTopLeft,            value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
+        {displayValue: _t.textTopRight,           value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
+        {displayValue: _t.textBottomLeft,         value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft},
+        {displayValue: _t.textBottomRight,        value: Asc.c_oAscSlideTransitionParams.Param_BottomRight},
+        {displayValue: _t.textVerticalIn,         value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn},
+        {displayValue: _t.textVerticalOut,        value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut},
+        {displayValue: _t.textHorizontalIn,       value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn},
+        {displayValue: _t.textHorizontalOut,      value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut},
+        {displayValue: _t.textClockwise,          value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
+        {displayValue: _t.textCounterclockwise,   value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
+        {displayValue: _t.textWedge,              value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
+        {displayValue: _t.textZoomIn,             value: Asc.c_oAscSlideTransitionParams.Zoom_In},
+        {displayValue: _t.textZoomOut,            value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
+        {displayValue: _t.textZoomRotate,         value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
+    ];
+
+    let _arrCurrentEffectTypes = [];
+
+    const fillEffectTypes = type => {
+        _arrCurrentEffectTypes = [];
+        switch (type) {
+            case Asc.c_oAscSlideTransitionTypes.Fade:
+                _arrCurrentEffectTypes.push(_arrEffectType[0], _arrEffectType[1]);
+                break;
+            case Asc.c_oAscSlideTransitionTypes.Push:
+                _arrCurrentEffectTypes = _arrEffectType.slice(2, 6);
+                break;
+            case Asc.c_oAscSlideTransitionTypes.Wipe:
+                _arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
+                break;
+            case Asc.c_oAscSlideTransitionTypes.Split:
+                _arrCurrentEffectTypes = _arrEffectType.slice(10, 14);
+                break;
+            case Asc.c_oAscSlideTransitionTypes.UnCover:
+                _arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
+                break;
+            case Asc.c_oAscSlideTransitionTypes.Cover:
+                _arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
+                break;
+            case Asc.c_oAscSlideTransitionTypes.Clock:
+                _arrCurrentEffectTypes = _arrEffectType.slice(14, 17);
+                break;
+            case Asc.c_oAscSlideTransitionTypes.Zoom:
+                _arrCurrentEffectTypes = _arrEffectType.slice(17);
+                break;
+        }
+        return (_arrCurrentEffectTypes.length > 0) ? _arrCurrentEffectTypes[0].value : -1;
+    };
+
+    const getEffectName = effect => {
+        for (var i=0; i < _arrEffect.length; i++) {
+            if (_arrEffect[i].value == effect) return _arrEffect[i].displayValue;
+        }
+        return '';
+    };
+    
+    const getEffectTypeName = type => {
+        for (var i=0; i < _arrCurrentEffectTypes.length; i++) {
+            if (_arrCurrentEffectTypes[i].value == type) return _arrCurrentEffectTypes[i].displayValue;
+        }
+        return '';
+    };
+
+    const storeFocusObjects = props.storeFocusObjects;
+    const storeSlideSettings = props.storeSlideSettings;
+    const transitionObj = storeFocusObjects.slideObject.get_transition();
+
+    if(!storeSlideSettings.effect) {
+        storeSlideSettings.changeEffect(transitionObj.get_TransitionType());
+    }
+
+    const _effect = storeSlideSettings.effect;
+    const valueEffectTypes = fillEffectTypes(_effect);
+
+    if(!storeSlideSettings.type) {
+        storeSlideSettings.changeType(valueEffectTypes);
+    }
+    
+    let _effectDelay = transitionObj.get_SlideAdvanceDuration();
+
+    const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
+    const isDelay = transitionObj.get_SlideAdvanceAfter();
+    const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
+    const nameEffect = getEffectName(_effect);
+
+    const _effectType = transitionObj.get_TransitionOption();
+    const nameEffectType = getEffectTypeName(_effectType);
+    const _effectDuration = transitionObj.get_TransitionDuration();
+
+    return (
+        <Page className="slide-transition">
+            <Navbar title={_t.textTransition} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            <List>
+                <ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
+                    _arrEffect,
+                    onEffectClick: props.onEffectClick,
+                    fillEffectTypes
+                }}></ListItem>
+                <ListItem link="/type/" title={_t.textType} 
+                    after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''} 
+                    disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
+                        _arrCurrentEffectTypes, 
+                        onEffectTypeClick: props.onEffectTypeClick
+                    }}>
+                </ListItem>
+                <ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
+                    <div slot="after" className="splitter">
+                        <label>{(_effectDuration !== null && _effectDuration !== undefined) ?  (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
+                        <p className="buttons-row">
+                            <span className="button" onClick={() => {
+                                let duration = parseInt(_effectDuration / 1000);
+                                duration = Math.max(0, --duration);
+                                props.changeDuration(duration);
+                            }}>-</span>  
+                            <span className="button" onClick={() => {
+                                let duration = parseInt(_effectDuration / 1000);
+                                duration = Math.min(300, ++duration);
+                                props.changeDuration(duration);
+                            }}>+</span>
+                        </p>
+                    </div>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem>
+                    <span>{_t.textStartOnClick}</span>
+                    <Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
+                </ListItem>
+                <ListItem>
+                    <span>{_t.textDelay}</span>
+                    <Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
+                </ListItem>
+                <ListItem>
+                    <ListItemCell className="flex-shrink-3">
+                        <input type="range" className="range-slider-delay" min="0" max="300" value={stateRange} step="1"
+                            onChange={(e) => {
+                                changeRange(e.target.value);
+                                props.onDelay(stateRange);
+                            }} disabled={!isDelay} />
+                    </ListItemCell>
+                    <ListItemCell className="width-auto flex-shrink-0">
+                        <span>{stateRange} {_t.textSec}</span>
+                    </ListItemCell>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem className="apply-all" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
+            </List>
+        </Page>
+    );
+};
+
+
+const PageEffect = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const storeSlideSettings = props.storeSlideSettings;
+    const _effect = storeSlideSettings.effect;
+    const _arrEffect = props._arrEffect;
+
+    return (
+        <Page className="style-effect">
+            <Navbar title={_t.textEffect} backLink={_t.textBack} />
+            {_arrEffect.length ? (
+                <List mediaList>
+                    {_arrEffect.map((elem, index) => {
+                        return (
+                            <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
+                                checked={elem.value === _effect} onChange={() => {
+                                    storeSlideSettings.changeEffect(elem.value);
+                                    let valueEffectTypes = props.fillEffectTypes(elem.value);
+                                    storeSlideSettings.changeType(valueEffectTypes);
+                                    props.onEffectClick(elem.value, valueEffectTypes);
+                                }}></ListItem>
+                        )
+                    })}
+                </List>
+            ) : null}
+        </Page>
+    );
+};
+
+const PageType= props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
+    const storeSlideSettings = props.storeSlideSettings;
+    const _effect = storeSlideSettings.effect;
+    const type = storeSlideSettings.type;
+
+    return (
+        <Page className="style-type">
+            <Navbar title={_t.textType} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            {_arrCurrentEffectTypes.length ? (
+                <List mediaList>
+                    {_arrCurrentEffectTypes.map((elem, index) => {
+                        return (
+                            <ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
+                                checked={elem.value === type} onChange={() => {
+                                    storeSlideSettings.changeType(elem.value);
+                                    props.onEffectTypeClick(elem.value, _effect);
+                                }}>
+                            </ListItem>
+                        )
+                    })}
+                </List>
+            ) : null}
+        </Page>
+    );
+};
+
+const PageFillColor = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const storeFocusObjects = props.storeFocusObjects;
+    const slideObject = storeFocusObjects.slideObject;
+    const storePalette = props.storePalette;
+    const storeSlideSettings = props.storeSlideSettings;
+    const customColors = storePalette.customColors;
+    const fillColor =  storeSlideSettings.fillColor ? storeSlideSettings.fillColor : storeSlideSettings.getFillColor(slideObject);
+
+    const changeColor = (color, effectId, effectValue) => {
+        if (color !== 'empty') {
+            if (effectId !== undefined ) {
+                const newColor = {color: color, effectId: effectId, effectValue: effectValue};
+                props.onFillColor(newColor);
+                storeSlideSettings.changeFillColor(newColor);
+            } else {
+                props.onFillColor(color);
+                storeSlideSettings.changeFillColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-custom-color/');
+        }
+    };
+  
+    return (
+        <Page>
+            <Navbar title={_t.textFill} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            <ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-custom-color/'} routeProps={{
+                    onFillColor: props.onFillColor
+                }}></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const PageCustomFillColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    let fillColor = props.storeSlideSettings.fillColor;
+
+    if (typeof fillColor === 'object') {
+        fillColor = fillColor.color;
+    }
+
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.onFillColor(color);
+        props.storeSlideSettings.changeFillColor(color);
+        props.f7router.back();
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
+        </Page>
+    )
+};
+
+const Theme = inject("storeSlideSettings")(observer(PageTheme));
+const Layout = inject("storeSlideSettings", "storeFocusObjects")(observer(PageLayout));
+const Transition = inject("storeSlideSettings", "storeFocusObjects")(observer(PageTransition));
+const Type = inject("storeSlideSettings", "storeFocusObjects")(observer(PageType));
+const Effect = inject("storeSlideSettings", "storeFocusObjects")(observer(PageEffect));
+const StyleFillColor = inject("storeSlideSettings", "storePalette", "storeFocusObjects")(observer(PageFillColor));
+const CustomFillColor = inject("storeSlideSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor));
+
+export {
+    EditSlide,
+    Theme,
+    Layout,
+    Transition,
+    Type,
+    Effect,
+    StyleFillColor,
+    CustomFillColor
+};

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

@@ -1,32 +0,0 @@
-// import React, {useState} from "react";
-// import { observer, inject } from "mobx-react";
-// import { Page, Navbar, List, ListItem } from "framework7-react";
-// import { useTranslation } from "react-i18next";
-
-// const PageEffect= props => {
-//     const { t } = useTranslation();
-//     const _t = t("View.Edit", { returnObjects: true });
-//     console.log(props);
-//     const arrEffect = props.arrEffect;
-//     const effect = props.effect;
-    
-//     return (
-//         <Page>
-//             <Navbar title={_t.textEffect} backLink={_t.textBack} />
-//             {arrEffect.length ? (
-//                 <List mediaList>
-//                     {arrEffect.map((elem, index) => {
-//                         return (
-//                             <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
-//                                 checked={elem.value === effect}></ListItem>
-//                         )
-//                     })}
-//                 </List>
-//             ) : null}
-//         </Page>
-//     );
-// };
-
-// const Effect = inject("storeEffect")(observer(PageEffect));
-
-// export default Effect;

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

@@ -1,46 +0,0 @@
-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 PageLayout = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
-    const storeFocusObjects = props.storeFocusObjects;
-    const storeLayout = props.storeLayout;
-    storeLayout.changeSlideLayoutIndex(storeFocusObjects.slideObject.get_LayoutIndex());
-    const arrayLayouts = JSON.parse(JSON.stringify(storeLayout.arrayLayouts));
-    const slideLayoutIndex = storeLayout.slideLayoutIndex;
-   
-    // console.log(slideLayoutIndex);
-    // console.log(arrayLayouts);
-   
-    return (
-        <Page className="slide-layout">
-            <Navbar title={_t.textLayout} backLink={_t.textBack}>
-                <NavRight>
-                    <Link icon='icon-expand-down' sheetClose></Link>
-                </NavRight>
-            </Navbar>
-            {arrayLayouts.length ? (
-                <List className="slide-layout__list">
-                    {arrayLayouts.map((elem, index) => {
-                        return (
-                            <ListItem key={index} className={slideLayoutIndex === index ? "active" : ""} 
-                                onClick={() => {
-                                    storeLayout.changeSlideLayoutIndex(index);
-                                    props.onLayoutClick(index);
-                                }}>
-                                <img src={elem.Image} style={{width: elem.Width, height: elem.Height}} alt=""/>
-                            </ListItem>
-                        )
-                    })}
-                </List>
-            ) : null}
-        </Page>
-    );
-};
-
-const Layout = inject("storeLayout", "storeFocusObjects")(observer(PageLayout));
-
-export default Layout;

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

@@ -1,78 +0,0 @@
-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";
-import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
-
-const PageFillColor = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
-    const storeFocusObjects = props.storeFocusObjects;
-    const slideObject = storeFocusObjects.slideObject;
-    const storePalette = props.storePalette;
-    const storeSlideStyle = props.storeSlideStyle;
-    const customColors = storePalette.customColors;
-    const fillColor =  storeSlideStyle.fillColor ? storeSlideStyle.fillColor : storeSlideStyle.getFillColor(slideObject);
-
-    const changeColor = (color, effectId, effectValue) => {
-        if (color !== 'empty') {
-            if (effectId !== undefined ) {
-                const newColor = {color: color, effectId: effectId, effectValue: effectValue};
-                props.onFillColor(newColor);
-                storeSlideStyle.changeFillColor(newColor);
-            } else {
-                props.onFillColor(color);
-                storeSlideStyle.changeFillColor(color);
-            }
-        } else {
-            // open custom color menu
-            props.f7router.navigate('/edit-custom-color/');
-        }
-    };
-  
-    return (
-        <Page>
-            <Navbar title={_t.textFill} backLink={_t.textBack}>
-                <NavRight>
-                    <Link icon='icon-expand-down' sheetClose></Link>
-                </NavRight>
-            </Navbar>
-            <ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
-            <List>
-                <ListItem title={_t.textAddCustomColor} link={'/edit-custom-color/'} routeProps={{
-                    onFillColor: props.onFillColor
-                }}></ListItem>
-            </List>
-        </Page>
-    );
-};
-
-const PageCustomFillColor = props => {
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-
-    let fillColor = props.storeSlideStyle.fillColor;
-
-    if (typeof fillColor === 'object') {
-        fillColor = fillColor.color;
-    }
-
-    const onAddNewColor = (colors, color) => {
-        props.storePalette.changeCustomColors(colors);
-        props.onFillColor(color);
-        props.storeSlideStyle.changeFillColor(color);
-        props.f7router.back();
-    };
-
-    return (
-        <Page>
-            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
-            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
-        </Page>
-    )
-};
-
-const StyleFillColor = inject("storeSlideStyle", "storePalette", "storeFocusObjects")(observer(PageFillColor));
-const CustomFillColor = inject("storeSlideStyle", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor));
-
-export { StyleFillColor, CustomFillColor };

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

@@ -1,57 +0,0 @@
-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 className="slide-theme__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

@@ -1,250 +0,0 @@
-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 PageTransition = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
-    const _arrEffect = [
-        {displayValue: _t.textNone,    value: Asc.c_oAscSlideTransitionTypes.None},
-        {displayValue: _t.textFade,    value: Asc.c_oAscSlideTransitionTypes.Fade},
-        {displayValue: _t.textPush,    value: Asc.c_oAscSlideTransitionTypes.Push},
-        {displayValue: _t.textWipe,    value: Asc.c_oAscSlideTransitionTypes.Wipe},
-        {displayValue: _t.textSplit,   value: Asc.c_oAscSlideTransitionTypes.Split},
-        {displayValue: _t.textUnCover, value: Asc.c_oAscSlideTransitionTypes.UnCover},
-        {displayValue: _t.textCover,   value: Asc.c_oAscSlideTransitionTypes.Cover},
-        {displayValue: _t.textClock,   value: Asc.c_oAscSlideTransitionTypes.Clock},
-        {displayValue: _t.textZoom,    value: Asc.c_oAscSlideTransitionTypes.Zoom}
-    ];
-    const _arrEffectType = [
-        {displayValue: _t.textSmoothly,           value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
-        {displayValue: _t.textBlack,              value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
-        {displayValue: _t.textLeft,               value: Asc.c_oAscSlideTransitionParams.Param_Left},
-        {displayValue: _t.textTop,                value: Asc.c_oAscSlideTransitionParams.Param_Top},
-        {displayValue: _t.textRight,              value: Asc.c_oAscSlideTransitionParams.Param_Right},
-        {displayValue: _t.textBottom,             value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
-        {displayValue: _t.textTopLeft,            value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
-        {displayValue: _t.textTopRight,           value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
-        {displayValue: _t.textBottomLeft,         value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft},
-        {displayValue: _t.textBottomRight,        value: Asc.c_oAscSlideTransitionParams.Param_BottomRight},
-        {displayValue: _t.textVerticalIn,         value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn},
-        {displayValue: _t.textVerticalOut,        value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut},
-        {displayValue: _t.textHorizontalIn,       value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn},
-        {displayValue: _t.textHorizontalOut,      value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut},
-        {displayValue: _t.textClockwise,          value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
-        {displayValue: _t.textCounterclockwise,   value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
-        {displayValue: _t.textWedge,              value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
-        {displayValue: _t.textZoomIn,             value: Asc.c_oAscSlideTransitionParams.Zoom_In},
-        {displayValue: _t.textZoomOut,            value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
-        {displayValue: _t.textZoomRotate,         value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
-    ];
-
-    let _arrCurrentEffectTypes = [];
-
-    const fillEffectTypes = type => {
-        _arrCurrentEffectTypes = [];
-        switch (type) {
-            case Asc.c_oAscSlideTransitionTypes.Fade:
-                _arrCurrentEffectTypes.push(_arrEffectType[0], _arrEffectType[1]);
-                break;
-            case Asc.c_oAscSlideTransitionTypes.Push:
-                _arrCurrentEffectTypes = _arrEffectType.slice(2, 6);
-                break;
-            case Asc.c_oAscSlideTransitionTypes.Wipe:
-                _arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
-                break;
-            case Asc.c_oAscSlideTransitionTypes.Split:
-                _arrCurrentEffectTypes = _arrEffectType.slice(10, 14);
-                break;
-            case Asc.c_oAscSlideTransitionTypes.UnCover:
-                _arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
-                break;
-            case Asc.c_oAscSlideTransitionTypes.Cover:
-                _arrCurrentEffectTypes = _arrEffectType.slice(2, 10);
-                break;
-            case Asc.c_oAscSlideTransitionTypes.Clock:
-                _arrCurrentEffectTypes = _arrEffectType.slice(14, 17);
-                break;
-            case Asc.c_oAscSlideTransitionTypes.Zoom:
-                _arrCurrentEffectTypes = _arrEffectType.slice(17);
-                break;
-        }
-        return (_arrCurrentEffectTypes.length > 0) ? _arrCurrentEffectTypes[0].value : -1;
-    };
-
-    const getEffectName = effect => {
-        for (var i=0; i < _arrEffect.length; i++) {
-            if (_arrEffect[i].value == effect) return _arrEffect[i].displayValue;
-        }
-        return '';
-    };
-    
-    const getEffectTypeName = type => {
-        for (var i=0; i < _arrCurrentEffectTypes.length; i++) {
-            if (_arrCurrentEffectTypes[i].value == type) return _arrCurrentEffectTypes[i].displayValue;
-        }
-        return '';
-    };
-
-    const storeFocusObjects = props.storeFocusObjects;
-    const storeTransition = props.storeTransition;
-    const transitionObj = storeFocusObjects.slideObject.get_transition();
-
-    if(!storeTransition.effect) {
-        storeTransition.changeEffect(transitionObj.get_TransitionType());
-    }
-
-    const _effect = storeTransition.effect;
-    const valueEffectTypes = fillEffectTypes(_effect);
-
-    if(!storeTransition.type) {
-        storeTransition.changeType(valueEffectTypes);
-    }
-    
-    let _effectDelay = transitionObj.get_SlideAdvanceDuration();
-
-    const [stateRange, changeRange] = useState((_effectDelay !== null && _effectDelay !== undefined) ? parseInt(_effectDelay / 1000.) : 0);
-    const isDelay = transitionObj.get_SlideAdvanceAfter();
-    const isStartOnClick = transitionObj.get_SlideAdvanceOnMouseClick();
-    const nameEffect = getEffectName(_effect);
-
-    const _effectType = transitionObj.get_TransitionOption();
-    const nameEffectType = getEffectTypeName(_effectType);
-    const _effectDuration = transitionObj.get_TransitionDuration();
-
-    return (
-        <Page className="slide-transition">
-            <Navbar title={_t.textTransition} backLink={_t.textBack}>
-                <NavRight>
-                    <Link icon='icon-expand-down' sheetClose></Link>
-                </NavRight>
-            </Navbar>
-            <List>
-                <ListItem link="/effect/" title={_t.textEffect} after={nameEffect} routeProps={{
-                    _arrEffect,
-                    onEffectClick: props.onEffectClick,
-                    fillEffectTypes
-                }}></ListItem>
-                <ListItem link="/type/" title={_t.textType} 
-                    after={_effect != Asc.c_oAscSlideTransitionTypes.None ? nameEffectType : ''} 
-                    disabled={_effect == Asc.c_oAscSlideTransitionTypes.None} routeProps={{
-                        _arrCurrentEffectTypes, 
-                        onEffectTypeClick: props.onEffectTypeClick
-                    }}>
-                </ListItem>
-                <ListItem title={_t.textDuration} disabled={_effect == Asc.c_oAscSlideTransitionTypes.None}>
-                    <div slot="after" className="splitter">
-                        <label>{(_effectDuration !== null && _effectDuration !== undefined) ?  (parseInt(_effectDuration / 1000.) + ' ' + _t.textSec) : ''}</label>
-                        <p className="buttons-row">
-                            <span className="button" onClick={() => {
-                                let duration = parseInt(_effectDuration / 1000);
-                                duration = Math.max(0, --duration);
-                                props.changeDuration(duration);
-                            }}>-</span>  
-                            <span className="button" onClick={() => {
-                                let duration = parseInt(_effectDuration / 1000);
-                                duration = Math.min(300, ++duration);
-                                props.changeDuration(duration);
-                            }}>+</span>
-                        </p>
-                    </div>
-                </ListItem>
-            </List>
-            <List>
-                <ListItem>
-                    <span>{_t.textStartOnClick}</span>
-                    <Toggle checked={isStartOnClick} onToggleChange={() => {props.onStartClick(!isStartOnClick)}} />
-                </ListItem>
-                <ListItem>
-                    <span>{_t.textDelay}</span>
-                    <Toggle checked={isDelay} onToggleChange={() => {props.onDelayCheck(!isDelay, _effectDelay)}} />
-                </ListItem>
-                <ListItem>
-                    <ListItemCell className="flex-shrink-3">
-                        <input type="range" className="range-slider-delay" min="0" max="300" value={stateRange} step="1"
-                            onChange={(e) => {
-                                changeRange(e.target.value);
-                                props.onDelay(stateRange);
-                            }} disabled={!isDelay} />
-                    </ListItemCell>
-                    <ListItemCell className="width-auto flex-shrink-0">
-                        <span>{stateRange} {_t.textSec}</span>
-                    </ListItemCell>
-                </ListItem>
-            </List>
-            <List className="apply-all">
-                <ListItem className="apply-all__elem" href="#" onClick={props.onApplyAll}>{_t.textApplyAll}</ListItem>
-            </List>
-        </Page>
-    );
-};
-
-
-const PageEffect = props => {
-    const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
-    const storeTransition = props.storeTransition;
-    const _effect = storeTransition.effect;
-    const _arrEffect = props._arrEffect;
-
-    return (
-        <Page>
-            <Navbar title={_t.textEffect} backLink={_t.textBack} />
-            {_arrEffect.length ? (
-                <List mediaList>
-                    {_arrEffect.map((elem, index) => {
-                        return (
-                            <ListItem key={index} radio name="editslide-effect" title={elem.displayValue} value={elem.value} 
-                                checked={elem.value === _effect} onChange={() => {
-                                    storeTransition.changeEffect(elem.value);
-                                    let valueEffectTypes = props.fillEffectTypes(elem.value);
-                                    storeTransition.changeType(valueEffectTypes);
-                                    props.onEffectClick(elem.value, valueEffectTypes);
-                                }}></ListItem>
-                        )
-                    })}
-                </List>
-            ) : null}
-        </Page>
-    );
-};
-
-const PageType= props => {
-    const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
-    const _arrCurrentEffectTypes = props._arrCurrentEffectTypes;
-    const storeTransition = props.storeTransition;
-    const _effect = storeTransition.effect;
-    const type = storeTransition.type;
-
-    return (
-        <Page>
-            <Navbar title={_t.textType} backLink={_t.textBack}>
-                <NavRight>
-                    <Link icon='icon-expand-down' sheetClose></Link>
-                </NavRight>
-            </Navbar>
-            {_arrCurrentEffectTypes.length ? (
-                <List mediaList>
-                    {_arrCurrentEffectTypes.map((elem, index) => {
-                        return (
-                            <ListItem key={index} radio name="editslide-effect-type" title={elem.displayValue} value={elem.value}
-                                checked={elem.value === type} onChange={() => {
-                                    storeTransition.changeType(elem.value);
-                                    props.onEffectTypeClick(elem.value, _effect);
-                                }}>
-                            </ListItem>
-                        )
-                    })}
-                </List>
-            ) : null}
-        </Page>
-    );
-};
-
-const Effect = inject("storeTransition", "storeFocusObjects")(observer(PageEffect));
-const Type = inject("storeTransition", "storeFocusObjects")(observer(PageType));
-const Transition = inject("storeTransition", "storeFocusObjects")(observer(PageTransition));
-
-export {Transition, Effect, Type};