Merge branch 'feature/mobile-apps-on-reactjs-bug50044' into develop

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

@@ -32,6 +32,18 @@
     }
 }
 
+.navbar-hidden {
+    transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
+}
+
+.navbar-hidden+.page>.page-content, .navbar-hidden+.page-content {
+    padding-top: 0;
+}
+
+.page.editor>.page-content {
+    transition: padding-top .3s ease-in;
+}
+
 .subnavbar {
     .subnavbar-inner {
         padding: 0;

apps/documenteditor/mobile/src/page/main.jsx

@@ -44,6 +44,10 @@ class MainPage extends Component {
                     collaborationPage: showOpts
                 };
         });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.hide('.main-navbar');
+        }
     };
 
     handleOptionsViewClosed = opts => {
@@ -57,7 +61,10 @@ class MainPage extends Component {
                     return {settingsVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
-            })
+            });
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.show('.main-navbar');
+            }
         })();
     };
 
@@ -66,7 +73,7 @@ class MainPage extends Component {
       const config = appOptions.config;
       const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
       return (
-          <Page name="home" className={showLogo && 'page-with-logo'}>
+          <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
               {/* Top Navbar */}
               <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
                   {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

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

@@ -24,6 +24,7 @@ export class storeFocusObjects {
     _headerType = 1;
 
     resetFocusObjects (objects) {
+        this._focusObjects = objects;
     }
 
     get settings() {

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

@@ -20,6 +20,11 @@ export class storeParagraphSettings {
     styleName = undefined;
 
     initEditorStyles (styles) {
+        this.styles = styles.get_MergedStyles();
+        this.styleThumbSize = {
+            width   : styles.STYLE_THUMBNAIL_WIDTH,
+            height  : styles.STYLE_THUMBNAIL_HEIGHT
+        };
     }
 
     get paragraphStyles () {
@@ -34,6 +39,7 @@ export class storeParagraphSettings {
     }
 
     changeParaStyleName (name) {
+        this.styleName = name;
     }
 
     backColor = undefined;

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

@@ -1,6 +1,7 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
 import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab} from 'framework7-react';
+import {f7} 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";
@@ -118,29 +119,36 @@ const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
     const storeChartSettings = props.storeChartSettings;
-    const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties();
+    const chartProperties = props.storeFocusObjects.chartObject ? props.storeFocusObjects.chartObject.get_ChartProperties() : null;
-
     const types = storeChartSettings.types;
-    const curType = chartProperties.getType();
+    const curType = chartProperties ? chartProperties.getType() : null;
 
     const styles = storeChartSettings.styles;
 
     const shapeObject = props.storeFocusObjects.shapeObject;
-    const shapeStroke = shapeObject.get_ShapeProperties().get_stroke();
+    let borderSize, borderType, borderColor;
+    if (shapeObject) {
+        const shapeStroke = shapeObject.get_ShapeProperties().get_stroke();
+        borderSize = shapeStroke.get_width() * 72.0 / 25.4;
+        borderType = shapeStroke.get_type();
+        borderColor = !storeChartSettings.borderColor ? storeChartSettings.initBorderColor(shapeStroke) : storeChartSettings.borderColor;
+    }
 
     // Init border size
     const borderSizeTransform = storeChartSettings.borderSizeTransform();
-    const borderSize = shapeStroke.get_width() * 72.0 / 25.4;
+    const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
-    const borderType = shapeStroke.get_type();
+    const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize);
-    const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
-    const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
     const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
     const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
 
     // Init border color
-    const borderColor = !storeChartSettings.borderColor ? storeChartSettings.initBorderColor(shapeStroke) : storeChartSettings.borderColor;
     const displayBorderColor = borderColor !== 'transparent' ? `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}` : borderColor;
 
+    if (!chartProperties && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
@@ -231,13 +239,20 @@ const PageWrap = props => {
     const _t = t('Edit', {returnObjects: true});
     const storeChartSettings = props.storeChartSettings;
     const chartObject = props.storeFocusObjects.chartObject;
-    const wrapType = storeChartSettings.getWrapType(chartObject);
+    let wrapType, align, moveText, overlap, distance;
-    const align = storeChartSettings.getAlign(chartObject);
+    if (chartObject) {
-    const moveText = storeChartSettings.getMoveText(chartObject);
+        wrapType = storeChartSettings.getWrapType(chartObject);
-    const overlap = storeChartSettings.getOverlap(chartObject);
+        align = storeChartSettings.getAlign(chartObject);
-    const distance = Common.Utils.Metric.fnRecalcFromMM(storeChartSettings.getWrapDistance(chartObject));
+        moveText = storeChartSettings.getMoveText(chartObject);
+        overlap = storeChartSettings.getOverlap(chartObject);
+        distance = Common.Utils.Metric.fnRecalcFromMM(storeChartSettings.getWrapDistance(chartObject));
+    }
     const metricText = Common.Utils.Metric.getCurrentMetricName();
     const [stateDistance, setDistance] = useState(distance);
+    if (!chartObject && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
     return (
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack} />
@@ -328,6 +343,11 @@ const PageWrap = props => {
 const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
+    const chartObject = props.storeFocusObjects.chartObject;
+    if (!chartObject && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
@@ -382,6 +402,7 @@ const EditChart = props => {
 
 const PageChartStyle = inject("storeChartSettings", "storeFocusObjects")(observer(PageStyle));
 const PageChartWrap = inject("storeChartSettings", "storeFocusObjects")(observer(PageWrap));
+const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
 const PageChartCustomFillColor = inject("storeChartSettings", "storePalette")(observer(PageCustomFillColor));
 const PageChartBorderColor = inject("storeChartSettings", "storePalette")(observer(PageBorderColor));
 const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(observer(PageCustomBorderColor));
@@ -392,4 +413,4 @@ export {EditChart,
         PageChartBorderColor,
         PageChartCustomBorderColor,
         PageChartWrap,
-        PageReorder as PageChartReorder}
+        PageChartReorder}

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

@@ -22,19 +22,19 @@ const EditHeader = props => {
         <Fragment>
             <List>
                 <ListItem title={_t.textDifferentFirstPage}>
-                    <Toggle checked={isDiffFirst} onToggleChange={() => {props.onDiffFirst(!isDiffFirst)}}/>
+                    <Toggle checked={isDiffFirst} onChange={() => {props.onDiffFirst(!isDiffFirst)}}/>
                 </ListItem>
                 <ListItem title={_t.textDifferentOddAndEvenPages}>
-                    <Toggle checked={isDiffOdd} onToggleChange={() => {props.onDiffOdd(!isDiffOdd)}}/>
+                    <Toggle checked={isDiffOdd} onChange={() => {props.onDiffOdd(!isDiffOdd)}}/>
                 </ListItem>
                 <ListItem title={_t.textLinkToPrevious} className={linkToPrev===null ? 'disabled' : ''}>
-                    <Toggle checked={boolLinkToPrev} onToggleChange={() => {props.onSameAs(!boolLinkToPrev)}}/>
+                    <Toggle checked={boolLinkToPrev} onChange={() => {props.onSameAs(!boolLinkToPrev)}}/>
                 </ListItem>
             </List>
             <BlockTitle>{_t.textPageNumbering}</BlockTitle>
             <List>
                 <ListItem title={_t.textContinueFromPreviousSection}>
-                    <Toggle checked={startPageNumber<0} onToggleChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
+                    <Toggle checked={startPageNumber<0} onChange={() => {props.onNumberingContinue(!(startPageNumber<0), _startAt)}}/>
                 </ListItem>
                 <ListItem title={_t.textStartAt} className={startPageNumber<0 ? 'disabled' : ''}>
                     {!isAndroid && <div slot='after-start'>{_startAt}</div>}

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

@@ -11,13 +11,20 @@ const PageWrap = props => {
     const _t = t('Edit', {returnObjects: true});
     const storeImageSettings = props.storeImageSettings;
     const imageObject = props.storeFocusObjects.imageObject;
-    const wrapType = storeImageSettings.getWrapType(imageObject);
+    let wrapType, align, moveText, overlap, distance;
-    const align = storeImageSettings.getAlign(imageObject);
+    if (imageObject) {
-    const moveText = storeImageSettings.getMoveText(imageObject);
+        wrapType = storeImageSettings.getWrapType(imageObject);
-    const overlap = storeImageSettings.getOverlap(imageObject);
+        align = storeImageSettings.getAlign(imageObject);
-    const distance = Common.Utils.Metric.fnRecalcFromMM(storeImageSettings.getWrapDistance(imageObject));
+        moveText = storeImageSettings.getMoveText(imageObject);
+        overlap = storeImageSettings.getOverlap(imageObject);
+        distance = Common.Utils.Metric.fnRecalcFromMM(storeImageSettings.getWrapDistance(imageObject));
+    }
     const metricText = Common.Utils.Metric.getCurrentMetricName();
     const [stateDistance, setDistance] = useState(distance);
+    if (!imageObject && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
     return (
         <Page>
             <Navbar title={_t.textWrap} backLink={_t.textBack} />
@@ -143,6 +150,11 @@ const PageLinkSettings = props => {
 const PageReplace = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
+    const imageObject = props.storeFocusObjects.imageObject;
+    if (!imageObject && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
     return (
         <Page>
             <Navbar title={_t.textReplace} backLink={_t.textBack} />
@@ -163,6 +175,11 @@ const PageReplace = props => {
 const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('Edit', {returnObjects: true});
+    const imageObject = props.storeFocusObjects.imageObject;
+    if (!imageObject && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />

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

@@ -1,6 +1,6 @@
 import React, {Fragment, useState} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, Toggle} from 'framework7-react';
+import {f7, 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';
@@ -11,24 +11,31 @@ const PageAdvancedSettings = props => {
     const metricText = Common.Utils.Metric.getCurrentMetricName();
     const storeFocusObjects = props.storeFocusObjects;
     const paragraphObj = storeFocusObjects.paragraphObject;
-    if (paragraphObj.get_Ind()===null || paragraphObj.get_Ind()===undefined) {
+    let firstLine, spaceBefore, spaceAfter, spaceBeforeFix, spaceAfterFix, displayBefore, displayAfter, spaceBetween, breakBefore, orphanControl, keepTogether, keepWithNext;
-        paragraphObj.get_Ind().put_FirstLine(0);
+    if (paragraphObj) {
+        if (paragraphObj.get_Ind()===null || paragraphObj.get_Ind()===undefined) {
+            paragraphObj.get_Ind().put_FirstLine(0);
+        }
+        firstLine = parseFloat(Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Ind().get_FirstLine()).toFixed(2));
+
+        spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
+        spaceAfter  = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
+        spaceBeforeFix = parseFloat(spaceBefore.toFixed(2));
+        spaceAfterFix = parseFloat(spaceAfter.toFixed(2));
+        displayBefore = spaceBefore < 0 ? t('Edit.textAuto') : spaceBeforeFix + ' ' + metricText;
+        displayAfter = spaceAfter < 0 ? t('Edit.textAuto') : spaceAfterFix + ' ' + metricText;
+
+        spaceBetween = paragraphObj.get_ContextualSpacing();
+        breakBefore = paragraphObj.get_PageBreakBefore();
+        orphanControl = paragraphObj.get_WidowControl();
+        keepTogether = paragraphObj.get_KeepLines();
+        keepWithNext = paragraphObj.get_KeepNext();
+    } else {
+        if (Device.phone) {
+            $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+            return null;
+        }
     }
-    const firstLine = parseFloat(Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Ind().get_FirstLine()).toFixed(2));
-
-    const spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before());
-    const spaceAfter  = paragraphObj.get_Spacing().get_After() < 0 ? paragraphObj.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_After());
-    const spaceBeforeFix = parseFloat(spaceBefore.toFixed(2));
-    const spaceAfterFix = parseFloat(spaceAfter.toFixed(2));
-    const displayBefore = spaceBefore < 0 ? t('Edit.textAuto') : spaceBeforeFix + ' ' + metricText;
-    const displayAfter = spaceAfter < 0 ? t('Edit.textAuto') : spaceAfterFix + ' ' + metricText;
-
-    const spaceBetween = paragraphObj.get_ContextualSpacing();
-    const breakBefore = paragraphObj.get_PageBreakBefore();
-    const orphanControl = paragraphObj.get_WidowControl();
-    const keepTogether = paragraphObj.get_KeepLines();
-    const keepWithNext = paragraphObj.get_KeepNext();
-
     return(
         <Page>
             <Navbar title={t('Edit.textAdvanced')} backLink={t('Edit.textBack')} />

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

@@ -78,13 +78,20 @@ const PageAdditionalFormatting = props => {
     const storeTextSettings = props.storeTextSettings;
     const storeFocusObjects = props.storeFocusObjects;
     const paragraph = storeFocusObjects.paragraphObject;
-    const isStrikeout = paragraph.get_Strikeout();
+    let isStrikeout, isDStrikeout, isSmallCaps, isAllCaps, letterSpacing;
-    const isDStrikeout = paragraph.get_DStrikeout();
+    if (paragraph) {
+        isStrikeout = paragraph.get_Strikeout();
+        isDStrikeout = paragraph.get_DStrikeout();
+        isSmallCaps = paragraph.get_SmallCaps();
+        isAllCaps = paragraph.get_AllCaps();
+        letterSpacing = Common.Utils.Metric.fnRecalcFromMM(paragraph.get_TextSpacing());
+    }
     const isSuperscript = storeTextSettings.isSuperscript;
     const isSubscript = storeTextSettings.isSubscript;
-    const isSmallCaps = paragraph.get_SmallCaps();
+    if (!paragraph && Device.phone) {
-    const isAllCaps = paragraph.get_AllCaps();
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
-    const letterSpacing = Common.Utils.Metric.fnRecalcFromMM(paragraph.get_TextSpacing());
+        return null;
+    }
     return(
         <Page>
             <Navbar title={t('Edit.textAdditional')} backLink={t('Edit.textBack')} />

apps/presentationeditor/mobile/src/page/main.jsx

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
-import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
+import { f7, Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
+import { Device } from '../../../../common/mobile/utils/device';
 
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
@@ -44,6 +45,10 @@ class MainPage extends Component {
             else if ( opts == 'preview' )
                 return {previewVisible: true};
         });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.hide('.main-navbar');
+        }
     };
 
     handleOptionsViewClosed = opts => {
@@ -59,7 +64,10 @@ class MainPage extends Component {
                     return {collaborationVisible: false}
                 else if ( opts == 'preview' )
                     return {previewVisible: false};
-            })
+            });
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.show('.main-navbar');
+            }
         })();
     };
 
@@ -71,7 +79,7 @@ class MainPage extends Component {
         return (
             <Fragment>
                 {!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
-                <Page name="home" className={showLogo && 'page-with-logo'}>
+                <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
                     {/* Top Navbar */}
                     <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
                         {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

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

@@ -6,7 +6,10 @@ export class storeAppOptions {
             isEdit: observable,
             canViewComments: observable,
             setConfigOptions: action,
-            setPermissionOptions: action
+            setPermissionOptions: action,
+
+            lostEditingRights: observable,
+            changeEditingRights: action
         });
     }
 
@@ -14,6 +17,11 @@ export class storeAppOptions {
     canViewComments = false;
     config = {};
 
+    lostEditingRights = false;
+    changeEditingRights (value) {
+        this.lostEditingRights = value;
+    }
+
     setConfigOptions (config) {
         this.config = config;
         this.user = Common.Utils.fillUserInfo(config.user, config.lang, "Local.User"/*me.textAnonymous*/);

apps/spreadsheeteditor/mobile/src/page/main.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
+import { Device } from '../../../../common/mobile/utils/device';
 
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
@@ -43,6 +44,10 @@ class MainPage extends Component {
             else if ( opts == 'coauth' )
                 return {collaborationVisible: true};
         });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.hide('.main-navbar');
+        }
     };
 
     handleOptionsViewClosed = opts => {
@@ -56,7 +61,10 @@ class MainPage extends Component {
                     return {settingsVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
-            })
+            });
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.show('.main-navbar');
+            }
         })();
     };
 
@@ -65,7 +73,7 @@ class MainPage extends Component {
       const config = appOptions.config;
       const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
       return (
-            <Page name="home" className={showLogo && 'page-with-logo'}>
+            <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
               {/* Top Navbar */}
                 <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
                     {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

apps/spreadsheeteditor/mobile/src/store/appOptions.js

@@ -6,7 +6,10 @@ export class storeAppOptions {
             isEdit: observable,
             canViewComments: observable,
             setConfigOptions: action,
-            setPermissionOptions: action
+            setPermissionOptions: action,
+
+            lostEditingRights: observable,
+            changeEditingRights: action
         });
     }
 
@@ -14,6 +17,11 @@ export class storeAppOptions {
     config = {};
     canViewComments = false;
 
+    lostEditingRights = false;
+    changeEditingRights (value) {
+        this.lostEditingRights = value;
+    }
+
     setConfigOptions (config, _t) {
         this.config = config;
         this.customization = config.customization;

apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx

@@ -143,6 +143,12 @@ const PageFontsCell = props => {
         });
     };
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textFonts} backLink={_t.textBack} />
@@ -208,6 +214,12 @@ const PageTextColorCell = props => {
         }
     };
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+  
     return (
         <Page>
             <Navbar title={_t.textTextColor} backLink={_t.textBack}>
@@ -249,6 +261,12 @@ const PageFillColorCell = props => {
         }
     };
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+  
     return (
         <Page>
             <Navbar title={_t.textFillColor} backLink={_t.textBack}>
@@ -325,6 +343,12 @@ const PageTextFormatCell = props => {
     const vAlignStr = storeCellSettings.vAlignStr;
     const isWrapText = storeCellSettings.isWrapText;
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textTextFormat} backLink={_t.textBack} />
@@ -392,6 +416,12 @@ const PageTextOrientationCell = props => {
     const storeCellSettings = props.storeCellSettings;
     const orientationStr = storeCellSettings.orientationStr;
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+   
     return (
         <Page>
             <Navbar title={_t.textTextOrientation} backLink={_t.textBack} />
@@ -461,6 +491,12 @@ const PageBorderStyleCell = props => {
         13: `${_t.textThick}`
     };
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((storeFocusObjects.focusOn !== 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textBorderStyle} backLink={_t.textBack} />
@@ -826,10 +862,10 @@ const TextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObj
 const FillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageFillColorCell));
 const CustomTextColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomTextColorCell));
 const CustomFillColorCell = inject("storeCellSettings", "storePalette", "storeFocusObjects")(observer(PageCustomFillColorCell));
-const FontsCell = inject("storeCellSettings")(observer(PageFontsCell));
+const FontsCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageFontsCell));
-const TextFormatCell = inject("storeCellSettings")(observer(PageTextFormatCell));
+const TextFormatCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageTextFormatCell));
-const TextOrientationCell = inject("storeCellSettings")(observer(PageTextOrientationCell));
+const TextOrientationCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageTextOrientationCell));
-const BorderStyleCell = inject("storeCellSettings")(observer(PageBorderStyleCell));
+const BorderStyleCell = inject("storeCellSettings", "storeFocusObjects")(observer(PageBorderStyleCell));
 const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageBorderColorCell));
 const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell));
 const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell));

apps/spreadsheeteditor/mobile/src/view/edit/EditChart.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} from 'framework7-react';
+import {f7, List, ListItem, ListButton, ListInput, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavTitle, NavRight} 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";
@@ -130,33 +130,42 @@ const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeChartSettings = props.storeChartSettings;
-    const chartProperties = props.storeFocusObjects.chartObject.get_ChartProperties();
+    const storeFocusObjects = props.storeFocusObjects;
-    const shapeProperties = props.storeFocusObjects.shapeObject.get_ShapeProperties();
+    const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
+    const shapeProperties = storeFocusObjects.shapeObject && storeFocusObjects.shapeObject.get_ShapeProperties();
 
     const styles = storeChartSettings.styles;
     const types = storeChartSettings.types;
-    const curType = chartProperties.getType();
+    const curType = chartProperties && chartProperties.getType();
 
     // Init border size
 
-    const shapeStroke = shapeProperties.get_stroke();
+    let borderSize, borderType;
+    if (shapeProperties) {
+        const shapeStroke = shapeProperties.get_stroke();
+        borderSize = shapeStroke.get_width() * 72.0 / 25.4;
+        borderType = shapeStroke.get_type();
+    }
     const borderSizeTransform = storeChartSettings.borderSizeTransform();
-    const borderSize = shapeStroke.get_width() * 72.0 / 25.4;
+    const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
-    const borderType = shapeStroke.get_type();
+    const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE || borderType === undefined) ? 0 : borderSizeTransform.sizeByValue(borderSize);
-    const displayBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize);
-    const displayTextBorderSize = (borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize);
     const [stateBorderSize, setBorderSize] = useState(displayBorderSize);
     const [stateTextBorderSize, setTextBorderSize] = useState(displayTextBorderSize);
 
     // Init border color
 
-    if(!storeChartSettings.borderColor) {
+    if(!storeChartSettings.borderColor && shapeProperties) {
         storeChartSettings.initBorderColor(shapeProperties);
     }
 
     const borderColor = storeChartSettings.borderColor;
     const displayBorderColor = borderColor == 'transparent' ? borderColor : `#${(typeof borderColor === "object" ? borderColor.color : borderColor)}`;
 
+    if ((!chartProperties || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
@@ -242,7 +251,10 @@ const PageStyle = props => {
 const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
-
+    if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
@@ -269,16 +281,27 @@ const PageLayout = props => {
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
     const chartObject = storeFocusObjects.chartObject;
-    const chartProperties = chartObject.get_ChartProperties();
+    const chartProperties = chartObject && chartObject.get_ChartProperties();
-    const chartType = chartProperties.getType();
+    const chartType = chartProperties && chartProperties.getType();
 
-    const [chartTitle, setTitle] = useState(chartProperties.getTitle());
+    let title, legend, axisHorTitle, axisVertTitle, horGridlines, vertGridlines, dataLabel;
-    const [chartLegend, setLegend] = useState(chartProperties.getLegendPos());
+    if (chartProperties) {
-    const [chartAxisHorTitle, setAxisHorTitle] = useState(chartProperties.getHorAxisLabel());
+        title = chartProperties.getTitle();
-    const [chartAxisVertTitle, setAxisVertTitle] = useState(chartProperties.getVertAxisLabel());
+        legend = chartProperties.getLegendPos();
-    const [chartHorGridlines, setHorGridlines] = useState(chartProperties.getHorGridLines());
+        axisHorTitle = chartProperties.getHorAxisLabel();
-    const [chartVertGridlines, setVertGridlines] = useState(chartProperties.getVertGridLines());
+        axisVertTitle = chartProperties.getVertAxisLabel();
-    const [chartDataLabel, setDataLabel] = useState(chartProperties.getDataLabelsPos());
+        horGridlines = chartProperties.getHorGridLines();
+        vertGridlines = chartProperties.getVertGridLines();
+        dataLabel = chartProperties.getDataLabelsPos();
+    }
+
+    const [chartTitle, setTitle] = useState(title);
+    const [chartLegend, setLegend] = useState(legend);
+    const [chartAxisHorTitle, setAxisHorTitle] = useState(axisHorTitle);
+    const [chartAxisVertTitle, setAxisVertTitle] = useState(axisVertTitle);
+    const [chartHorGridlines, setHorGridlines] = useState(horGridlines);
+    const [chartVertGridlines, setVertGridlines] = useState(vertGridlines);
+    const [chartDataLabel, setDataLabel] = useState(dataLabel);
 
     let dataLabelPos = [
         { value: Asc.c_oAscChartDataLabelsPos.none, displayValue: _t.textNone },
@@ -369,6 +392,11 @@ const PageLayout = props => {
         7: `${_t.textOuterTop}`
     };
 
+    if ((!chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textLayout} backLink={_t.textBack} />
@@ -620,7 +648,7 @@ const PageVerticalAxis = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const api = Common.EditorApi.get();
-    const chartProperty = api.asc_getChartObject();
+    const chartProperty = api.asc_getChartObject(true);
     const isIos = Device.ios;
     const verAxisProps = chartProperty.getVertAxisProps();
     const axisProps = (verAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? verAxisProps : chartProperty.getHorAxisProps();
@@ -684,6 +712,11 @@ const PageVerticalAxis = props => {
     const currentCrossesValue = axisProps.getCrosses();
     const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
 
+    if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
@@ -917,7 +950,7 @@ const PageHorizontalAxis = props => {
     const _t = t('View.Edit', {returnObjects: true});
     const api = Common.EditorApi.get();
     const isIos = Device.ios;
-    const chartProperty = api.asc_getChartObject();
+    const chartProperty = api.asc_getChartObject(true);
     const horAxisProps = chartProperty.getHorAxisProps();
     const axisProps = (horAxisProps.getAxisType() == Asc.c_oAscAxisType.val) ? chartProperty.getVertAxisProps() : horAxisProps;
     const crossValue = axisProps.getCrossesRule();
@@ -970,6 +1003,11 @@ const PageHorizontalAxis = props => {
     const currentCrossesValue = axisProps.getCrosses();
     const [crossesValue, setCrossesValue] = useState(!currentCrossesValue ? '' : currentCrossesValue);
 
+    if ((!props.storeFocusObjects.chartObject || props.storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textAxisOptions} backLink={_t.textBack} />
@@ -1181,8 +1219,8 @@ const EditChart = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
-    const chartProperties = storeFocusObjects.chartObject.get_ChartProperties();
+    const chartProperties = storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties();
-    const chartType = chartProperties.getType();
+    const chartType = chartProperties && chartProperties.getType();
 
     const disableSetting = (
         chartType == Asc.c_oAscChartTypeSettings.pie ||
@@ -1244,6 +1282,7 @@ const PageChartCustomBorderColor = inject("storeChartSettings", "storePalette")(
 const PageChartLayout = inject("storeFocusObjects")(observer(PageLayout));
 const PageChartVerticalAxis = inject("storeFocusObjects")(observer(PageVerticalAxis));
 const PageChartHorizontalAxis = inject("storeFocusObjects")(observer(PageHorizontalAxis));
+const PageChartReorder = inject("storeFocusObjects")(observer(PageReorder));
 
 export {
     PageEditChart as EditChart,
@@ -1251,7 +1290,7 @@ export {
     PageChartCustomFillColor,
     PageChartBorderColor,
     PageChartCustomBorderColor,
-    PageReorder as PageChartReorder,
+    PageChartReorder,
     PageChartLayout,
     PageLegend,
     PageChartTitle,

apps/spreadsheeteditor/mobile/src/view/edit/EditImage.jsx

@@ -32,6 +32,12 @@ const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />
@@ -58,6 +64,12 @@ const PageReplace = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.imageObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page className="images">
             <Navbar title={_t.textReplace} backLink={_t.textBack} />

apps/spreadsheeteditor/mobile/src/view/edit/EditLink.jsx

@@ -1,14 +1,20 @@
 import React, {useState, useEffect, Fragment} from 'react';
 import {observer, inject} from "mobx-react";
-import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
+import {f7, List, ListItem, Page, Navbar, Icon, ListButton, ListInput, Segmented, Button} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from "../../../../../common/mobile/utils/device";
 
-const PageTypeLink = ({curType, changeType}) => {
+const PageTypeLink = ({curType, changeType, storeFocusObjects}) => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const [typeLink, setTypeLink] = useState(curType);
 
+    const settings = !storeFocusObjects.focusOn ? [] : (storeFocusObjects.focusOn === 'obj' ? storeFocusObjects.objects : storeFocusObjects.selections);
+    if (storeFocusObjects.focusOn === 'obj' || settings.indexOf('hyperlink') === -1) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textLinkType} backLink={_t.textBack}/>
@@ -20,11 +26,17 @@ const PageTypeLink = ({curType, changeType}) => {
     )
 };
 
-const PageSheet = ({curSheet, sheets, changeSheet}) => {
+const PageSheet = ({curSheet, sheets, changeSheet, storeFocusObjects}) => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const [stateSheet, setSheet] = useState(curSheet.value);
 
+    const settings = !storeFocusObjects.focusOn ? [] : (storeFocusObjects.focusOn === 'obj' ? storeFocusObjects.objects : storeFocusObjects.selections);
+    if (storeFocusObjects.focusOn === 'obj' || settings.indexOf('hyperlink') === -1) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textSheet} backLink={_t.textBack}/>
@@ -146,8 +158,11 @@ const EditLink = props => {
     )
 };
 
+const _PageTypeLink = inject("storeFocusObjects")(observer(PageTypeLink));
+const _PageSheet = inject("storeFocusObjects")(observer(PageSheet));
+
 export {
     EditLink,
-    PageTypeLink,
+    _PageTypeLink as PageTypeLink,
-    PageSheet
+    _PageSheet as PageSheet
 };

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

@@ -9,10 +9,8 @@ const EditShape = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeFocusObjects = props.storeFocusObjects;
-    // const selections = storeFocusObjects.selections;
-    // console.log(selections);
     const shapeObject = storeFocusObjects.shapeObject;
-    const canFill = shapeObject.get_ShapeProperties().asc_getCanFill();
+    const canFill = shapeObject && shapeObject.get_ShapeProperties().asc_getCanFill();
 
     return (
         <Fragment>
@@ -84,7 +82,8 @@ const PageStyle = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
     const storeShapeSettings = props.storeShapeSettings;
-    const shapeObject = props.storeFocusObjects.shapeObject.get_ShapeProperties();
+    const storeFocusObjects = props.storeFocusObjects;
+    const shapeObject = storeFocusObjects.shapeObject.get_ShapeProperties();
     const stroke = shapeObject.get_stroke();
     
     // Init border size
@@ -108,6 +107,11 @@ const PageStyle = props => {
     const opacity = transparent !== null && transparent !== undefined ? transparent / 2.55 : 100;
     const [stateOpacity, setOpacity] = useState(Math.round(opacity));
 
+    if ((!shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+   
     return (
         <Page>
             <Navbar backLink={_t.textBack}>
@@ -248,6 +252,12 @@ const PageReplace = props => {
     let shapes = storeShapeSettings.getStyleGroups();
     shapes.splice(0, 1); // Remove line shapes
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page className="shapes dataview">
             <Navbar title={_t.textReplace} backLink={_t.textBack} />
@@ -274,6 +284,12 @@ const PageReorder = props => {
     const { t } = useTranslation();
     const _t = t('View.Edit', {returnObjects: true});
 
+    const storeFocusObjects = props.storeFocusObjects;
+    if ((!storeFocusObjects.shapeObject || storeFocusObjects.chartObject || storeFocusObjects.focusOn === 'cell') && Device.phone) {
+        $$('.sheet-modal.modal-in').length > 0 && f7.sheet.close();
+        return null;
+    }
+
     return (
         <Page>
             <Navbar title={_t.textReorder} backLink={_t.textBack} />