pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 05:30:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

[embed] Add results number in search bar

Browse Source
This commit is contained in:
JuliaSvinareva
2023-02-03 14:59:11 +03:00
parent b520031caf
commit 0d05cd7faa
5 changed files with 47 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/common/embed/lib/view/SearchBar.js
View File

@ -45,7 +45,10 @@ common.view.SearchBar = new(function() {
var tpl = '<div class="asc-window search-window" style="display: none;">' +
'<div class="body">{body}</div>' +
'</div>';
var tplBody = '<input type="text" id="search-bar-text" placeholder="{textFind}" autocomplete="off">' +
var tplBody = '<div class="search-input-group">' +
'<input type="text" id="search-bar-text" placeholder="{textFind}" autocomplete="off">' +
'<div id="search-bar-results">0/0</div>' +
'</div>' +
'<div class="tools">' +
'<button id="search-bar-back" class="svg-icon search-arrow-up"></button>' +
'<button id="search-bar-next" class="svg-icon search-arrow-down"></button>' +
@ -71,6 +74,13 @@ common.view.SearchBar = new(function() {
$('#search-bar-next').attr({disabled: disable});
},
updateResultsNumber: function (current, all) {
var $results = $('#search-bar-results'),
$input = $('#search-bar-text');
$results.text(!all || $input.val() === '' ? '0/0' : current + 1 + '/' + all);
$input.css('padding-right', $results.outerWidth() + 'px');
},
textFind: 'Find'
};

41
apps/common/embed/resources/less/common.less
View File

@ -824,23 +824,38 @@
display: flex;
padding: 16px;
input {
width: 192px;
.search-input-group {
display: flex;
position: relative;
height: 22px;
border-radius: 2px;
box-shadow: none;
border: solid 1px #CFCFCF;
padding: 1px 3px;
color: #444444;
font-size: 11px;
&::placeholder {
color: #CFCFCF;
input {
width: 192px;
height: 100%;
border-radius: 2px;
box-shadow: none;
border: solid 1px #CFCFCF;
padding: 1px 25px 1px 3px;
color: #444444;
font-size: 11px;
&::placeholder {
color: #CFCFCF;
}
&:focus {
border-color: #848484;
outline: 0;
}
}
&:focus {
border-color: #848484;
outline: 0;
#search-bar-results {
position: absolute;
right: 0;
height: 100%;
line-height: 22px;
padding: 0 4px;
color: #A5A5A5;
}
}

3
apps/documenteditor/embed/js/SearchBar.js
View File

@ -121,6 +121,7 @@
onQuerySearch();
} else {
api.asc_endFindText();
common.view.SearchBar.updateResultsNumber();
}
clearInterval(_searchTimer);
_searchTimer = undefined;
@ -136,6 +137,7 @@
searchSettings.put_WholeWords(false);
if (!api.asc_findText(searchSettings, d != 'back')) {
common.view.SearchBar.disableNavButtons();
common.view.SearchBar.updateResultsNumber();
return false;
}
return true;
@ -153,6 +155,7 @@
var onApiUpdateSearchCurrent = function (current, all) {
common.view.SearchBar.disableNavButtons(current, all);
common.view.SearchBar.updateResultsNumber(current, all);
};
var highlightResults = function (val) {

3
apps/presentationeditor/embed/js/SearchBar.js
View File

@ -119,6 +119,7 @@
onQuerySearch();
} else {
api.asc_endFindText();
common.view.SearchBar.updateResultsNumber();
}
clearInterval(_searchTimer);
_searchTimer = undefined;
@ -134,6 +135,7 @@
searchSettings.put_WholeWords(false);
if (!api.asc_findText(searchSettings, d != 'back')) {
common.view.SearchBar.disableNavButtons();
common.view.SearchBar.updateResultsNumber();
return false;
}
return true;
@ -151,6 +153,7 @@
var onApiUpdateSearchCurrent = function (current, all) {
common.view.SearchBar.disableNavButtons(current, all);
common.view.SearchBar.updateResultsNumber(current, all);
};
return {

2
apps/spreadsheeteditor/embed/js/SearchBar.js
View File

@ -139,6 +139,7 @@
options.asc_setNotSearchEmptyCells(true);
if (!api.asc_findText(options)) {
common.view.SearchBar.disableNavButtons();
common.view.SearchBar.updateResultsNumber();
return false;
}
return true;
@ -156,6 +157,7 @@
var onApiUpdateSearchCurrent = function (current, all) {
common.view.SearchBar.disableNavButtons(current, all);
common.view.SearchBar.updateResultsNumber(current, all);
};
var highlightResults = function (val) {