Merge branch 'feature/mobile-apps-on-reactjs'

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

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
-import { ListItem, List } from 'framework7-react';
+import { f7, ListItem, List, Icon } from 'framework7-react';
-import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
 const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
@@ -12,8 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
                         {row.map((effect, index) => {
                             return(
                                 <a key={`tc-${rowIndex}-${index}`}
-                                   className={curColor && curColor.color === effect.color && curColor.effectId === effect.effectId ? 'active' : ''}
+                                   className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
-                                   data-effectvalue={effect.effectValue}
                                    style={{ background: `#${effect.color}`}}
                                    onClick={() => {onColorClick(effect.color, effect.effectId)}}
                                 ></a>
@@ -47,11 +45,11 @@ const StandartColors = ({ options, standartColors, onColorClick, curColor }) =>
     )
 };
 
-const DynamicColors = ({ options, onColorClick, curColor }) => {
+const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
-    const dynamicColors = [];//dynamiColors;
+    const colors = customColors.length > 0 ? customColors : [];
     const emptyItems = [];
-    if (dynamicColors.length < options.dynamiccolors) {
+    if (colors.length < options.customcolors) {
-        for (let i = dynamicColors.length; i < options.dynamiccolors; i++) {
+        for (let i = colors.length; i < options.customcolors; i++) {
             emptyItems.push(<a className='empty-color'
                                 key={`dc-empty${i}`}
                                 onClick={() => {onColorClick('empty')}}
@@ -60,7 +58,7 @@ const DynamicColors = ({ options, onColorClick, curColor }) => {
     }
     return (
         <div className='palette'>
-            {dynamicColors && dynamicColors.length > 0 && dynamicColors.map((color, index) => {
+            {colors && colors.length > 0 && colors.map((color, index) => {
                 return(
                     <a key={`dc-${index}`}
                        className={curColor && curColor === color ? 'active' : ''}
@@ -78,17 +76,17 @@ const ThemeColorPalette = props => {
     const {t} = useTranslation();
     const _t = t('Common.ThemeColorPalette', {returnObjects: true});
     const options = {
-        dynamiccolors: props.dynamiccolors || 10,
+        customcolors: props.customcolors || 10,
         standardcolors: props.standardcolors || 10,
         themecolors: props.themecolors || 10,
         effects: props.effects || 5,
-        allowReselect: props.allowReselect !== false,
+        //allowReselect: props.allowReselect !== false,
         transparent: props.transparent || false,
         value: props.value || '000000',
         cls: props.cls || ''
     };
     const curColor = props.curColor;
-    const changeCurColor = props.changeCurColor;
+    console.log(curColor);
     const themeColors = [];
     const effectColors = Common.Utils.ThemeColor.getEffectColors();
     let row = -1;
@@ -101,39 +99,76 @@ const ThemeColorPalette = props => {
     });
     const standartColors = Common.Utils.ThemeColor.getStandartColors();
     // custom color
-    //const dynamicColors = Common.localStorage.getItem('asc.'+Common.localStorage.getId()+'.colors.custom');
+    let customColors = props.customColors;
-    //dynamicColors = this.dynamicColors ? this.dynamicColors.toLowerCase().split(',') : [];
+    if (customColors.length < 1) {
-
+        customColors = localStorage.getItem('mobile-custom-colors');
-    const onColorClick = ( color, effectId ) => {
+        customColors = customColors ? customColors.toLowerCase().split(',') : [];
-        if (color !== 'empty') {
+    }
-            if (effectId !==undefined ) {
-                changeCurColor({color: color, effectId: effectId});
-            } else {
-                changeCurColor(color);
-            }
-        } else {
-            // open custom color menu
-        }
-    };
 
     return (
         <div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
             <List>
                 <ListItem className='theme-colors'>
                     <div>{ _t.textThemeColors }</div>
-                    <ThemeColors themeColors={themeColors} onColorClick={onColorClick} curColor={curColor}/>
+                    <ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
                 </ListItem>
                 <ListItem className='standart-colors'>
                     <div>{ _t.textStandartColors }</div>
-                    <StandartColors options={options} standartColors={standartColors} onColorClick={onColorClick} curColor={curColor}/>
+                    <StandartColors options={options} standartColors={standartColors} onColorClick={props.changeColor} curColor={curColor}/>
                 </ListItem>
                 <ListItem className='dynamic-colors'>
                     <div>{ _t.textCustomColors }</div>
-                    <DynamicColors options={options} onColorClick={onColorClick} curColor={curColor}/>
+                    <CustomColors options={options} customColors={customColors} onColorClick={props.changeColor} curColor={curColor}/>
                 </ListItem>
             </List>
         </div>
     )
 };
 
-export default ThemeColorPalette;
+const CustomColorPicker = props => {
+    let currentColor = props.currentColor;
+    if (currentColor === 'auto') {
+        currentColor = '000000';
+    }
+    const countDynamicColors = props.countdynamiccolors || 10;
+    const [stateColor, setColor] = useState('#' + currentColor);
+    useEffect(() => {
+        if (document.getElementsByClassName('color-picker-wheel').length < 1) {
+            const colorPicker = f7.colorPicker.create({
+                containerEl: document.getElementsByClassName('color-picker-container')[0],
+                value: {
+                    hex: '#' + currentColor
+                },
+                on: {
+                    change: function (value) {
+                        setColor(value.getValue().hex);
+                    }
+                }
+            });
+        }
+    });
+    const addNewColor = (color) => {
+        let colors = localStorage.getItem('mobile-custom-colors');
+        colors = colors ? colors.split(',') : [];
+        const newColor = color.slice(1);
+        if (colors.push(newColor) > countDynamicColors) colors.shift(); // 10 - dynamiccolors
+        localStorage.setItem('mobile-custom-colors', colors.join().toLowerCase());
+        props.onAddNewColor && props.onAddNewColor(colors, newColor);
+    };
+    return(
+        <div id='color-picker'>
+            <div className='color-picker-container'></div>
+            <div className='right-block'>
+                <div className='color-hsb-preview'>
+                    <div className='new-color-hsb-preview' style={{backgroundColor: stateColor}}></div>
+                    <div className='current-color-hsb-preview' style={{backgroundColor: '#' + currentColor}}></div>
+                </div>
+                <a href='#' id='add-new-color' className='button button-round' onClick={()=>{addNewColor(stateColor)}}>
+                    <Icon icon={'icon-plus'} slot="media" />
+                </a>
+            </div>
+        </div>
+    )
+};
+
+export { ThemeColorPalette, CustomColorPicker };

apps/common/mobile/resources/less/common.less

@@ -49,7 +49,7 @@
     .color-auto {
         width:22px;
         height: 22px;
-        background-color: #000;
+        background-color: @black;
     }
     &.active {
         .color-auto {
@@ -98,3 +98,53 @@
         }
     }
 }
+
+#color-picker {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    max-width: 300px;
+    margin: 0 auto;
+    margin-top: 4px;
+    .color-picker-container {
+        width: calc(100% - 94px);
+        position: relative;
+        max-width: 100%;
+        height: auto;
+        font-size: 0;
+        .color-picker-module-wheel {
+            margin: 0;
+        }
+    }
+    .right-block {
+        margin-left: 20px;
+        .color-hsb-preview {
+            width: 72px;
+            height: 72px;
+            border-radius: 100px;
+            overflow: hidden;
+            border: 1px solid @gray;
+            .new-color-hsb-preview, .current-color-hsb-preview {
+                width: 100%;
+                height: 36px;
+            }
+        }
+        .button-round {
+            height: 72px;
+            width: 72px;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 100px;
+            background-color: @white;
+            box-shadow: 0 4px 4px rgba(0,0,0,.25);
+            border-color: transparent;
+            margin-top: 20px;
+            .icon {
+                height: 30px;
+                width: 30px;
+            }
+        }
+    }
+}

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
 };