[DE mobile] Added font color page, custom font color page into text settings

apps/documenteditor/mobile/locale/en.json

@@ -174,7 +174,8 @@
     "textStartAt": "Start at",
     "textFontColors": "Font Colors",
     "textAutomatic": "Automatic",
-    "textAddCustomColor": "Add Custom Color"
+    "textAddCustomColor": "Add Custom Color",
+    "textCustomColor": "Custom Color"
   },
   "Add": {
     "textTable": "Table",

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

@@ -40,6 +40,11 @@ class EditTextController extends Component {
         api.put_TextColor(color);
     }
 
+    onTextColor(color) {
+        const api = Common.EditorApi.get();
+        api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
+    }
+
     toggleBold(value) {
         const api = Common.EditorApi.get();
         if (api) {
@@ -182,6 +187,7 @@ class EditTextController extends Component {
             <EditText changeFontSize={this.changeFontSize}
                       changeFontFamily={this.changeFontFamily}
                       onTextColorAuto={this.onTextColorAuto}
+                      onTextColor={this.onTextColor}
                       toggleBold={this.toggleBold}
                       toggleItalic={this.toggleItalic}
                       toggleUnderline={this.toggleUnderline}

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

@@ -14,6 +14,7 @@ export class storeTextSettings {
     @observable typeNumbers = undefined;
     @observable paragraphAlign = undefined;
     @observable textColor = undefined;
+    @observable customTextColors = [];
     @observable lineSpacing = undefined;
     @observable backgroundColor = undefined;
 
@@ -97,7 +98,7 @@ export class storeTextSettings {
         let value;
         if (color) {
             if (color.get_auto()) {
-                value = '000000';
+                value = 'auto';
             } else {
                 if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
                     value = {
@@ -112,6 +113,10 @@ export class storeTextSettings {
         this.textColor = value;
     }
 
+    @action changeCustomTextColors (colors) {
+        this.customTextColors = colors;
+    }
+
     @action resetLineSpacing (vc) {
         let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
         this.lineSpacing = line;

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

@@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart";
 import EditHyperlinkController from "../../controller/edit/EditHyperlink";
 import EditHeaderController from "../../controller/edit/EditHeader";
 
-import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers, PageFontColor} from "./EditText";
+import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor} from "./EditText";
 import {PageAdvancedSettings} from "./EditParagraph";
 import {PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@@ -25,27 +25,31 @@ const routes = [
     //Edit text
     {
         path: '/edit-text-fonts/',
-        component: PageFonts,
+        component: PageTextFonts,
     },
     {
         path: '/edit-text-add-formatting/',
-        component: PageAdditionalFormatting,
+        component: PageTextAddFormatting,
     },
     {
         path: '/edit-text-bullets/',
-        component: PageBullets,
+        component: PageTextBullets,
     },
     {
         path: '/edit-text-numbers/',
-        component: PageNumbers,
+        component: PageTextNumbers,
     },
     {
         path: '/edit-text-line-spacing/',
-        component: PageLineSpacing,
+        component: PageTextLineSpacing,
     },
     {
         path: '/edit-text-font-color/',
-        component: PageFontColor,
+        component: PageTextFontColor,
+    },
+    {
+        path: '/edit-text-custom-font-color/',
+        component: PageTextCustomFontColor,
     },
     //Edit paragraph
     {

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

@@ -1,10 +1,10 @@
-import React, {Fragment, useState} from 'react';
+import React, {Fragment, useState } from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
+import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
-import ThemeColorPalette from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
 
 const PageFonts = props => {
     const isAndroid = Device.android;
@@ -210,32 +210,62 @@ const PageLineSpacing = props => {
     )
 };
 
+const PageCustomFontColor = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const store = props.storeTextSettings;
+    let textColor = store.textColor;
+    if (typeof textColor === 'object') {
+        textColor = textColor.color;
+    }
+    const onAddNewColor = (colors, color) => {
+        props.storeTextSettings.changeCustomTextColors(colors);
+        props.onTextColor(color);
+        props.f7router.back();
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={textColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
 const PageFontColor = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
-    const [stateColor, setColor] = useState();
+    const store = props.storeTextSettings;
-    const changeCurColor = (color) => {
+    const textColor = store.textColor;
-        setColor(color);
+    const customColors = store.customTextColors;
-    };
+    const changeColor = (color, effectId) => {
-    const onAddCustomColor = () => {
+        if (color !== 'empty') {
-        console.log('add custom color');
+            if (effectId !==undefined ) {
+                props.onTextColor({color: color, effectId: effectId});
+            } else {
+                props.onTextColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-text-custom-font-color/');
+        }
     };
     return(
         <Page>
             <Navbar title={_t.textFontColors} backLink={_t.textBack} />
             <List>
-                <ListItem className={'font-color-auto' + (stateColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
+                <ListItem className={'font-color-auto' + (textColor === 'auto' ? ' active' : '')} title={_t.textAutomatic} onClick={() => {
                     props.onTextColorAuto();
-                    setColor('auto');
                 }}>
                     <div slot="media">
                         <div className={'color-auto'}></div>
                     </div>
                 </ListItem>
             </List>
-            <ThemeColorPalette changeCurColor={changeCurColor} curColor={stateColor}/>
+            <ThemeColorPalette changeColor={changeColor} curColor={textColor} customColors={customColors}/>
             <List>
-                <ListItem title={_t.textAddCustomColor} onClick={() => {onAddCustomColor()}}></ListItem>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-font-color/'} routeProps={{
+                    onTextColor: props.onTextColor
+                }}></ListItem>
             </List>
         </Page>
     )
@@ -269,7 +299,8 @@ const EditText = props => {
                     </Row>
                 </ListItem>
                 <ListItem title={t("Edit.textFontColor")} link="/edit-text-font-color/" routeProps={{
-                    onTextColorAuto: props.onTextColorAuto
+                    onTextColorAuto: props.onTextColorAuto,
+                    onTextColor: props.onTextColor
                 }}>
                     {!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>}
                     <span className="color-preview"></span>
@@ -334,18 +365,21 @@ const EditText = props => {
 };
 
 const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText));
-const PageFontsContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
+const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts));
-const PageAddFormattingContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
+const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting));
-const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets));
+const PageTextBullets = inject("storeTextSettings")(observer(PageBullets));
-const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers));
+const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers));
-const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing));
+const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing));
+const PageTextFontColor = inject("storeTextSettings")(observer(PageFontColor));
+const PageTextCustomFontColor = inject("storeTextSettings")(observer(PageCustomFontColor));
 
 export {
     EditTextContainer as EditText,
-    PageFontsContainer as PageFonts,
+    PageTextFonts,
-    PageAddFormattingContainer as PageAdditionalFormatting,
+    PageTextAddFormatting,
-    PageBulletsContainer as PageBullets,
+    PageTextBullets,
-    PageNumbersContainer as PageNumbers,
+    PageTextNumbers,
-    PageLineSpacingContainer as PageLineSpacing,
+    PageTextLineSpacing,
-    PageFontColor
+    PageTextFontColor,
+    PageTextCustomFontColor
 };