From 0d05cd7faaf8893147b45cd6924525af635d8af0 Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Fri, 3 Feb 2023 14:59:11 +0300
Subject: [PATCH] [embed] Add results number in search bar

---
 apps/common/embed/lib/view/SearchBar.js       | 12 +++++-
 apps/common/embed/resources/less/common.less  | 41 +++++++++++++------
 apps/documenteditor/embed/js/SearchBar.js     |  3 ++
 apps/presentationeditor/embed/js/SearchBar.js |  3 ++
 apps/spreadsheeteditor/embed/js/SearchBar.js  |  2 +
 5 files changed, 47 insertions(+), 14 deletions(-)

diff --git a/apps/common/embed/lib/view/SearchBar.js b/apps/common/embed/lib/view/SearchBar.js
index abb0b94dae..ed0399f3aa 100644
--- a/apps/common/embed/lib/view/SearchBar.js
+++ b/apps/common/embed/lib/view/SearchBar.js
@@ -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'
 
     };
diff --git a/apps/common/embed/resources/less/common.less b/apps/common/embed/resources/less/common.less
index de08df890f..cb5aecde18 100644
--- a/apps/common/embed/resources/less/common.less
+++ b/apps/common/embed/resources/less/common.less
@@ -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;
             }
         }
 
diff --git a/apps/documenteditor/embed/js/SearchBar.js b/apps/documenteditor/embed/js/SearchBar.js
index 06d5a6f61c..bf8b76faba 100644
--- a/apps/documenteditor/embed/js/SearchBar.js
+++ b/apps/documenteditor/embed/js/SearchBar.js
@@ -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) {
diff --git a/apps/presentationeditor/embed/js/SearchBar.js b/apps/presentationeditor/embed/js/SearchBar.js
index d182da9501..70dad96bf4 100644
--- a/apps/presentationeditor/embed/js/SearchBar.js
+++ b/apps/presentationeditor/embed/js/SearchBar.js
@@ -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 {
diff --git a/apps/spreadsheeteditor/embed/js/SearchBar.js b/apps/spreadsheeteditor/embed/js/SearchBar.js
index 02d62f3cec..87ef7ebc73 100644
--- a/apps/spreadsheeteditor/embed/js/SearchBar.js
+++ b/apps/spreadsheeteditor/embed/js/SearchBar.js
@@ -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) {