Merge pull request #2115 from ONLYOFFICE/fix/search-scroll

Fix/search scroll

apps/common/main/lib/template/SearchPanel.template

@@ -3,6 +3,7 @@
         <label id="search-adv-title"></label>
         <div id="search-btn-close"></div>
     </div>
+    <div id="search-container">
     <div id="search-adv-settings">
         <table cols="1">
             <tbody>
@@ -60,4 +61,5 @@
     </div>
     <div id="search-results" class="ps-container oo">
     </div>
+    </div>
 </div>

apps/common/main/lib/view/SearchPanel.js

@@ -176,6 +176,13 @@ define([
                 this.$resultsContainer = $('#search-results');
                 this.$resultsContainer.hide();
 
+                this.$searchContainer = $('#search-container');
+                this.$searchContainer.scroller = new Common.UI.Scroller({
+                    el              : $('#search-container'),
+                    useKeyboard     : true,
+                    minScrollbarLength: 40
+                });
+
                 Common.NotificationCenter.on('search:updateresults', _.bind(this.disableNavButtons, this));
                 if (window.SSE) {
                     this.cmbWithin = new Common.UI.ComboBox({
@@ -327,10 +334,23 @@ define([
         ChangeSettings: function(props) {
         },
 
+        updateScrollers: function () {
+            this.$resultsContainer.scroller.update({alwaysVisibleY: true});
+            this.$searchContainer.scroller.update({alwaysVisibleY: true});
+
+            setTimeout(_.bind(function () {
+                if (this.$searchContainer.find('> .ps-scrollbar-y-rail').is(':visible')) {
+                    this.$resultsContainer.find('.ps-scrollbar-y-rail').addClass('set-left');
+                } else {
+                    this.$resultsContainer.find('.ps-scrollbar-y-rail').removeClass('set-left');
+                }
+            }, this), 100);
+        },
+
         updateResultsContainerHeight: function () {
             if (this.$resultsContainer) {
-                this.$resultsContainer.outerHeight($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight());
+                this.$resultsContainer.outerHeight(Math.max($('#search-box').outerHeight() - $('#search-header').outerHeight() - $('#search-adv-settings').outerHeight(), 112));
-                this.$resultsContainer.scroller.update({alwaysVisibleY: true});
+                this.updateScrollers();
             }
         },
 

apps/common/main/resources/less/searchdialog.less

@@ -136,10 +136,7 @@
     }
 
     #search-adv-settings {
-        position: absolute;
+        position: relative;
-        left: 0;
-        right: 0;
-        top: 45px;
         padding: 10px 15px 0 15px;
 
         table {
@@ -238,10 +235,7 @@
     }
 
     #search-results {
-        position: absolute;
+        position: relative;
-        left: 0;
-        right: 0;
-        bottom: 0;
         width: 100%;
         border-top: @scaled-one-px-value-ie solid @border-toolbar-ie;
         border-top: @scaled-one-px-value solid @border-toolbar;
@@ -268,6 +262,21 @@
                 font-style: italic;
             }
         }
+
+        .ps-scrollbar-y-rail {
+            &.set-left {
+                right: 11px !important;
+            }
+        }
+    }
+
+    #search-container {
+        position: absolute;
+        overflow: hidden;
+        top: 45px;
+        left: 0;
+        right: 0;
+        bottom: 0;
     }
 
 }

apps/documenteditor/main/app/controller/Search.js

@@ -333,7 +333,7 @@ define([
         onEndTextAroundSearch: function () {
             if (this.view) {
                 this._state.isStartedAddingResults = false;
-                this.view.$resultsContainer.scroller.update({alwaysVisibleY: true});
+                this.view.updateScrollers();
             }
         },
 

apps/presentationeditor/main/app/controller/Search.js

@@ -299,7 +299,7 @@ define([
         onEndTextAroundSearch: function () {
             if (this.view) {
                 this._state.isStartedAddingResults = false;
-                this.view.$resultsContainer.scroller.update({alwaysVisibleY: true});
+                this.view.updateScrollers();
             }
         },
 

apps/spreadsheeteditor/main/app/controller/Search.js

@@ -429,7 +429,7 @@ define([
         onEndTextAroundSearch: function () {
             if (this.view) {
                 this._state.isStartedAddingResults = false;
-                this.view.$resultsContainer.scroller.update({alwaysVisibleY: true});
+                this.view.updateScrollers();
             }
         },
 

apps/spreadsheeteditor/main/resources/less/leftmenu.less

@@ -779,6 +779,7 @@
             top: 28px;
             width: 100%;
             overflow: hidden;
+            padding-bottom: 10px;
             .item {
                 padding: 0;
                 display: flex;