From ffcdc9305591281b54a6b8b6be088edb5cee4830 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Wed, 20 Jan 2021 19:18:48 +0300
Subject: [PATCH] [DE mobile] added searchbar

---
 apps/common/mobile/resources/less/search.less | 16 ++++++
 apps/documenteditor/mobile/src/css/app.less   |  3 +
 .../mobile/src/css/icons-material.less        |  2 +-
 apps/documenteditor/mobile/src/js/app.js      |  2 +
 apps/documenteditor/mobile/src/pages/home.jsx |  3 +
 .../documenteditor/mobile/src/view/search.jsx | 57 +++++++++++++++++++
 6 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 apps/common/mobile/resources/less/search.less
 create mode 100644 apps/documenteditor/mobile/src/view/search.jsx

diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less
new file mode 100644
index 000000000..ab694cea8
--- /dev/null
+++ b/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);
+        }
+    }
+}
diff --git a/apps/documenteditor/mobile/src/css/app.less b/apps/documenteditor/mobile/src/css/app.less
index ee8ffa6fe..3caaf81f1 100644
--- a/apps/documenteditor/mobile/src/css/app.less
+++ b/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';
diff --git a/apps/documenteditor/mobile/src/css/icons-material.less b/apps/documenteditor/mobile/src/css/icons-material.less
index f73f259f2..f3b2eb7b7 100644
--- a/apps/documenteditor/mobile/src/css/icons-material.less
+++ b/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;
diff --git a/apps/documenteditor/mobile/src/js/app.js b/apps/documenteditor/mobile/src/js/app.js
index d2dfca6c8..09146b1f3 100644
--- a/apps/documenteditor/mobile/src/js/app.js
+++ b/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';
diff --git a/apps/documenteditor/mobile/src/pages/home.jsx b/apps/documenteditor/mobile/src/pages/home.jsx
index 9fd4a44d5..05a9efe60 100644
--- a/apps/documenteditor/mobile/src/pages/home.jsx
+++ b/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">
diff --git a/apps/documenteditor/mobile/src/view/search.jsx b/apps/documenteditor/mobile/src/view/search.jsx
new file mode 100644
index 000000000..30a21695f
--- /dev/null
+++ b/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>
+        )
+    }
+}