[SE mobile] Add Search.

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

@@ -72,3 +72,9 @@
     }
   }
 }
+
+.list-block {
+  .item-link.list-button {
+    color: @themeColor;
+  }
+}

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

@@ -43,8 +43,11 @@
 
 define([
     'core',
+    'jquery',
+    'underscore',
+    'backbone',
     'documenteditor/mobile/app/view/Settings'
-], function (core) {
+], function (core, $, _, Backbone) {
     'use strict';
 
     DE.Controllers.Settings = Backbone.Controller.extend(_.extend((function() {

apps/spreadsheeteditor/mobile/app-dev.js

@@ -116,6 +116,7 @@ require([
         controllers : [
             'Editor',
             'Toolbar',
+            'Search',
             'Main',
             'DocumentHolder'
             , 'CellEditor'
@@ -156,6 +157,9 @@ require([
         // Default title for modals
         modalTitle: 'ONLYOFFICE',
 
+        // Enable tap hold events
+        tapHold: true,
+
         // If it is webapp, we can enable hash navigation:
 //        pushState: false,
 
@@ -182,6 +186,7 @@ require([
         'common/main/lib/util/utils',
         'spreadsheeteditor/mobile/app/controller/Editor',
         'spreadsheeteditor/mobile/app/controller/Toolbar',
+        'spreadsheeteditor/mobile/app/controller/Search',
         'spreadsheeteditor/mobile/app/controller/Main',
         'spreadsheeteditor/mobile/app/controller/DocumentHolder'
         , 'spreadsheeteditor/mobile/app/controller/CellEditor'

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

@@ -0,0 +1,367 @@
+/*
+ *
+ * (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
+ *  Spreadsheet Editor
+ *
+ *  Created by Alexander Yuzhin on 12/5/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'jquery',
+    'underscore',
+    'backbone',
+    'spreadsheeteditor/mobile/app/view/Search'
+], function (core, $, _, Backbone) {
+    'use strict';
+
+    SSE.Controllers.Search = Backbone.Controller.extend(_.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,
+                        'searchbar:showsettings': this.onSearchbarSettings
+                    }
+                });
+            },
+
+            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,
+                    searchString    = Common.SharedSettings.get('search-search') || '',
+                    replaceString   = Common.SharedSettings.get('search-replace')|| '';
+
+                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.replaceBtn = $('.searchbar.document .link.replace');
+
+                me.searchPrev.single('click', _.bind(me.onSearchPrev, me));
+                me.searchNext.single('click', _.bind(me.onSearchNext, me));
+                me.replaceBtn.single('click', _.bind(me.onReplace, me));
+
+                $$('.searchbar.document .link.replace').on('taphold', _.bind(me.onReplaceAll, me));
+
+                me.searchBar.search(searchString);
+                me.replaceBar.search(replaceString);
+            },
+
+            onSearchbarSettings: function (view) {
+                var me              = this,
+                    isReplace       = Common.SharedSettings.get('search-is-replace') === true,
+                    searchIn        = Common.SharedSettings.get('search-in') === 'sheet' ? 'sheet' : 'workbook',
+                    isMatchCase     = Common.SharedSettings.get('search-match-case') === true,
+                    isMatchCell     = Common.SharedSettings.get('search-match-cell') === true,
+                    $pageSettings   = $('.page[data-page=search-settings]'),
+                    $inputType      = $pageSettings.find('input[name=search-type]'),
+                    $inputSearchIn  = $pageSettings.find('input[name=search-in]'),
+                    $inputMatchCase = $pageSettings.find('#search-match-case input:checkbox'),
+                    $inputMatchCell = $pageSettings.find('#search-match-cell input:checkbox');
+
+                $inputType.val([isReplace ? 'replace' : 'search']);
+                $inputSearchIn.val([searchIn]);
+                $inputMatchCase.prop('checked', isMatchCase);
+                $inputMatchCell.prop('checked', isMatchCell);
+
+                // init events
+                $inputType.single('change',      _.bind(me.onTypeChange, me));
+                $inputSearchIn.single('change',  _.bind(me.onSearchInChange, me));
+                $inputMatchCase.single('change', _.bind(me.onMatchCaseClick, me));
+                $inputMatchCell.single('change', _.bind(me.onMatchCellClick, me));
+            },
+
+            onSearchbarShow: function(bar) {
+                _isShow = true;
+                // this.api.asc_selectSearchingResults(Common.SharedSettings.get('search-highlight'));
+            },
+
+            onSearchEnable: function (bar) {
+                this.replaceBar.container.removeClass('searchbar-active');
+            },
+
+            onSearchbarHide: function(bar) {
+                _isShow = false;
+                // this.api.asc_selectSearchingResults(false);
+            },
+
+            onSearchChange: function(search) {
+                var me = this,
+                    isEmpty = (search.query.trim().length < 1);
+
+                Common.SharedSettings.set('search-search', search.query);
+
+                _.each([me.searchPrev, me.searchNext, me.replaceBtn], function(btn) {
+                    btn.toggleClass('disabled', isEmpty);
+                });
+            },
+
+            onSearchClear: function(search) {
+                Common.SharedSettings.set('search-search', '');
+//            window.focus();
+//            document.activeElement.blur();
+            },
+
+            onReplaceChange: function(replace) {
+                var me = this,
+                    isEmpty = (replace.query.trim().length < 1);
+
+                Common.SharedSettings.set('search-replace', replace.query);
+            },
+
+            onReplaceEnable: function (bar) {
+                this.searchBar.container.removeClass('searchbar-active');
+            },
+
+            onReplaceClear: function(replace) {
+                Common.SharedSettings.set('search-replace', '');
+            },
+
+            onSearchPrev: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'back');
+            },
+
+            onSearchNext: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'next');
+            },
+
+            onReplace: function (btn) {
+                this.onQueryReplace(this.searchBar.query, this.replaceBar.query);
+            },
+
+            onReplaceAll: function (e) {
+                var me = this,
+                    popover = [
+                        '<div class="popover" style="width: auto;">',
+                            '<div class="popover-inner">',
+                                '<div class="list-block">',
+                                    '<ul>',
+                                        '<li><a href="#" id="replace-all" class="item-link list-button">{0}</li>'.format(me.textReplaceAll),
+                                    '</ul>',
+                                '</div>',
+                            '</div>',
+                        '</div>'
+                    ].join('');
+
+                popover = uiApp.popover(popover, $$(e.currentTarget));
+
+                $('#replace-all').single('click', _.bind(function () {
+                    me.onQueryReplaceAll(this.searchBar.query, this.replaceBar.query);
+                    uiApp.closeModal(popover);
+                }, me))
+            },
+
+            onQuerySearch: function(query, direction) {
+                var matchCase = Common.SharedSettings.get('search-match-case') || false,
+                    matchCell = Common.SharedSettings.get('search-match-cell') || false,
+                    lookInSheet = Common.SharedSettings.get('search-in') === 'sheet';
+
+                if (query && query.length) {
+                    var options = new Asc.asc_CFindOptions();
+                    options.asc_setFindWhat(query);
+                    options.asc_setScanForward(direction != 'back');
+                    options.asc_setIsMatchCase(matchCase);
+                    options.asc_setIsWholeCell(matchCell);
+                    options.asc_setScanOnOnlySheet(lookInSheet);
+                    // options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
+                    // options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked?Asc.c_oAscFindLookIn.Formulas:Asc.c_oAscFindLookIn.Value);
+
+                    if (!this.api.asc_findText(options)) {
+                        var me = this;
+                        uiApp.alert(
+                            '',
+                            me.textNoTextFound,
+                            function () {
+                                me.searchBar.input.focus();
+                            }
+                        );
+                    }
+                }
+
+            },
+
+            onQueryReplace: function(search, replace) {
+                var matchCase = Common.SharedSettings.get('search-match-case') || false,
+                    matchCell = Common.SharedSettings.get('search-match-cell') || false,
+                    lookInSheet = Common.SharedSettings.get('search-in') === 'sheet';
+
+                if (search && search.length) {
+                    this.api.isReplaceAll = false;
+
+                    var options = new Asc.asc_CFindOptions();
+                    options.asc_setFindWhat(search);
+                    options.asc_setReplaceWith(replace);
+                    options.asc_setIsMatchCase(matchCase);
+                    options.asc_setIsWholeCell(matchCell);
+                    options.asc_setScanOnOnlySheet(lookInSheet);
+                    // options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
+                    // options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked?Asc.c_oAscFindLookIn.Formulas:Asc.c_oAscFindLookIn.Value);
+                    options.asc_setIsReplaceAll(false);
+
+                    this.api.asc_replaceText(options);
+                }
+            },
+
+            onQueryReplaceAll: function(search, replace) {
+                var matchCase = Common.SharedSettings.get('search-match-case') || false,
+                    matchCell = Common.SharedSettings.get('search-match-cell') || false,
+                    lookInSheet = Common.SharedSettings.get('search-in') === 'sheet';
+
+                if (search && search.length) {
+                    this.api.isReplaceAll = true;
+
+                    var options = new Asc.asc_CFindOptions();
+                    options.asc_setFindWhat(search);
+                    options.asc_setReplaceWith(replace);
+                    options.asc_setIsMatchCase(matchCase);
+                    options.asc_setIsWholeCell(matchCell);
+                    options.asc_setScanOnOnlySheet(lookInSheet);
+                    // options.asc_setScanByRows(this.dlgSearch.menuSearch.menu.items[0].checked);
+                    // options.asc_setLookIn(this.dlgSearch.menuLookin.menu.items[0].checked?Asc.c_oAscFindLookIn.Formulas:Asc.c_oAscFindLookIn.Value);
+                    options.asc_setIsReplaceAll(true);
+
+                    this.api.asc_replaceText(options);
+                }
+            },
+
+            onTypeChange: function (e) {
+                var $target = $(e.currentTarget),
+                    isReplace = ($target.val() === 'replace');
+
+                Common.SharedSettings.set('search-is-replace', isReplace);
+                $('.searchbar.document').toggleClass('replace', isReplace);
+            },
+
+            onSearchInChange: function (e) {
+                Common.SharedSettings.set('search-in', $(e.currentTarget).val());
+            },
+
+            onMatchCaseClick: function (e) {
+                Common.SharedSettings.set('search-match-case', $(e.currentTarget).is(':checked'));
+            },
+
+            onMatchCellClick: function (e) {
+                Common.SharedSettings.set('search-match-cell', $(e.currentTarget).is(':checked'));
+            },
+
+            // API handlers
+
+            textNoTextFound: 'Text not found',
+            textReplaceAll: 'Replace All'
+        }
+    })(), SSE.Controllers.Search || {}))
+});

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

@@ -33,7 +33,7 @@
 
 /**
  *  Toolbar.js
- *  Document Editor
+ *  Spreadsheet Editor
  *
  *  Created by Maxim Kadushkin on 11/15/16
  *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
@@ -42,11 +42,14 @@
 
 define([
     'core',
+    'jquery',
+    'underscore',
+    'backbone',
     'spreadsheeteditor/mobile/app/view/Toolbar'
-], function (core) {
+], function (core, $, _, Backbone) {
     'use strict';
 
-    SSE.Controllers.Toolbar = Backbone.Controller.extend((function() {
+    SSE.Controllers.Toolbar = Backbone.Controller.extend(_.extend((function() {
         // private
         var _backUrl;
 
@@ -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,82 +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) {
-                    var findOptions = new Asc.asc_CFindOptions();
-                    findOptions.asc_setFindWhat(query);
-                    findOptions.asc_setScanForward(!(direction=='back'));
-                    findOptions.asc_setIsMatchCase(false);
-                    findOptions.asc_setIsWholeCell(false);
-                    findOptions.asc_setScanOnOnlySheet(true);
-                    findOptions.asc_setScanByRows(true);
-                    findOptions.asc_setLookIn(Asc.c_oAscFindLookIn.Formulas);
-
-                    if ( !this.api.asc_findText(findOptions) ) {
-                        uiApp.alert(
-                            '',
-                            this.textNoTextFound,
-                            function () {
-                                this.searchBar.input.focus();
-                            }.bind(this)
-                        );
-                    }
-                }
-            },
-
            // Handlers
 
             onBack: function (e) {
@@ -225,8 +145,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'
         }
-    })());
+    })(), SSE.Controllers.Toolbar || {}))
 });

apps/spreadsheeteditor/mobile/app/template/Editor.template

@@ -1,7 +1,7 @@
 <div class="views">
     <div class="view view-main">
         <div class="pages navbar-through">
-            <div data-page="index" class="page flex-horizontal">
+            <div data-page="index" class="page editor flex-horizontal">
                 <div id="editor_sdk" class="page-content no-fastclick">
                 </div>
             </div>

apps/spreadsheeteditor/mobile/app/template/Search.template

@@ -0,0 +1,130 @@
+<!--Search panel-->
+<div id="search-panel-view">
+    <div class="searchbar document navbar navbar-hidden">
+        <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 replace disabled"><%= scope.textReplace %></a>
+                </p>
+                <% } else { %>
+                <p class="buttons-row">
+                    <a href="#" class="link replace disabled"><%= scope.textReplace %></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"><%= isEdit ? scope.textFindAndReplace : scope.textFind %></div>
+            <div class="right"><% if (phone) { %><a href="#" class="link close-popup"><b><%= scope.textDone %></b></a><% } %></div>
+        </div>
+    </div>
+    <div class="page" data-page="search-settings">
+        <div class="page-content">
+            <% if (isEdit) { %>
+            <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"><%= scope.textFind %></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"><%= scope.textFindAndReplace %></div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <% } %>
+            <div class="content-block-title"><%= scope.textSearchIn %></div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="search-in" value="workbook">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textWorkbook %></div>
+                            </div>
+                        </label>
+                    </li>
+                    <li>
+                        <label class="label-radio item-content">
+                            <input type="radio" name="search-in" value="sheet">
+                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textSheet %></div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div id="search-match-case" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textMatchCase %></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-match-cell" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title"><%= scope.textMatchCell %></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/spreadsheeteditor/mobile/app/view/CellEditor.js

@@ -40,8 +40,10 @@
 
 define([
     'text!spreadsheeteditor/mobile/app/template/CellEditor.template',
+    'jquery',
+    'underscore',
     'backbone'
-], function (template, Backbone) {
+], function (template, $, _, Backbone) {
     'use strict';
 
     SSE.Views.CellEditor = Backbone.View.extend({

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

@@ -0,0 +1,202 @@
+/*
+ *
+ * (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
+ *  Spreadsheet Editor
+ *
+ *  Created by Alexander Yuzhin on 12/5/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!spreadsheeteditor/mobile/app/template/Search.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (searchTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.Views.Search = Backbone.View.extend(_.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,
+                    scope   : this
+                }));
+
+                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');
+                }
+
+                me.fireEvent('searchbar:showsettings', me);
+            },
+
+            showSearch: function () {
+                var me = this,
+                    searchBar = $$('.searchbar.document');
+
+                if (searchBar.length < 1) {
+
+                    $(_layout.find('#search-panel-view').html()).insertAfter($(me.el).find('#cell-editing-box'));
+                    // $(me.el).find('.pages .page').prepend(_layout.find('#search-panel-view').html());
+
+                    // Show replace mode if needed
+                    var isReplace = Common.SharedSettings.get('search-is-replace');
+                    $('.searchbar.document').toggleClass('replace', !_.isUndefined(isReplace) && (isReplace === true));
+
+                    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);
+                }
+            },
+
+            textFind: 'Find',
+            textFindAndReplace: 'Find and Replace',
+            textDone: 'Done',
+            textReplace: 'Replace',
+            textMatchCase: 'Match Case',
+            textMatchCell: 'Match Cell',
+            textSearchIn: 'Search In',
+            textWorkbook: 'Workbook',
+            textSheet: 'Sheet'
+        }
+    })(), SSE.Views.Search || {}))
+});

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

@@ -33,7 +33,7 @@
 
 /**
  *  Toolbar.js
- *  Document Editor
+ *  Spreadsheet Editor
  *
  *  Created by Maxim Kadushkin on 11/15/16
  *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
@@ -48,7 +48,7 @@ define([
 ], function (toolbarTemplate, $, _, Backbone) {
     'use strict';
 
-    SSE.Views.Toolbar = Backbone.View.extend((function() {
+    SSE.Views.Toolbar = Backbone.View.extend(_.extend((function() {
         // private
 
         return {
@@ -124,64 +124,11 @@ define([
             },
 
             showSearch: function () {
-                var me = this,
+                SSE.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,
+                SSE.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
@@ -200,5 +147,5 @@ define([
                 // SSE.getController('Settings').showModal();
             }
         }
-    })());
+    })(), SSE.Views.Toolbar || {}))
 });

apps/spreadsheeteditor/mobile/resources/less/app-common.less

@@ -2,7 +2,7 @@
 @appStatusbarHeight: 30px;
 
 .navbar-through {
-  > .page {
+  > .page.editor {
     padding-top: @appToolbarHeight;
   }
 }

apps/spreadsheeteditor/mobile/resources/less/app-ios.less

@@ -43,6 +43,18 @@
 //@import url('../../../../../vendor/framework7/src/less/ios/login-screen.less');
 @import url('../../../../../vendor/framework7/src/less/ios/disabled.less');
 
+// Disable text select
+* {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input, textarea {
+  -webkit-touch-callout:default;
+  -webkit-user-select:text;
+  user-select:text;
+}
+
 // Main Toolbar
 #editor-navbar.navbar .right a + a,
 #editor-navbar.navbar .left a + a {
@@ -62,11 +74,11 @@
 @import url('../../../../common/mobile/resources/less/ios/_color-palette.less');
 @import url('../../../../common/mobile/resources/less/ios/_about.less');
 
-@import url('ios/_search.less');
 @import url('ios/_icons.less');
 @import url('app-common');
 @import url('celleditor');
 @import url('statusbar');
+@import url('ios/_search.less');
 
 // Add Container
 

apps/spreadsheeteditor/mobile/resources/less/app-material.less

@@ -45,6 +45,17 @@
 @import url('../../../../../vendor/framework7/src/less/material/ripple.less');
 @import url('../../../../../vendor/framework7/src/less/material/disabled.less');
 
+// Disable text select
+* {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input, textarea {
+  -webkit-touch-callout:default;
+  -webkit-user-select:text;
+  user-select:text;
+}
 
 @import url('../../../../common/mobile/resources/less/_mixins.less');
 @import url('../../../../common/mobile/resources/less/material/_container.less');
@@ -61,6 +72,7 @@
 @import url('celleditor');
 @import url('statusbar');
 
+
 // Add Container
 
 #add-table,

apps/spreadsheeteditor/mobile/resources/less/celleditor.less

@@ -14,12 +14,14 @@
         box-sizing: border-box;
     }
 
-    border-bottom: solid 1px @gray-dark;
+    position: relative;
     min-height: @cellEditorHeight;
     background-color: #fff;
     display: flex;
     align-items: stretch;
     overflow: hidden;
+    z-index: 500;
+    .hairline(bottom, @gray-dark);//@toolbarBorderColor);
 
     .btn {
         border: 0 none;
@@ -33,22 +35,17 @@
 
     .group-name {
         float: left;
-        background-color: @gray-light;
+        background-color: @toolbarBg;
     }
 
     #ce-cell-name {
         display: inline-block;
         width: 90px;
-        //height: 100%;
+        padding: 0 4px;
-        padding: 0px 4px;
-        //vertical-align: top;
-        display: inline-block;
         border: 0 none;
         line-height: 30px;
         font-size: 17px;
         text-align: center;
-        //transition: none;
-        //-webkit-transition: none;
 
         &[disabled] {
             color: @gray-darker;
@@ -77,8 +74,9 @@
     }
 
     .group-content {
+        position: relative;
         padding-left: 1px;
-        border-left: 1px solid @gray-dark;
+        .hairline(left, @gray-dark);
         flex-grow: 1;
         height: 100%;
     }

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

@@ -1,15 +1,20 @@
 // Search
 
+.navbar-through .page > .searchbar {
+  top: @toolbarSize + @cellEditorHeight;
+  //position: relative;
+}
+
 .tablet {
   // Replace mode
   .searchbar.document.replace {
     .center {
-      .searchbar-input:first-child {
+      .searchbar:first-child {
         margin-right: 10px;
       }
 
       .replace {
-        display: block;
+        display: flex;
       }
     }
 
@@ -26,6 +31,11 @@
     .center {
       width: 100%;
 
+      .searchbar {
+        background: inherit;
+        padding: 0;
+      }
+
       .replace {
         display: none;
       }
@@ -49,7 +59,7 @@
     height: 88px;
 
     .left {
-      margin-top: -44px;
+      margin-top: -(44+30)px;
     }
 
     .center {
@@ -63,7 +73,7 @@
     }
 
     .right {
-      .replace {
+      > .replace {
         display: flex;
       }
     }
@@ -85,6 +95,15 @@
     .center {
       width: 100%;
 
+      .searchbar {
+        background: inherit;
+        padding: 0;
+
+        &:after {
+          content: none;
+        }
+      }
+
       .replace {
         display: none;
       }
@@ -95,7 +114,7 @@
         margin: 0;
       }
 
-      .replace {
+      > .replace {
         display: none;
       }
     }

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

@@ -0,0 +1,120 @@
+// Search
+
+.tablet {
+  // Replace mode
+  .searchbar.document.replace {
+    .center {
+      > .replace {
+        display: flex;
+      }
+    }
+
+    .right {
+      .replace {
+        display: flex;
+      }
+    }
+
+    .link.replace {
+      font-size: 16px;
+    }
+  }
+
+  // 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;
+
+    .link.replace {
+      font-size: 16px;
+    }
+
+    .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;
+      }
+    }
+  }
+}