[PE mobile] Make Style Settings

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

@@ -1,14 +1,34 @@
 import React, { Component } from "react";
-import Style from "../../view/edit/Style";
+import { Style } from "../../view/edit/Style";
 
 class StyleController 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 (
-            <Style />
+            <Style onFillColor={this.onFillColor} />
         );
     }
 }

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

@@ -1,23 +1,33 @@
 import {action, observable} from 'mobx';
 
 export class storeStyle {
-    @observable color = undefined;
+    @observable fillColor = undefined;
 
-    @action resetColor (color) {
+    @action getFillColor (slideObject) {
-        let value;
+    
-        if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+        let color = 'transparent';
-            value = {
+
-                color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
+        let fill = slideObject.get_background(),
-                effectValue: color.get_value()
+            fillType = fill.get_type();
+
+        if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
+            fill = fill.get_fill();
+            const 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());
+                }
             }
-        } else {
-            value = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
         }
-        this.color = value;
+        
+        this.fillColor = color;
     }
 
-    // @action changeCustomColors (colors) {
+    @action changeCustomColors (colors) {
-    //     this.customColors = colors;
+        this.customColors = colors;
-    // }
+    }
 
 }

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

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

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

@@ -7,21 +7,30 @@ import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobi
 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) => {
+    const storeFocusObjects = props.storeFocusObjects;
-    //     if (color !== 'empty') {
+    const slideObject = storeFocusObjects.slideObject;
-    //         if (effectId !==undefined ) {
+    const storePalette = props.storePalette;
-    //             props.onBackgroundColor({color: color, effectId: effectId});
+    const storeStyle = props.storeStyle;
-    //         } else {
+
-    //             props.onBackgroundColor(color);
+    storeStyle.getFillColor(slideObject);
-    //         }
+
-    //     } else {
+    const customColors = storePalette.customColors;
-    //         // open custom color menu
+    const fillColor = storeStyle.fillColor;
-    //         props.f7router.navigate('/edit-text-custom-back-color/');
+
-    //     }
+
-    // };
+    const changeColor = (color, effectId) => {
+        if (color !== 'empty') {
+            if (effectId !==undefined ) {
+                props.onFillColor({color: color, effectId: effectId});
+            } else {
+                props.onFillColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-custom-color/');
+        }
+    };
   
     return (
         <Page className="slide-style">
@@ -30,14 +39,43 @@ const PageStyle = props => {
                     <Link icon='icon-expand-down' sheetClose></Link>
                 </NavRight>
             </Navbar>
-            <ThemeColorPalette curColor={color} customColors={customColors} transparent={true} />
+            <ThemeColorPalette changeColor={changeColor} curColor={fillColor} customColors={customColors} transparent={true} />
             <List>
-                <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'}></ListItem>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-custom-color/'} routeProps={{
+                    onFillColor: props.onFillColor
+                }}></ListItem>
             </List>
         </Page>
     );
 };
 
-const Style = inject("storeStyle", "storePalette")(observer(PageStyle));
+const PageStyleCustomColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
 
-export default Style;
+    let fillColor = props.storeStyle.fillColor;
+
+    if (typeof fillColor === 'object') {
+        fillColor = fillColor.color;
+    }
+
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.onFillColor(color);
+        // props.f7router.back();
+    };
+
+    return(
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor} routeProps={{
+                onFillColor: props.onFillColor
+            }}/>
+        </Page>
+    )
+};
+
+const Style = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyle));
+const CustomColor = inject("storeStyle", "storePalette", "storeFocusObjects")(observer(PageStyleCustomColor));
+
+export {Style, CustomColor};