[DE mobile] Add editing page and saving active tab

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

@@ -277,8 +277,7 @@
 
             .item-input, .item-link {
                 .item-inner {
-                    // display: block;
-                    padding-right: 0;
+                    display: block;
 
                     .item-title, .item-label {
                         width: 100%;
@@ -294,10 +293,6 @@
             .item-input:not(.item-input-outline) .item-content::before, .item-input:not(.item-input-outline).item-content::before {
                 background: transparent;
             }
-
-            .item-input .item-content, .item-input.item-content {
-                padding-left: 0;
-            }
         }
 
         .buttons {

apps/documenteditor/mobile/src/controller/add/AddLink.jsx

@@ -81,11 +81,11 @@ 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')}>
                         <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate} />
                     </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 style={{height: '410px'}}>
                             <PageAddLink closeModal={this.closeModal} onInsertLink={this.onInsertLink} getDisplayLinkText={this.getDisplayLinkText} isNavigate={this.props.isNavigate}/>
                         </View>

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

@@ -15,6 +15,7 @@ import NavigationController from '../controller/settings/Navigation';
 import { AddLinkController } from '../controller/add/AddLink';
 import EditHyperlink from '../controller/edit/EditHyperlink';
 import Snackbar from '../components/Snackbar/Snackbar';
+import EditView from '../view/edit/Edit';
 
 export const MainContext = createContext();
 
@@ -224,14 +225,12 @@ class MainPage extends Component {
                         message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} 
                     />
                     <SearchSettings useSuspense={false} />
-                    {
-                        !this.state.editOptionsVisible ? null :
-                            <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/>
-                    }
+                    {!this.state.editOptionsVisible ? null : <EditView />}
                     {!this.state.addOptionsVisible ? null : <AddOptions />}
-                    {
-                        !this.state.addLinkSettingsVisible ? null :
-                            <AddLinkController onClosed={this.handleOptionsViewClosed.bind(this)} />
+                    {!this.state.addLinkSettingsVisible ? null :
+                        <AddLinkController 
+                            closeOptions={this.handleOptionsViewClosed.bind(this)} 
+                        />
                     }
                     {
                         !this.state.editLinkSettingsVisible ? null :

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

@@ -1,29 +1,21 @@
-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 { f7 } from 'framework7-react';
-import { useTranslation } from 'react-i18next';
-import {Device} from '../../../../../common/mobile/utils/device';
-
-import EditTextController from "../../controller/edit/EditText";
-import EditParagraphController from "../../controller/edit/EditParagraph";
-import EditShapeController from "../../controller/edit/EditShape";
-import EditImageController from "../../controller/edit/EditImage";
-import EditTableController from "../../controller/edit/EditTable";
-import EditChartController from "../../controller/edit/EditChart";
-import EditHyperlinkController from "../../controller/edit/EditHyperlink";
-import EditHeaderController from "../../controller/edit/EditHeader";
-import EditTableContentsController from "../../controller/edit/EditTableContents";
-
-import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText";
-import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle} from "./EditParagraph";
-import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape";
-import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle} from "./EditImage";
-import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable";
-import {PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart";
+import React, { useContext, useEffect } from 'react';
+import { Popover, Sheet, View, f7 } from 'framework7-react';
+import { Device } from '../../../../../common/mobile/utils/device';
+import { PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor } from "./EditText";
+import { ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle } from "./EditParagraph";
+import { PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace } from "./EditShape";
+import { PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle } from "./EditImage";
+import { PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor } from "./EditTable";
+import { PageChartDesign,  PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder } from "./EditChart";
 import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents';
+import EditingPage from './EditingPage';
+import { MainContext } from '../../page/main';
 
 const routes = [
+    {
+        path: '/editing-page/',
+        component: EditingPage
+    },
     //Edit text
     {
         path: '/edit-text-fonts/',
@@ -235,182 +227,30 @@ routes.forEach(route => {
     };
 });
 
-const EmptyEditLayout = () => {
-    const { t } = useTranslation();
-    const _t = t('Edit', {returnObjects: true});
+const EditView = () => {
+    const mainContext = useContext(MainContext);
+
+    useEffect(() => {
+        if(Device.phone) {
+            f7.sheet.open('#edit-sheet');
+        } else {
+            f7.popover.open('#edit-popover', '#btn-edit');
+        }
+    }, []);
+
     return (
-        <Page>
-            <div className="content-block inset">
-                <div className="content-block-inner">
-                    <p>{_t.textSelectObjectToEdit}</p>
-                </div>
-            </div>
-        </Page>
-    )
-};
-
-const EditLayoutNavbar = ({ editors, inPopover }) => {
-    const isAndroid = Device.android;
-    const { t } = useTranslation();
-    const _t = t('Edit', {returnObjects: true});
-    return (
-        <Navbar>
-        {
-            editors.length > 1 ?
-                <div className='tab-buttons tabbar'>
-                    {editors.map((item, index) => <Link key={"de-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 > 1) {
-        return (
-            <Tabs animated>
-                {editors.map((item, index) =>
-                    <Tab key={"de-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('Edit', {returnObjects: true});
-    const api = Common.EditorApi.get();
-    const inToc = api.asc_GetTableOfContentsPr(true);
-
-    const settings = props.storeFocusObjects.settings;
-    const headerType = props.storeFocusObjects.headerType;
-    let editors = [];
-
-    if (settings.length < 1) {
-        editors.push({
-            caption: _t.textSettings,
-            component: <EmptyEditLayout />
-        });
-    } else {
-        if(inToc) {
-            editors.push({
-                caption: _t.textTableOfCont,
-                id: 'edit-table-contents',
-                component: <EditTableContentsController />
-            })
-        }
-        if (settings.indexOf('image') > -1) {
-            editors.push({
-                caption: _t.textImage,
-                id: 'edit-image',
-                component: <EditImageController />
-            })
-        }
-        if (settings.indexOf('shape') > -1) {
-            editors.push({
-                caption: _t.textShape,
-                id: 'edit-shape',
-                component: <EditShapeController />
-            })
-        }
-        if (settings.indexOf('chart') > -1) {
-            editors.push({
-                caption: _t.textChart,
-                id: 'edit-chart',
-                component: <EditChartController />
-            })
-        }
-        if (settings.indexOf('table') > -1) {
-            editors.push({
-                caption: _t.textTable,
-                id: 'edit-table',
-                component: <EditTableController />
-            })
-        }
-        if (settings.indexOf('header') > -1) {
-            editors.push({
-                caption: headerType === 2 ? _t.textFooter : _t.textHeader,
-                id: 'edit-header',
-                component: <EditHeaderController />
-            })
-        }
-        if (settings.indexOf('text') > -1) {
-            editors.push({
-                caption: _t.textText,
-                id: 'edit-text',
-                component: <EditTextController />
-            })
-        }
-        if (settings.indexOf('paragraph') > -1) {
-            editors.push({
-                caption: _t.textParagraph,
-                id: 'edit-paragraph',
-                component: <EditParagraphController />
-            })
-        }
-    }
-   
-    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 inPopover={true} 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" closeByOutsideClick={false} onSheetClosed={() => props.onClosed()}>
-                <EditTabsContainer onOptionClick={onOptionClick} />
+            <Sheet id="edit-sheet" closeByOutsideClick={false} onSheetClosed={() =>  mainContext.closeOptions('edit')}>
+                <View routes={routes} url='/editing-page/'>
+                    <EditingPage />
+                </View>
             </Sheet>
     )
 };
 
-const EditOptions = props => {
-    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} />
-    )
-};
-
-export default EditOptions;
+export default EditView;

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

@@ -0,0 +1,156 @@
+import React, { useState, useEffect } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import { Device } from '../../../../../common/mobile/utils/device';
+import EditTextController from "../../controller/edit/EditText";
+import EditParagraphController from "../../controller/edit/EditParagraph";
+import EditShapeController from "../../controller/edit/EditShape";
+import EditImageController from "../../controller/edit/EditImage";
+import EditTableController from "../../controller/edit/EditTable";
+import EditChartController from "../../controller/edit/EditChart";
+import EditHeaderController from "../../controller/edit/EditHeader";
+import EditTableContentsController from "../../controller/edit/EditTableContents";
+
+const EmptyEditLayout = () => {
+    const { t } = useTranslation();
+    const _t = t('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, idActiveTab, setIdActiveTab }) => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+
+    useEffect(() => {
+        localStorage.setItem('de-mobile-edit-active-tab', idActiveTab);
+    }, [idActiveTab]);
+
+    return (
+        <Navbar>
+        {editors.length > 1 ?
+            <div className='tab-buttons tabbar'>
+                {editors.map((item, _) => <Link key={"de-link-" + item.id}  tabLink={"#" + item.id} onClick={() => setIdActiveTab(item.id)} tabLinkActive={item.id === idActiveTab}>{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, idActiveTab }) => {
+    if (editors.length > 1) {
+        return (
+            <Tabs animated>
+                {editors.map((item, _) =>
+                    <Tab key={"de-tab-" + item.id} id={item.id} className="page-content" tabActive={item.id === idActiveTab}>
+                        {item.component}
+                    </Tab>
+                )}
+            </Tabs>
+        )
+    } else {
+        return (
+            <Page>
+                {editors[0].component}
+            </Page>
+        )
+    }
+};
+
+const EditingPage = inject('storeFocusObjects')(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Edit', {returnObjects: true});
+    const api = Common.EditorApi.get();
+    const inToc = api.asc_GetTableOfContentsPr(true);
+    const settings = props.storeFocusObjects.settings;
+    const headerType = props.storeFocusObjects.headerType;
+    const savedIdTab = localStorage.getItem('de-mobile-edit-active-tab');
+    const [idActiveTab, setIdActiveTab] = useState(savedIdTab || 'edit-text');
+    let editors = [];
+
+    if (settings.length < 1) {
+        editors.push({
+            caption: _t.textSettings,
+            component: <EmptyEditLayout />
+        });
+    } else {
+        if(inToc) {
+            editors.push({
+                caption: _t.textTableOfCont,
+                id: 'edit-table-contents',
+                component: <EditTableContentsController />
+            })
+        }
+        if (settings.indexOf('image') > -1) {
+            editors.push({
+                caption: _t.textImage,
+                id: 'edit-image',
+                component: <EditImageController />
+            })
+        }
+        if (settings.indexOf('shape') > -1) {
+            editors.push({
+                caption: _t.textShape,
+                id: 'edit-shape',
+                component: <EditShapeController />
+            })
+        }
+        if (settings.indexOf('chart') > -1) {
+            editors.push({
+                caption: _t.textChart,
+                id: 'edit-chart',
+                component: <EditChartController />
+            })
+        }
+        if (settings.indexOf('table') > -1) {
+            editors.push({
+                caption: _t.textTable,
+                id: 'edit-table',
+                component: <EditTableController />
+            })
+        }
+        if (settings.indexOf('header') > -1) {
+            editors.push({
+                caption: headerType === 2 ? _t.textFooter : _t.textHeader,
+                id: 'edit-header',
+                component: <EditHeaderController />
+            })
+        }
+        if (settings.indexOf('text') > -1) {
+            editors.push({
+                caption: _t.textText,
+                id: 'edit-text',
+                component: <EditTextController />
+            })
+        }
+        if (settings.indexOf('paragraph') > -1) {
+            editors.push({
+                caption: _t.textParagraph,
+                id: 'edit-paragraph',
+                component: <EditParagraphController />
+            })
+        }
+    }
+   
+    return (
+        <Page pageContent={false}>
+            <EditLayoutNavbar editors={editors} idActiveTab={idActiveTab} setIdActiveTab={setIdActiveTab} />
+            <EditLayoutContent editors={editors} idActiveTab={idActiveTab} />
+        </Page>
+    )
+}));
+
+export default EditingPage;