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

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;
 
@@ -56,9 +57,207 @@
     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 {
+    &__list {
+        margin: auto;
+        ul {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            padding-left: 18px;
+            padding-right: 18px;
+            padding-bottom: 14px;
+        }
+    }
+    .item-inner:after {
+        display: none;
+    }
+    .item-theme {
+        position: relative;
+        margin: 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15);
+        width: 85px;
+        height: 38px;
+        margin-top: 14px;
+        background-image: url(../img/themes/themes.png);
+    }
+    .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>');
+    }
+}
+
+// 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;
+        }
+    }
+}
+
+.style-effect, .style-type {
+    .list .item-title {
+        font-weight: normal; 
+    }
+}
+
+.range-slider-delay {
+    width: 100%;
+    margin: 4px 0 5px 0;
+    appearance: none;
+    background: linear-gradient(to right,#b7b8b7 0,#b7b8b7 100%);
+    background-position: center;
+    background-size: 100% 2px;
+    background-repeat: no-repeat;
+    outline: 0;
+    border: none;
+    box-sizing: content-box;
+    &:disabled {
+        opacity: .55;
+    }
+    &::-webkit-slider-thumb {
+        appearance: none;
+        height: 28px;
+        width: 28px;
+        border-radius: 50%;
+        background: @white;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
+    }
+    &::-ms-thumb { 
+        appearance: none;
+        height: 28px;
+        width: 28px;
+        border-radius: 50%;
+        background: @white;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
+    }
+}
+
+.list {
+    .apply-all, .duplicate-slide, .delete-slide {
+        border: 0;
+        .item-content {
+            padding-left: 0;
+        }
+        .item-inner {
+            justify-content: center;
+            padding-right: 0;
+        }
+        .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

@@ -86,7 +86,60 @@
       "textShape": "Shape",
       "textImage": "Image",
       "textChart": "Chart",
-      "textHyperlink": "Hyperlink"
+      "textHyperlink": "Hyperlink",
+      "textTheme": "Theme",
+      "textStyle": "Style",
+      "textLayout": "Layout",
+      "textTransition": "Transition",
+      "textBack": "Back",
+      "textEffect": "Effect",
+      "textType": "Type",
+      "textDuration": "Duration",
+      "textStartOnClick": "Start On Click",
+      "textDelay": "Delay",
+      "textApplyAll": "Apply to All Slides",
+      "textNone": "None",
+      "textFade": "Fade",
+      "textPush": "Push",
+      "textWipe": "Wipe",
+      "textSplit": "Split",
+      "textUnCover": "UnCover",
+      "textCover": "Cover",
+      "textClock": "Clock",
+      "textZoom": "Zoom",
+      "textSmoothly": "Smoothly",
+      "textBlack": "Through Black",
+      "textLeft": "Left",
+      "textTop": "Top",
+      "textRight": "Right",
+      "textBottom": "Bottom",
+      "textTopLeft": "Top-Left",
+      "textTopRight": "Top-Right",
+      "textBottomLeft": "Bottom-Left",
+      "textBottomRight": "Bottom-Right",
+      "textVerticalIn": "Vertical In",
+      "textVerticalOut": "Vertical Out",
+      "textHorizontalIn": "Horizontal In",
+      "textHorizontalOut": "Horizontal Out",
+      "textClockwise": "Clockwise",
+      "textCounterclockwise": "Counterclockwise",
+      "textWedge": "Wedge",
+      "textZoomIn": "Zoom In",
+      "textZoomOut": "Zoom Out",
+      "textZoomRotate": "Zoom and Rotate",
+      "textSec": "s",
+      "textAddCustomColor": "Add Custom Color",
+      "textFill": "Fill",
+      "textCustomColor": "Custom Color",
+      "textDuplicateSlide": "Duplicate Slide",
+      "textDeleteSlide": "Delete Slide"
+    }
+  },
+  "Common": {
+    "ThemeColorPalette": {
+      "textThemeColors": "Theme Colors",
+      "textStandartColors": "Standard Colors",
+      "textCustomColors": "Custom Colors"
     }
   }
 }

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

@@ -1,10 +1,11 @@
 
 import React, { Component } from 'react'
 import { inject } from "mobx-react";
+import { f7 } from "framework7-react";
 import { withTranslation } from 'react-i18next';
 import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx'
 
-@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings")
+@inject("storeFocusObjects", "storeAppOptions", "storePresentationInfo", "storePresentationSettings", "storeSlideSettings")
 class MainController extends Component {
     constructor(props) {
         super(props)
@@ -193,9 +194,32 @@ class MainController extends Component {
         // me.api.asc_registerCallback('asc_onMeta',                       _.bind(me.onMeta, me));
 
         const storeFocusObjects = this.props.storeFocusObjects;
+        const storeSlideSettings = this.props.storeSlideSettings;
+        
         this.api.asc_registerCallback('asc_onFocusObject', objects => {
+            // console.log(objects);
             storeFocusObjects.resetFocusObjects(objects);
         });
+
+        this.api.asc_registerCallback('asc_onInitEditorStyles', themes => {
+            // console.log(themes);
+            storeSlideSettings.addArrayThemes(themes);
+        });
+
+        this.api.asc_registerCallback('asc_onUpdateThemeIndex',  themeId => {
+            // console.log(themeId);
+            storeSlideSettings.changeSlideThemeIndex(themeId);
+        });
+
+        this.api.asc_registerCallback('asc_onUpdateLayout', layouts => {
+            // console.log(layouts);
+            storeSlideSettings.addArrayLayouts(layouts);
+        });
+
+        this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
+            Common.Utils.ThemeColor.setColors(colors, standart_colors);
+        });
+
     }
 
     _onDocumentContentReady() {
@@ -207,6 +231,7 @@ class MainController extends Component {
         // me.api.asc_GetDefaultTableStyles && _.defer(function () {me.api.asc_GetDefaultTableStyles()});
 
         Common.Gateway.documentReady();
+        f7.emit('resize');
     }
 
     _onOpenDocumentProgress(progress) {

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

@@ -1,17 +1,157 @@
 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/less/app-ios.less

@@ -1,29 +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;
-    }
-}

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

@@ -22,27 +22,3 @@
         width: auto;
     }
 }
-
-// Color Schemes
-
-.color-schemes-menu {
-    cursor: pointer;
-    display: block;
-    background-color: #fff;
-    .item-inner {
-        justify-content: flex-start;
-    }
-    .color-schema-block {
-        display: flex;
-    }
-    .color {
-        min-width: 26px;
-        min-height: 26px;
-        margin: 0 2px 0 0;
-        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
-    }
-    .item-title {
-        margin-left: 20px;
-        color: #212121;
-    }
-}

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

@@ -52,4 +52,19 @@ export class storeFocusObjects {
         }
         return resultArr;
     }
+
+    @computed get slideObject() {
+        const slides = [];
+        for (let object of this._focusObjects) {
+            if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) {
+                slides.push(object);
+            }
+        }
+        if (slides.length > 0) {
+            const object = slides[slides.length - 1]; // get top
+            return object.get_ObjectValue();
+        } else {
+            return undefined;
+        }
+    }
 }

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

@@ -6,6 +6,8 @@ import {storeUsers} from '../../../../common/mobile/lib/store/users';
 import {storeApplicationSettings} from './applicationSettings';
 import {storePresentationInfo} from './presentationInfo';
 import {storePresentationSettings} from './presentationSettings';
+import { storePalette } from './palette';
+import { storeSlideSettings } from './slideSettings';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -20,7 +22,9 @@ export const stores = {
     users: new storeUsers(),
     storeApplicationSettings: new storeApplicationSettings(),
     storePresentationInfo: new storePresentationInfo(),
-    storePresentationSettings: new storePresentationSettings()
+    storePresentationSettings: new storePresentationSettings(),
+    storeSlideSettings: new storeSlideSettings(),
+    storePalette: new storePalette()
     // storeTextSettings: new storeTextSettings(),
     // storeParagraphSettings: new storeParagraphSettings(),
     // storeShapeSettings: new storeShapeSettings(),

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

@@ -0,0 +1,9 @@
+import {action, observable} from 'mobx';
+
+export class storePalette {
+    @observable customColors = [];
+
+    @action changeCustomColors (colors) {
+        this.customColors = colors;
+    }
+}

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

@@ -0,0 +1,64 @@
+import {action, observable, computed} from 'mobx';
+
+export class storeSlideSettings {
+    
+    @observable arrayLayouts;
+    @observable slideLayoutIndex = -1;
+    @observable fillColor = undefined;
+    @observable arrayThemes;
+    @observable slideThemeIndex;
+    @observable effect;
+    @observable type;
+    
+    @action getFillColor (slideObject) {
+    
+        let color = 'transparent';
+        let fill = slideObject.get_background(),
+            fillType = fill.get_type();
+        let sdkColor;
+
+        if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
+            fill = fill.get_fill();
+            sdkColor = fill.get_color();
+
+            if (sdkColor) {
+                if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
+                } else {
+                    color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
+                }
+            }
+        }
+
+        this.fillColor = color;
+        return color;
+    }
+
+    @action changeFillColor (color) {
+        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/view/edit/Edit.jsx

@@ -7,6 +7,8 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import EditSlideController from "../../controller/edit/EditSlide";
 import EditTextController from "../../controller/edit/EditText";
+import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
+
 //import EditShapeController from "../../controller/edit/EditShape";
 //import EditImageController from "../../controller/edit/EditImage";
 //import EditTableController from "../../controller/edit/EditTable";
@@ -14,7 +16,34 @@ import EditTextController from "../../controller/edit/EditText";
 //import EditLinkController from "../../controller/edit/EditLink";
 
 const routes = [
-
+    {
+        path: '/layout/',
+        component: Layout
+    },
+    {
+        path: '/theme/',
+        component: Theme
+    },
+    {
+        path: '/transition/',
+        component: Transition
+    },
+    {
+        path: '/effect/',
+        component: Effect
+    },
+    {
+        path: '/type/',
+        component: Type
+    },
+    {
+        path: '/style/',
+        component: StyleFillColor
+    },
+    {
+        path: '/edit-custom-color/',
+        component: CustomFillColor
+    }
 ];
 
 const EmptyEditLayout = () => {
@@ -73,6 +102,7 @@ const EditTabs = props => {
     const _t = t('View.Edit', {returnObjects: true});
 
     const settings = props.storeFocusObjects.settings;
+    
     let editors = [];
     if (settings.length < 1) {
         editors.push({

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

@@ -1,15 +1,455 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {Page, Navbar, List, ListItem, ListButton, Row, BlockTitle, Range, Toggle, Icon} from 'framework7-react';
+import {f7, Page, Navbar, List, ListItem, Row, BlockTitle, Link, Toggle, Icon, View, NavRight, ListItemCell, Range} 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();
+    const _t = t('View.Edit', {returnObjects: true});
+
     return (
         <Fragment>
-
+            <List>
+                <ListItem title={_t.textTheme} link="/theme/" routeProps={{
+                    onThemeClick: props.onThemeClick
+                }}></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>
+                    <div slot='inner' style={{width: '100%'}}>
+                        <Range min={0} max={300} step={1}
+                               value={stateRange}
+                               disabled={!isDelay}
+                               onRangeChange={(value) => {changeRange(value)}}
+                               onRangeChanged={(value) => {props.onDelay(value)}}
+                        ></Range>
+                    </div>
+                    <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                        {stateRange + ' ' + _t.textSec}
+                    </div>
+                </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/EditText.jsx

@@ -7,7 +7,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 const EditText = props => {
     return (
         <Fragment>
-
+           
         </Fragment>
     )
 };