Commit b2aea5eb authored by Alexander Yuzhin's avatar Alexander Yuzhin

[SE mobile] Add Search.

parent ef694c4c
......@@ -71,4 +71,10 @@
background-image: none;
}
}
}
.list-block {
.item-link.list-button {
color: @themeColor;
}
}
\ No newline at end of file
......@@ -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() {
......
......@@ -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'
......
This diff is collapsed.
......@@ -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,83 +96,7 @@ 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
// Handlers
onBack: function (e) {
var me = this;
......@@ -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',
textNoTextFound : 'Text not found'
stayButtonText : 'Stay on this Page'
}
})());
})(), SSE.Controllers.Toolbar || {}))
});
\ No newline at end of file
<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>
......
<!--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>
\ No newline at end of file
......@@ -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({
......
/*
*
* (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 || {}))
});
\ No newline at end of file
......@@ -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,
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);
}
SSE.getController('Search').showSearch();
},
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);
}
SSE.getController('Search').hideSearch();
},
// Editor
......@@ -200,5 +147,5 @@ define([
// SSE.getController('Settings').showModal();
}
}
})());
})(), SSE.Views.Toolbar || {}))
});
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -2,7 +2,7 @@
@appStatusbarHeight: 30px;
.navbar-through {
> .page {
> .page.editor {
padding-top: @appToolbarHeight;
}
}
......
......@@ -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
......
......@@ -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,
......
......@@ -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: 0px 4px;
//vertical-align: top;
display: inline-block;
padding: 0 4px;
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%;
}
......
// 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;
}
}
......
// 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;
}
}
}
}
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment