[DE mobile] Added background color into edit paragraph settings

apps/documenteditor/mobile/locale/en.json

@@ -175,7 +175,8 @@
     "textFontColors": "Font Colors",
     "textAutomatic": "Automatic",
     "textAddCustomColor": "Add Custom Color",
-    "textCustomColor": "Custom Color"
+    "textCustomColor": "Custom Color",
+    "textBackground": "Background"
   },
   "Add": {
     "textTable": "Table",

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

@@ -1,9 +1,11 @@
 import React, {Component} from 'react';
-import { EditParagraph } from '../../view/edit/EditParagraph'
+import { EditParagraph } from '../../view/edit/EditParagraph';
+import {observer, inject} from "mobx-react";
 
 class EditParagraphController extends Component {
     constructor (props) {
         super(props);
+        props.storeParagraphSettings.setBackColor(undefined);
     }
 
     onStyleClick (name) {
@@ -129,6 +131,19 @@ class EditParagraphController extends Component {
         }
     }
 
+    onBackgroundColor (color) {
+        const api = Common.EditorApi.get();
+        const properties = new Asc.asc_CParagraphProperty();
+        properties.put_Shade(new Asc.asc_CParagraphShd());
+        if (color == 'transparent') {
+            properties.get_Shade().put_Value(Asc.c_oAscShdNil);
+        } else {
+            properties.get_Shade().put_Value(Asc.c_oAscShdClear);
+            properties.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
+        }
+        api.paraApply(properties);
+    }
+
     render () {
         return (
             <EditParagraph onStyleClick={this.onStyleClick}
@@ -140,9 +155,10 @@ class EditParagraphController extends Component {
                            onOrphan={this.onOrphan}
                            onKeepTogether={this.onKeepTogether}
                            onKeepNext={this.onKeepNext}
+                           onBackgroundColor={this.onBackgroundColor}
             />
         )
     }
 }
 
-export default EditParagraphController;
+export default inject("storeParagraphSettings")(observer(EditParagraphController));

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

@@ -25,4 +25,28 @@ export class storeParagraphSettings {
     @action changeParaStyleName (name) {
         this.styleName = name;
     }
+
+    @observable backColor = undefined;
+    setBackColor (color) {
+        this.backColor = color;
+    }
+    getBackgroundColor (paragraphObject) {
+        const shade = paragraphObject.get_Shade();
+        let backColor = 'transparent';
+        if (!!shade && shade.get_Value() === Asc.c_oAscShdClear) {
+            const color = shade.get_Color();
+            if (color) {
+                if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    backColor = {
+                        color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
+                        effectValue: color.get_value()
+                    };
+                } else {
+                    backColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
+                }
+            }
+        }
+        this.backColor = backColor;
+        return backColor;
+    }
 }

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

@@ -15,7 +15,7 @@ import EditHyperlinkController from "../../controller/edit/EditHyperlink";
 import EditHeaderController from "../../controller/edit/EditHeader";
 
 import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText";
-import {PageAdvancedSettings} from "./EditParagraph";
+import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph";
 import {PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
@@ -62,7 +62,15 @@ const routes = [
     //Edit paragraph
     {
         path: '/edit-paragraph-adv/',
-        component: PageAdvancedSettings,
+        component: ParagraphAdvSettings,
+    },
+    {
+        path: '/edit-paragraph-back-color/',
+        component: PageParagraphBackColor,
+    },
+    {
+        path: '/edit-paragraph-custom-color/',
+        component: PageParagraphCustomColor,
     },
     //Edit shape
     {

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

@@ -3,6 +3,7 @@ import {observer, inject} from "mobx-react";
 import {List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 
 const PageAdvancedSettings = props => {
     const isAndroid = Device.android;
@@ -99,21 +100,86 @@ const PageAdvancedSettings = props => {
     )
 };
 
+const PageCustomBackColor = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    let backgroundColor = props.storeParagraphSettings.backColor;
+    if (typeof backgroundColor === 'object') {
+        backgroundColor = backgroundColor.color;
+    }
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.onBackgroundColor(color);
+        props.storeParagraphSettings.setBackColor(color);
+        props.f7router.back();
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={backgroundColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const PageBackgroundColor = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const backgroundColor = props.storeParagraphSettings.backColor;
+    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.onBackgroundColor(newColor);
+                props.storeParagraphSettings.setBackColor(newColor);
+            } else {
+                props.onBackgroundColor(color);
+                props.storeParagraphSettings.setBackColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-paragraph-custom-color/');
+        }
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textBackground} backLink={_t.textBack} />
+            <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-paragraph-custom-color/'} routeProps={{
+                    onBackgroundColor: props.onBackgroundColor
+                }}></ListItem>
+            </List>
+        </Page>
+    )
+};
+
 const EditParagraph = props => {
     const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
     const storeParagraphSettings = props.storeParagraphSettings;
     const paragraphStyles = storeParagraphSettings.paragraphStyles;
     const curStyleName = storeParagraphSettings.styleName;
     const thumbSize = storeParagraphSettings.styleThumbSize;
+
+    const paragraph = props.storeFocusObjects.paragraphObject;
+    const curBackColor = storeParagraphSettings.backColor ? storeParagraphSettings.backColor : storeParagraphSettings.getBackgroundColor(paragraph);
+    const background = curBackColor !== 'transparent' ? `#${(typeof curBackColor === "object" ? curBackColor.color : curBackColor)}` : curBackColor;
+
     return (
         <Fragment>
             <List>
-                <ListItem title={t('Edit.textBackground')} link=''>
-                    <span className="color-preview" slot="after"></span>
+                <ListItem title={_t.textBackground} link='/edit-paragraph-back-color/' routeProps={{
+                    onBackgroundColor: props.onBackgroundColor
+                }}>
+                    <span className="color-preview"
+                          slot="after"
+                          style={{ background: background}}
+                    ></span>
                 </ListItem>
             </List>
             <List>
-                <ListItem title={t('Edit.textAdvancedSettings')} link='/edit-paragraph-adv/' routeProps={{
+                <ListItem title={_t.textAdvancedSettings} link='/edit-paragraph-adv/' routeProps={{
                     onDistanceBefore: props.onDistanceBefore,
                     onDistanceAfter: props.onDistanceAfter,
                     onSpinFirstLine: props.onSpinFirstLine,
@@ -124,7 +190,7 @@ const EditParagraph = props => {
                     onKeepNext: props.onKeepNext
                 }}></ListItem>
             </List>
-            <BlockTitle>{t('Edit.textParagraphStyles')}</BlockTitle>
+            <BlockTitle>{_t.textParagraphStyles}</BlockTitle>
             <List>
                 {paragraphStyles.map((style, index) => (
                     <ListItem
@@ -144,7 +210,11 @@ const EditParagraph = props => {
 };
 
 const EditParagraphContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(EditParagraph));
-const AdvSettingsContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings));
+const ParagraphAdvSettings = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings));
+const PageParagraphBackColor = inject("storeParagraphSettings", "storePalette")(observer(PageBackgroundColor));
+const PageParagraphCustomColor = inject("storeParagraphSettings", "storePalette")(observer(PageCustomBackColor));
 
 export {EditParagraphContainer as EditParagraph,
-        AdvSettingsContainer as PageAdvancedSettings};
+        ParagraphAdvSettings,
+        PageParagraphBackColor,
+        PageParagraphCustomColor};