Merge branch 'feature/mobile-apps-on-reactjs' into feature/mobile-apps-on-reactjs-pe-edit-settings

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

@@ -13,7 +13,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
                                 <a key={`tc-${rowIndex}-${index}`}
                                    className={curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue ? 'active' : ''}
                                    style={{ background: `#${effect.color}`}}
-                                   onClick={() => {onColorClick(effect.color, effect.effectId)}}
+                                   onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
                                 ></a>
                             )
                         })}
@@ -139,6 +139,9 @@ const CustomColorPicker = props => {
     if (props.autoColor) {
         currentColor = rgb2hex(props.autoColor);
     }
+    if (currentColor === 'transparent' || !currentColor) {
+        currentColor = 'ffffff';
+    }
     const countDynamicColors = props.countdynamiccolors || 10;
     const [stateColor, setColor] = useState(`#${currentColor}`);
     useEffect(() => {

apps/common/mobile/resources/less/common-ios.less

@@ -172,6 +172,13 @@
                     background-color: @autoColor;
                 }
             }
+            .item-after {
+                .color-preview {
+                    width: 75px;
+                    height: 30px;
+                    margin-top: -3px;
+                }
+            }
         }
         li.no-indicator {
             .item-link {

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

@@ -243,6 +243,12 @@
     }
 }
 
+.page-content {
+    &.tab {
+        padding-top: 0;
+    }
+}
+
 .color-palettes {
     .palette {
         padding: 8px 0px;

apps/common/mobile/utils/LocalStorage.js

@@ -0,0 +1,80 @@
+
+class LocalStorage {
+    constructor() {
+        Common.Gateway.on('internalcommand', data => {
+            if (data.type == 'localstorage') {
+                this._store = data.keys;
+            }
+        });
+
+        this._store = {};
+
+        try {
+            this._isAllowed = !!window.localStorage;
+        } catch (e) {
+            this._isAllowed = false;
+        }
+    }
+
+    get id() {
+        return this._storeName;
+    }
+
+    set id(name) {
+        this._storeName = name;
+    }
+
+    set keysFilter(value) {
+        this._filter = value;
+    }
+
+    get keysFilter() {
+        return this._filter;
+    }
+
+    sync() {
+        if ( !this._isAllowed )
+            Common.Gateway.internalMessage('localstorage', {cmd:'get', keys:this._filter});
+    }
+
+    save() {
+        if ( !this._isAllowed )
+            Common.Gateway.internalMessage('localstorage', {cmd:'set', keys:this._store});
+    }
+
+    setItem(name, value, just) {
+        if ( this._isAllowed ) {
+            try {
+                localStorage.setItem(name, value);
+            } catch (error){}
+        } else {
+            this._store[name] = value;
+
+            if ( just===true ) {
+                Common.Gateway.internalMessage('localstorage', {cmd:'set', keys: {name: value}});
+            }
+        }
+    }
+
+    getItem(name) {
+        if ( this._isAllowed )
+            return localStorage.getItem(name);
+        else return this._store[name]===undefined ? null : this._store[name];
+    };
+
+    setBool(name, value, just) {
+        this.setItem(name, value ? 1 : 0, just);
+    }
+
+    getBool(name, defValue) {
+        const value = this.getItem(name);
+        return (value !== null) ? (parseInt(value) != 0) : !!defValue;
+    }
+
+    itemExists(name) {
+        return this.getItem(name) !== null;
+    }
+}
+
+const instance = new LocalStorage();
+export {instance as LocalStorage};

apps/documenteditor/mobile/locale/en.json

@@ -175,7 +175,11 @@
     "textFontColors": "Font Colors",
     "textAutomatic": "Automatic",
     "textAddCustomColor": "Add Custom Color",
-    "textCustomColor": "Custom Color"
+    "textCustomColor": "Custom Color",
+    "textBackground": "Background",
+    "textFill": "Fill",
+    "textBorder": "Border",
+    "textEffects": "Effects"
   },
   "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/controller/edit/EditShape.jsx

@@ -9,6 +9,8 @@ class EditShapeController extends Component {
     constructor (props) {
         super(props);
         this.onWrapType = this.onWrapType.bind(this);
+
+        this.props.storeShapeSettings.setFillColor(undefined);
     }
 
     onRemoveShape () {
@@ -104,6 +106,24 @@ class EditShapeController extends Component {
         }
     }
 
+    onFillColor (color) {
+        const api = Common.EditorApi.get();
+        const image = new Asc.asc_CImgProperty();
+        const shape = new Asc.asc_CShapeProperty();
+        const fill = new Asc.asc_CShapeFill();
+        if (color == 'transparent') {
+            fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
+            fill.put_fill(null);
+        } else {
+            fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
+            fill.put_fill(new Asc.asc_CFillSolid());
+            fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
+        }
+        shape.put_fill(fill);
+        image.put_ShapeProperties(shape);
+        api.ImgApply(image);
+    }
+
     render () {
         return (
             <EditShape onRemoveShape={this.onRemoveShape}
@@ -114,9 +134,10 @@ class EditShapeController extends Component {
                        onWrapDistance={this.onWrapDistance}
                        onReorder={this.onReorder}
                        onReplace={this.onReplace}
+                       onFillColor={this.onFillColor}
             />
         )
     }
 }
 
-export default inject("storeShapeSettings")(observer(EditShapeController));
+export default inject("storeShapeSettings", "storeFocusObjects")(observer(EditShapeController));

apps/documenteditor/mobile/src/controller/settings/ApplicationSettings.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import { ApplicationSettings } from "../../view/settings/ApplicationSettings";
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 class ApplicationSettingsController extends Component {
     constructor(props) {
@@ -8,10 +9,11 @@ class ApplicationSettingsController extends Component {
     }
 
     setUnitMeasurement(value) {
-        const api = Common.EditorApi.get();
         value = (value !== null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
         Common.Utils.Metric.setCurrentMetric(value);
-        // Common.localStorage.setItem("de-mobile-settings-unit", value);
+        LocalStorage.setItem("de-mobile-settings-unit", value);
+
+        const api = Common.EditorApi.get();
         api.asc_SetDocumentUnits((value == Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value == Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
     }
 
@@ -23,14 +25,15 @@ class ApplicationSettingsController extends Component {
     }
 
     switchNoCharacters(value) {
+        Common.localStorage.setItem("de-mobile-no-characters", value);
+
         const api = Common.EditorApi.get();
-        // Common.localStorage.setItem("de-mobile-no-characters", value);
         api.put_ShowParaMarks(value);
     }
 
     switchShowTableEmptyLine(value) {
+        Common.localStorage.setItem("de-mobile-hidden-borders", value);
         const api = Common.EditorApi.get();
-        // Common.localStorage.setItem("de-mobile-hidden-borders", state);
         api.put_ShowTableEmptyLine(value);
     }
 

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/store/shapeSettings.js

@@ -189,4 +189,29 @@ export class storeShapeSettings {
     getWrapDistance (shapeObject) {
         return shapeObject.get_Paddings().get_Top();
     }
+
+    // Fill Color
+    @observable fillColor = undefined;
+    setFillColor (color) {
+        this.fillColor = color;
+    }
+    getFillColor (shapeObject) {
+        let fill = shapeObject.get_ShapeProperties().get_fill();
+        const fillType = fill.get_type();
+        let color = 'transparent';
+        if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
+            fill = fill.get_fill();
+            const sdkColor = fill.get_color();
+            if (sdkColor) {
+                if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
+                    color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
+                } else {
+                    color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
+                }
+            }
+        }
+        this.fillColor = color;
+        return color;
+    }
+
 }

apps/documenteditor/mobile/src/view/app.jsx

@@ -2,10 +2,11 @@ import React from 'react';
 
 import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react';
 
-import routes from '../js/routes';
-
 import '../../../../common/Gateway.js';
 import '../../../../common/main/lib/util/utils.js';
+
+import routes from '../js/routes';
+
 import Notifications from '../../../../common/mobile/utils/notifications.js'
 import {MainController} from '../controller/Main';
 import {Device} from '../../../../common/mobile/utils/device'

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

@@ -15,8 +15,8 @@ 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 {PageShapeStyle, PageShapeCustomFillColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
 import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage";
 import {PageTableOptions, PageTableWrap, PageTableStyle} from "./EditTable";
 import {PageChartWrap, PageChartReorder} from "./EditChart";
@@ -62,9 +62,25 @@ 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
+    {
+        path: '/edit-shape-style/',
+        component: PageShapeStyle,
+    },
+    {
+        path: '/edit-shape-custom-fill-color/',
+        component: PageShapeCustomFillColor,
+    },
     {
         path: '/edit-shape-wrap/',
         component: PageWrap,

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=''>
+                <ListItem title={_t.textBackground} link='/edit-paragraph-back-color/' routeProps={{
-                    <span className="color-preview" slot="after"></span>
+                    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};

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

@@ -1,13 +1,88 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton} from 'framework7-react';
+import {List, ListItem, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
+import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx";
+
+const PageCustomFillColor = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    let fillColor = props.storeShapeSettings.fillColor;
+    if (typeof fillColor === 'object') {
+        fillColor = fillColor.color;
+    }
+    const onAddNewColor = (colors, color) => {
+        props.storePalette.changeCustomColors(colors);
+        props.onFillColor(color);
+        props.storeShapeSettings.setFillColor(color);
+        props.f7router.back();
+    };
+    return(
+        <Page>
+            <Navbar title={_t.textCustomColor} backLink={_t.textBack} />
+            <CustomColorPicker currentColor={fillColor} onAddNewColor={onAddNewColor}/>
+        </Page>
+    )
+};
+
+const FillTab = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const storeShapeSettings = props.storeShapeSettings;
+    const shapeObject = props.storeFocusObjects.shapeObject;
+    const curFillColor = storeShapeSettings.fillColor ? storeShapeSettings.fillColor : storeShapeSettings.getFillColor(shapeObject);
+    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.onFillColor(newColor);
+                storeShapeSettings.setFillColor(newColor);
+            } else {
+                props.onFillColor(color);
+                storeShapeSettings.setFillColor(color);
+            }
+        } else {
+            // open custom color menu
+            props.f7router.navigate('/edit-shape-custom-fill-color/');
+        }
+    };
+    return(
+        <Fragment>
+            <ThemeColorPalette changeColor={changeColor} curColor={curFillColor} customColors={customColors} transparent={true}/>
+            <List>
+                <ListItem title={_t.textAddCustomColor} link={'/edit-shape-custom-fill-color/'} routeProps={{
+                    onFillColor: props.onFillColor
+                }}></ListItem>
+            </List>
+        </Fragment>
+    )
+}));
 
 const PageStyle = props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
     return (
         <Page>
-
+            <Navbar backLink={_t.textBack}>
+                <div className='tab-buttons tabbar'>
+                    <Link key={"de-link-shape-fill"}  tabLink={"#edit-shape-fill"} tabLinkActive={true}>{_t.textFill}</Link>
+                    <Link key={"de-link-shape-border"}  tabLink={"#edit-shape-border"}>{_t.textBorder}</Link>
+                    <Link key={"de-link-shape-effects"}  tabLink={"#edit-shape-effects"}>{_t.textEffects}</Link>
+                </div>
+            </Navbar>
+            <Tabs animated>
+                <Tab key={"de-tab-shape-fill"} id={"edit-shape-fill"} className="page-content" tabActive={true}>
+                    <FillTab onFillColor={props.onFillColor}/>
+                </Tab>
+                <Tab key={"de-tab-shape-border"} id={"edit-shape-border"} className="page-content">
+                    border
+                </Tab>
+                <Tab key={"de-tab-shape-effects"} id={"edit-shape-effects"} className="page-content">
+                    effects
+                </Tab>
+            </Tabs>
         </Page>
     )
 };
@@ -170,7 +245,9 @@ const EditShape = props => {
     return (
         <Fragment>
             <List>
-                <ListItem title={_t.textStyle}></ListItem>
+                <ListItem title={_t.textStyle} link='/edit-shape-style/' routeProps={{
+                    onFillColor: props.onFillColor
+                }}></ListItem>
                 <ListItem title={_t.textWrap} link='/edit-shape-wrap/' routeProps={{
                     onWrapType: props.onWrapType,
                     onShapeAlign: props.onShapeAlign,
@@ -193,13 +270,15 @@ const EditShape = props => {
 };
 
 const EditShapeContainer = inject("storeFocusObjects")(observer(EditShape));
-const PageStyleContainer = inject("storeFocusObjects")(observer(PageStyle));
+const PageShapeStyle = inject("storeFocusObjects")(observer(PageStyle));
+const PageShapeCustomFillColor = inject("storeFocusObjects", "storeShapeSettings", "storePalette")(observer(PageCustomFillColor));
 const PageWrapContainer = inject("storeShapeSettings", "storeFocusObjects")(observer(PageWrap));
 const PageReplaceContainer = inject("storeShapeSettings","storeFocusObjects")(observer(PageReplace));
 const PageReorderContainer = inject("storeFocusObjects")(observer(PageReorder));
 
 export {EditShapeContainer as EditShape,
-        PageStyleContainer as PageStyle,
+        PageShapeStyle,
+        PageShapeCustomFillColor,
         PageWrapContainer as PageWrap,
         PageReplaceContainer as PageReplace,
         PageReorderContainer as PageReorder}

apps/spreadsheeteditor/mobile/src/controller/CellEditor.jsx

@@ -1,9 +1,21 @@
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import CellEditorView from '../view/CellEditor';
 
 const CellEditor = props => {
-    return <CellEditorView />
+    useEffect(() => {
+        Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection.bind(this));
+        });
+    }, []);
+
+    const [cellName, setCellName] = useState('');
+
+    const onApiCellSelection = info => {
+        setCellName(typeof(info)=='string' ? info : info.asc_getName());
+    };
+
+    return <CellEditorView cellName={cellName} />
 };
 
 export default CellEditor;

apps/spreadsheeteditor/mobile/src/less/celleditor.less

@@ -3,8 +3,15 @@
 @cellEditorExpandedHeight: 70px;
 @contentBackColor: #fff;
 @gray-light: #f1f1f1;
+@gray-darker: #848484; //rgb(132, 132, 132)
+@statusBarBorderColor: #cbcbcb;
 
 #idx-celleditor {
+    box-sizing: border-box;
+    * {
+        box-sizing: border-box;
+    }
+
     display: flex;
 
     height: @cellEditorHeight;
@@ -34,10 +41,32 @@
     }
 
     #box-cell-name {
+        display: inline-flex;
         background-color: var(--f7-navbar-bg-color);
     }
 
-    #ce-cell-content {
+    #idx-cell-name {
+        display: inline-block;
+        width: 90px;
+        padding: 0 4px;
+        border: 0 none;
+        line-height: 30px;
+        //font-size: 17px;
+        text-align: center;
+
+        &[disabled] {
+            color: @gray-darker;
+            opacity: 0.5;
+        }
+    }
+
+    #idx-btn-function {
+        height: @cellEditorHeight;
+        line-height: @cellEditorHeight;
+        padding: 0 10px;
+    }
+
+    #idx-cell-content {
         padding: 3px 3px;
         line-height: 1.428571429;
         color: #000;
@@ -76,4 +105,9 @@
             }
         }
     }
+
+    .group--content {
+        position: relative;
+        .hairline(left, @statusBarBorderColor);
+    }
 }

apps/spreadsheeteditor/mobile/src/view/CellEditor.jsx

@@ -19,13 +19,16 @@ const CellEditorView = props => {
 
     return <View id="idx-celleditor" style={viewStyle} className={expanded?'expanded':'collapsed'}>
                 <div id="box-cell-name" className="ce-group">
-                    F(x)
+                    <span id="idx-cell-name">{props.cellName}</span>
+                    <a href="#" id="idx-btn-function" className="link icon-only">
+                        <i className="icon icon-function" />
+                    </a>
                 </div>
-                <div className="ce-group" style={contentStyle}>
+                <div className="ce-group group--content" style={contentStyle}>
-                    <textarea id="ce-cell-content" spellCheck="false"></textarea>
+                    <textarea id="idx-cell-content" spellCheck="false" />
                 </div>
                 <div className="ce-group">
-                    <Link icon="caret" onClick={expandClick}></Link>
+                    <Link icon="caret" onClick={expandClick} />
                 </div>
             </View>;
 };