[DE] changed methods to show/hide for app options pages

apps/common/mobile/lib/view/Collaboration.jsx

@@ -1,7 +1,8 @@
-import React, { Component } from 'react';
+import React, { Component, useEffect } from 'react';
 import { observer, inject } from "mobx-react";
 import { Popover, List, ListItem, Navbar, NavTitle, NavRight } from 'framework7-react';
 import { Sheet, Toolbar, BlockTitle, Link, Page, View, Icon } from 'framework7-react';
+import { f7 } from 'framework7-react';
 import { withTranslation, useTranslation } from 'react-i18next';
 
 @inject('users')
@@ -77,7 +78,7 @@ class CollaborationSheet extends Component {
     }
     render() {
         return (
-            <Sheet className="collab__sheet" push>
+            <Sheet className="coauth__sheet" push onSheetClosed={e => this.props.onclosed()}>
                 <View>
                     <PageCollaboration />
                 </View>
@@ -86,6 +87,25 @@ class CollaborationSheet extends Component {
     }
 }
 
+const CollaborationView = props => {
+    useEffect(() => {
+        f7.sheet.open('.coauth__sheet');
+
+        return () => {
+            // component will unmount
+        }
+    });
+
+    const onviewclosed = () => {
+        if ( props.onclosed ) props.onclosed();
+    };
+
+    return (
+        <CollaborationSheet onclosed={onviewclosed} />
+    )
+};
+
 const pageusers = withTranslation()(PageUsers);
 // export withTranslation()(CollaborationPopover);
 export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers}
+export default CollaborationView;

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

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
 import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View } from 'framework7-react';
+import { f7 } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import EditText from "./EditText";
 import EditParagraph from "./EditParagraph";
@@ -125,8 +126,9 @@ const EditSheet = props => {
             })
         }*/
     }
+
     return (
-        <Sheet className="edit__sheet" push>
+        <Sheet className="edit__sheet" push onSheetClosed={e => props.onclosed()}>
             <View>
                 <Page pageContent={false}>
                     <EditLayoutNavbar editors={editors} />
@@ -137,4 +139,24 @@ const EditSheet = props => {
     )
 };
 
-export default inject("storeFocusObjects")(observer(EditSheet));
+const HOC_EditSheet = inject("storeFocusObjects")(observer(EditSheet));
+
+const EditOptions = props => {
+    useEffect(() => {
+        f7.sheet.open('.edit__sheet');
+
+        return () => {
+            // component will unmount
+        }
+    });
+
+    const onsheetclosed = () => {
+        if ( props.onclosed ) props.onclosed();
+    };
+
+    return (
+        <HOC_EditSheet onclosed={onsheetclosed} />
+    )
+};
+
+export default EditOptions;

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

@@ -1,31 +1,18 @@
-import React, {Component} from 'react';
-import {
-    View,
-    Page,
-    Navbar,
-    NavRight,
-    Link,
-    Popup,
-    Icon,
-    ListItem,
-    List
-} from 'framework7-react';
-
+import React, {Component, useEffect} from 'react';
+import {View,Page,Navbar,NavRight,Link,Popup,Icon,ListItem,List} from 'framework7-react';
 import { withTranslation } from 'react-i18next';
+import { f7 } from 'framework7-react';
 
-class Settings extends Component {
+class SettingsPopup extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-            popupOpened: false,
-        };
     }
     render() {
         const { t } = this.props;
         const _trarr = t('ViewSettings', {returnObjects: true});
 
         return (
-            <Popup className="settings-popup" opened={this.state.popupOpened} onPopupClosed={() => this.setState({popupOpened : false})}>
+            <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
                 <View>
                 <Page>
                     <Navbar title={t('ViewSettings.textSettings')}>
@@ -64,6 +51,26 @@ class Settings extends Component {
             </Popup>
         )
     }
+}
+
+const HOCSettingsPopup = withTranslation()(SettingsPopup);
+
+const Settings = props => {
+    useEffect(() => {
+        f7.popup.open('.settings-popup');
+
+        return () => {
+            // component will unmount
+        }
+    });
+
+
+    const onviewclosed = () => {
+        if ( props.onclosed )
+            props.onclosed();
+    };
+
+    return <HOCSettingsPopup onclosed={onviewclosed} />
 };
 
-export default withTranslation()(Settings);
+export default Settings;

apps/documenteditor/mobile/src/js/routes.js

@@ -25,10 +25,10 @@ var routes = [
     path: '/users/',
     component: PageUsers
   },
-  {
-    path: '/collab-main/',
-    component: PageCollaboration
-  },
+  // {
+  //   path: '/collab-main/',
+  //   component: PageCollaboration
+  // },
   {
     path: '/margins/',
     component: Margins,

apps/documenteditor/mobile/src/pages/home.jsx

@@ -1,14 +1,48 @@
 import React, { Component } from 'react';
 import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
 
-import EditSheet from '../components/edit/Edit.jsx';
-import SettingsPopup from '../components/settings/Settings.jsx';
-import { CollaborationPopover, CollaborationSheet } from '../../../../common/mobile/lib/view/Collaboration.jsx'
+import EditOptions from '../components/edit/Edit.jsx';
+import Settings from '../components/settings/Settings.jsx';
+import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
 
 export default class Home extends Component {
     constructor(props) {
         super(props);
+        this.state = {
+            editOptionsVisible: false,
+            settingsVisible: false,
+            collaborationVisible: false,
+        };
     }
+
+    handleClickToOpenOptions = opts => {
+        this.setState(state => {
+            if ( opts == 'edit' )
+                return {editOptionsVisible: true};
+            else
+            if ( opts == 'settings' )
+                return {settingsVisible: true};
+            else
+            if ( opts == 'coauth' )
+                return {collaborationVisible: true}
+        });
+    };
+
+    handleOptionsViewClosed = opts => {
+        (async () => {
+            await 1 && this.setState(state => {
+                if ( opts == 'edit' )
+                    return {editOptionsVisible: false};
+                else
+                if ( opts == 'settings' )
+                    return {settingsVisible: false};
+                else
+                if ( opts == 'coauth' )
+                    return {collaborationVisible: false}
+            })
+        })();
+    };
+
   render() {
     console.log(this.$f7router)
     return (
@@ -18,22 +52,29 @@ export default class Home extends Component {
             <div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
             <NavLeft>
               <Link>Undo</Link>
-              <Link>Redu</Link>
+              <Link>Redo</Link>
             </NavLeft>
             <NavRight>
-              <Link href={false} sheetOpen=".edit__sheet">Edit</Link>
-              {/*<Link href={false} popoverOpen=".collab__popover">Users</Link>*/}
-              <Link href={false} sheetOpen=".collab__sheet">Users</Link>
-              <Link href={false} popupOpen=".settings-popup">Settings</Link>
+              <Link href={false} onClick={e => this.handleClickToOpenOptions('edit')}>Edit</Link>
+              <Link href={false} onClick={e => this.handleClickToOpenOptions('coauth')}>Users</Link>
+              <Link href={false} onClick={e => this.handleClickToOpenOptions('settings')}>Settings</Link>
             </NavRight>
           </Navbar>
           {/* Page content */}
           <View id="editor_sdk">
           </View>
-          <EditSheet />
-          <SettingsPopup />
-          <CollaborationPopover />
-          <CollaborationSheet />
+            {
+                !this.state.editOptionsVisible ? null :
+                    <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
+            }
+            {
+                !this.state.settingsVisible ? null :
+                    <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
+            }
+            {
+                !this.state.collaborationVisible ? null :
+                    <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
+            }
         </Page>
     )
   }