[PE mobile] Maked Style Settings

apps/presentationeditor/mobile/locale/en.json

@@ -130,7 +130,7 @@
   "Common": {
     "ThemeColorPalette": {
       "textThemeColors": "Theme Colors",
-      "textStandardColors": "Standard Colors",
+      "textStandartColors": "Standard Colors",
       "textCustomColors": "Custom Colors"
     }
   }

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

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
-import { Style } from "../../view/edit/Style";
+import { StyleFillColor } from "../../view/edit/StyleSlideSettings";
 
-class StyleController extends Component {
+class StyleSlideController extends Component {
     constructor(props) {
         super(props);
     }
@@ -28,9 +28,9 @@ class StyleController extends Component {
 
     render() {
         return (
-            <Style onFillColor={this.onFillColor} />
+            <StyleFillColor onFillColor={this.onFillColor} />
         );
     }
 }
 
-export default StyleController;
+export default StyleSlideController;

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

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

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

@@ -6,13 +6,13 @@ export class storeStyle {
     @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();
-            const sdkColor = fill.get_color();
+            sdkColor = fill.get_color();
 
             if (sdkColor) {
                 if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
@@ -24,7 +24,7 @@ export class storeStyle {
         }
 
         this.fillColor = color;
-        return this.fillColor;
+        return color;
     }
 
     @action changeFillColor (color) {

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

@@ -10,8 +10,8 @@ import EditTextController from "../../controller/edit/EditText";
 import LayoutController from "../../controller/edit/Layout";
 import TransitionController from '../../controller/edit/Transition';
 import ThemeController from '../../controller/edit/Theme';
-import StyleController from '../../controller/edit/Style';
-import { CustomColor } from './Style';
+import StyleSlideController from '../../controller/edit/StyleSlideSettings';
+import { CustomFillColor } from './StyleSlideSettings';
 import { Effect } from './Transition';
 import { Type } from './Transition';
 //import EditShapeController from "../../controller/edit/EditShape";
@@ -43,11 +43,11 @@ const routes = [
     },
     {
         path: '/style/',
-        component: StyleController
+        component: StyleSlideController
     },
     {
         path: '/edit-custom-color/',
-        component: CustomColor
+        component: CustomFillColor
     }
 ];
 

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

@@ -2,9 +2,9 @@ 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';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.js';
 
-const PageStyle = props => {
+const PageFillColor = props => {
     const { t } = useTranslation();
     const _t = t("View.Edit", { returnObjects: true });
     const storeFocusObjects = props.storeFocusObjects;
@@ -12,18 +12,17 @@ const PageStyle = props => {
     const storePalette = props.storePalette;
     const storeStyle = props.storeStyle;
     const customColors = storePalette.customColors;
-    storeStyle.fillColor ? storeStyle.fillColor : storeStyle.getFillColor(slideObject);
-    const fillColor = JSON.parse(JSON.stringify(storeStyle.fillColor));
-    console.log(fillColor);
+    const fillColor =  storeStyle.fillColor ? storeStyle.fillColor : storeStyle.getFillColor(slideObject);
 
     const changeColor = (color, effectId, effectValue) => {
         if (color !== 'empty') {
-            if (effectId !==undefined ) {
-                storeStyle.changeFillColor({color: color, effectId: effectId, effectValue: effectValue});
-                props.onFillColor({color: color, effectId: effectId, effectValue: effectValue});
+            if (effectId !== undefined ) {
+                const newColor = {color: color, effectId: effectId, effectValue: effectValue};
+                props.onFillColor(newColor);
+                storeStyle.changeFillColor(newColor);
             } else {
-                storeStyle.changeFillColor(color);
                 props.onFillColor(color);
+                storeStyle.changeFillColor(color);
             }
         } else {
             // open custom color menu
@@ -32,7 +31,7 @@ const PageStyle = props => {
     };
   
     return (
-        <Page className="slide-style">
+        <Page>
             <Navbar title={_t.textFill} backLink={_t.textBack}>
                 <NavRight>
                     <Link icon='icon-expand-down' sheetClose></Link>
@@ -48,7 +47,7 @@ const PageStyle = props => {
     );
 };
 
-const PageStyleCustomColor = props => {
+const PageCustomFillColor = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
 
@@ -61,20 +60,19 @@ const PageStyleCustomColor = props => {
     const onAddNewColor = (colors, color) => {
         props.storePalette.changeCustomColors(colors);
         props.onFillColor(color);
-        // props.f7router.back();
+        props.storeStyle.changeFillColor(color);
+        props.f7router.back();
     };
 
-    return(
+    return (
         <Page>
             <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
-            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} routeProps={{
-                onFillColor: props.onFillColor
-            }}/>
+            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} />
         </Page>
     )
 };
 
-const Style = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyle));
-const CustomColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyleCustomColor));
+const StyleFillColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageFillColor));
+const CustomFillColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageCustomFillColor));
 
-export {Style, CustomColor};
+export {StyleFillColor, CustomFillColor};

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

@@ -1,28 +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 PageType= props => {
-    const { t } = useTranslation();
-    const _t = t("View.Edit", { returnObjects: true });
-
-    return (
-        <Page>
-            <Navbar title={_t.textType} backLink={_t.textBack}>
-                <NavRight>
-                    <Link icon='icon-expand-down' sheetClose></Link>
-                </NavRight>
-            </Navbar>
-            <List mediaList>
-                <ListItem radio name="editslide-effect-type"></ListItem>
-                <ListItem radio name="editslide-effect-type"></ListItem>
-                <ListItem radio name="editslide-effect-type"></ListItem>
-            </List>
-        </Page>
-    );
-};
-
-const Type = inject("storeType")(observer(PageType));
-
-export default Type;