From 218f6c4925a9fd9b57fc3f617acc0be6aeba90c9 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 7 Jun 2022 17:57:01 +0300 Subject: [PATCH 1/4] [forms] Add search bar --- apps/common/forms/resources/less/common.less | 5 + apps/common/main/lib/view/SearchBar.js | 5 +- .../main/resources/less/searchdialog.less | 2 +- apps/documenteditor/forms/app.js | 5 +- .../app/controller/ApplicationController.js | 4 + .../forms/app/controller/SearchBar.js | 147 ++++++++++++++++++ .../forms/app/view/ApplicationView.js | 8 +- apps/documenteditor/forms/app_dev.js | 5 +- 8 files changed, 173 insertions(+), 8 deletions(-) create mode 100644 apps/documenteditor/forms/app/controller/SearchBar.js diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less index c49c2dfc8..0355b75d4 100644 --- a/apps/common/forms/resources/less/common.less +++ b/apps/common/forms/resources/less/common.less @@ -81,6 +81,7 @@ @import "../../../../common/main/resources/less/checkbox.less"; @import "../../../../common/main/resources/less/opendialog.less"; @import "../../../../common/main/resources/less/advanced-settings-window.less"; +@import "../../../../common/main/resources/less/searchdialog.less"; @toolbarBorderColor: @border-toolbar-ie; @toolbarBorderColor: @border-toolbar; @@ -681,4 +682,8 @@ .font-size-large { .fontsize(@font-size-large); +} + +.search-bar { + z-index: 50; } \ No newline at end of file diff --git a/apps/common/main/lib/view/SearchBar.js b/apps/common/main/lib/view/SearchBar.js index ec1fe6c6d..dee0a4d02 100644 --- a/apps/common/main/lib/view/SearchBar.js +++ b/apps/common/main/lib/view/SearchBar.js @@ -39,7 +39,8 @@ */ define([ - 'common/main/lib/component/Window' + 'common/main/lib/component/Window', + 'common/main/lib/component/Button' ], function () { 'use strict'; @@ -132,7 +133,7 @@ define([ }, show: function(text) { - var top = $('#app-title').height() + $('#toolbar').height() + 2, + var top = ($('#app-title').length > 0 ? $('#app-title').height() : 0) + $('#toolbar').height() + 2, left = Common.Utils.innerWidth() - ($('#right-menu').is(':visible') ? $('#right-menu').width() : 0) - this.options.width - 32; Common.UI.Window.prototype.show.call(this, left, top); diff --git a/apps/common/main/resources/less/searchdialog.less b/apps/common/main/resources/less/searchdialog.less index 8e0ec2cab..7904cd623 100644 --- a/apps/common/main/resources/less/searchdialog.less +++ b/apps/common/main/resources/less/searchdialog.less @@ -85,7 +85,7 @@ .search-bar { z-index: 950; .box { - padding: 16px; + padding: 15px; display: flex; input[type=text] { width: 192px; diff --git a/apps/documenteditor/forms/app.js b/apps/documenteditor/forms/app.js index 5535a30bf..273f140f5 100644 --- a/apps/documenteditor/forms/app.js +++ b/apps/documenteditor/forms/app.js @@ -140,7 +140,8 @@ require([ autoCreate: false, controllers : [ 'ApplicationController', - 'Plugins' + 'Plugins', + 'SearchBar' ] }); @@ -149,11 +150,13 @@ require([ require([ 'documenteditor/forms/app/controller/ApplicationController', 'documenteditor/forms/app/controller/Plugins', + 'documenteditor/forms/app/controller/SearchBar', 'documenteditor/forms/app/view/ApplicationView', 'common/main/lib/util/utils', 'common/main/lib/util/LocalStorage', 'common/main/lib/controller/Themes', 'common/main/lib/view/PluginDlg', + 'common/main/lib/view/SearchBar', 'common/forms/lib/view/modals' ], function() { app.start(); diff --git a/apps/documenteditor/forms/app/controller/ApplicationController.js b/apps/documenteditor/forms/app/controller/ApplicationController.js index ad40bed13..5e1012ed5 100644 --- a/apps/documenteditor/forms/app/controller/ApplicationController.js +++ b/apps/documenteditor/forms/app/controller/ApplicationController.js @@ -1348,6 +1348,7 @@ define([ Common.NotificationCenter.on('storage:image-insert', _.bind(this.insertImageFromStorage, this)); // set loaded image to control } DE.getController('Plugins').setApi(this.api); + DE.getController('SearchBar').setApi(this.api); this.updateWindowTitle(true); @@ -1414,6 +1415,9 @@ define([ embedConfig: this.embedConfig })).show(); break; + case 'search': + Common.NotificationCenter.trigger('search:show'); + break; } }, diff --git a/apps/documenteditor/forms/app/controller/SearchBar.js b/apps/documenteditor/forms/app/controller/SearchBar.js new file mode 100644 index 000000000..d6d3a3328 --- /dev/null +++ b/apps/documenteditor/forms/app/controller/SearchBar.js @@ -0,0 +1,147 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2020 + * + * 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 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * 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 + * + */ + +/** + * SearchBar.js + * + * Created by Julia Svinareva on 3.06.2022 + * Copyright (c) 2022 Ascensio System SIA. All rights reserved. + * + */ + +define([ + 'core', + 'common/main/lib/view/SearchBar' +], function () { + 'use strict'; + + DE.Controllers.SearchBar = Backbone.Controller.extend(_.extend({ + initialize: function() { + }, + + events: function() { + }, + + onLaunch: function() { + this._state = { + searchText: '' + }; + Common.NotificationCenter.on('search:show', _.bind(this.onSearchShow, this)); + }, + + setApi: function (api) { + this.api = api; + if (this.api) { + this.api.asc_registerCallback('asc_onSetSearchCurrent', _.bind(this.onApiUpdateSearchCurrent, this)); + } + return this; + }, + + onSearchShow: function () { + if (!this.searchBar) { + this.searchBar = new Common.UI.SearchBar({ + showOpenPanel: false, + width: 303 + }); + this.searchBar.on({ + 'search:back': _.bind(this.onSearchNext, this, 'back'), + 'search:next': _.bind(this.onSearchNext, this, 'next'), + 'search:input': _.bind(this.onInputSearchChange, this), + 'search:keydown': _.bind(this.onSearchNext, this, 'keydown'), + 'show': _.bind(this.onSelectSearchingResults, this, true), + 'hide': _.bind(this.onSelectSearchingResults, this, false) + }); + } + if (!this.searchBar.isVisible()) { + this.searchBar.show(this.api.asc_GetSelectedText() || this._state.searchText); + } + }, + + onSelectSearchingResults: function (val) { + if (this._state.isHighlightedResults !== val) { + this.api.asc_selectSearchingResults(val); + this._state.isHighlightedResults = val; + } + }, + + onApiUpdateSearchCurrent: function (current, all) { + this.searchBar && this.searchBar.disableNavButtons(current, all); + }, + + onSearchNext: function (type, arg) { + var text = arg[0], + event = arg[1]; + if (text && text.length > 0 && (type === 'keydown' && event.keyCode === 13 || type !== 'keydown')) { + this._state.searchText = text; + if (this.onQuerySearch(type) && this._searchTimer) { + if (this._searchTimer) { + clearInterval(this._searchTimer); + this._searchTimer = undefined; + } + } + } + }, + + onQuerySearch: function (d, w) { + var searchSettings = new AscCommon.CSearchSettings(); + searchSettings.put_Text(this._state.searchText); + searchSettings.put_MatchCase(false); + searchSettings.put_WholeWords(false); + if (!this.api.asc_findText(searchSettings, d != 'back')) { + this.searchBar.disableNavButtons(); + return false; + } + return true; + }, + + onInputSearchChange: function (text) { + var text = text[0]; + if (this._state.searchText !== text) { + this._state.newSearchText = text; + this._lastInputChange = (new Date()); + if (this._searchTimer === undefined) { + var me = this; + this._searchTimer = setInterval(function() { + if ((new Date()) - me._lastInputChange < 400) return; + + me._state.searchText = me._state.newSearchText; + (me._state.newSearchText !== '') && me.onQuerySearch(); + clearInterval(me._searchTimer); + me._searchTimer = undefined; + }, 10); + } + } + }, + + }, DE.Controllers.SearchBar || {})); +}); \ No newline at end of file diff --git a/apps/documenteditor/forms/app/view/ApplicationView.js b/apps/documenteditor/forms/app/view/ApplicationView.js index 6c92b32a8..f8975a4bb 100644 --- a/apps/documenteditor/forms/app/view/ApplicationView.js +++ b/apps/documenteditor/forms/app/view/ApplicationView.js @@ -18,11 +18,12 @@ define([ menu: new Common.UI.Menu({ cls: 'shifted-right', items: [ - {caption: this.txtPrint, value: 'print', iconCls: 'mi-icon svg-icon print'}, - {caption: '--'}, {caption: this.txtDownload, value: 'download', iconCls: 'mi-icon svg-icon download'}, {caption: this.txtDownloadDocx, value: 'download-docx', iconCls: 'mi-icon svg-icon download'}, {caption: this.txtDownloadPdf, value: 'download-pdf', iconCls: 'mi-icon'}, + {caption: this.txtPrint, value: 'print', iconCls: 'mi-icon svg-icon print'}, + {caption: '--'}, + {caption: this.txtSearch, value: 'search', iconCls: 'mi-icon svg-icon search'}, {caption: '--'}, {caption: this.txtTheme, value: 'theme', iconCls: 'mi-icon', menu : this.mnuThemes = new Common.UI.Menu({ @@ -148,7 +149,8 @@ define([ textRedo: 'Redo', textZoom: 'Zoom', textFitToPage: 'Fit to Page', - textFitToWidth: 'Fit to Width' + textFitToWidth: 'Fit to Width', + txtSearch: 'Search' }, DE.Views.ApplicationView || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/forms/app_dev.js b/apps/documenteditor/forms/app_dev.js index d9800d9c6..93a96c2d5 100644 --- a/apps/documenteditor/forms/app_dev.js +++ b/apps/documenteditor/forms/app_dev.js @@ -130,7 +130,8 @@ require([ autoCreate: false, controllers : [ 'ApplicationController', - 'Plugins' + 'Plugins', + 'SearchBar' ] }); @@ -139,11 +140,13 @@ require([ require([ 'documenteditor/forms/app/controller/ApplicationController', 'documenteditor/forms/app/controller/Plugins', + 'documenteditor/forms/app/controller/SearchBar', 'documenteditor/forms/app/view/ApplicationView', 'common/main/lib/util/utils', 'common/main/lib/util/LocalStorage', 'common/main/lib/controller/Themes', 'common/main/lib/view/PluginDlg', + 'common/main/lib/view/SearchBar', 'common/forms/lib/view/modals' ], function() { window.compareVersions = true; From 393a5fb7ee3ef7fc60b15a66fa0e151a6f1a2038 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Wed, 8 Jun 2022 23:25:35 +0300 Subject: [PATCH 2/4] [DE PE SSE embed] Move search into context menu, fix icon-menu-sprite --- .../embed/resources/img/icon-menu-sprite.svg | 390 ++++++++++-------- apps/common/embed/resources/less/common.less | 8 +- apps/documenteditor/embed/index.html | 1 - apps/documenteditor/embed/index.html.deploy | 1 - .../embed/js/ApplicationController.js | 18 +- .../embed/js/ApplicationView.js | 8 +- apps/documenteditor/embed/js/SearchBar.js | 32 +- apps/presentationeditor/embed/index.html | 1 - .../embed/index.html.deploy | 1 - .../embed/js/ApplicationController.js | 49 ++- .../embed/js/ApplicationView.js | 8 +- apps/presentationeditor/embed/js/SearchBar.js | 29 +- apps/spreadsheeteditor/embed/index.html | 3 +- .../spreadsheeteditor/embed/index.html.deploy | 1 - .../embed/js/ApplicationController.js | 45 +- .../embed/js/ApplicationView.js | 8 +- apps/spreadsheeteditor/embed/js/SearchBar.js | 32 +- 17 files changed, 356 insertions(+), 279 deletions(-) diff --git a/apps/common/embed/resources/img/icon-menu-sprite.svg b/apps/common/embed/resources/img/icon-menu-sprite.svg index c04600809..cad475b9e 100644 --- a/apps/common/embed/resources/img/icon-menu-sprite.svg +++ b/apps/common/embed/resources/img/icon-menu-sprite.svg @@ -1,170 +1,220 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less index 5d588ee1d..de08df890 100644 --- a/apps/common/embed/resources/less/common.less +++ b/apps/common/embed/resources/less/common.less @@ -503,7 +503,7 @@ @icon-height: 20px; .svg-icon { background: data-uri('../../../../common/embed/resources/img/icon-menu-sprite.svg') no-repeat; - background-size: @icon-width*22 @icon-height*2; + background-size: @icon-width*29 @icon-height*2; &.download { background-position: -@icon-width 0; @@ -561,13 +561,13 @@ background-position: -@icon-width*18 0; } &.search { - background-position: -@icon-width*19 0; + background-position: -@icon-width*24 0; } &.search-arrow-up { - background-position: -@icon-width*20 0; + background-position: -@icon-width*27 0; } &.search-arrow-down { - background-position: -@icon-width*21 0; + background-position: -@icon-width*28 0; } } diff --git a/apps/documenteditor/embed/index.html b/apps/documenteditor/embed/index.html index c6b115212..da514210f 100644 --- a/apps/documenteditor/embed/index.html +++ b/apps/documenteditor/embed/index.html @@ -198,7 +198,6 @@
-
of 0
-
of 0
-
of 0
-
of 0