[DE mobile] Add check to show logo in navbar

This commit is contained in:
JuliaSvinareva 2021-04-14 20:27:33 +03:00
parent eb6a25140d
commit 87fb7fe1bd
3 changed files with 29 additions and 12 deletions

View file

@ -9,7 +9,10 @@
@autoColor: @black; @autoColor: @black;
.navbar.main-navbar { .navbar.main-navbar {
height: 26px; height: 0;
&.navbar-with-logo {
height: 26px;
}
.navbar-inner { .navbar-inner {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -22,8 +25,13 @@
} }
} }
.page.page-with-subnavbar .page-content { .page.page-with-subnavbar {
--f7-page-subnavbar-offset: 26px; .page-content {
--f7-page-subnavbar-offset: 0px;
}
&.page-with-logo .page-content {
--f7-page-subnavbar-offset: 26px;
}
} }
.popup, .popover, .sheet-modal { .popup, .popover, .sheet-modal {

View file

@ -2,7 +2,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react'; import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
import { inject } from "mobx-react"; import { observer, inject } from "mobx-react";
import EditOptions from '../view/edit/Edit'; import EditOptions from '../view/edit/Edit';
import AddOptions from '../view/add/Add'; import AddOptions from '../view/add/Add';
@ -13,7 +13,7 @@ import { Search, SearchSettings } from '../controller/Search';
import ContextMenu from '../controller/ContextMenu'; import ContextMenu from '../controller/ContextMenu';
import { Toolbar } from "../controller/Toolbar"; import { Toolbar } from "../controller/Toolbar";
export default class MainPage extends Component { class MainPage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -62,14 +62,17 @@ export default class MainPage extends Component {
}; };
render() { render() {
const appOptions = this.props.storeAppOptions;
const config = appOptions.config;
const showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
return ( return (
<Page name="home"> <Page name="home" className={showLogo && 'page-with-logo'}>
{/* Top Navbar */} {/* Top Navbar */}
<Navbar id='editor-navbar' className='main-navbar'> <Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
<div className="main-logo"><Icon icon="icon-logo"></Icon></div> {showLogo && <div className="main-logo"><Icon icon="icon-logo"></Icon></div>}
<Subnavbar> <Subnavbar>
<Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/> <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
<Search useSuspense={false} /> <Search useSuspense={false}/>
</Subnavbar> </Subnavbar>
</Navbar> </Navbar>
{/* Page content */} {/* Page content */}
@ -100,4 +103,6 @@ export default class MainPage extends Component {
</Page> </Page>
) )
} }
}; }
export default inject("storeAppOptions")(observer(MainPage));

View file

@ -16,7 +16,9 @@ export class storeAppOptions {
changeEditingRights: action, changeEditingRights: action,
readerMode: observable, readerMode: observable,
changeReaderMode: action changeReaderMode: action,
canBrandingExt: observable
}); });
} }
@ -35,6 +37,8 @@ export class storeAppOptions {
this.readerMode = !this.readerMode; this.readerMode = !this.readerMode;
} }
canBrandingExt = false;
config = {}; config = {};
setConfigOptions (config) { setConfigOptions (config) {
this.config = config; this.config = config;