[SSE] New search: make search options

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>

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 || {}));
 });

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);
+        }
+    }
+
 }