[DE mobile] Corrected navigation view and fixed error

2022-02-14 23:50:42 +04:00 · 2022-02-14 23:50:42 +04:00 · 51f7bb1617
parent 240c1bc05d
commit 51f7bb1617
5 changed files with 79 additions and 68 deletions
--- a/apps/documenteditor/mobile/src/controller/Error.jsx
+++ b/apps/documenteditor/mobile/src/controller/Error.jsx
@ -4,6 +4,9 @@ import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';

 const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocument}) => {
+    const { t } = useTranslation();
+    const _t = t("Error", { returnObjects: true });
+
    useEffect(() => {
        const on_engine_created = k => { k.asc_registerCallback('asc_onError', onError); };

@ -20,9 +23,6 @@ const ErrorController = inject('storeAppOptions')(({storeAppOptions, LoadingDocu
    });

    const onError = (id, level, errData) => {
-        const {t} = useTranslation();
-        const _t = t("Error", { returnObjects: true });
-
        if (id === Asc.c_oAscError.ID.LoadingScriptError) {
            f7.notification.create({
                title: _t.criticalErrorTitle,
--- a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
+++ b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx
@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import {Navigation, NavigationSheet} from "../../view/settings/Navigation";
+import { NavigationPopover, NavigationSheet } from "../../view/settings/Navigation";
 import { Device } from '../../../../../common/mobile/utils/device';
 import { f7, Sheet, Page, Popup } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
@ -10,14 +10,6 @@ class NavigationController extends Component {
        this.updateNavigation = this.updateNavigation.bind(this);
    }

-    closeModal() {
-        if (Device.phone) {
-            f7.popup.close('.settings-popup');
-        } else {
-            f7.popover.close('#settings-popover');
-        }
-    }
-
    updateNavigation() {
        const api = Common.EditorApi.get();
        const navigationObject = api.asc_ShowDocumentOutline();
@ -75,7 +67,7 @@ class NavigationController extends Component {
    render() {
        return (
            !Device.phone ? 
-                <Navigation
+                <NavigationPopover
                    onSelectItem={this.onSelectItem} 
                    updateNavigation={this.updateNavigation}
                />
@ -83,7 +75,7 @@ class NavigationController extends Component {
                <NavigationSheet
                    onSelectItem={this.onSelectItem} 
                    updateNavigation={this.updateNavigation}
-                    closeModal={this.closeModal}
+                    onclosed={this.props.onclosed}
                /> 
        );
    }
--- a/apps/documenteditor/mobile/src/page/main.jsx
+++ b/apps/documenteditor/mobile/src/page/main.jsx
@ -12,6 +12,7 @@ import { Device } from '../../../../common/mobile/utils/device'
 import { Search, SearchSettings } from '../controller/Search';
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
+import NavigationController from '../controller/settings/Navigation';

 class MainPage extends Component {
    constructor(props) {
@ -21,7 +22,8 @@ class MainPage extends Component {
            addOptionsVisible: false,
            addShowOptions: null,
            settingsVisible: false,
-            collaborationVisible: false
+            collaborationVisible: false,
+            navigationVisible: false
        };
    }

@ -44,6 +46,9 @@ class MainPage extends Component {
            } else if ( opts === 'coauth' ) {
                this.state.collaborationVisible && (opened = true);
                newState.collaborationVisible = true;
+            } else if( opts === 'navigation') {
+                this.state.navigationVisible && (opened = true);
+                newState.navigationVisible = true;
            }

            for (let key in this.state) {
@ -75,6 +80,8 @@ class MainPage extends Component {
                    return {settingsVisible: false};
                else if ( opts == 'coauth' )
                    return {collaborationVisible: false};
+                else if( opts == 'navigation') 
+                    return {navigationVisible: false}
            });
            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
                f7.navbar.show('.main-navbar');
@ -142,24 +149,28 @@ class MainPage extends Component {
              {/* {
                  Device.phone ? null : <SearchSettings />
              } */}
-              <SearchSettings useSuspense={false} />
-              {
-                  !this.state.editOptionsVisible ? null :
-                      <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
-              }
-              {
-                  !this.state.addOptionsVisible ? null :
-                      <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
-              }
-              {
-                  !this.state.settingsVisible ? null :
-                      <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-              }
-              {
-                  !this.state.collaborationVisible ? null :
-                      <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
-              }
-              {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} /> }  
+                <SearchSettings useSuspense={false} />
+                {
+                    !this.state.editOptionsVisible ? null :
+                        <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+                }
+                {
+                    !this.state.addOptionsVisible ? null :
+                        <AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
+                }
+                {
+                    !this.state.settingsVisible ? null :
+                        <Settings openOptions={this.handleClickToOpenOptions.bind(this)} onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+                }
+                {
+                    !this.state.collaborationVisible ? null :
+                        <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
+                }
+                {
+                    !this.state.navigationVisible ? null : 
+                        <NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')} />
+                }
+                {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}  
          </Page>
      )
  }
--- a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx
@ -3,7 +3,7 @@ import { Device } from '../../../../../common/mobile/utils/device';
 import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react';
 import { useTranslation } from 'react-i18next';

-const Navigation = props => {
+const NavigationPopover = props => {
    const { t } = useTranslation();
    const _t = t('Settings', {returnObjects: true});
    const api = Common.EditorApi.get();
@ -16,20 +16,20 @@ const Navigation = props => {
            <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />
            {!arrHeaders.length 
                ?
-                <div className="empty-screens">
-                    <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
-                </div>
+                    <div className="empty-screens">
+                        <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
+                    </div>
                :
-                <List>
-                    {arrHeaders.map((header, index) => {
-                        return (
-                            <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
-                                setCurrentPosition(header.index);
-                                props.onSelectItem(header.index);
-                            }}></ListItem>
-                        )
-                    })}
-                </List>
+                    <List>
+                        {arrHeaders.map((header, index) => {
+                            return (
+                                <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
+                                    setCurrentPosition(header.index);
+                                    props.onSelectItem(header.index);
+                                }}></ListItem>
+                            )
+                        })}
+                    </List>
            }
        </Page>
    )
@ -84,37 +84,36 @@ const NavigationSheet = props => {
    };

    useEffect(() => {
-        props.closeModal();
        f7.sheet.open('#view-navigation-sheet', true);
    }, []);

    return (
-        <Sheet id="view-navigation-sheet" style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
+        <Sheet id="view-navigation-sheet" closeByOutsideClick={true} onSheetClosed={() => props.onclosed()} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
            <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
                <Icon icon='icon-swipe'/>
            </div>
            {!arrHeaders.length 
                ?
-                <div className="empty-screens">
-                    <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
-                </div>
+                    <div className="empty-screens">
+                        <p className="empty-screens__text">{t('Settings.textEmptyScreens')}</p>
+                    </div>
                :
-                <List>
-                    {arrHeaders.map((header, index) => {
-                        return (
-                            <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
-                                setCurrentPosition(header.index);
-                                props.onSelectItem(header.index);
-                            }}></ListItem>
-                        )
-                    })}
-                </List>
+                    <List>
+                        {arrHeaders.map((header, index) => {
+                            return (
+                                <ListItem radio key={index} title={header.name} checked={header.index === currentPosition} style={{paddingLeft: header.level * 16}} onClick={() => {
+                                    setCurrentPosition(header.index);
+                                    props.onSelectItem(header.index);
+                                }}></ListItem>
+                            )
+                        })}
+                    </List>
            }
        </Sheet>
    )
 }

 export {
-    Navigation,
+    NavigationPopover,
    NavigationSheet
 };
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@ -13,7 +13,6 @@ import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./Docume
 import { MacrosSettings } from "./ApplicationSettings";
 import About from '../../../../../common/mobile/lib/view/About';
 import NavigationController from '../../controller/settings/Navigation';
-// import { NavigationSheetView } from './Navigation';

 const routes = [
    {
@ -88,9 +87,14 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
        }
    };

-    const onOpenCollaboration = async () => {
-        await closeModal();
-        await props.openOptions('coauth');
+    const onOpenCollaboration = () => {
+        closeModal();
+        props.openOptions('coauth');
+    }
+
+    const onOpenNavigation = () => {
+        closeModal();
+        props.openOptions('navigation');
    }

    // set mode
@ -130,7 +134,12 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
                            <Icon slot="media" icon="icon-search"></Icon>
                        </ListItem>
                    }
-                    <ListItem title={t('Settings.textNavigation')} link="#" onClick={onoptionclick.bind(this, "/navigation/")}>
+                    <ListItem title={t('Settings.textNavigation')} link='#' onClick={() => {
+                        if(Device.phone) {
+                            onOpenNavigation();
+                        } else {
+                            onoptionclick.bind(this, "/navigation/")();
+                        }}}>
                        <Icon slot="media" icon="icon-navigation"></Icon>
                    </ListItem>
                    {window.matchMedia("(max-width: 359px)").matches ?