[DE mobile] Added Fill color page into edit shape settings

apps/documenteditor/mobile/locale/en.json

@@ -176,7 +176,10 @@
     "textAutomatic": "Automatic",
     "textAddCustomColor": "Add Custom Color",
     "textCustomColor": "Custom Color",
-    "textBackground": "Background"
+    "textBackground": "Background",
+    "textFill": "Fill",
+    "textBorder": "Border",
+    "textEffects": "Effects"
   },
   "Add": {
     "textTable": "Table",

apps/documenteditor/mobile/src/controller/edit/EditShape.jsx

@@ -9,6 +9,8 @@ class EditShapeController extends Component {
     constructor (props) {
         super(props);
         this.onWrapType = this.onWrapType.bind(this);
+
+        this.props.storeShapeSettings.setFillColor(undefined);
     }
 
     onRemoveShape () {
@@ -104,6 +106,24 @@ class EditShapeController extends Component {
         }
     }
 
+    onFillColor (color) {
+        const api = Common.EditorApi.get();
+        const image = new Asc.asc_CImgProperty();
+        const shape = new Asc.asc_CShapeProperty();
+        const 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));
+        }
+        shape.put_fill(fill);
+        image.put_ShapeProperties(shape);
+        api.ImgApply(image);
+    }
+
     render () {
         return (
             <EditShape onRemoveShape={this.onRemoveShape}
@@ -114,9 +134,10 @@ class EditShapeController extends Component {
                        onWrapDistance={this.onWrapDistance}
                        onReorder={this.onReorder}
                        onReplace={this.onReplace}
+                       onFillColor={this.onFillColor}
             />
         )
     }
 }
 
-export default inject("storeShapeSettings")(observer(EditShapeController));
+export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));

apps/documenteditor/mobile/src/store/shapeSettings.js

@@ -189,4 +189,29 @@ export class storeShapeSettings {
     getWrapDistance (shapeObject) {
         return shapeObject.get_Paddings().get_Top();
     }
+
+    // Fill Color
+    @observable fillColor = undefined;
+    setFillColor (color) {
+        this.fillColor = color;
+    }
+    getFillColor (shapeObject) {
+        let fill = shapeObject.get_ShapeProperties().get_fill();
+        const fillType = fill.get_type();
+        let color = 'transparent';
+        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());
+                }
+            }
+        }
+        this.fillColor = color;
+        return color;
+    }
+
 }

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

@@ -16,7 +16,7 @@ import EditHeaderController from "../../controller/edit/EditHeader";
 
 import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
 import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
-import {PageWrap, PageReorder, PageReplace} from "./EditShape";
+import {PageShapeStyle, PageShapeCustomFillColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
 import {PageChartWrap, PageChartReorder} from "./EditChart";
@@ -73,6 +73,14 @@ const routes = [
         component: PageParagraphCustomColor,
     },
     //Edit shape
+    {
+        path: '/edit-shape-style/',
+        component: PageShapeStyle,
+    },
+    {
+        path: '/edit-shape-custom-fill-color/',
+        component: PageShapeCustomFillColor,
+    },
     {
         path: '/edit-shape-wrap/',
         component: PageWrap,

apps/documenteditor/mobile/src/view/edit/EditShape.jsx

@@ -1,13 +1,88 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react';
+import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
+import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
+
+const PageCustomFillColor = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    let fillColor = props.storeShapeSettings.fillColor;
+    if (typeof fillColor === 'object') {
+        fillColor = fillColor.color;
+    }
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.onFillColor(color);
+        props.storeShapeSettings.setFillColor(color);
+        props.f7router.back();
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const FillTab = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const storeShapeSettings = props.storeShapeSettings;
+    const shapeObject = props.storeFocusObjects.shapeObject;
+    const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
+    const customColors = props.storePalette.customColors;
+    const changeColor = (color, effectId, effectValue) => {
+        if (color !== 'empty') {
+            if (effectId !==undefined ) {
+                const newColor = {color: color, effectId: effectId, effectValue: effectValue};
+                props.onFillColor(newColor);
+                storeShapeSettings.setFillColor(newColor);
+            } else {
+                props.onFillColor(color);
+                storeShapeSettings.setFillColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-shape-custom-fill-color/');
+        }
+    };
+    return(
+        <Fragment>
+            <ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-fill-color/'} routeProps={{
+                    onFillColor: props.onFillColor
+                }}></ListItem>
+            </List>
+        </Fragment>
+    )
+}));
 
 const PageStyle = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
     return (
         <Page>
-
+            <Navbar backLink={_t.textBack}>
+                <div className='tab-buttons tabbar'>
+                    <Link key={"de-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
+                    <Link key={"de-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
+                    <Link key={"de-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                </div>
+            </Navbar>
+            <Tabs animated>
+                <Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content" tabActive={true}>
+                    <FillTab onFillColor={props.onFillColor}/>
+                </Tab>
+                <Tab key={"de-tab-shape-border"} id={"edit-shape-border"} className="page-content">
+                    border
+                </Tab>
+                <Tab key={"de-tab-shape-effects"} id={"edit-shape-effects"} className="page-content">
+                    effects
+                </Tab>
+            </Tabs>
         </Page>
     )
 };
@@ -170,7 +245,9 @@ const EditShape = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textStyle}></ListItem>
+                <ListItem title={_t.textStyle} link='/edit-shape-style/' routeProps={{
+                    onFillColor: props.onFillColor
+                }}></ListItem>
                 <ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
                     onWrapType: props.onWrapType,
                     onShapeAlign: props.onShapeAlign,
@@ -193,13 +270,15 @@ const EditShape = props => {
 };
 
 const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape));
-const PageStyleContainer = inject("storeFocusObjects")(observer(PageStyle));
+const PageShapeStyle = inject("storeFocusObjects")(observer(PageStyle));
+const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
 const PageWrapContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(PageWrap));
 const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
 const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
 
 export {EditShapeContainer as EditShape,
-        PageStyleContainer as PageStyle,
+        PageShapeStyle,
+        PageShapeCustomFillColor,
         PageWrapContainer as PageWrap,
         PageReplaceContainer as PageReplace,
         PageReorderContainer as PageReorder}