[PE mobile] Added highlight color palette

apps/common/mobile/lib/component/HighlightColorPalette.jsx

@@ -24,7 +24,7 @@ const HighlightColorPalette = ({changeColor, curColor}) => {
                     ))}
                 </div>
             </ListItem>
-            <ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Edit.textNoFill')}></ListItem>
+            <ListItem radio checked={(curColor && curColor === 'transparent')} onClick={() => changeColor('transparent')} title={t('Common.HighlightColorPalette.textNoFill')}></ListItem>
         </List>
     )
 };

apps/documenteditor/mobile/locale/en.json

@@ -161,6 +161,9 @@
       "textCustomColors": "Custom Colors",
       "textStandartColors": "Standard Colors",
       "textThemeColors": "Theme Colors"
+    },
+    "HighlightColorPalette": {
+      "textNoFill": "No Fill"
     }
   },
   "ContextMenu": {
@@ -304,8 +307,7 @@
     "textTopAndBottom": "Top and Bottom",
     "textTotalRow": "Total Row",
     "textType": "Type",
-    "textWrap": "Wrap",
+    "textWrap": "Wrap"
-    "textNoFill": "No Fill"
   },
   "Error": {
     "convertationTimeoutText": "Conversion timeout exceeded.",

apps/presentationeditor/mobile/locale/en.json

@@ -37,6 +37,9 @@
       "textCustomColors": "Custom Colors",
       "textStandartColors": "Standard Colors",
       "textThemeColors": "Theme Colors"
+    },
+    "HighlightColorPalette": {
+      "textNoFill": "No Fill"
     }
   },
   "ContextMenu": {

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

@@ -372,10 +372,14 @@ class MainController extends Component {
             storeTextSettings.resetDecreaseIndent(value);
         });
 
-        this.api.asc_registerCallback('asc_onTextColor', (color) => {
+        this.api.asc_registerCallback('asc_onTextColor', color => {
             storeTextSettings.resetTextColor(color);
         });
 
+        this.api.asc_registerCallback('asc_onTextHighLight', color => {
+            storeTextSettings.resetBackgroundColor(color);
+        });
+
         this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => {
             storeTextSettings.resetLineSpacing(vc);
         });

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

@@ -155,6 +155,19 @@ class EditTextController extends Component {
         api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
     }
 
+    onBackgroundColor(strColor) {
+        const api = Common.EditorApi.get();
+
+        if (strColor == 'transparent') {
+            api.SetMarkerFormat(true, false);
+        } else {
+            let r = strColor[0] + strColor[1],
+                g = strColor[2] + strColor[3],
+                b = strColor[4] + strColor[5];
+            api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
+        }
+    }
+
     // Additional
 
     onAdditionalStrikethrough(type, value) {
@@ -243,6 +256,7 @@ class EditTextController extends Component {
                 changeFontSize={this.changeFontSize}
                 changeFontFamily={this.changeFontFamily}
                 onTextColor={this.onTextColor}
+                onBackgroundColor={this.onBackgroundColor}
                 onAdditionalStrikethrough={this.onAdditionalStrikethrough}
                 onAdditionalCaps={this.onAdditionalCaps}
                 onAdditionalScript={this.onAdditionalScript}

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

@@ -52,7 +52,9 @@ export class storeTextSettings {
             listItemHeight: observable,
             spriteCols: observable,
             loadSprite: action,
-            addFontToRecent:action
+            addFontToRecent:action,
+            backgroundColor: observable,
+            resetBackgroundColor: action
         });
     }
 
@@ -81,6 +83,7 @@ export class storeTextSettings {
     canIncreaseIndent = undefined;
     canDecreaseIndent = undefined;
     textColor = undefined;
+    backgroundColor = undefined;
     customTextColors = [];
     lineSpacing = undefined;
 
@@ -280,4 +283,14 @@ export class storeTextSettings {
         this.lineSpacing = line;
     }
 
+    resetBackgroundColor(color) {
+        if (color) {
+            console.log(color);
+            if (color == -1) {
+                this.backgroundColor = 'transparent';  
+            } else {
+                this.backgroundColor = color.get_hex();
+            }
+        }
+    }
 }

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

@@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
 import { EditLinkController } from "../../controller/edit/EditLink";
 
 import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide';
-import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText';
+import { PageTextFonts, PageTextFontColor, PageTextBackgroundColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText';
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage';
 import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable';
@@ -64,6 +64,10 @@ const routes = [
         path: '/edit-text-font-color/',
         component: PageTextFontColor
     },
+    {
+        path: '/edit-text-background-color/',
+        component: PageTextBackgroundColor
+    },
     {
         path: '/edit-text-custom-font-color/',
         component: PageTextCustomFontColor

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

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
+import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx';
 
 const EditText = props => {
     const isAndroid = Device.android;
@@ -16,6 +17,7 @@ const EditText = props => {
     const fontName = storeTextSettings.fontName || _t.textFonts;
     const fontSize = storeTextSettings.fontSize;
     const fontColor = storeTextSettings.textColor;
+    const backgroundColor = storeTextSettings.backgroundColor;
     const displaySize = typeof fontSize === 'undefined' || fontSize == '' ? _t.textAuto : fontSize + ' ' + _t.textPt;
     const isBold = storeTextSettings.isBold;
     const isItalic = storeTextSettings.isItalic;
@@ -53,6 +55,10 @@ const EditText = props => {
         <span className="color-preview" style={{ background: `#${(typeof fontColor === "object" ? fontColor.color : fontColor)}`}}></span> :
         <span className="color-preview auto"></span>;
 
+    const backgroundColorPreview = backgroundColor !== 'transparent' ?
+        <span className="color-preview" style={{ background: `#${(typeof backgroundColor === "object" ? backgroundColor.color : backgroundColor)}`}}></span> :
+        <span className="color-preview"></span>;
+
     return (
         <Fragment>
             <List>
@@ -76,6 +82,13 @@ const EditText = props => {
                         fontColorPreview
                     }
                 </ListItem>
+                <ListItem title={t("View.Edit.textHighlightColor")} link="/edit-text-background-color/" routeProps={{
+                    onBackgroundColor: props.onBackgroundColor
+                }}>
+                    {!isAndroid ?
+                        <Icon slot="media" icon="icon-text-selection">{backgroundColorPreview}</Icon> : backgroundColorPreview
+                    }
+                </ListItem>
                 <ListItem title={_t.textAdditionalFormatting} link="/edit-text-add-formatting/" routeProps={{
                     onAdditionalStrikethrough: props.onAdditionalStrikethrough,
                     onAdditionalCaps: props.onAdditionalCaps,
@@ -369,6 +382,37 @@ const PageCustomFontColor = props => {
     )
 };
 
+const PageBackgroundColor = props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const backgroundColor = props.storeTextSettings.backgroundColor;
+
+    const changeColor = (color, effectId) => {
+        if (color !== 'empty') {
+            if (effectId !== undefined ) {
+                props.onBackgroundColor({color: color, effectId: effectId});
+            } else {
+                props.onBackgroundColor(color);
+            }
+        }
+    };
+
+    return (
+        <Page>
+            <Navbar title={_t.textHighlightColor} backLink={_t.textBack}>
+                {Device.phone &&
+                    <NavRight>
+                        <Link sheetClose='#edit-sheet'>
+                            <Icon icon='icon-expand-down'/>
+                        </Link>
+                    </NavRight>
+                }
+            </Navbar>
+            <HighlightColorPalette changeColor={changeColor} curColor={backgroundColor} />
+        </Page>
+    )
+};
+
 const PageAdditionalFormatting = props => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
@@ -609,6 +653,7 @@ const PageLineSpacing = props => {
 const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
 const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
 const PageTextFontColor = inject("storeTextSettings", "storePalette", "storeFocusObjects")(observer(PageFontColor));
+const PageTextBackgroundColor = inject("storeTextSettings", "storePalette")(observer(PageBackgroundColor));
 const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor));
 const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
 const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers));
@@ -618,6 +663,7 @@ export {
     EditTextContainer as EditText,
     PageTextFonts,
     PageTextFontColor,
+    PageTextBackgroundColor,
     PageTextCustomFontColor,
     PageTextAddFormatting,
     PageTextBulletsAndNumbers,