From 92e95b1509acb76818f36e4f6f7da6fd5dd0402b Mon Sep 17 00:00:00 2001
From: JuliaSvinareva <Julia.Svinaryova@onlyoffice.com>
Date: Thu, 24 Feb 2022 21:46:22 +0300
Subject: [PATCH] [SSE] New search: make search options

---
 .../main/lib/template/SearchPanel.template    |  8 +++-
 apps/common/main/lib/view/SearchPanel.js      | 15 +++++++
 .../main/resources/less/searchdialog.less     | 44 ++++++++++++++++++-
 3 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/apps/common/main/lib/template/SearchPanel.template b/apps/common/main/lib/template/SearchPanel.template
index 7d0778a40..d18186719 100644
--- a/apps/common/main/lib/template/SearchPanel.template
+++ b/apps/common/main/lib/template/SearchPanel.template
@@ -29,9 +29,13 @@
                        <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>
+                <tr class="search-options-block">
                     <td class="padding-large">
-                        <div class="search-options">
+                        <div id="open-search-options">
+                            <div class="search-options-caret img-commonctrl"></div>
+                            <div class="search-options-txt"><%= scope.textSearchOptions %></div>
+                        </div>
+                        <div id="search-options">
                             <label class="input-label"><%= scope.textWithin %></label>
                             <div id="search-adv-cmb-within"></div>
                             <label class="input-label"><%= scope.textSearch %></label>
diff --git a/apps/common/main/lib/view/SearchPanel.js b/apps/common/main/lib/view/SearchPanel.js
index 80a428b12..81ae26cf6 100644
--- a/apps/common/main/lib/view/SearchPanel.js
+++ b/apps/common/main/lib/view/SearchPanel.js
@@ -52,6 +52,9 @@ define([
             Common.UI.BaseView.prototype.initialize.call(this, arguments);
 
             this.isEdit = options.mode.isEdit;
+
+
+            window.SSE && (this.extendedOptions = Common.localStorage.getBool('sse-search-options-extended', true));
         },
 
         render: function(el) {
@@ -176,6 +179,12 @@ define([
                     hint: this.textCloseSearch
                 });
                 this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
+
+                if (window.SSE) {
+                    this.$searchOptionsBlock = $('.search-options-block');
+                    this.$searchOptionsBlock.show();
+                    $('#open-search-options').on('click', _.bind(this.expandSearchOptions, this));
+                }
             }
 
             this.rendered = true;
@@ -232,6 +241,11 @@ define([
             };
         },
 
+        expandSearchOptions: function () {
+            this.extendedOptions = !this.extendedOptions;
+            this.$searchOptionsBlock[this.extendedOptions ? 'removeClass' : 'addClass']('no-expand');
+        },
+
         textFind: 'Find',
         textFindAndReplace: 'Find and replace',
         textCloseSearch: 'Close search',
@@ -251,6 +265,7 @@ define([
         textByColumns: 'By columns',
         textFormulas: 'Formulas',
         textValues: 'Values',
+        textSearchOptions: 'Search options'
 
     }, 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 7c15eb31a..e1606b081 100644
--- a/apps/common/main/resources/less/searchdialog.less
+++ b/apps/common/main/resources/less/searchdialog.less
@@ -147,7 +147,49 @@
         }
     }
 
-    .search-options {
+    .search-options-block {
         display: none;
     }
+
+    #open-search-options {
+        cursor: pointer;
+        margin-left: 15px;
+
+        .search-options-txt {
+            display: inline-block;
+            padding: 5px 0;
+        }
+
+        .search-options-caret {
+            width: 24px;
+            height: 24px;
+            background-position: 3px -270px;
+            display: inline-block;
+            position: absolute;
+            left: 0;
+            cursor: pointer;
+            margin-left: 8px;
+        }
+
+    }
+
+    #search-options {
+
+        label {
+            margin-top: 6px;
+            &:not(:first-of-type) {
+                margin-top: 8px;
+            }
+        }
+    }
+
+    .no-expand {
+        #search-options {
+            display: none;
+        }
+        .search-options-caret {
+            transform: rotate(270deg);
+        }
+    }
+
 }
\ No newline at end of file