[mobile] Add hide navbar when sheet-modal is opened

apps/common/mobile/resources/less/common.less

@@ -32,6 +32,18 @@
     }
 }
 
+.navbar-hidden {
+    transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0);
+}
+
+.navbar-hidden+.page>.page-content, .navbar-hidden+.page-content {
+    padding-top: 0;
+}
+
+.page.editor>.page-content {
+    transition: padding-top .3s ease-in;
+}
+
 .subnavbar {
     .subnavbar-inner {
         padding: 0;

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

@@ -44,6 +44,10 @@ class MainPage extends Component {
                     collaborationPage: showOpts
                 };
         });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.hide('.main-navbar');
+        }
     };
 
     handleOptionsViewClosed = opts => {
@@ -57,7 +61,10 @@ class MainPage extends Component {
                     return {settingsVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
-            })
+            });
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.show('.main-navbar');
+            }
         })();
     };
 
@@ -66,7 +73,7 @@ class MainPage extends Component {
       const config = appOptions.config;
       const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
       return (
-          <Page name="home" className={showLogo && 'page-with-logo'}>
+          <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
               {/* Top Navbar */}
               <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
                   {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

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

@@ -1,6 +1,7 @@
 import React, { Component, Fragment } from 'react';
-import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
+import { f7, Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
+import { Device } from '../../../../common/mobile/utils/device';
 
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
@@ -44,6 +45,10 @@ class MainPage extends Component {
             else if ( opts == 'preview' )
                 return {previewVisible: true};
         });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.hide('.main-navbar');
+        }
     };
 
     handleOptionsViewClosed = opts => {
@@ -59,7 +64,10 @@ class MainPage extends Component {
                     return {collaborationVisible: false}
                 else if ( opts == 'preview' )
                     return {previewVisible: false};
-            })
+            });
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.show('.main-navbar');
+            }
         })();
     };
 
@@ -71,7 +79,7 @@ class MainPage extends Component {
         return (
             <Fragment>
                 {!this.state.previewVisible ? null : <Preview onclosed={this.handleOptionsViewClosed.bind(this, 'preview')} />}
-                <Page name="home" className={showLogo && 'page-with-logo'}>
+                <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
                     {/* Top Navbar */}
                     <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
                         {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}

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

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
+import { Device } from '../../../../common/mobile/utils/device';
 
 import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
@@ -43,6 +44,10 @@ class MainPage extends Component {
             else if ( opts == 'coauth' )
                 return {collaborationVisible: true};
         });
+
+        if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+            f7.navbar.hide('.main-navbar');
+        }
     };
 
     handleOptionsViewClosed = opts => {
@@ -56,7 +61,10 @@ class MainPage extends Component {
                     return {settingsVisible: false};
                 else if ( opts == 'coauth' )
                     return {collaborationVisible: false};
-            })
+            });
+            if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
+                f7.navbar.show('.main-navbar');
+            }
         })();
     };
 
@@ -65,7 +73,7 @@ class MainPage extends Component {
       const config = appOptions.config;
       const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
       return (
-            <Page name="home" className={showLogo && 'page-with-logo'}>
+            <Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
               {/* Top Navbar */}
                 <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
                     {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}