[DE mobile] Added font color page (auto color, theme color, standart color)

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

@@ -33,6 +33,13 @@ class EditTextController extends Component {
         }
     }
 
+    onTextColorAuto() {
+        const api = Common.EditorApi.get();
+        const color = new Asc.asc_CColor();
+        color.put_auto(true);
+        api.put_TextColor(color);
+    }
+
     toggleBold(value) {
         const api = Common.EditorApi.get();
         if (api) {
@@ -174,6 +181,7 @@ class EditTextController extends Component {
         return (
             <EditText changeFontSize={this.changeFontSize}
                       changeFontFamily={this.changeFontFamily}
+                      onTextColorAuto={this.onTextColorAuto}
                       toggleBold={this.toggleBold}
                       toggleItalic={this.toggleItalic}
                       toggleUnderline={this.toggleUnderline}

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} from "./EditText";
+import {PageAdditionalFormatting, PageBullets, PageFonts, PageLineSpacing, PageNumbers, PageFontColor} from "./EditText";
 import {PageAdvancedSettings} from "./EditParagraph";
 import {PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
@@ -43,6 +43,10 @@ const routes = [
         path: '/edit-text-line-spacing/',
         component: PageLineSpacing,
     },
+    {
+        path: '/edit-text-font-color/',
+        component: PageFontColor,
+    },
     //Edit paragraph
     {
         path: '/edit-paragraph-adv/',

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

@@ -4,6 +4,8 @@ import {List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle}
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 
+import ThemeColorPalette from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
+
 const PageFonts = props => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
@@ -208,6 +210,37 @@ const PageLineSpacing = props => {
     )
 };
 
+const PageFontColor = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const [stateColor, setColor] = useState();
+    const changeCurColor = (color) => {
+        setColor(color);
+    };
+    const onAddCustomColor = () => {
+        console.log('add custom color');
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textFontColors} backLink={_t.textBack} />
+            <List>
+                <ListItem className={'font-color-auto' + (stateColor === '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}/>
+            <List>
+                <ListItem title={_t.textAddCustomColor} onClick={() => {onAddCustomColor()}}></ListItem>
+            </List>
+        </Page>
+    )
+};
+
 const EditText = props => {
     const isAndroid = Device.android;
     const { t } = useTranslation();
@@ -235,7 +268,9 @@ const EditText = props => {
                         <a className={'button' + (isStrikethrough ? ' active' : '')} onClick={() => {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S</a>
                     </Row>
                 </ListItem>
-                <ListItem title={t("Edit.textFontColor")} link="#">
+                <ListItem title={t("Edit.textFontColor")} link="/edit-text-font-color/" routeProps={{
+                    onTextColorAuto: props.onTextColorAuto
+                }}>
                     {!isAndroid && <Icon slot="media" icon="icon-text-color"></Icon>}
                     <span className="color-preview"></span>
                 </ListItem>
@@ -305,9 +340,12 @@ const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets));
 const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers));
 const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing));
 
-export {EditTextContainer as EditText,
+export {
-        PageFontsContainer as PageFonts,
+    EditTextContainer as EditText,
-        PageAddFormattingContainer as PageAdditionalFormatting,
+    PageFontsContainer as PageFonts,
-        PageBulletsContainer as PageBullets,
+    PageAddFormattingContainer as PageAdditionalFormatting,
-        PageNumbersContainer as PageNumbers,
+    PageBulletsContainer as PageBullets,
-        PageLineSpacingContainer as PageLineSpacing};
+    PageNumbersContainer as PageNumbers,
+    PageLineSpacingContainer as PageLineSpacing,
+    PageFontColor
+};