[DE mobile] Fix open searchbar, add logo in navbar

apps/common/mobile/resources/less/common-ios.less

@@ -6,6 +6,7 @@
     @darkGreen: #40865c;
 
     --f7-navbar-link-color: @themeColor;
+    --f7-subnavbar-link-color: @themeColor;
     --f7-navbar-text-color: @black;
     --f7-navbar-title-line-height: 44px;
     --f7-navbar-link-line-height: 44px;
@@ -30,7 +31,7 @@
         margin-left: 0;
     }
 
-    .navbar {
+    .navbar, .subnavbar {
         a.btn-doc-back {
             width: 22px;
         }
@@ -38,7 +39,7 @@
         .title {
             font-weight: 600;
         }
-        .navbar-inner {
+        .navbar-inner, .subnavbar-inner {
             z-index: auto;
         }
         .sheet-close {

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

@@ -8,6 +8,20 @@
 @red: #f00;
 @autoColor: @black;
 
+.navbar.main-navbar {
+    height: 26px;
+    .navbar-inner {
+        display: flex;
+        justify-content: center;
+        padding-top: 8px;
+    }
+    .navbar-bg {
+        &:before, &:after {
+            content: none;
+        }
+    }
+}
+
 .popup, .popover, .sheet-modal {
     .list {
         &:first-child {

apps/common/mobile/resources/less/ios/icons.less

@@ -3,6 +3,11 @@
         &.icon_mask {
             background-color: white;
         }
+        &.icon-logo {
+            width: 100px;
+            height: 14px;
+            background: url('../../img/header/logo-ios.svg') no-repeat center;
+        }
         &.icon-prev {
             width: 22px;
             height: 22px;

apps/common/mobile/resources/less/material/icons.less

@@ -3,6 +3,11 @@
         &.icon_mask {
             background-color: black;
         }
+        &.icon-logo {
+            width: 100px;
+            height: 14px;
+            background: url('../../img/header/logo-android.svg') no-repeat center;
+        }
         &.icon-prev {
             width: 20px;
             height: 20px;

apps/documenteditor/mobile/src/less/app-material.less

@@ -9,6 +9,10 @@
     --f7-navbar-link-color: @navBarIconColor;
     --f7-navbar-text-color: @navBarIconColor;
 
+    --f7-subnavbar-bg-color: @themeColor;
+    --f7-subnavbar-link-color: @navBarIconColor;
+    --f7-subnavbar-text-color: @navBarIconColor;
+
     // Main Toolbar
     #editor-navbar.navbar .right {
         padding-right: 4px;

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

@@ -1,7 +1,7 @@
 
 import React, { Component } from 'react';
 import { f7 } from 'framework7-react';
-import { Page, View } from 'framework7-react';
+import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { inject } from "mobx-react";
 
 import EditOptions from '../view/edit/Edit';
@@ -65,7 +65,13 @@ export default class MainPage extends Component {
       return (
           <Page name="home">
               {/* Top Navbar */}
-              <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
+              <Navbar id='editor-navbar' className='main-navbar'>
+                  <div className="main-logo"><Icon icon="icon-logo"></Icon></div>
+                  <Subnavbar>
+                    <Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
+                    <Search useSuspense={false} />
+                  </Subnavbar>
+              </Navbar>
               {/* Page content */}
               <View id="editor_sdk">
             

apps/documenteditor/mobile/src/view/Toolbar.jsx

@@ -1,13 +1,11 @@
-import React from 'react';
-import {Navbar, NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
+import React, {Fragment} from 'react';
+import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
-import {Search} from "../controller/Search";
 
 const ToolbarView = props => {
     const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls;
     return (
-        <Navbar id='editor-navbar'>
-            <div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
+        <Fragment>
             <NavLeft>
                 {props.isShowBack && <Link className='btn-doc-back' icon='icon-back' onClick={props.onBack}></Link>}
                 <Link icon='icon-undo' className={!props.isCanUndo && 'disabled'} onClick={props.onUndo}></Link>
@@ -21,9 +19,7 @@ const ToolbarView = props => {
                 {props.displayCollaboration && <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link>}
                 <Link className={props.disabledSettings && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
             </NavRight>
-            {/* { Device.phone ? null : <Search /> } */}
-            <Search useSuspense={false} />
-        </Navbar>
+        </Fragment>
     )
 };