[PE mobile] Start to make Style Settings

apps/presentationeditor/mobile/locale/en.json

@@ -122,7 +122,16 @@
       "textZoomIn": "Zoom In",
       "textZoomOut": "Zoom Out",
       "textZoomRotate": "Zoom and Rotate",
-      "textSec": "s"
+      "textSec": "s",
+      "textAddCustomColor": "Add Custom Color",
+      "textFill": "Fill"
+    }
+  },
+  "Common": {
+    "ThemeColorPalette": {
+      "textThemeColors": "Theme Colors",
+      "textStandardColors": "Standard Colors",
+      "textCustomColors": "Custom Colors"
     }
   }
 }

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

@@ -224,6 +224,10 @@ class MainController extends Component {
             storeLayout.addArrayLayouts(layouts);
         });
 
+        this.api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
+            Common.Utils.ThemeColor.setColors(colors, standart_colors);
+        });
+
     }
 
     _onDocumentContentReady() {

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

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

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

@@ -9,6 +9,8 @@ import {storePresentationSettings} from './presentationSettings';
 import { storeLayout } from './layout';
 import { storeTransition } from './transition';
 import { storeTheme } from './theme';
+import { storeStyle } from './style';
+import { storePalette } from './palette';
 // import {storeTextSettings} from "./textSettings";
 // import {storeParagraphSettings} from "./paragraphSettings";
 // import {storeShapeSettings} from "./shapeSettings";
@@ -26,7 +28,9 @@ export const stores = {
     storePresentationSettings: new storePresentationSettings(),
     storeLayout: new storeLayout(),
     storeTransition: new storeTransition(),
-    storeTheme: new storeTheme()
+    storeTheme: new storeTheme(),
+    storeStyle: new storeStyle(),
+    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/style.js

@@ -0,0 +1,23 @@
+import {action, observable} from 'mobx';
+
+export class storeStyle {
+    @observable color = undefined;
+
+    @action resetColor (color) {
+        let value;
+        if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+            value = {
+                color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
+                effectValue: color.get_value()
+            }
+        } else {
+            value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+        }
+        this.color = value;
+    }
+
+    // @action changeCustomColors (colors) {
+    //     this.customColors = colors;
+    // }
+
+}

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

@@ -10,6 +10,7 @@ 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 { Effect } from './Transition';
 import { Type } from './Transition';
 //import EditShapeController from "../../controller/edit/EditShape";
@@ -38,6 +39,10 @@ const routes = [
     {
         path: '/type/',
         component: Type
+    },
+    {
+        path: '/style/',
+        component: StyleController
     }
 ];
 

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

@@ -15,7 +15,7 @@ const EditSlide = props => {
                 <ListItem title={_t.textTheme} link="/theme/"></ListItem>
                 <ListItem title={_t.textLayout} link="/layout/"></ListItem>
                 <ListItem title={_t.textTransition} link="/transition/"></ListItem>
-                <ListItem title={_t.textStyle} link="#"></ListItem>
+                <ListItem title={_t.textStyle} link="/style/"></ListItem>
             </List>
         </Fragment>
     )

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

@@ -0,0 +1,43 @@
+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 PageStyle = props => {
+    const { t } = useTranslation();
+    const _t = t("View.Edit", { returnObjects: true });
+    const color = props.storeStyle.color;
+    const customColors = props.storePalette.customColors;
+
+    // const changeColor = (color, effectId) => {
+    //     if (color !== 'empty') {
+    //         if (effectId !==undefined ) {
+    //             props.onBackgroundColor({color: color, effectId: effectId});
+    //         } else {
+    //             props.onBackgroundColor(color);
+    //         }
+    //     } else {
+    //         // open custom color menu
+    //         props.f7router.navigate('/edit-text-custom-back-color/');
+    //     }
+    // };
+  
+    return (
+        <Page className="slide-style">
+            <Navbar title={_t.textFill} backLink={_t.textBack}>
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight>
+            </Navbar>
+            <ThemeColorPalette curColor={color} customColors={customColors} transparent={true} />
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'}></ListItem>
+            </List>
+        </Page>
+    );
+};
+
+const Style = inject("storeStyle", "storePalette")(observer(PageStyle));
+
+export default Style;