[DE mobile] Change css name of settings container.

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

@@ -19,7 +19,9 @@
   &.popover {
     width: 360px;
   }
+}
 
+.settings {
   &.popup,
   &.popover {
     .list-block {
@@ -27,6 +29,10 @@
       ul {
         border-radius: 0 !important;
         background: #fff;
+
+        &:last-child {
+          .hairline(bottom, @listBlockBorderColor);
+        }
       }
 
       &:first-child {
@@ -70,6 +76,7 @@
       }
     }
   }
+
   .popover-inner {
     height: 400px;
   }

apps/documenteditor/mobile/app-dev.js

@@ -134,6 +134,7 @@ require([
         controllers : [
             'Editor',
             'Toolbar',
+            'Search',
             'Main',
             'DocumentHolder',
             'Settings',
@@ -198,6 +199,7 @@ require([
         'common/main/lib/util/utils',
         'documenteditor/mobile/app/controller/Editor',
         'documenteditor/mobile/app/controller/Toolbar',
+        'documenteditor/mobile/app/controller/Search',
         'documenteditor/mobile/app/controller/Main',
         'documenteditor/mobile/app/controller/DocumentHolder',
         'documenteditor/mobile/app/controller/Settings',

apps/documenteditor/mobile/app.js

@@ -145,6 +145,7 @@ require([
         controllers : [
             'Editor',
             'Toolbar',
+            'Search',
             'Main',
             'DocumentHolder',
             'Settings',
@@ -209,6 +210,7 @@ require([
         'common/main/lib/util/utils',
         'documenteditor/mobile/app/controller/Editor',
         'documenteditor/mobile/app/controller/Toolbar',
+        'documenteditor/mobile/app/controller/Search',
         'documenteditor/mobile/app/controller/Main',
         'documenteditor/mobile/app/controller/DocumentHolder',
         'documenteditor/mobile/app/controller/Settings',

apps/documenteditor/mobile/app/controller/Search.js

@@ -0,0 +1,223 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  Search.js
+ *  Document Editor
+ *
+ *  Created by Alexander Yuzhin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'jquery',
+    'underscore',
+    'backbone',
+    'documenteditor/mobile/app/view/Search'
+], function (core, $, _, Backbone) {
+    'use strict';
+
+    DE.Controllers.Search = Backbone.Controller.extend((function() {
+        // private
+
+        var _isShow = false,
+            _startPoint = {};
+
+        var pointerEventToXY = function(e){
+            var out = {x:0, y:0};
+            if(e.type == 'touchstart' || e.type == 'touchend'){
+                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+                out.x = touch.pageX;
+                out.y = touch.pageY;
+            } else if (e.type == 'mousedown' || e.type == 'mouseup') {
+                out.x = e.pageX;
+                out.y = e.pageY;
+            }
+            return out;
+        };
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'Search'
+            ],
+
+            initialize: function() {
+                this.addListeners({
+                    'Search': {
+                        'searchbar:show'        : this.onSearchbarShow,
+                        'searchbar:hide'        : this.onSearchbarHide,
+                        'searchbar:render'      : this.onSearchbarRender
+                    }
+                });
+            },
+
+            setApi: function(api) {
+                this.api = api;
+            },
+
+            setMode: function (mode) {
+                this.getView('Search').setMode(mode);
+            },
+
+            onLaunch: function() {
+                var me = this;
+                me.createView('Search').render();
+
+                $('#editor_sdk').single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
+                $('#editor_sdk').single('mouseup touchend',     _.bind(me.onEditorTouchEnd, me));
+            },
+
+            showSearch: function () {
+                this.getView('Search').showSearch();
+            },
+
+            hideSearch: function () {
+                this.getView('Search').hideSearch();
+            },
+
+            // Handlers
+
+            onEditorTouchStart: function (e) {
+                _startPoint = pointerEventToXY(e);
+            },
+
+            onEditorTouchEnd: function (e) {
+                var _endPoint = pointerEventToXY(e);
+
+                if (_isShow) {
+                    var distance = Math.sqrt((_endPoint.x -= _startPoint.x) * _endPoint.x + (_endPoint.y -= _startPoint.y) * _endPoint.y);
+
+                    if (distance < 1) {
+                        this.hideSearch();
+                    }
+                }
+            },
+
+            onSearchbarRender: function(bar) {
+                var me = this;
+
+                me.searchBar = uiApp.searchbar('.searchbar.document .searchbar.search', {
+                    customSearch: true,
+                    onSearch    : _.bind(me.onSearchChange, me),
+                    onEnable    : _.bind(me.onSearchEnable, me),
+                    onClear     : _.bind(me.onSearchClear, me)
+                });
+
+                me.replaceBar = uiApp.searchbar('.searchbar.document .searchbar.replace', {
+                    customSearch: true,
+                    onSearch    : _.bind(me.onReplaceChange, me),
+                    onEnable    : _.bind(me.onReplaceEnable, me),
+                    onClear     : _.bind(me.onReplaceClear, me)
+                });
+
+                me.searchPrev = $('.searchbar.document .prev');
+                me.searchNext = $('.searchbar.document .next');
+
+                me.searchPrev.single('click', _.bind(me.onSearchPrev, me));
+                me.searchNext.single('click', _.bind(me.onSearchNext, me));
+            },
+
+            onSearchbarShow: function(bar) {
+                _isShow = true;
+            },
+
+            onSearchEnable: function (bar) {
+                this.replaceBar.container.removeClass('searchbar-active');
+            },
+
+            onSearchbarHide: function(bar) {
+                _isShow = false;
+            },
+
+            onSearchChange: function(search) {
+                var me = this,
+                    isEmpty = (search.query.trim().length < 1);
+
+                _.each([me.searchPrev, me.searchNext], function(btn) {
+                    btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
+                });
+            },
+
+            onSearchClear: function(search) {
+//            window.focus();
+//            document.activeElement.blur();
+            },
+
+            onReplaceChange: function(replace) {
+                var me = this,
+                    isEmpty = (replace.query.trim().length < 1);
+
+            },
+
+            onReplaceEnable: function (bar) {
+                this.searchBar.container.removeClass('searchbar-active');
+            },
+
+            onReplaceClear: function(replace) {
+                //
+            },
+
+            onSearchPrev: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'back');
+            },
+
+            onSearchNext: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'next');
+            },
+
+            onQuerySearch: function(query, direction, opts) {
+                if (query && query.length) {
+                    if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
+                        var me = this;
+                        uiApp.alert(
+                            '',
+                            me.textNoTextFound,
+                            function () {
+                                me.searchBar.input.focus();
+                            }
+                        );
+                    }
+                }
+            },
+
+            // API handlers
+
+            textNoTextFound     : 'Text not found',
+        }
+    })());
+});

apps/documenteditor/mobile/app/controller/Settings.js

@@ -107,7 +107,7 @@ define([
             showModal: function() {
                 if (Common.SharedSettings.get('phone')) {
                     modalView = uiApp.popup(
-                        '<div class="popup container-settings">' +
+                        '<div class="popup settings container-settings">' +
                             '<div class="content-block">' +
                                 '<div class="view settings-root-view navbar-through">' +
                                     this.getView('Settings').rootLayout() +
@@ -117,7 +117,7 @@ define([
                     );
                 } else {
                     modalView = uiApp.popover(
-                        '<div class="popover container-settings">' +
+                        '<div class="popover settings container-settings">' +
                             '<div class="popover-angle"></div>' +
                             '<div class="popover-inner">' +
                                 '<div class="content-block">' +

apps/documenteditor/mobile/app/controller/Toolbar.js

@@ -42,8 +42,11 @@
 
 define([
     'core',
+    'jquery',
+    'underscore',
+    'backbone',
     'documenteditor/mobile/app/view/Toolbar'
-], function (core) {
+], function (core, $, _, Backbone) {
     'use strict';
 
     DE.Controllers.Toolbar = Backbone.Controller.extend((function() {
@@ -58,13 +61,6 @@ define([
             ],
 
             initialize: function() {
-                this.addListeners({
-                    'Toolbar': {
-                        'searchbar:show'        : this.onSearchbarShow,
-                        'searchbar:render'      : this.onSearchbarRender
-                    }
-                });
-
                 Common.Gateway.on('init', _.bind(this.loadConfig, this));
             },
 
@@ -100,74 +96,6 @@ define([
                 $('#toolbar-title').html(title);
             },
 
-            // Search
-
-            onSearchbarRender: function(bar) {
-                var me = this;
-                me.searchBar = uiApp.searchbar('.searchbar.document', {
-                    customSearch: true,
-                    onSearch    : _.bind(me.onSearchChange, me),
-                    onEnable    : _.bind(me.onSearchEnable, me),
-                    onDisable   : _.bind(me.onSearchDisable, me),
-                    onClear     : _.bind(me.onSearchClear, me)
-                });
-
-                me.searchPrev = $('.searchbar.document .prev');
-                me.searchNext = $('.searchbar.document .next');
-
-                me.searchPrev.on('click', _.bind(me.onSearchPrev, me));
-                me.searchNext.on('click', _.bind(me.onSearchNext, me));
-            },
-
-            onSearchbarShow: function(bar) {
-                //
-            },
-
-            onSearchChange: function(search) {
-                var me = this,
-                    isEmpty = (search.query.trim().length < 1);
-
-                _.each([me.searchPrev, me.searchNext], function(btn) {
-                    btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
-                });
-            },
-
-            onSearchEnable: function(search) {
-                //
-            },
-
-            onSearchDisable: function(search) {
-                //
-            },
-
-            onSearchClear: function(search) {
-//            window.focus();
-//            document.activeElement.blur();
-            },
-
-            onSearchPrev: function(btn) {
-                this.onQuerySearch(this.searchBar.query, 'back');
-            },
-
-            onSearchNext: function(btn) {
-                this.onQuerySearch(this.searchBar.query, 'next');
-            },
-
-            onQuerySearch: function(query, direction, opts) {
-                if (query && query.length) {
-                    if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
-                        var me = this;
-                        uiApp.alert(
-                            '',
-                            me.textNoTextFound,
-                            function () {
-                                me.searchBar.input.focus();
-                            }
-                        );
-                    }
-                }
-            },
-
             // Handlers
 
             onBack: function (e) {
@@ -219,8 +147,7 @@ define([
             dlgLeaveTitleText   : 'You leave the application',
             dlgLeaveMsgText     : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
             leaveButtonText     : 'Leave this Page',
-            stayButtonText      : 'Stay on this Page',
+            stayButtonText      : 'Stay on this Page'
-            textNoTextFound     : 'Text not found',
         }
     })());
 });

apps/documenteditor/mobile/app/controller/add/AddContainer.js

@@ -220,7 +220,7 @@ define([
 
                 if (isPhone) {
                     me.picker = $$(uiApp.popup(
-                        '<div class="popup container-add">' +
+                        '<div class="popup settings container-add">' +
                             '<div class="view add-root-view navbar-through">' +
                                 $layoutNavbar.prop('outerHTML') +
                                 $layoutPages.prop('outerHTML') +
@@ -229,7 +229,7 @@ define([
                     ))
                 } else {
                     me.picker = uiApp.popover(
-                        '<div class="popover container-add">' +
+                        '<div class="popover settings container-add">' +
                             '<div class="popover-angle"></div>' +
                             '<div class="popover-inner">' +
                                 '<div class="content-block">' +

apps/documenteditor/mobile/app/controller/edit/EditContainer.js

@@ -265,7 +265,7 @@ define([
 
                 if (isPhone) {
                     me.picker = $$(uiApp.pickerModal(
-                        '<div class="picker-modal container-edit">' +
+                        '<div class="picker-modal settings container-edit">' +
                             '<div class="view edit-root-view navbar-through">' +
                                 $layoutNavbar.prop('outerHTML') +
                                 $layoutPages.prop('outerHTML') +
@@ -277,7 +277,7 @@ define([
                     mainView.hideNavbar();
                 } else {
                     me.picker = uiApp.popover(
-                        '<div class="popover container-edit">' +
+                        '<div class="popover settings container-edit">' +
                             '<div class="popover-angle"></div>' +
                             '<div class="popover-inner">' +
                                 '<div class="content-block">' +

apps/documenteditor/mobile/app/template/Search.template

@@ -0,0 +1,105 @@
+<!--Toolbar panel-->
+<div id="search-panel-view">
+    <div class="searchbar document navbar navbar-hidden replace">
+        <div class="navbar-inner">
+            <div class="left">
+                <a id="search-settings" href="#" class="link icon-only"><i class="icon icon-settings"></i></a>
+            </div>
+            <div class="center">
+                <form class="searchbar search">
+                    <div class="searchbar-input search">
+                        <input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>
+                    </div>
+                </form>
+                <form class="searchbar replace">
+                    <div class="searchbar-input replace">
+                        <input type="search" placeholder="Replace"><a href="#" class="searchbar-clear"></a>
+                    </div>
+                </form>
+            </div>
+            <div class="right">
+                <% if (phone) { %>
+                <p class="buttons-row">
+                    <a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
+                    <a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
+                </p>
+                <p class="buttons-row replace">
+                    <a href="#" class="link disabled">Replace</a>
+                </p>
+                <% } else { %>
+                <p class="buttons-row">
+                    <a href="#" class="link replace disabled">Replace</a>
+                    <a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
+                    <a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
+                </p>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!--Settings-->
+<div id="search-settings-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="center sliding">Find and Replace</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link close-popup"><b>Done</b></a><% } %></div>
+        </div>
+    </div>
+    <div class="page">
+        <div class="page-content">
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="search-type" value="search">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Find</div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="search-type" value="replace">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Find and Replace</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div id="search-case-sensitive" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Case sensitive</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div id="search-highlight-results" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Highlight results</div>
+                                <div class="item-after">
+                                    <label class="label-switch">
+                                        <input type="checkbox">
+                                        <div class="checkbox"></div>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

apps/documenteditor/mobile/app/template/Settings.template

@@ -11,18 +11,18 @@
             <div class="page-content">
                 <div class="list-block">
                     <ul>
-                        <!--<li>-->
+                        <li>
-                            <!--<a id="settings-search" class="item-link no-indicator">-->
+                            <a id="settings-search" class="item-link no-indicator">
-                                <!--<div class="item-content">-->
+                                <div class="item-content">
-                                    <!--<div class="item-media">-->
+                                    <div class="item-media">
-                                        <!--<i class="icon icon-search"></i>-->
+                                        <i class="icon icon-search"></i>
-                                    <!--</div>-->
+                                    </div>
-                                    <!--<div class="item-inner">-->
+                                    <div class="item-inner">
-                                        <!--<div class="item-title">Search</div>-->
+                                        <div class="item-title">Search</div>
-                                    <!--</div>-->
+                                    </div>
-                                <!--</div>-->
+                                </div>
-                            <!--</a>-->
+                            </a>
-                        <!--</li>-->
+                        </li>
                         <li>
                             <a id="settings-edit-document" class="item-link no-indicator">
                                 <div class="item-content">

apps/documenteditor/mobile/app/template/Toolbar.template

@@ -1,7 +1,7 @@
 <div class="navbar" id="editor-navbar">
     <div class="navbar-inner">
         <div class="left">
-            <a id="document-back" href="#" class="link" style="display: none;">
+            <a id="document-back" href="#" class="link" style="min-width: 22px; display: none;">
                 <i class="icon icon-back"></i>
                 <% if (backTitle && !phone) { %>
                 <span class="subtitle"><%= backTitle %></span>

apps/documenteditor/mobile/app/view/Search.js

@@ -0,0 +1,183 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * This program is a free software product. You can redistribute it and/or
+ * modify it under the terms of the GNU Affero General Public License (AGPL)
+ * version 3 as published by the Free Software Foundation. In accordance with
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+
+/**
+ *  Search.js
+ *  Document Editor
+ *
+ *  Created by Alexander Yuzhin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!documenteditor/mobile/app/template/Search.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (searchTemplate, $, _, Backbone) {
+    'use strict';
+
+    DE.Views.Search = Backbone.View.extend((function() {
+        // private
+        var _isEdit = false,
+            _layout;
+
+        return {
+            el: '.view-main',
+
+            // Compile our stats template
+            template: _.template(searchTemplate),
+
+            // Delegated events for creating new items, and clearing completed ones.
+            events: {},
+
+            // Set innerHTML and get the references to the DOM elements
+            initialize: function () {
+                this.on('searchbar:show', _.bind(this.initEvents, this));
+            },
+
+            initEvents: function() {
+                $('#search-settings').single('click', _.bind(this.showSettings, this));
+            },
+
+            // Render layout
+            render: function () {
+                _layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone'),
+                    isEdit  : _isEdit
+                }));
+
+                return this;
+            },
+
+            setMode: function (mode) {
+                _isEdit = (mode === 'edit');
+                this.render();
+            },
+
+            showSettings: function (e) {
+                var me = this;
+
+                if (Common.SharedSettings.get('phone')) {
+                    me.picker = $$(uiApp.popup([
+                        '<div class="popup">',
+                            '<div class="view search-settings-view navbar-through">',
+                                _layout.find('#search-settings-view').html(),
+                            '</div>',
+                        '</div>'].join('')
+                    ))
+                } else {
+                    me.picker = uiApp.popover([
+                        '<div class="popover settings" style="width: 280px; height: 300px;">',
+                            '<div class="popover-angle"></div>',
+                            '<div class="popover-inner">',
+                                '<div class="content-block">',
+                                    '<div class="view popover-view search-settings-view navbar-through" style="height: 300px;">',
+                                        _layout.find('#search-settings-view').html(),
+                                    '</div>',
+                                '</div>',
+                            '</div>',
+                        '</div>'].join(''),
+                        $$('#search-settings')
+                    );
+
+                    // Prevent hide overlay. Conflict popover and modals.
+                    var $overlay = $('.modal-overlay');
+
+                    $$(me.picker).on('opened', function () {
+                        $overlay.on('removeClass', function () {
+                            if (!$overlay.hasClass('modal-overlay-visible')) {
+                                $overlay.addClass('modal-overlay-visible')
+                            }
+                        });
+                    }).on('close', function () {
+                        $overlay.off('removeClass');
+                        $overlay.removeClass('modal-overlay-visible')
+                    });
+                }
+
+                if (Common.SharedSettings.get('android')) {
+                    $$('.view.search-settings-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
+                    $$('.view.search-settings-view .navbar').prependTo('.view.search-settings-view > .pages > .page');
+                }
+            },
+
+            showSearch: function () {
+                var me = this,
+                    searchBar = $$('.searchbar.document');
+
+                if (searchBar.length < 1) {
+                    $(me.el).find('.pages .page').first().prepend(_layout.find('#search-panel-view').html());
+
+                    me.fireEvent('searchbar:render', me);
+                    me.fireEvent('searchbar:show', me);
+
+                    searchBar = $$('.searchbar.document');
+
+                    _.defer(function() {
+                        uiApp.showNavbar(searchBar);
+
+                        searchBar.transitionEnd(function () {
+                            if (!searchBar.hasClass('navbar-hidden')) {
+                                $('.searchbar.search input').focus();
+                            }
+                        });
+                    }, 10);
+                }
+            },
+
+            hideSearch: function () {
+                var me = this,
+                    searchBar = $$('.searchbar.document');
+
+                if (searchBar.length > 0) {
+                    // Animating
+                    if (searchBar.hasClass('.navbar-hidding')) {
+                        return;
+                    }
+
+                    _.defer(function() {
+                        searchBar.transitionEnd(function () {
+                            me.fireEvent('searchbar:hide', me);
+                            searchBar.remove();
+                        });
+
+                        uiApp.hideNavbar(searchBar);
+                    }, 10);
+                }
+            }
+        }
+    })());
+});

apps/documenteditor/mobile/app/view/Toolbar.js

@@ -110,64 +110,11 @@ define([
             },
 
             showSearch: function () {
-                var me = this,
+                DE.getController('Search').showSearch();
-                    searchBar = $$('.searchbar.document');
-
-                if (searchBar.length < 1) {
-                    $(me.el).find('.pages .page').first().prepend(_.template(
-                        '<form class="searchbar document navbar navbar-hidden">' +
-                            '<div class="searchbar-input">' +
-                                '<input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>' +
-                            '</div>' +
-                            '<p class="buttons-row">' +
-                                '<a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>' +
-                                '<a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>' +
-                            '</p>' +
-                        '</form>', {}
-                    ));
-                    me.fireEvent('searchbar:render', me);
-
-                    searchBar = $$('.searchbar.document');
-
-                    if (Common.SharedSettings.get('android')) {
-                        searchBar.find('.buttons-row').css('margin-left', '10px');
-                        searchBar.find('.buttons-row a').css('min-width', '0px');
-                    } else {
-                        searchBar.find('.buttons-row .next').css('margin-left', '10px');
-                    }
-
-                    _.defer(function() {
-                        uiApp.showNavbar(searchBar);
-
-                        searchBar.transitionEnd(function () {
-                            if (!searchBar.hasClass('navbar-hidden')) {
-                                me.fireEvent('searchbar:show', me);
-                                $('.searchbar input').focus();
-                            }
-                        });
-                    }, 10);
-                }
             },
 
             hideSearch: function () {
-                var me = this,
+                DE.getController('Search').hideSearch();
-                    searchBar = $$('.searchbar.document');
-
-                if (searchBar.length > 0) {
-                    // Animating
-                    if (searchBar.hasClass('.navbar-hidding')) {
-                        return;
-                    }
-
-                    _.defer(function() {
-                        searchBar.transitionEnd(function () {
-                            me.fireEvent('searchbar:hide', me);
-                            searchBar.remove();
-                        });
-
-                        uiApp.hideNavbar(searchBar);
-                    }, 10);
-                }
             },
 
             // Editor

apps/documenteditor/mobile/resources/css/app-ios.css

@@ -5865,89 +5865,75 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
 .container-settings.popover {
   width: 360px;
 }
-.container-edit.popup .list-block ul,
+.settings.popup .list-block ul,
-.container-add.popup .list-block ul,
+.settings.popover .list-block ul {
-.container-settings.popup .list-block ul,
-.container-edit.popover .list-block ul,
-.container-add.popover .list-block ul,
-.container-settings.popover .list-block ul {
   border-radius: 0 !important;
   background: #fff;
 }
-.container-edit.popup .list-block:first-child,
+.settings.popup .list-block ul:last-child:after,
-.container-add.popup .list-block:first-child,
+.settings.popover .list-block ul:last-child:after {
-.container-settings.popup .list-block:first-child,
+  content: '';
-.container-edit.popover .list-block:first-child,
+  position: absolute;
-.container-add.popover .list-block:first-child,
+  left: 0;
-.container-settings.popover .list-block:first-child {
+  bottom: 0;
+  right: auto;
+  top: auto;
+  height: 1px;
+  width: 100%;
+  background-color: #c8c7cc;
+  display: block;
+  z-index: 15;
+  -webkit-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+html.pixel-ratio-2 .settings.popup .list-block ul:last-child:after,
+html.pixel-ratio-2 .settings.popover .list-block ul:last-child:after {
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+html.pixel-ratio-3 .settings.popup .list-block ul:last-child:after,
+html.pixel-ratio-3 .settings.popover .list-block ul:last-child:after {
+  -webkit-transform: scaleY(0.33);
+  transform: scaleY(0.33);
+}
+.settings.popup .list-block:first-child,
+.settings.popover .list-block:first-child {
   margin-top: 0;
 }
-.container-edit.popup .list-block li:first-child a,
+.settings.popup .list-block li:first-child a,
-.container-add.popup .list-block li:first-child a,
+.settings.popover .list-block li:first-child a,
-.container-settings.popup .list-block li:first-child a,
+.settings.popup .list-block li:last-child a,
-.container-edit.popover .list-block li:first-child a,
+.settings.popover .list-block li:last-child a {
-.container-add.popover .list-block li:first-child a,
-.container-settings.popover .list-block li:first-child a,
-.container-edit.popup .list-block li:last-child a,
-.container-add.popup .list-block li:last-child a,
-.container-settings.popup .list-block li:last-child a,
-.container-edit.popover .list-block li:last-child a,
-.container-add.popover .list-block li:last-child a,
-.container-settings.popover .list-block li:last-child a {
   border-radius: 0 !important;
 }
-.container-edit.popup > .content-block,
+.settings.popup > .content-block,
-.container-add.popup > .content-block,
+.settings.popover > .content-block,
-.container-settings.popup > .content-block,
+.settings.popup .popover-inner > .content-block,
-.container-edit.popover > .content-block,
+.settings.popover .popover-inner > .content-block {
-.container-add.popover > .content-block,
-.container-settings.popover > .content-block,
-.container-edit.popup .popover-inner > .content-block,
-.container-add.popup .popover-inner > .content-block,
-.container-settings.popup .popover-inner > .content-block,
-.container-edit.popover .popover-inner > .content-block,
-.container-add.popover .popover-inner > .content-block,
-.container-settings.popover .popover-inner > .content-block {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   color: #000;
 }
-.container-edit.popup .popover-view,
+.settings.popup .popover-view,
-.container-add.popup .popover-view,
+.settings.popover .popover-view {
-.container-settings.popup .popover-view,
-.container-edit.popover .popover-view,
-.container-add.popover .popover-view,
-.container-settings.popover .popover-view {
   border-radius: 13px;
 }
-.container-edit.popup .popover-view > .pages,
+.settings.popup .popover-view > .pages,
-.container-add.popup .popover-view > .pages,
+.settings.popover .popover-view > .pages {
-.container-settings.popup .popover-view > .pages,
-.container-edit.popover .popover-view > .pages,
-.container-add.popover .popover-view > .pages,
-.container-settings.popover .popover-view > .pages {
   border-radius: 13px;
 }
-.container-edit .categories,
+.settings .categories {
-.container-add .categories,
-.container-settings .categories {
   width: 100%;
 }
-.container-edit .categories > .buttons-row,
+.settings .categories > .buttons-row {
-.container-add .categories > .buttons-row,
-.container-settings .categories > .buttons-row {
   width: 100%;
 }
-.container-edit .categories > .buttons-row .button,
+.settings .categories > .buttons-row .button {
-.container-add .categories > .buttons-row .button,
-.container-settings .categories > .buttons-row .button {
   padding: 0 1px;
 }
-.container-edit .popover-inner,
+.settings .popover-inner {
-.container-add .popover-inner,
-.container-settings .popover-inner {
   height: 400px;
 }
 .dataview.page-content {
@@ -6237,11 +6223,11 @@ html.pixel-ratio-3 .color-palette a {
     background-size: auto;
   }
 }
-.tablet .searchbar.document.replace .center .searchbar-input:first-child {
+.tablet .searchbar.document.replace .center .searchbar:first-child {
   margin-right: 10px;
 }
 .tablet .searchbar.document.replace .center .replace {
-  display: block;
+  display: flex;
 }
 .tablet .searchbar.document.replace .right .replace {
   display: flex;
@@ -6250,6 +6236,10 @@ html.pixel-ratio-3 .color-palette a {
 .tablet .searchbar.document .center {
   width: 100%;
 }
+.tablet .searchbar.document .center .searchbar {
+  background: inherit;
+  padding: 0;
+}
 .tablet .searchbar.document .center .replace {
   display: none;
 }
@@ -6286,6 +6276,13 @@ html.pixel-ratio-3 .color-palette a {
 .phone .searchbar.document .center {
   width: 100%;
 }
+.phone .searchbar.document .center .searchbar {
+  background: inherit;
+  padding: 0;
+}
+.phone .searchbar.document .center .searchbar:after {
+  content: none;
+}
 .phone .searchbar.document .center .replace {
   display: none;
 }

apps/documenteditor/mobile/resources/css/app-material.css

@@ -5866,6 +5866,67 @@ html.pixel-ratio-3 .color-palette a {
     background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
   }
 }
+.tablet .searchbar.document.replace .center > .replace {
+  display: flex;
+}
+.tablet .searchbar.document.replace .right .replace {
+  display: flex;
+}
+.tablet .searchbar.document .center {
+  width: 100%;
+  display: flex;
+  margin: 0;
+  overflow: visible;
+}
+.tablet .searchbar.document .center .searchbar {
+  overflow: visible;
+}
+.tablet .searchbar.document .center .searchbar.search {
+  padding: 0;
+}
+.tablet .searchbar.document .center > .replace {
+  display: none;
+}
+.tablet .searchbar.document .right .replace {
+  display: none;
+}
+.phone .searchbar.document.replace {
+  height: 96px;
+}
+.phone .searchbar.document.replace .left {
+  margin-top: -48px;
+}
+.phone .searchbar.document.replace .center .replace {
+  display: block;
+}
+.phone .searchbar.document.replace .right .replace {
+  display: flex;
+}
+.phone .searchbar.document .left,
+.phone .searchbar.document .center,
+.phone .searchbar.document .right {
+  flex-direction: column;
+}
+.phone .searchbar.document .center {
+  width: 100%;
+  margin: 0;
+  overflow: visible;
+}
+.phone .searchbar.document .center .searchbar {
+  padding: 0;
+}
+.phone .searchbar.document .center .replace {
+  display: none;
+}
+.phone .searchbar.document .right > p {
+  margin: 0;
+}
+.phone .searchbar.document .right > p a.link {
+  height: 48px;
+}
+.phone .searchbar.document .right .replace {
+  display: none;
+}
 i.icon.icon-expand-up {
   width: 17px;
   height: 17px;

apps/documenteditor/mobile/resources/less/ios/_search.less

@@ -4,12 +4,12 @@
   // Replace mode
   .searchbar.document.replace {
     .center {
-      .searchbar-input:first-child {
+      .searchbar:first-child {
         margin-right: 10px;
       }
 
       .replace {
-        display: block;
+        display: flex;
       }
     }
 
@@ -26,6 +26,11 @@
     .center {
       width: 100%;
 
+      .searchbar {
+        background: inherit;
+        padding: 0;
+      }
+
       .replace {
         display: none;
       }
@@ -85,6 +90,15 @@
     .center {
       width: 100%;
 
+      .searchbar {
+        background: inherit;
+        padding: 0;
+
+        &:after {
+          content: none;
+        }
+      }
+
       .replace {
         display: none;
       }

apps/documenteditor/mobile/resources/less/material/_search.less

@@ -0,0 +1,112 @@
+// Search
+
+.tablet {
+  // Replace mode
+  .searchbar.document.replace {
+    .center {
+      > .replace {
+        display: flex;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .center {
+      width: 100%;
+      display: flex;
+      margin: 0;
+      overflow: visible;
+
+      .searchbar {
+        overflow: visible;
+
+        &.search {
+          padding: 0;
+        }
+      }
+
+      > .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      .replace {
+        display: none;
+      }
+    }
+  }
+}
+
+@phoneSearchHeight: 48px;
+
+.phone {
+  // Replace mode
+  .searchbar.document.replace {
+    height: @phoneSearchHeight * 2;
+
+    .left {
+      margin-top: -@phoneSearchHeight;
+    }
+
+    .center {
+      .replace {
+        display: block;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+      }
+    }
+  }
+
+  // Search mode
+  .searchbar.document {
+    .left,
+    .center,
+    .right {
+      flex-direction: column;
+    }
+
+    .left {
+      //
+    }
+
+    .center {
+      width: 100%;
+      margin: 0;
+      overflow: visible;
+
+      .searchbar {
+        padding: 0;
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+
+    .right {
+      > p {
+        margin: 0;
+
+        a.link {
+          height: @phoneSearchHeight;
+        }
+      }
+
+      .replace {
+        display: none;
+      }
+    }
+  }
+}