Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs

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

@@ -0,0 +1,16 @@
+@statusBarBorderColor: #cbcbcb;
+
+.navbar {
+    .searchbar {
+        background-color: var(--f7-navbar-bg-color);
+
+        .buttons-row {
+            align-self: center;
+            display: flex;
+        }
+
+        .searchbar-bg {
+            .hairline(bottom, @statusBarBorderColor);
+        }
+    }
+}

apps/documenteditor/mobile/src/css/app.less

@@ -1,11 +1,14 @@
 @themeColor: #446995;
 
+@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less';
+
 @import '../../../../common/mobile/resources/less/_mixins.less';
 @import '../../../../common/mobile/resources/less/collaboration.less';
 @import '../../../../common/mobile/resources/less/common.less';
 @import '../../../../common/mobile/resources/less/common-ios.less';
 @import '../../../../common/mobile/resources/less/common-material.less';
 @import '../../../../common/mobile/resources/less/dataview.less';
+@import '../../../../common/mobile/resources/less/search.less';
 @import './app-material.less';
 @import './app-ios.less';
 @import './icons-ios.less';

apps/documenteditor/mobile/src/css/icons-material.less

@@ -79,7 +79,7 @@
     &.icon-search {
       width: 22px;
       height: 22px;
-      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{navBarIconColor}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
     }
     &.icon-reader {
       width: 22px;

apps/documenteditor/mobile/src/js/app.js

@@ -4,6 +4,8 @@ import ReactDOM from 'react-dom';
 
 // Import Framework7
 import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
+import { Dom7 } from 'framework7';
+window.$$ = Dom7;
 
 // Import Framework7-React Plugin
 import Framework7React from 'framework7-react';

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

@@ -4,6 +4,7 @@ import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-re
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../view/settings/Settings';
+import SearchView from '../view/search';
 import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
 
 export default class Home extends Component {
@@ -58,9 +59,11 @@ export default class Home extends Component {
                   <NavRight>
                       <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
                       <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
+                      <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>
                       <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                       <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                   </NavRight>
+                  <SearchView />
               </Navbar>
               {/* Page content */}
               <View id="editor_sdk">

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

@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import { Searchbar, Link } from 'framework7-react';
+import { f7ready, f7 } from 'framework7-react';
+
+export default class SearchView extends Component {
+    constructor(props) {
+        super(props);
+
+        $$(document).on('page:init', (e, page) => {
+            if ( page.name == 'home' ) {
+                f7.searchbar.create({
+                    el: '.searchbar',
+                    customSearch: true,
+                    expandable: true,
+                    backdrop: false,
+                    on: {
+                        search: (bar, curval, prevval) => {
+                            console.log('on search results ' + curval);
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    componentDidMount(){
+    }
+
+    render() {
+        return (
+            <form className="searchbar">
+                <div className="searchbar-bg"></div>
+                <div className="searchbar-inner">
+                    <div className="buttons-row">
+                        <a id="search-settings" className="link icon-only" onClick={e => console.log('search settings click')}>
+                            <i className="icon icon-settings" />
+                        </a>
+                    </div>
+                    <div className="searchbar-input-wrap">
+                        <input placeholder="Search" type="search" />
+                        <i className="searchbar-icon" />
+                        <span className="input-clear-button" />
+                    </div>
+                    <div className="buttons-row">
+                        <a className="link icon-only prev disabled">
+                            <i className="icon icon-prev" />
+                        </a>
+                        <a className="link icon-only next disabled">
+                            <i className="icon icon-next" />
+                        </a>
+                    </div>
+                    <span className="searchbar-disable-button">Cancel</span>
+                </div>
+            </form>
+        )
+    }
+}