From f69eb8ddfac00abb27a62815455f5f68fc3e42a9 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Sun, 10 Apr 2022 23:30:24 +0300 Subject: [PATCH] [SSE] Make results table in search panel --- apps/common/main/lib/view/SearchPanel.js | 47 ++++++++---- .../main/app/controller/Search.js | 5 ++ .../main/app/controller/Search.js | 73 +++++++------------ .../main/resources/less/leftmenu.less | 46 ++++++++++++ 4 files changed, 113 insertions(+), 58 deletions(-) diff --git a/apps/common/main/lib/view/SearchPanel.js b/apps/common/main/lib/view/SearchPanel.js index 48d96bfb9..64f43ff40 100644 --- a/apps/common/main/lib/view/SearchPanel.js +++ b/apps/common/main/lib/view/SearchPanel.js @@ -160,18 +160,6 @@ define([ this.$resultsContainer = $('#search-results'); this.$resultsContainer.hide(); - this.$resultsContainer.scroller = new Common.UI.Scroller({ - el: this.$resultsContainer, - includePadding: true, - useKeyboard: true, - minScrollbarLength: 40, - alwaysVisibleY: true - }); - Common.NotificationCenter.on('window:resize', function() { - me.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight()); - me.$resultsContainer.scroller.update({alwaysVisibleY: true}); - }); - Common.NotificationCenter.on('search:updateresults', _.bind(this.disableNavButtons, this)); if (window.SSE) { this.cmbWithin = new Common.UI.ComboBox({ @@ -244,7 +232,36 @@ define([ this.cmbWithin.setValue(0); this.cmbSearch.setValue(0); this.cmbLookIn.setValue(0); + + var tableTemplate = '
' + + '
' + this.textSheet + '
' + + '
' + this.textName + '
' + + '
' + this.textCell + '
' + + '
' + this.textValue + '
' + + '
' + this.textFormula + '
' + + '
' + + '
', + $resultTable = $(tableTemplate).appendTo(this.$resultsContainer); + this.$resultsContainer.scroller = new Common.UI.Scroller({ + el: $resultTable.find('.search-items'), + includePadding: true, + useKeyboard: true, + minScrollbarLength: 40, + alwaysVisibleY: true + }); + } else { + this.$resultsContainer.scroller = new Common.UI.Scroller({ + el: this.$resultsContainer, + includePadding: true, + useKeyboard: true, + minScrollbarLength: 40, + alwaysVisibleY: true + }); } + Common.NotificationCenter.on('window:resize', function() { + me.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight()); + me.$resultsContainer.scroller.update({alwaysVisibleY: true}); + }); } this.rendered = true; @@ -366,7 +383,11 @@ define([ textNoMatches: 'No matches', textNoSearchResults: 'No search results', textItemEntireCell: 'Entire cell contents', - textTooManyResults: 'There are too many results to show here' + textTooManyResults: 'There are too many results to show here', + textName: 'Name', + textCell: 'Cell', + textValue: 'Value', + textFormula: 'Formula' }, Common.Views.SearchPanel || {})); }); \ No newline at end of file diff --git a/apps/documenteditor/main/app/controller/Search.js b/apps/documenteditor/main/app/controller/Search.js index 9568d05f6..0bf486d19 100644 --- a/apps/documenteditor/main/app/controller/Search.js +++ b/apps/documenteditor/main/app/controller/Search.js @@ -343,6 +343,11 @@ define([ } var text = findText || this.api.asc_GetSelectedText() || this._state.searchText; + if (this.resultItems && this.resultItems.length > 0 && + (!this._state.matchCase && text.toLowerCase() === this.view.inputText.getValue().toLowerCase() || + this._state.matchCase && text === this.view.inputText.getValue())) { // show old results + return; + } if (text) { this.view.setFindText(text); } else if (text !== undefined) { diff --git a/apps/spreadsheeteditor/main/app/controller/Search.js b/apps/spreadsheeteditor/main/app/controller/Search.js index b68ae8480..39d400551 100644 --- a/apps/spreadsheeteditor/main/app/controller/Search.js +++ b/apps/spreadsheeteditor/main/app/controller/Search.js @@ -364,7 +364,7 @@ define([ if (this.resultItems[current]) { this.resultItems[current].selected = true; $('#search-results').find('.item').removeClass('selected'); - $(this.resultItems[current].el).addClass('selected'); + this.resultItems[current].$el.addClass('selected'); this.scrollToSelectedResult(current); } } @@ -378,13 +378,13 @@ define([ var item = this.resultItems[index].$el, itemHeight = item.outerHeight(), itemTop = item.position().top, - container = this.view.$resultsContainer, + container = this.view.$resultsContainer.find('.search-items'), containerHeight = container.outerHeight(), containerTop = container.scrollTop(); if (itemTop < 0 || (containerTop === 0 && itemTop > containerHeight)) { - container.scroller.scrollTop(containerTop + itemTop - 12); + this.view.$resultsContainer.scroller.scrollTop(containerTop + itemTop - 12); } else if (itemTop + itemHeight > containerHeight) { - container.scroller.scrollTop(containerTop + itemHeight); + this.view.$resultsContainer.scroller.scrollTop(containerTop + itemHeight); } } }, @@ -406,40 +406,22 @@ define([ if (this.view && this._state.isStartedAddingResults) { if (data.length > 300) return; var me = this, - container = me.view.$resultsContainer; - container.html('' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '
' + this.textSheet + '' + this.textName + '' + this.textCell + '' + this.textValue + '' + this.textFormula + '
'); - var $tableBody = container.find('tbody'); + $innerResults = me.view.$resultsContainer.find('.search-items'); me.resultItems = []; data.forEach(function (item, ind) { var isSelected = ind === me._state.currentResult; - var tr = '' + - '' + item[1] + '' + - '' + item[2] + '' + - '' + item[3] + '' + - '' + item[4] + '' + - '' + item[5] + '' + - ''; - var $item = $(tr).appendTo($tableBody); + var tr = '
' + + '
' + item[1] + '
' + + '
' + item[2] + '
' + + '
' + item[3] + '
' + + '
' + item[4] + '
' + + '
' + item[5] + '
' + + '
'; + var $item = $(tr).appendTo($innerResults); if (isSelected) { $item.addClass('selected'); } - var resultItem = {id: item[0], $el: $item, selected: isSelected}; + var resultItem = {id: item[0], $el: $item, el: tr, selected: isSelected}; me.resultItems.push(resultItem); $item.on('click', _.bind(function (el) { var id = item[0]; @@ -453,7 +435,7 @@ define([ hideResults: function () { if (this.view) { this.view.$resultsContainer.hide(); - this.view.$resultsContainer.empty(); + this.view.$resultsContainer.find('tbody').empty(); } }, @@ -464,14 +446,19 @@ define([ } var text = findText || this.api.asc_GetSelectedText() || this._state.searchText; - if (text) { + if (this.resultItems && this.resultItems.length > 0 && + (!this._state.matchCase && text.toLowerCase() === this.view.inputText.getValue().toLowerCase() || + this._state.matchCase && text === this.view.inputText.getValue())) { // show old results + return; + } + if (text && text !== this.view.inputText.getValue()) { this.view.setFindText(text); } else if (text !== undefined) { this.view.setFindText(''); } this.hideResults(); - if (text !== '' && text === this._state.searchText) { // search was made + if (text !== '') { // search was made this.view.disableReplaceButtons(false); this.api.asc_StartTextAroundSearch(); } else if (text !== '') { // search wasn't made @@ -486,14 +473,15 @@ define([ onShowPanel: function () { if (this.resultItems && this.resultItems.length > 0 && !this._state.isStartedAddingResults) { - var me = this; + var me = this, + $tableBody = this.view.$resultsContainer.find('tbody'); this.view.$resultsContainer.show(); this.resultItems.forEach(function (item) { - me.view.$resultsContainer.append(item.el); + var $item = $(item.el).appendTo($tableBody); if (item.selected) { - $(item.el).addClass('selected'); + $item.addClass('selected'); } - $(item.el).on('click', function (el) { + $item.on('click', function (el) { me.api.asc_SelectSearchElement(item.id); $('#search-results').find('.item').removeClass('selected'); $(el.currentTarget).addClass('selected'); @@ -510,12 +498,7 @@ define([ textNoTextFound: 'The data you have been searching for could not be found. Please adjust your search options.', textReplaceSuccess: 'Search has been done. {0} occurrences have been replaced', textReplaceSkipped: 'The replacement has been made. {0} occurrences were skipped.', - textInvalidRange: 'ERROR! Invalid cells range', - textSheet: 'Sheet', - textName: 'Name', - textCell: 'Cell', - textValue: 'Value', - textFormula: 'Formula' + textInvalidRange: 'ERROR! Invalid cells range' }, SSE.Controllers.Search || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/resources/less/leftmenu.less b/apps/spreadsheeteditor/main/resources/less/leftmenu.less index 40a74439b..a4dd9ad5f 100644 --- a/apps/spreadsheeteditor/main/resources/less/leftmenu.less +++ b/apps/spreadsheeteditor/main/resources/less/leftmenu.less @@ -660,3 +660,49 @@ height: 16px; width: 16px; } + +.search-panel { + #search-results { + padding-top: 6px; + .search-table { + width:100%; + height: 100%; + position: relative; + } + .header-item { + width:16%; + display: inline-block; + height: 18px; + text-align: start; + font-weight: normal; + padding-left: 4px; + &:not(:first-child) { + border-left: @scaled-one-px-value-ie solid @border-divider-ie; + border-left: @scaled-one-px-value solid @border-divider; + } + &:last-child { + width:36%; + } + } + .search-items { + height: calc(100% - 24px); + position: absolute; + top: 24px; + width: 100%; + overflow: hidden; + .item { + padding: 0; + display: flex; + div { + width: 16%; + padding-left: 4px; + height: 28px; + line-height: 28px; + &:last-child { + width: 36%; + } + } + } + } + } +}