[DE mobile] Change navigation view

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

@@ -1,18 +1,19 @@
 import React, { Component } from "react";
-import NavigationView from "../../view/settings/Navigation";
+import Navigation from "../../view/settings/Navigation";
 import { Device } from '../../../../../common/mobile/utils/device';
-import { f7, Sheet } from 'framework7-react';
+import { f7, Sheet, Page, Popup } from 'framework7-react';
 import { withTranslation } from 'react-i18next';
 
 class NavigationController extends Component {
     constructor(props) {
         super(props);
         this.updateNavigation = this.updateNavigation.bind(this);
+        this.closeModal = this.closeModal.bind(this);
     }
 
     closeModal() {
         if (Device.phone) {
-            f7.sheet.close('.settings-popup', false);
+            f7.popup.close('.settings-popup', true);
         } else {
             f7.popover.close('#settings-popover');
         }
@@ -72,13 +73,30 @@ class NavigationController extends Component {
         }
     };
 
+    componentDidMount() {
+        if(Device.phone) {
+            f7.sheet.open('#view-navigation-sheet', true);
+            this.closeModal();
+        }
+    }
+
     render() {
         return (
-            <NavigationView 
-                onSelectItem={this.onSelectItem} 
-                updateNavigation={this.updateNavigation}
-                closeModal={this.closeModal}
-            />
+            !Device.phone ? 
+                <Navigation
+                    onSelectItem={this.onSelectItem} 
+                    updateNavigation={this.updateNavigation}
+                    closeModal={this.closeModal}
+                />
+            :
+                <Sheet id="view-navigation-sheet" push>
+                    <Navigation
+                        onSelectItem={this.onSelectItem} 
+                        updateNavigation={this.updateNavigation}
+                        closeModal={this.closeModal}
+                    /> 
+                </Sheet>
+
         );
     }
 }

apps/documenteditor/mobile/src/view/settings/Navigation.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, Component } from "react";
+import React, { useState, useEffect, Component, Fragment } from "react";
 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';
@@ -7,6 +7,7 @@ const Navigation = props => {
     const { t } = useTranslation();
     const _t = t('Settings', {returnObjects: true});
     const android = Device.android;
+    const isPhone = Device.phone;
     const api = Common.EditorApi.get();
     const navigationObject = api.asc_ShowDocumentOutline();
     const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition());
@@ -14,7 +15,7 @@ const Navigation = props => {
 
     return (
         <Page>
-            {!Device.phone && <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />}
+            {!isPhone && <Navbar title={t('Settings.textNavigation')} backLink={_t.textBack} />}
             {!arrHeaders.length 
                 ?
                 <div className="empty-screens">
@@ -41,48 +42,4 @@ const Navigation = props => {
     )
 }
 
-const NavigationSheetView = props => {
-    useEffect(() => {
-        if(Device.phone) {
-            f7.sheet.open('#view-navigation-sheet', true);
-        }
-
-        return () => {}
-    });
-
-    return (
-        <Sheet id="view-navigation-sheet" swipeToClose>
-            {/* <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
-                <Icon icon='icon-swipe' />
-            </div> */}
-            <Navigation 
-                updateNavigation={props.updateNavigation} 
-                onSelectItem={props.onSelectItem} 
-                closeModal={props.closeModal}
-            />
-        </Sheet>
-    )
-}
-
-const NavigationView = props => {
-
-    return (
-        !Device.phone 
-            ? 
-                <Navigation 
-                    updateNavigation={props.updateNavigation} 
-                    onSelectItem={props.onSelectItem} 
-                    closeModal={props.closeModal}
-                />
-                
-            :
-                <NavigationSheetView
-                    updateNavigation={props.updateNavigation} 
-                    onSelectItem={props.onSelectItem} 
-                    closeModal={props.closeModal}
-                />
-            
-    )
-}
-
-export default NavigationView;
+export default Navigation;

apps/documenteditor/mobile/src/view/settings/Settings.jsx

@@ -13,6 +13,7 @@ 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 = [
     {