From ab5241d11a38954121b69b43a4c196f112f86d0d Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Wed, 16 Feb 2022 21:48:45 +0300
Subject: [PATCH] [DE] New search: add settings into search panel

---
 .../main/lib/template/SearchPanel.template    | 37 +++++++++-
 apps/common/main/lib/view/SearchPanel.js      | 70 ++++++++++++++++++-
 .../main/resources/less/searchdialog.less     | 23 +++++-
 3 files changed, 127 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/template/SearchPanel.template b/apps/common/main/lib/template/SearchPanel.template
index 079887f33..75b4bb0f6 100644
--- a/apps/common/main/lib/template/SearchPanel.template
+++ b/apps/common/main/lib/template/SearchPanel.template
@@ -1,8 +1,43 @@
-<div id="search-box" class="layout-ct vbox">
+<div id="search-box" class="layout-ct vbox search-panel">
     <div id="search-header">
         <label><%= headerText %></label>
         <div id="search-btn-close"></div>
     </div>
+    <div id="search-adv-settings">
+        <table cols="1">
+            <tbody>
+                <tr>
+                    <td class="padding-small"><div id="search-adv-text"></div></td>
+                </tr>
+                <tr>
+                    <td class="padding-large"><div id="search-adv-replace-text"></div></td>
+                </tr>
+                <tr>
+                    <td class="padding-large">
+                        <label id="search-adv-results-number" style="display: inline-block;">
+                            <%= scope.textSearchResults %>
+                        </label>
+                        <div class="search-nav-btns" style="display: inline-block; float: right;">
+                            <div id="search-adv-back" style="display: inline-block; margin-right: 4px;"></div>
+                            <div id="search-adv-next" style="display: inline-block;"></div>
+                        </div>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="padding-large">
+                       <button type="button" class="btn btn-text-default" id="search-adv-replace" style="display: inline-block; min-width: 62px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplace %></button>
+                       <button type="button" class="btn btn-text-default" id="search-adv-replace-all" style="display: inline-block; min-width: 78px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplaceAll %></button>
+                    </td>
+                </tr>
+                <tr>
+                    <td class="padding-small"><div id="search-adv-case-sensitive"></div></td>
+                </tr>
+                <tr>
+                    <td class="padding-small"><div id="search-adv-use-regexp"></div></td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
     <div id="search-results">
     </div>
 </div>
\ No newline at end of file
diff --git a/apps/common/main/lib/view/SearchPanel.js b/apps/common/main/lib/view/SearchPanel.js
index 864d155b2..544c31948 100644
--- a/apps/common/main/lib/view/SearchPanel.js
+++ b/apps/common/main/lib/view/SearchPanel.js
@@ -63,6 +63,64 @@ define([
                 }));
                 this.$el = $(el);
 
+                this.inputText = new Common.UI.InputField({
+                    el: $('#search-adv-text'),
+                    placeHolder: this.textFind,
+                    allowBlank: true,
+                    validateOnBlur: false,
+                    style: 'width: 100%;'
+                });
+
+                this.inputReplace = new Common.UI.InputField({
+                    el: $('#search-adv-replace-text'),
+                    placeHolder: this.textReplaceWith,
+                    allowBlank: true,
+                    validateOnBlur: false,
+                    style: 'width: 100%;'
+                });
+
+                this.$reaultsNumber = $('#search-adv-results-number');
+
+                this.btnBack = new Common.UI.Button({
+                    parentEl: $('#search-adv-back'),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-arrow-up',
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
+                });
+
+                this.btnNext = new Common.UI.Button({
+                    parentEl: $('#search-adv-next'),
+                    cls: 'btn-toolbar',
+                    iconCls: 'toolbar__icon btn-arrow-down',
+                    dataHint: '1',
+                    dataHintDirection: 'bottom'
+                });
+
+                this.btnReplace = new Common.UI.Button({
+                    el: $('#search-adv-replace')
+                });
+
+                this.btnReplaceAll = new Common.UI.Button({
+                    el: $('#search-adv-replace-all')
+                });
+
+                this.chCaseSensitive = new Common.UI.CheckBox({
+                    el: $('#search-adv-case-sensitive'),
+                    labelText: this.textCaseSensitive,
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+
+                this.chUseRegExp = new Common.UI.CheckBox({
+                    el: $('#search-adv-use-regexp'),
+                    labelText: this.textMatchUsingRegExp,
+                    dataHint: '1',
+                    dataHintDirection: 'left',
+                    dataHintOffset: 'small'
+                });
+
                 this.buttonClose = new Common.UI.Button({
                     parentEl: $('#search-btn-close', this.$el),
                     cls: 'btn-toolbar',
@@ -90,13 +148,23 @@ define([
         ChangeSettings: function(props) {
         },
 
+        updateResultsNumber: function (current, count) {
+            this.$reaultsNumber.text(Common.Utils.String.format(current, count));
+        },
+
         onClickClosePanel: function() {
             Common.NotificationCenter.trigger('leftmenu:change', 'hide');
         },
 
         textFind: 'Find',
         textFindAndReplace: 'Find and replace',
-        textCloseSearch: 'Close search'
+        textCloseSearch: 'Close search',
+        textReplace: 'Replace',
+        textReplaceAll: 'Replace All',
+        textSearchResults: 'Search results: {0}/{1}',
+        textReplaceWith: 'Replace with',
+        textCaseSensitive: 'Case sensitive',
+        textMatchUsingRegExp: 'Match using regular expressions'
 
     }, Common.Views.SearchPanel || {}));
 });
\ No newline at end of file
diff --git a/apps/common/main/resources/less/searchdialog.less b/apps/common/main/resources/less/searchdialog.less
index 1430a4aee..75395c1d1 100644
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@@ -103,9 +103,10 @@
     }
 }
 
-#search-box {
+.search-panel {
     position: relative;
     border-collapse: collapse;
+    line-height: 15px;
 
     #search-header {
         position: relative;
@@ -125,4 +126,24 @@
             float: right;
         }
     }
+
+    #search-adv-settings {
+        padding: 10px 15px 0 15px;
+
+        table {
+            width: 100%;
+        }
+
+        .padding-small {
+            padding-bottom: 8px;
+        }
+
+        .padding-large {
+            padding-bottom: 14px;
+        }
+
+        #search-adv-results-number {
+            padding-top: 2px;
+        }
+    }
 }
\ No newline at end of file