Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
JuliaSvinareva 2021-04-30 16:29:41 +03:00
parent cc66831f6c
commit 61998a2c04
4 changed files with 42 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
apps/common/mobile/resources/less/common.less
View file

@ -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;

11
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -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>}

14
apps/presentationeditor/mobile/src/page/main.jsx
View file

@ -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>}

12
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

@ -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>}