From 720dc5b4cd8ce368817cbf08f0252585c53d900c Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Thu, 10 Aug 2023 17:05:23 +0300
Subject: [PATCH] [SSE mobile] Change routing and props

---
 .../mobile/src/controller/add/Add.jsx         |  45 ++++
 .../mobile/src/controller/add/AddChart.jsx    |   3 +-
 .../mobile/src/controller/add/AddFunction.jsx |   4 +-
 .../mobile/src/controller/add/AddLink.jsx     |   4 +-
 .../mobile/src/controller/add/AddOther.jsx    |   2 -
 .../mobile/src/controller/add/AddShape.jsx    |   3 +-
 .../mobile/src/controller/edit/EditLink.jsx   |   5 +-
 .../src/controller/settings/Settings.jsx      |  76 ++++++
 .../mobile/src/page/main.jsx                  | 150 ++++++-----
 .../mobile/src/view/add/Add.jsx               | 243 +++---------------
 .../mobile/src/view/add/AddFunction.jsx       |  27 +-
 .../mobile/src/view/add/AddLink.jsx           |  17 +-
 .../mobile/src/view/add/AddOther.jsx          |   7 +-
 .../mobile/src/view/add/AddingPage.jsx        | 130 ++++++++++
 .../mobile/src/view/edit/Edit.jsx             | 224 +++-------------
 .../mobile/src/view/edit/EditingPage.jsx      | 155 +++++++++++
 .../mobile/src/view/settings/Settings.jsx     | 242 +++--------------
 .../mobile/src/view/settings/SettingsPage.jsx | 112 ++++++++
 18 files changed, 733 insertions(+), 716 deletions(-)
 create mode 100644 apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx
 create mode 100644 apps/spreadsheeteditor/mobile/src/controller/settings/Settings.jsx
 create mode 100644 apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx
 create mode 100644 apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx
 create mode 100644 apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx

diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx
new file mode 100644
index 0000000000..16be3f3661
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx
@@ -0,0 +1,45 @@
+import React, { createContext } from "react";
+import AddView from "../../view/add/Add";
+
+export const AddingContext = createContext();
+
+const AddingController = props => {
+    const api = Common.EditorApi.get();
+    const cellinfo = api.asc_getCellInfo();
+    const seltype = cellinfo.asc_getSelectionType();
+    const iscelllocked = cellinfo.asc_getLocked();
+    const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
+    let options;
+
+    if(!iscelllocked) {
+        options = props.showOptions;
+
+        if(!options) {
+            switch(seltype) {
+                case Asc.c_oAscSelectionType.RangeCells:
+                case Asc.c_oAscSelectionType.RangeRow:
+                case Asc.c_oAscSelectionType.RangeCol:
+                case Asc.c_oAscSelectionType.RangeMax: break;
+                case Asc.c_oAscSelectionType.RangeImage:
+                case Asc.c_oAscSelectionType.RangeShape:
+                case Asc.c_oAscSelectionType.RangeChart:
+                case Asc.c_oAscSelectionType.RangeChartText:
+                case Asc.c_oAscSelectionType.RangeShapeText:
+                    options = {panels: ['image','shape']};
+                    break;
+            }
+        }
+    }
+
+    return (
+        <AddingContext.Provider value={{
+            isAddShapeHyperlink,
+            showPanels: options ? options.panels : undefined
+        }}>
+            <AddView showOptions={props.showOptions} />
+        </AddingContext.Provider>
+        
+    )
+}
+
+export default AddingController;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
index b560d95199..42b9f4f2d0 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx
@@ -43,8 +43,7 @@ class AddChartController extends Component {
 
     render () {
         return (
-            <AddChart onInsertChart={this.onInsertChart}
-            />
+            <AddChart onInsertChart={this.onInsertChart} />
         )
     }
 }
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx
index a6adeb1dad..7725cf180b 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx
@@ -87,9 +87,7 @@ class AddFunctionController extends Component {
 
     render () {
         return (
-            <AddFunction onInsertFunction={this.onInsertFunction}
-                         onOptionClick={this.props.onOptionClick}
-            />
+            <AddFunction onInsertFunction={this.onInsertFunction} />
         )
     }
 }
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx
index 075f113631..08fc94bd05 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx
@@ -141,7 +141,7 @@ class AddLinkController extends Component {
         return (
             !this.props.isNavigate ?
                 Device.phone ?
-                    <Popup id="add-link-popup" onPopupClosed={() => this.props.onClosed('add-link')}>
+                    <Popup id="add-link-popup" onPopupClosed={() => this.props.closeOptions('add-link')}>
                         <View routes={routes} style={{height: '100%'}}>
                             <AddLink 
                                 allowInternal={this.allowInternal}
@@ -155,7 +155,7 @@ class AddLinkController extends Component {
                         </View>
                     </Popup>
                 :
-                    <Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('add-link')}>
+                    <Popover id="add-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('add-link')}>
                         <View routes={routes} style={{height: '410px'}}>
                             <AddLink 
                                 allowInternal={this.allowInternal}
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
index 4ae33cbb75..fd936917c1 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddOther.jsx
@@ -32,8 +32,6 @@ class AddOtherController extends Component {
             <AddOther 
                 closeModal={this.closeModal}
                 hideAddComment={this.hideAddComment}
-                wsProps={this.props.wsProps}
-                onCloseLinkSettings={this.props.onCloseLinkSettings}
             />
         )
     }
diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx
index 0c7209c530..b36e4dcd3b 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx
@@ -26,8 +26,7 @@ class AddShapeController extends Component {
 
     render () {
         return (
-            <AddShape onShapeClick={this.onShapeClick}
-            />
+            <AddShape onShapeClick={this.onShapeClick} />
         )
     }
 }
diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx
index 927a779534..c5642dd207 100644
--- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx
+++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { f7, Popup, Popover, View } from 'framework7-react';
 import { Device } from '../../../../../common/mobile/utils/device';
-import {observer, inject} from "mobx-react";
 import { withTranslation } from 'react-i18next';
 
 import { EditLink, PageEditTypeLink, PageEditSheet} from '../../view/edit/EditLink';
@@ -149,7 +148,7 @@ class EditLinkController extends Component {
         return (
             !this.props.isNavigate ?
                 Device.phone ?
-                    <Popup id="edit-link-popup" onPopupClosed={() => this.props.onClosed('edit-link')}>
+                    <Popup id="edit-link-popup" onPopupClosed={() => this.props.closeOptions('edit-link')}>
                         <View routes={routes} style={{height: '100%'}}>
                             <EditLink 
                                 linkInfo={this.linkInfo}
@@ -164,7 +163,7 @@ class EditLinkController extends Component {
                         </View>
                     </Popup>
                 :
-                    <Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onClosed('edit-link')}>
+                    <Popover id="edit-link-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.closeOptions('edit-link')}>
                         <View routes={routes} style={{height: '410px'}}>
                             <EditLink
                                 linkInfo={this.linkInfo}
diff --git a/apps/spreadsheeteditor/mobile/src/controller/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/controller/settings/Settings.jsx
new file mode 100644
index 0000000000..2ed70f29d6
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/controller/settings/Settings.jsx
@@ -0,0 +1,76 @@
+import React, { createContext } from 'react';
+import { observer, inject } from "mobx-react";
+import { Device } from '../../../../../common/mobile/utils/device';
+import SettingsView from "../../view/settings/Settings";
+import { f7 } from 'framework7-react';
+
+export const SettingsContext = createContext();
+
+const SettingsController = inject('storeAppOptions')(observer(props => {
+    const closeModal = () => {
+        if(Device.phone) {
+            f7.sheet.close('.settings-popup', false);
+        } else {
+            f7.popover.close('#settings-popover', false);
+        }
+    };
+
+    const onPrint = () => {
+        const api = Common.EditorApi.get();
+
+        closeModal();
+        setTimeout(() => {
+            api.asc_Print();
+        }, 400);
+    };
+
+    const showHelp = () => {
+        // let url = '{{HELP_URL}}';
+        // let url = 'https://helpcenter.onlyoffice.com';
+        let url = __HELP_URL__;
+
+        if (url.charAt(url.length-1) !== '/') {
+            url += '/';
+        }
+
+        if (Device.sailfish || Device.android) {
+            url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
+        } 
+        else {
+            url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
+        }
+
+        closeModal();
+        window.open(url, "_blank");
+    };
+
+    const showFeedback = () => {
+        let config = props.storeAppOptions.config;
+
+        closeModal();
+        if(config && !!config.feedback && !!config.feedback.url) {
+            window.open(config.feedback.url, "_blank");
+        } else window.open(__SUPPORT_URL__, "_blank");
+    };
+
+    const onDownloadOrigin = () => {
+        closeModal();
+        setTimeout(() => {
+            Common.EditorApi.get().asc_DownloadOrigin();
+        }, 0);
+    };
+
+    return (
+        <SettingsContext.Provider value={{
+            onPrint,
+            showHelp,
+            showFeedback,
+            onDownloadOrigin,
+            closeModal
+        }}>
+            <SettingsView />
+        </SettingsContext.Provider>
+    );
+}));
+
+export default SettingsController;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx
index 6d0979df3c..5ad60998dc 100644
--- a/apps/spreadsheeteditor/mobile/src/page/main.jsx
+++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx
@@ -1,23 +1,22 @@
-import React, { Component, Fragment } from 'react';
-import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
+import React, { Component, Fragment, createContext } from 'react';
+import { Page, View, Navbar, Subnavbar, Icon, f7 } from 'framework7-react';
 import { observer, inject } from "mobx-react";
 import { Device } from '../../../../common/mobile/utils/device';
-
-import Settings from '../view/settings/Settings';
-import { Collaboration } from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
+import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
 import CellEditor from '../controller/CellEditor';
 import { Statusbar } from '../controller/Statusbar';
 import FilterOptionsController from '../controller/FilterOptions.jsx'
-import AddOptions from "../view/add/Add";
-import EditOptions from "../view/edit/Edit";
 import { Search, SearchSettings } from '../controller/Search';
-import { f7, Link } from 'framework7-react';
-
-import {FunctionGroups} from "../controller/add/AddFunction";
+import { FunctionGroups } from "../controller/add/AddFunction";
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
 import { AddLinkController } from '../controller/add/AddLink';
 import { EditLinkController } from '../controller/edit/EditLink';
+import SettingsController from '../controller/settings/Settings';
+import AddingController from '../controller/add/Add';
+import EditView from '../view/edit/Edit';
+
+export const MainContext = createContext();
 
 class MainPage extends Component {
     constructor(props) {
@@ -128,67 +127,78 @@ class MainPage extends Component {
         }
 
         return (
-            <Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
-                {/* Top Navbar */}
-                <Navbar id='editor-navbar'
-                        className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
-                    {!isHideLogo && <div className="main-logo" onClick={() => {
-                        window.open(`${__PUBLISHER_URL__}`, "_blank");
-                    }}><Icon icon="icon-logo"></Icon></div>}
-                    <Subnavbar>
-                        <Toolbar openOptions={this.handleClickToOpenOptions}
-                                closeOptions={this.handleOptionsViewClosed}/>
-                        <Search useSuspense={false}/>
-                    </Subnavbar>
-                </Navbar>
-             
-                <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})}/>
-                {/* Page content */}
-                <View id="editor_sdk" />
-                {isShowPlaceholder ?
-                    <div className="doc-placeholder">
-                        <div className="columns"></div>
-                        <div className="columns"></div>
-                    </div> :
-                    null
-                }
-                <SearchSettings useSuspense={false} />
-                {
-                    !this.state.editOptionsVisible ? null :
-                        <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} wsLock={wsLock} wsProps={wsProps} />
-                }
-                {
-                    !this.state.addOptionsVisible ? null :
-                        <AddOptions onCloseLinkSettings={this.handleOptionsViewClosed.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'add')} wsLock={wsLock} wsProps={wsProps} showOptions={this.state.addShowOptions} />
-                }
-                {
-                    !this.state.addLinkSettingsVisible ? null :
-                        <AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
-                }
-                {
-                    !this.state.editLinkSettingsVisible ? null :
-                        <EditLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
-                }
-                {
-                    !this.state.settingsVisible ? null :
-                        <Settings openOptions={this.handleClickToOpenOptions} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-                }
-                {
-                    !this.state.collaborationVisible ? null :
-                        <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
-                }
-
-                {appOptions.isDocReady &&
-                    <Fragment key='filter-context'>
-                        <FilterOptionsController wsProps={wsProps} />
-                        <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />
-                    </Fragment>
-                }
+            <MainContext.Provider value={{
+                openOptions: this.handleClickToOpenOptions.bind(this),
+                closeOptions: this.handleOptionsViewClosed.bind(this),
+                showOptions: this.state.addShowOptions,
+                wsLock,
+                wsProps
+            }}>
+                <Page name="home" className={`editor${!isHideLogo ? ' page-with-logo' : ''}`}>
+                    {/* Top Navbar */}
+                    <Navbar id='editor-navbar' className={`main-navbar${!isHideLogo ? ' navbar-with-logo' : ''}`}>
+                        {!isHideLogo && 
+                            <div className="main-logo" onClick={() => {
+                                window.open(`${__PUBLISHER_URL__}`, "_blank");
+                            }}>
+                                <Icon icon="icon-logo"></Icon>
+                            </div>
+                        }
+                        <Subnavbar>
+                            <Toolbar 
+                                openOptions={this.handleClickToOpenOptions}
+                                closeOptions={this.handleOptionsViewClosed}
+                            />
+                            <Search useSuspense={false}/>
+                        </Subnavbar>
+                    </Navbar>
                 
-                <Statusbar key='statusbar'/>
-
-                <FunctionGroups /> {/* hidden component*/}
-            </Page>
+                    <CellEditor onClickToOpenAddOptions={(panels, button) => this.handleClickToOpenOptions('add', {panels: panels, button: button})} />
+                    {/* Page content */}
+                    <View id="editor_sdk" />
+                    {isShowPlaceholder ?
+                        <div className="doc-placeholder">
+                            <div className="columns"></div>
+                            <div className="columns"></div>
+                        </div> :
+                        null
+                    }
+                    <SearchSettings useSuspense={false} />
+                    {!this.state.editOptionsVisible ? null : <EditView />}
+                    {!this.state.addOptionsVisible ? null :
+                        <AddingController
+                            showOptions={this.state.addShowOptions} 
+                        />
+                    }
+                    {!this.state.addLinkSettingsVisible ? null :
+                        <AddLinkController 
+                            closeOptions={this.handleOptionsViewClosed.bind(this)}
+                        />
+                    }
+                    {!this.state.editLinkSettingsVisible ? null :
+                        <EditLinkController 
+                            closeOptions={this.handleOptionsViewClosed.bind(this)} 
+                        />
+                    }
+                    {!this.state.settingsVisible ? null : <SettingsController />}
+                    {!this.state.collaborationVisible ? null :
+                        <CollaborationView  
+                            closeOptions={this.handleOptionsViewClosed.bind(this)} 
+                        />
+                    }
+                    {appOptions.isDocReady &&
+                        <Fragment key='filter-context'>
+                            <FilterOptionsController wsProps={wsProps} />
+                            <ContextMenu 
+                                openOptions={this.handleClickToOpenOptions.bind(this)} 
+                            />
+                        </Fragment>
+                    }
+                    
+                    <Statusbar key='statusbar'/>
+                    <FunctionGroups /> {/* hidden component*/}
+                </Page>
+            </MainContext.Provider>
         )
     }
 }
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
index 99149ebb81..3d506e7578 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx
@@ -1,24 +1,23 @@
-import React, {Component, useEffect} from 'react';
-import {View,Page,Navbar,NavTitle,NavRight,Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react';
-import { useTranslation } from 'react-i18next';
-import {f7} from 'framework7-react';
-import { observer, inject } from "mobx-react";
-import {Device} from '../../../../../common/mobile/utils/device';
-
-import {AddChartController} from "../../controller/add/AddChart";
-import {AddFunctionController} from "../../controller/add/AddFunction";
-import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction";
-import AddShapeController from "../../controller/add/AddShape";
-import {AddOtherController} from "../../controller/add/AddOther";
-import {AddImageController} from "../../controller/add/AddImage";
-import {PageImageLinkSettings} from "./AddImage";
-import {AddLinkController} from "../../controller/add/AddLink";
-import {EditLinkController} from "../../controller/edit/EditLink";
-import {PageTypeLink, PageSheet} from "./AddLink";
-import {PageEditTypeLink, PageEditSheet} from "../../view/edit/EditLink";
+import React, { useContext, useEffect } from 'react';
+import { View, Popup, Popover, f7 } from 'framework7-react';
+import { Device } from '../../../../../common/mobile/utils/device';
+import { PageFunctionGroup, PageFunctionInfo } from "./AddFunction";
+import { AddImageController } from "../../controller/add/AddImage";
+import { PageImageLinkSettings } from "./AddImage";
+import { AddLinkController } from "../../controller/add/AddLink";
+import { EditLinkController } from "../../controller/edit/EditLink";
+import { PageTypeLink, PageSheet } from "./AddLink";
+import { PageEditTypeLink, PageEditSheet } from "../../view/edit/EditLink";
 import AddFilterController from "../../controller/add/AddFilter";
+import AddingPage from './AddingPage';
+import { MainContext } from '../../page/main';
 
 const routes = [
+    {
+        path: '/adding-page/',
+        component: AddingPage,
+        keepAlive: true
+    },
     // Functions
     {
         path: '/add-function-group/',
@@ -76,201 +75,31 @@ routes.forEach(route => {
     };
 });
 
-const AddLayoutNavbar = ({ tabs, inPopover }) => {
-    const isAndroid = Device.android;
+const AddView = props => {
+    const mainContext = useContext(MainContext);
 
-    if(!tabs.length) return null;
-
-    return (
-        <Navbar>
-            {tabs.length > 1 ?
-                <div className='tab-buttons tabbar'>
-                    {tabs.map((item, index) =>
-                        <Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
-                            <Icon slot="media" icon={item.icon}></Icon>
-                        </Link>)}
-                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
-                </div> : <NavTitle>{tabs[0].caption}</NavTitle>
-            }
-            { !inPopover && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
-        </Navbar>
-    )
-};
-
-const AddLayoutContent = ({ tabs }) => {
-    if(!tabs.length) return null;
-
-    return (
-        <Tabs animated>
-            {tabs.map((item, index) =>
-                <Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
-                    {item.component}
-                </Tab>
-            )}
-        </Tabs>
-    )
-};
-
-const AddTabs = props => {
-    const { t } = useTranslation();
-    const _t = t('View.Add', {returnObjects: true});
-    const wsLock = props.wsLock;
-    const wsProps = props.wsProps;
-    const showPanels = props.showPanels;
-    const tabs = [];
-    
-    if(!wsProps.Objects) {
-        if (!showPanels) {
-            tabs.push({
-                caption: _t.textChart,
-                id: 'add-chart',
-                icon: 'icon-add-chart',
-                component: <AddChartController/>
-            });
-        }
-        if (!showPanels || showPanels === 'function') {
-            tabs.push({
-                caption: _t.textFunction,
-                id: 'add-function',
-                icon: 'icon-add-formula',
-                component: <AddFunctionController onOptionClick={props.onOptionClick}/>
-            });
-        }
-        if (!showPanels || showPanels.indexOf('shape') > 0) {
-            tabs.push({
-                caption: _t.textShape,
-                id: 'add-shape',
-                icon: 'icon-add-shape',
-                component: <AddShapeController/>
-            });
-        }
-
-        // if (showPanels && showPanels.indexOf('image') !== -1) {
-        //     tabs.push({
-        //         caption: _t.textImage,
-        //         id: 'add-image',
-        //         icon: 'icon-add-image',
-        //         component: <AddImageController inTabs={true}/>
-        //     });
-        // }
-    }
-
-    if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
-        tabs.push({
-            caption: _t.textOther,
-            id: 'add-other',
-            icon: 'icon-add-other',
-            component: <AddOtherController wsProps={wsProps} onCloseLinkSettings={props.onCloseLinkSettings} />
-        });
-    }
-    
-    // if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
-    //     tabs.push({
-    //         caption: _t.textAddLink,
-    //         id: 'add-link',
-    //         icon: 'icon-link',
-    //         component: <AddLinkController/>
-    //     });
-    // }
-
-    if(!tabs.length) {
-        if (Device.phone) {
-            f7.popup.close('.add-popup', false);
-        } else {
-            f7.popover.close('#add-popover', false);
-        }
-
-        return null;
-    }
-
-    return (
-        <View style={props.style} routes={routes}>
-            <Page pageContent={false}>
-                <AddLayoutNavbar tabs={tabs} inPopover={props.inPopover}/>
-                <AddLayoutContent tabs={tabs} />
-            </Page>
-        </View>
-    )
-};
-
-class AddView extends Component {
-    constructor(props) {
-        super(props);
-
-        this.onoptionclick = this.onoptionclick.bind(this);
-    }
-    onoptionclick(page, props){
-        f7.views.current.router.navigate(page, props);
-    }
-    render() {
-        const show_popover = this.props.usePopover;
-        return (
-            show_popover ?
-                <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => this.props.onclosed()}>
-                    <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} onCloseLinkSettings={this.props.onCloseLinkSettings} wsLock={this.props.wsLock} wsProps={this.props.wsProps} inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} showPanels={this.props.showPanels}/>
-                </Popover> :
-                <Popup className="add-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <AddTabs isAddShapeHyperlink={this.props.isAddShapeHyperlink} onCloseLinkSettings={this.props.onCloseLinkSettings} wsLock={this.props.wsLock} wsProps={this.props.wsProps} onOptionClick={this.onoptionclick} showPanels={this.props.showPanels}/>
-                </Popup>
-        )
-    }
-}
-
-const Add = props => {
-    const api = Common.EditorApi.get();
-    const cellinfo = api.asc_getCellInfo();
-    const seltype = cellinfo.asc_getSelectionType();
-    const iscelllocked = cellinfo.asc_getLocked();
-    const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
-
-    let options;
-    
     useEffect(() => {
-        if ( Device.phone ) {
+        if(Device.phone) {
             f7.popup.open('.add-popup');
         } else {
             const targetElem = !props.showOptions || !props.showOptions.button ? '#btn-add' : props.showOptions.button;
             f7.popover.open('#add-popover', targetElem);
         }
+    }, []);
 
-        return () => {
-            // component will unmount
-        }
-    });
+    return (
+        !Device.phone ?
+            <Popover id="add-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('add')}>
+                <View routes={routes} url='/adding-page/' style={{ height: '410px' }}>
+                    <AddingPage />
+                </View>
+            </Popover> :
+            <Popup className="add-popup" onPopupClosed={() => mainContext.closeOptions('add')}>
+                <View routes={routes} url='/adding-page/'>
+                    <AddingPage />
+                </View>
+            </Popup>
+    )
+}
 
-    const onviewclosed = () => {
-        if ( props.onclosed ) {
-            props.onclosed();
-        }
-    };
-
-    if ( !iscelllocked ) {
-        options = props.showOptions;
-        if ( !options ) {
-            switch (seltype) {
-                case Asc.c_oAscSelectionType.RangeCells:
-                case Asc.c_oAscSelectionType.RangeRow:
-                case Asc.c_oAscSelectionType.RangeCol:
-                case Asc.c_oAscSelectionType.RangeMax: break;
-                case Asc.c_oAscSelectionType.RangeImage:
-                case Asc.c_oAscSelectionType.RangeShape:
-                case Asc.c_oAscSelectionType.RangeChart:
-                case Asc.c_oAscSelectionType.RangeChartText:
-                case Asc.c_oAscSelectionType.RangeShapeText:
-                    options = {panels: ['image','shape']};
-                    break;
-            }
-        }
-    }
-
-    return <AddView usePopover={!Device.phone}
-                    onclosed={onviewclosed}
-                    showPanels={options ? options.panels : undefined}
-                    isAddShapeHyperlink = {isAddShapeHyperlink}
-                    wsProps={props.wsProps}
-                    wsLock={props.wsLock}
-                    onCloseLinkSettings={props.onCloseLinkSettings}
-    />
-};
-
-export default Add;
\ No newline at end of file
+export default AddView;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx
index 82cc52a230..fcb8e6c76a 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx
@@ -1,7 +1,7 @@
-import React, {Fragment, useState} from 'react';
-import {observer, inject} from "mobx-react";
+import React, { Fragment } from 'react';
+import { observer, inject } from "mobx-react";
 import { useTranslation } from 'react-i18next';
-import {List, ListItem, Page, Navbar, Icon, BlockTitle} from 'framework7-react';
+import { List, ListItem, Page, Navbar, Icon, BlockTitle, f7 } from 'framework7-react';
 
 const PageInfo = props => {
     const { t } = useTranslation();
@@ -94,6 +94,10 @@ const AddFunction = props => {
         })
     }
 
+    const onOptionClick = (page, props) => {
+        f7.views.current.router.navigate(page, props);
+    }
+
     return (
         <Fragment>
             <List>
@@ -105,15 +109,14 @@ const AddFunction = props => {
                                   link='#'
                                   onClick={() => {props.onInsertFunction(f.type);}}
                         >
-                            <div slot='after'
-                                 onClick={(event) => {
-                                     props.onOptionClick('/add-function-info/', {
-                                         props: {
-                                             functionInfo: f
-                                         }
-                                     });
-                                     event.stopPropagation();
-                                 }}>
+                            <div slot='after' onClick={e => {
+                                    onOptionClick('/add-function-info/', {
+                                        props: {
+                                            functionInfo: f
+                                        }
+                                    });
+                                    e.stopPropagation();
+                                }}>
                                 <Icon icon='icon-info'/>
                             </div>
                         </ListItem>
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx
index 63383b80ee..92613a6c8e 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx
@@ -117,15 +117,16 @@ const AddLink = props => {
                     }}/>
                 }
                 {typeLink === 'ext' &&
-                    <ListInput label={_t.textLink}
-                               type="text"
-                               placeholder={_t.textRequired}
-                               value={link}
-                               onChange={(event) => {
-                                setLink(event.target.value);
+                    <ListInput 
+                        label={_t.textLink}
+                        type="text"
+                        placeholder={_t.textRequired}
+                        value={link}
+                        className={isIos ? 'list-input-right' : ''}
+                        onChange={(event) => {
+                            setLink(event.target.value);
                                 if(stateAutoUpdate && !displayDisabled) setDisplayText(event.target.value);
-                            }}
-                               className={isIos ? 'list-input-right' : ''}
+                            }}   
                     />
                 }
                 {typeLink === 'int' &&
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
index 23ad2f5533..972dcd2b47 100644
--- a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { inject, observer } from 'mobx-react';
 import {List, ListItem, Icon} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
+import { MainContext } from '../../page/main';
 
 const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props => {
     const { t } = useTranslation();
@@ -11,7 +12,8 @@ const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props =
     const canModifyFilter = storeAppOptions.canModifyFilter;
     const isHyperLink = storeFocusObjects.selections.indexOf('hyperlink') > -1;
     const hideAddComment = props.hideAddComment();
-    const wsProps = props.wsProps;
+    const mainContext = useContext(MainContext);
+    const wsProps = mainContext.wsProps;
 
     return (
         <List>
@@ -28,7 +30,6 @@ const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props =
                 <Icon slot="media" icon="icon-sort"></Icon>
             </ListItem>
             <ListItem title={_t.textLink} className={wsProps.InsertHyperlinks && 'disabled'} link={isHyperLink ? '/edit-link/' : '/add-link/'} routeProps={{
-                onCloseLinkSettings: props.onCloseLinkSettings,
                 isNavigate: true
             }}>
                 <Icon slot="media" icon="icon-link"></Icon>
diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx
new file mode 100644
index 0000000000..f31e2f8811
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx
@@ -0,0 +1,130 @@
+import React, { useContext } from 'react';
+import { Page, Navbar, NavTitle, NavRight, Link, Icon, Tabs, Tab, f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import { AddChartController } from "../../controller/add/AddChart";
+import { AddFunctionController } from "../../controller/add/AddFunction";
+import AddShapeController from "../../controller/add/AddShape";
+import { AddOtherController } from "../../controller/add/AddOther";
+import { Device } from "../../../../../common/mobile/utils/device";
+import { MainContext } from '../../page/main';
+import { AddingContext } from '../../controller/add/Add';
+
+const AddLayoutNavbar = ({ tabs }) => {
+    const isAndroid = Device.android;
+    if(!tabs.length) return null;
+
+    return (
+        <Navbar>
+            {tabs.length > 1 ?
+                <div className='tab-buttons tabbar'>
+                    {tabs.map((item, index) =>
+                        <Link key={"sse-link-" + item.id} tabLink={"#" + item.id} tabLinkActive={index === 0}>
+                            <Icon slot="media" icon={item.icon}></Icon>
+                        </Link>)}
+                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / tabs.lenght + '%'}}></span>}
+                </div> : <NavTitle>{tabs[0].caption}</NavTitle>
+            }
+            {Device.phone && <NavRight><Link icon='icon-expand-down' popupClose=".add-popup"></Link></NavRight> }
+        </Navbar>
+    )
+};
+
+const AddLayoutContent = ({ tabs }) => {
+    if(!tabs.length) return null;
+
+    return (
+        <Tabs animated>
+            {tabs.map((item, index) =>
+                <Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                    {item.component}
+                </Tab>
+            )}
+        </Tabs>
+    )
+};
+
+const AddingPage = () => {
+    const { t } = useTranslation();
+    const _t = t('View.Add', {returnObjects: true});
+    const mainContext = useContext(MainContext);
+    const addingContext = useContext(AddingContext);
+    // const wsLock = mainContext.wsLock;
+    const wsProps = mainContext.wsProps;
+    const showPanels = addingContext.showPanels;
+    const tabs = [];
+    
+    if(!wsProps.Objects) {
+        if(!showPanels) {
+            tabs.push({
+                caption: _t.textChart,
+                id: 'add-chart',
+                icon: 'icon-add-chart',
+                component: <AddChartController />
+            });
+        }
+
+        if(!showPanels || showPanels === 'function') {
+            tabs.push({
+                caption: _t.textFunction,
+                id: 'add-function',
+                icon: 'icon-add-formula',
+                component: <AddFunctionController />
+            });
+        }
+
+        if(!showPanels || showPanels.indexOf('shape') > 0) {
+            tabs.push({
+                caption: _t.textShape,
+                id: 'add-shape',
+                icon: 'icon-add-shape',
+                component: <AddShapeController />
+            });
+        }
+
+        // if (showPanels && showPanels.indexOf('image') !== -1) {
+        //     tabs.push({
+        //         caption: _t.textImage,
+        //         id: 'add-image',
+        //         icon: 'icon-add-image',
+        //         component: <AddImageController inTabs={true}/>
+        //     });
+        // }
+    }
+
+    if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) {
+        tabs.push({
+            caption: _t.textOther,
+            id: 'add-other',
+            icon: 'icon-add-other',
+            component: <AddOtherController />
+        });
+    }
+    
+    // if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) {
+    //     tabs.push({
+    //         caption: _t.textAddLink,
+    //         id: 'add-link',
+    //         icon: 'icon-link',
+    //         component: <AddLinkController/>
+    //     });
+    // }
+
+    if(!tabs.length) {
+        if (Device.phone) {
+            f7.popup.close('.add-popup', false);
+        } else {
+            f7.popover.close('#add-popover', false);
+        }
+
+        return null;
+    }
+
+    return (
+        <Page pageContent={false}>
+            <AddLayoutNavbar tabs={tabs} />
+            <AddLayoutContent tabs={tabs} />
+        </Page>
+    )
+};
+
+export default AddingPage;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
index 33e6832866..b4f4da120c 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
@@ -1,28 +1,24 @@
-import React, {useState, useEffect} from 'react';
-import {observer, inject} from "mobx-react";
-import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react';
+import React, { useContext, useEffect } from 'react';
+import { Popover, Sheet, View } from 'framework7-react';
 import { f7 } from 'framework7-react';
-import { useTranslation } from 'react-i18next';
-import {Device} from '../../../../../common/mobile/utils/device';
-
-import EditCellController from "../../controller/edit/EditCell";
-import EditShapeController from "../../controller/edit/EditShape";
-import EditImageController from "../../controller/edit/EditImage";
-import EditTextController from "../../controller/edit/EditText";
-import EditChartController from "../../controller/edit/EditChart";
+import { Device } from '../../../../../common/mobile/utils/device';
 // import { EditLinkController } from "../../controller/edit/EditLink";
-
 import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
 import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
 import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle, PageCreationCustomFormat, CustomFormats } from './EditCell';
 import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
 import { PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart';
 import { PageEditTypeLink, PageEditSheet } from './EditLink';
+import EditingPage from './EditingPage';
+import { MainContext } from '../../page/main';
 
 const routes = [
-
+    {
+        path: '/editing-page/',
+        component: EditingPage,
+        keepAlive: true
+    },
     // Shape
-
     {
         path: '/edit-style-shape/',
         component: PageShapeStyle
@@ -306,188 +302,34 @@ routes.forEach(route => {
     };
 });
 
-const EmptyEditLayout = () => {
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-    return (
-        <Page>
-            <div className="content-block inset">
-                <div className="content-block-inner">
-                    <p>{_t.textSelectObjectToEdit}</p>
-                </div>
-            </div>
-        </Page>
-    )
-};
+const EditView = () => {
+    const mainContext = useContext(MainContext);
+    // const api = Common.EditorApi.get();
+    // const cellinfo = api.asc_getCellInfo();
+    // const hyperinfo = cellinfo.asc_getHyperlink();
+    // const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
 
-const EditLayoutNavbar = ({ editors, inPopover }) => {
-    const isAndroid = Device.android;
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-
-    if(!editors.length) return null;
+    useEffect(() => {
+        if(Device.phone) {
+            f7.sheet.open('#edit-sheet');
+        } else {
+            f7.popover.open('#edit-popover', '#btn-edit');
+        }
+    }, []);
 
     return (
-        <Navbar>
-            {
-                editors.length > 1 ?
-                    <div className='tab-buttons tabbar'>
-                        {editors.map((item, index) => <Link key={"sse-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
-                        {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
-                    </div> : <NavTitle>{ editors[0].caption }</NavTitle>
-            }
-            { !inPopover && <NavRight><Link icon='icon-expand-down' sheetClose></Link></NavRight> }
-        </Navbar>
-    )
-};
-
-const EditLayoutContent = ({ editors }) => {
-    if(!editors.length) return null;
-
-    if (editors.length > 1) {
-        return (
-            <Tabs animated>
-                {editors.map((item, index) =>
-                    <Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
-                        {item.component}
-                    </Tab>
-                )}
-            </Tabs>
-        )
-    } else {
-        return (
-            <Page>
-                {editors[0].component}
-            </Page>
-        )
-    }
-};
-
-const EditTabs = props => {
-    const { t } = useTranslation();
-    const _t = t('View.Edit', {returnObjects: true});
-    const store = props.storeFocusObjects;
-    const wsProps = props.wsProps;
-    const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
-    let editors = [];
-
-    if (settings.length < 1) {
-        editors.push({
-            caption: _t.textSettings,
-            component: <EmptyEditLayout />
-        });
-    } else {
-        if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) {
-            editors.push({
-                caption: _t.textImage,
-                id: 'edit-image',
-                component: <EditImageController />
-            })
-        }
-        if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('shape') > -1) {
-            editors.push({
-                caption: _t.textShape,
-                id: 'edit-shape',
-                component: <EditShapeController />
-            })
-        }
-        if (settings.indexOf('cell') > -1) {
-            editors.push({
-                caption: _t.textCell,
-                id: 'edit-text',
-                component: <EditCellController />
-            })
-        }
-        if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('chart') > -1) {
-            editors.push({
-                caption: _t.textChart,
-                id: 'edit-chart',
-                component: <EditChartController />
-            })
-        }
-        if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) {
-            editors.push({
-                caption: _t.textText,
-                id: 'edit-text',
-                component: <EditTextController />
-            })
-        }
-
-        // if(!wsProps.Objects) {
-        //     if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) {
-        //         editors.push({
-        //             caption: _t.textHyperlink,
-        //             id: 'edit-link',
-        //             component: <EditLinkController />
-        //         })
-        //     }
-        // }    
-    }
-
-    if(!editors.length) {
-        if (Device.phone) {
-            f7.sheet.close('#edit-sheet', false);
-        } else { 
-            f7.popover.close('#edit-popover', false);
-        }
-
-        return null;
-    }
-
-    return (
-        <View style={props.style} routes={routes}>
-            <Page pageContent={false}>
-                <EditLayoutNavbar editors={editors} inPopover={props.inPopover}/>
-                <EditLayoutContent editors={editors} />
-            </Page>
-        </View>
-
-    )
-};
-
-const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs));
-
-const EditView = props => {
-    const onOptionClick = (page) => {
-        $f7.views.current.router.navigate(page);
-    };
-    const show_popover = props.usePopover;
-    return (
-        show_popover ?
-            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => props.onClosed()}>
-                <EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} inPopover={true} wsLock={props.wsLock} wsProps={props.wsProps} onOptionClick={onOptionClick} style={{height: '410px'}} />
+        !Device.phone ?
+            <Popover id="edit-popover" className="popover__titled" closeByOutsideClick={false} onPopoverClosed={() => mainContext.closeOptions('edit')}>
+                <View style={{ height: '410px' }} routes={routes} url='/editing-page/'>
+                    <EditingPage />
+                </View>
             </Popover> :
-            <Sheet id="edit-sheet" onSheetClosed={() => props.onClosed()}>
-                <EditTabsContainer isAddShapeHyperlink={props.isAddShapeHyperlink} hyperinfo={props.hyperinfo} onOptionClick={onOptionClick} wsLock={props.wsLock} wsProps={props.wsProps} />
+            <Sheet id="edit-sheet" onSheetClosed={() => mainContext.closeOptions('edit')}>
+                <View routes={routes} url='/editing-page/'>
+                    <EditingPage />
+                </View>
             </Sheet>
     )
 };
 
-const EditOptions = props => {
-    const api = Common.EditorApi.get();
-    const cellinfo = api.asc_getCellInfo();
-    const hyperinfo = cellinfo.asc_getHyperlink();
-    const isAddShapeHyperlink = api.asc_canAddShapeHyperlink();
-
-    useEffect(() => {
-        if ( Device.phone )
-            f7.sheet.open('#edit-sheet');
-        else f7.popover.open('#edit-popover', '#btn-edit');
-
-        return () => {
-            // component will unmount
-        }
-    });
-
-    const onviewclosed = () => {
-        if ( props.onclosed ) {
-            props.onclosed();
-        }
-    };
-
-    return (
-        <EditView usePopover={!Device.phone} onClosed={onviewclosed} isAddShapeHyperlink={isAddShapeHyperlink} hyperinfo={hyperinfo} wsLock={props.wsLock} wsProps={props.wsProps} />
-    )
-};
-
-export default EditOptions;
\ No newline at end of file
+export default EditView;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx
new file mode 100644
index 0000000000..f4a7c373e9
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx
@@ -0,0 +1,155 @@
+import React, { useContext } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link, f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import EditCellController from "../../controller/edit/EditCell";
+import EditShapeController from "../../controller/edit/EditShape";
+import EditImageController from "../../controller/edit/EditImage";
+import EditTextController from "../../controller/edit/EditText";
+import EditChartController from "../../controller/edit/EditChart";
+import { Device } from "../../../../../common/mobile/utils/device";
+import { MainContext } from '../../page/main';
+
+const EmptyEditLayout = () => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    return (
+        <Page>
+            <div className="content-block inset">
+                <div className="content-block-inner">
+                    <p>{_t.textSelectObjectToEdit}</p>
+                </div>
+            </div>
+        </Page>
+    )
+};
+
+const EditLayoutNavbar = ({ editors }) => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+
+    if(!editors.length) return null;
+
+    return (
+        <Navbar>
+            {editors.length > 1 ?
+                <div className='tab-buttons tabbar'>
+                    {editors.map((item, index) => <Link key={"sse-link-" + item.id}  tabLink={"#" + item.id} tabLinkActive={index === 0}>{item.caption}</Link>)}
+                    {isAndroid && <span className='tab-link-highlight' style={{width: 100 / editors.length + '%'}}></span>}
+                </div> : 
+                <NavTitle>{editors[0].caption}</NavTitle>
+            }
+            {Device.phone && 
+                <NavRight>
+                    <Link icon='icon-expand-down' sheetClose></Link>
+                </NavRight> 
+            }
+        </Navbar>
+    )
+};
+
+const EditLayoutContent = ({ editors }) => {
+    if(!editors.length) return null;
+
+    if (editors.length > 1) {
+        return (
+            <Tabs animated>
+                {editors.map((item, index) =>
+                    <Tab key={"sse-tab-" + item.id} id={item.id} className="page-content" tabActive={index === 0}>
+                        {item.component}
+                    </Tab>
+                )}
+            </Tabs>
+        )
+    } else {
+        return (
+            <Page>
+                {editors[0].component}
+            </Page>
+        )
+    }
+};
+
+const EditingPage = inject('storeFocusObjects')(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('View.Edit', {returnObjects: true});
+    const mainContext = useContext(MainContext);
+    const store = props.storeFocusObjects;
+    const wsProps = mainContext.wsProps;
+    const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections);
+    let editors = [];
+
+    if (settings.length < 1) {
+        editors.push({
+            caption: _t.textSettings,
+            component: <EmptyEditLayout />
+        });
+    } else {
+        if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) {
+            editors.push({
+                caption: _t.textImage,
+                id: 'edit-image',
+                component: <EditImageController />
+            })
+        }
+        if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('shape') > -1) {
+            editors.push({
+                caption: _t.textShape,
+                id: 'edit-shape',
+                component: <EditShapeController />
+            })
+        }
+        if (settings.indexOf('cell') > -1) {
+            editors.push({
+                caption: _t.textCell,
+                id: 'edit-text',
+                component: <EditCellController />
+            })
+        }
+        if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('chart') > -1) {
+            editors.push({
+                caption: _t.textChart,
+                id: 'edit-chart',
+                component: <EditChartController />
+            })
+        }
+        if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) {
+            editors.push({
+                caption: _t.textText,
+                id: 'edit-text',
+                component: <EditTextController />
+            })
+        }
+
+        // if(!wsProps.Objects) {
+        //     if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) {
+        //         editors.push({
+        //             caption: _t.textHyperlink,
+        //             id: 'edit-link',
+        //             component: <EditLinkController />
+        //         })
+        //     }
+        // }    
+    }
+
+    if(!editors.length) {
+        if (Device.phone) {
+            f7.sheet.close('#edit-sheet', false);
+        } else { 
+            f7.popover.close('#edit-popover', false);
+        }
+
+        return null;
+    }
+
+    return (
+        <Page pageContent={false}>
+            <EditLayoutNavbar editors={editors} />
+            <EditLayoutContent editors={editors} />
+        </Page>
+    )
+}));
+
+export default EditingPage;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
index a5f741637b..03ccc6ac38 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx
@@ -1,24 +1,24 @@
-import React, {Component, useEffect} from 'react';
-import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react';
-import { useTranslation } from 'react-i18next';
-import {f7} from 'framework7-react';
-import {Device} from '../../../../../common/mobile/utils/device';
-import { observer, inject } from "mobx-react";
+import React, { useContext, useEffect } from 'react';
+import { View, Popup, Popover, f7 } from 'framework7-react';
+import { Device } from '../../../../../common/mobile/utils/device';
 import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx';
 import ApplicationSettingsController from '../../controller/settings/ApplicationSettings.jsx';
 import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo.jsx';
-import {DownloadWithTranslation} from '../../controller/settings/Download.jsx';
-import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
-import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx';
+import { DownloadWithTranslation } from '../../controller/settings/Download.jsx';
+import { SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins } from './SpreadsheetSettings.jsx';
+import { MacrosSettings, RegionalSettings, FormulaLanguage } from './ApplicationSettings.jsx';
 // import SpreadsheetAbout from './SpreadsheetAbout.jsx';
 import About from '../../../../../common/mobile/lib/view/About';
 import { Direction } from '../../../../../spreadsheeteditor/mobile/src/view/settings/ApplicationSettings';
-import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
+// import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings";
+import SettingsPage from './SettingsPage';
+import { MainContext } from '../../page/main';
 
 const routes = [
     {
-        path: '/',
-        component: 'TSettingsView'
+        path: '/settings-page/',
+        component: SettingsPage,
+        keepAlive: true
     },
     {
         path: '/spreadsheet-settings/',
@@ -77,210 +77,30 @@ routes.forEach(route => {
     };
 });
 
-const SettingsList = inject("storeAppOptions")(observer(props => {
-    const { t } = useTranslation();
-    const _t = t('View.Settings', {returnObjects: true});
-    const navbar = <Navbar title={_t.textSettings}>
-        {!props.inPopover  && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
-    </Navbar>;
+const SettingsView = () => {
+    const mainContext = useContext(MainContext);
 
-    const onoptionclick = page => {
-        if ( props.onOptionClick )
-            props.onOptionClick(page)
-    };
-
-    const closeModal = () => {
-        if (Device.phone) {
-            f7.sheet.close('.settings-popup', false);
+    useEffect(() => {
+        if(Device.phone) {
+            f7.popup.open('.settings-popup');
         } else {
-            f7.popover.close('#settings-popover', false);
+            f7.popover.open('#settings-popover', '#btn-settings');
         }
-    };
+    }, []);
 
-    const onOpenCollaboration = async () => {
-        await closeModal();
-        await props.openOptions('coauth');
-    }
-
-    const onPrint = () => {
-        const api = Common.EditorApi.get();
-
-        closeModal();
-        setTimeout(() => {
-            api.asc_Print();
-        }, 400);
-    };
-
-    const showHelp = () => {
-        // let url = '{{HELP_URL}}';
-        // let url = 'https://helpcenter.onlyoffice.com';
-        let url = __HELP_URL__;
-
-        if (url.charAt(url.length-1) !== '/') {
-            url += '/';
-        }
-
-        if (Device.sailfish || Device.android) {
-            url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
-        } 
-        else {
-            url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
-        }
-
-        closeModal();
-        window.open(url, "_blank");
-    };
-
-    const showFeedback = () => {
-        let config = props.storeAppOptions.config;
-
-        closeModal();
-        if(config && !!config.feedback && !!config.feedback.url) {
-            window.open(config.feedback.url, "_blank");
-        } else window.open(__SUPPORT_URL__, "_blank");
-    };
-
-    const appOptions = props.storeAppOptions;
-    let _isEdit = false,
-        _canDownload = false,
-        _canDownloadOrigin = false,
-        _canAbout = true,
-        _canHelp = true,
-        _canPrint = false,
-        _canFeedback = true;
-        
-    if (appOptions.isDisconnected) {
-        _isEdit = false;
-        if (!appOptions.enableDownload)
-            _canPrint = _canDownload = _canDownloadOrigin = false;
-    } else {
-        _isEdit = appOptions.isEdit;
-        _canDownload = appOptions.canDownload;
-        _canDownloadOrigin = appOptions.canDownloadOrigin;
-        _canPrint = appOptions.canPrint;
-
-        if (appOptions.customization && appOptions.canBrandingExt) {
-            _canAbout = appOptions.customization.about !== false;
-        }
-
-        if (appOptions.customization) {
-            _canHelp = appOptions.customization.help !== false;
-            _canFeedback = appOptions.customization.feedback !== false;
-        }
-    }
-
-    const onDownloadOrigin = () => {
-        closeModal();
-        setTimeout(() => {
-            Common.EditorApi.get().asc_DownloadOrigin();
-        }, 0);
-    };
-    
     return (
-        <View style={props.style} routes={routes}>
-            <Page>
-                {navbar}
-                <List>
-                    {!props.inPopover &&
-                        <ListItem disabled={appOptions.readerMode ? true : false} title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal} className='no-indicator'>
-                            <Icon slot="media" icon="icon-search"></Icon>
-                        </ListItem>
-                    }
-                    {window.matchMedia("(max-width: 359px)").matches ?
-                        <ListItem title={_t.textCollaboration} link="#" onClick={onOpenCollaboration} className='no-indicator'>
-                            <Icon slot="media" icon="icon-collaboration"></Icon>
-                        </ListItem> 
-                    : null}
-                    {_isEdit && 
-                        <ListItem link="#" title={_t.textSpreadsheetSettings} onClick={onoptionclick.bind(this, '/spreadsheet-settings/')}>
-                            <Icon slot="media" icon="icon-table-settings"></Icon>
-                        </ListItem>
-                    }
-                    <ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, '/application-settings/')}>
-                        <Icon slot="media" icon="icon-app-settings"></Icon>
-                    </ListItem>
-                    {_canDownload &&
-                        <ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, '/download/')}>
-                            <Icon slot="media" icon="icon-download"></Icon>
-                        </ListItem>
-                    }
-                    {_canDownloadOrigin &&
-                        <ListItem title={_t.textDownload} link="#" onClick={onDownloadOrigin} className='no-indicator'>
-                            <Icon slot="media" icon="icon-download"></Icon>
-                        </ListItem>
-                    }
-                    {_canPrint &&
-                        <ListItem title={_t.textPrint} onClick={onPrint}>
-                            <Icon slot="media" icon="icon-print"></Icon>
-                        </ListItem>
-                    }
-                    <ListItem title={_t.textSpreadsheetInfo} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-info/")}>
-                        <Icon slot="media" icon="icon-info"></Icon>
-                    </ListItem>
-                    {_canHelp &&
-                        <ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={showHelp}>
-                            <Icon slot="media" icon="icon-help"></Icon>
-                        </ListItem>
-                    }
-                    {_canAbout &&
-                        <ListItem title={_t.textAbout} link="#" onClick={onoptionclick.bind(this, "/about/")}>
-                            <Icon slot="media" icon="icon-about"></Icon>
-                        </ListItem>
-                    }
-                    {_canFeedback &&
-                        <ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={showFeedback}>
-                                <Icon slot="media" icon="icon-feedback"></Icon>
-                        </ListItem>
-                    }
-                </List>
-            </Page>
-        </View>
+        !Device.phone ?
+            <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => mainContext.closeOptions('settings')}>
+                <View routes={routes} url='/settings-page/' style={{ height: '410px' }}>
+                    <SettingsPage />
+                </View>
+            </Popover> :
+            <Popup className="settings-popup" onPopupClosed={() => mainContext.closeOptions('settings')}>
+                <View routes={routes} url='/settings-page/'>
+                    <SettingsPage />
+                </View>
+            </Popup>
     )
-}));
-
-class SettingsView extends Component {
-    constructor(props) {
-        super(props);
-
-        this.onoptionclick = this.onoptionclick.bind(this);
-    }
-
-    onoptionclick(page){
-        f7.views.current.router.navigate(page);
-    }
-
-    render() {
-        const show_popover = this.props.usePopover;
-        return (
-            show_popover ?
-                <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} openOptions={this.props.openOptions} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
-                </Popover> :
-                <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} />
-                </Popup>
-        )
-    }
 }
 
-const Settings = props => {
-    useEffect(() => {
-        if ( Device.phone )
-            f7.popup.open('.settings-popup');
-        else f7.popover.open('#settings-popover', '#btn-settings');
-
-        return () => {
-        }
-    });
-
-
-    const onviewclosed = () => {
-        if ( props.onclosed ) {
-            props.onclosed();
-        }
-    };
-
-    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} openOptions={props.openOptions} />
-};
-
-export default Settings;
\ No newline at end of file
+export default SettingsView;
\ No newline at end of file
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx
new file mode 100644
index 0000000000..cc13fc48e6
--- /dev/null
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx
@@ -0,0 +1,112 @@
+import React, { useContext } from 'react';
+import { Page, Navbar, NavRight, Link, Icon, ListItem, List, f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import { Device } from '../../../../../common/mobile/utils/device';
+import { observer, inject } from "mobx-react";
+import { MainContext } from '../../page/main';
+import { SettingsContext } from '../../controller/settings/Settings';
+
+const SettingsPage = inject('storeAppOptions')(observer(props => {
+    const { t } = useTranslation();
+    const appOptions = props.storeAppOptions;
+    const mainContext = useContext(MainContext);
+    const settingsContext = useContext(SettingsContext);
+    const _t = t('View.Settings', {returnObjects: true});
+    const navbar = <Navbar title={_t.textSettings}>
+        {Device.phone && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
+    </Navbar>;
+
+    const onOpenOptions = name => {
+        settingsContext.closeModal();
+        mainContext.openOptions(name);
+    }
+
+    let _isEdit = false,
+        _canDownload = false,
+        _canDownloadOrigin = false,
+        _canAbout = true,
+        _canHelp = true,
+        _canPrint = false,
+        _canFeedback = true;
+        
+    if (appOptions.isDisconnected) {
+        _isEdit = false;
+        if (!appOptions.enableDownload)
+            _canPrint = _canDownload = _canDownloadOrigin = false;
+    } else {
+        _isEdit = appOptions.isEdit;
+        _canDownload = appOptions.canDownload;
+        _canDownloadOrigin = appOptions.canDownloadOrigin;
+        _canPrint = appOptions.canPrint;
+
+        if (appOptions.customization && appOptions.canBrandingExt) {
+            _canAbout = appOptions.customization.about !== false;
+        }
+
+        if (appOptions.customization) {
+            _canHelp = appOptions.customization.help !== false;
+            _canFeedback = appOptions.customization.feedback !== false;
+        }
+    }
+    
+    return (
+        <Page>
+            {navbar}
+            <List>
+                {!props.inPopover &&
+                    <ListItem disabled={appOptions.readerMode ? true : false} title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={settingsContext.closeModal} className='no-indicator'>
+                        <Icon slot="media" icon="icon-search"></Icon>
+                    </ListItem>
+                }
+                {window.matchMedia("(max-width: 359px)").matches ?
+                    <ListItem title={_t.textCollaboration} link="#" onClick={() => onOpenOptions('coauth')} className='no-indicator'>
+                        <Icon slot="media" icon="icon-collaboration"></Icon>
+                    </ListItem> 
+                : null}
+                {_isEdit && 
+                    <ListItem link="/spreadsheet-settings/" title={_t.textSpreadsheetSettings}>
+                        <Icon slot="media" icon="icon-table-settings"></Icon>
+                    </ListItem>
+                }
+                <ListItem title={_t.textApplicationSettings} link="/application-settings/">
+                    <Icon slot="media" icon="icon-app-settings"></Icon>
+                </ListItem>
+                {_canDownload &&
+                    <ListItem title={_t.textDownload} link="/download/">
+                        <Icon slot="media" icon="icon-download"></Icon>
+                    </ListItem>
+                }
+                {_canDownloadOrigin &&
+                    <ListItem title={_t.textDownload} link="#" onClick={settingsContext.onDownloadOrigin} className='no-indicator'>
+                        <Icon slot="media" icon="icon-download"></Icon>
+                    </ListItem>
+                }
+                {_canPrint &&
+                    <ListItem title={_t.textPrint} onClick={settingsContext.onPrint}>
+                        <Icon slot="media" icon="icon-print"></Icon>
+                    </ListItem>
+                }
+                <ListItem title={_t.textSpreadsheetInfo} link="/spreadsheet-info/">
+                    <Icon slot="media" icon="icon-info"></Icon>
+                </ListItem>
+                {_canHelp &&
+                    <ListItem title={_t.textHelp} link="#" className='no-indicator' onClick={settingsContext.showHelp}>
+                        <Icon slot="media" icon="icon-help"></Icon>
+                    </ListItem>
+                }
+                {_canAbout &&
+                    <ListItem title={_t.textAbout} link="/about/">
+                        <Icon slot="media" icon="icon-about"></Icon>
+                    </ListItem>
+                }
+                {_canFeedback &&
+                    <ListItem title={t('View.Settings.textFeedback')} link="#" className='no-indicator' onClick={settingsContext.showFeedback}>
+                            <Icon slot="media" icon="icon-feedback"></Icon>
+                    </ListItem>
+                }
+            </List>
+        </Page>
+    )
+}));
+
+export default SettingsPage;
\ No newline at end of file