Selaa lähdekoodia

[core] Improve assist display of nested items after scroll

Enrico Berti 10 vuotta sitten
vanhempi
commit
cbdfaf2

+ 26 - 5
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -2717,9 +2717,10 @@
       ko.bindingHandlers.foreach.init(element, valueAccessorBuilder, allBindings);
     },
     update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
-      var $parent = $(element).parent(),
+      var $element = $(element),
+        $parent = $element.parent(),
         considerStretching = valueAccessor().considerStretching || false,
-        itemHeight = valueAccessor().itemHeight || 30,
+        itemHeight = valueAccessor().itemHeight || 22,
         scrollable = valueAccessor().scrollable || 'body',
         renderTimeout = -1,
         dataHasChanged = true;
@@ -2749,13 +2750,33 @@
       }
 
       var render = function () {
-        startItem = Math.floor($parent.parents(scrollable).scrollTop() / itemHeight);
-        endItem = startItem + Math.ceil($parent.parents(scrollable).height() / itemHeight);
-        $(element).css('top', (startItem * itemHeight) + 'px');
+        if ($parent.parents('.hueach').length === 0){
+          var heightCorrection = 0, fluidCorrection = 0;
+          $element.children(':visible').each(function(cnt, child){
+            if ($(child).height() >= itemHeight){
+              heightCorrection += $(child).height();
+            }
+          });
+          if (heightCorrection > 0){
+            ko.utils.domData.set(element, 'heightCorrection', heightCorrection);
+          }
+          if (heightCorrection == 0 && ko.utils.domData.get(element, 'heightCorrection')){
+            fluidCorrection = ko.utils.domData.get(element, 'heightCorrection') - 20;
+          }
+          startItem = Math.max(0, Math.floor(Math.max(1, ($parent.parents(scrollable).scrollTop() - heightCorrection - fluidCorrection)) / itemHeight) - 5);
+          endItem = Math.min(startItem + Math.ceil($parent.parents(scrollable).height() / itemHeight) + 5, valueAccessor().data().length);
+          $element.css('top', ((startItem * itemHeight) + fluidCorrection) + 'px');
+        }
+        else {
+          startItem = 0, endItem = valueAccessor().data().length;
+        }
         ko.bindingHandlers.foreach.update(element, valueAccessorBuilder, allBindings, viewModel, bindingContext);
       }
 
       $parent.parents(scrollable).on('scroll', render);
+      if ($parent.parents('.hueach').length > 0){
+        window.setTimeout(render, 100);
+      }
 
       if (considerStretching) {
         huePubSub.subscribe('assist.stretchDown', function () {

+ 1 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -296,7 +296,7 @@ from desktop.views import _ko
       <li class="assist-entry no-entries">${_('No results found')}</li>
     </ul>
     <!-- /ko -->
-    <ul data-bind="hueach: {data: filteredEntries, itemHeight: 20, scrollable: '.assist-stretchable-list', considerStretching: true}, css: { 'assist-tables': definition.isDatabase }">
+    <ul data-bind="hueach: {data: filteredEntries, itemHeight: 22, scrollable: '.assist-stretchable-list', considerStretching: true}, css: { 'assist-tables': definition.isDatabase }">
       <!-- ko template: { if: definition.isTable, name: 'assist-table-entry' } --><!-- /ko -->
       <!-- ko ifnot: definition.isTable -->
       <li data-bind="visible: ! hasErrors(), visibleOnHover: { override: statsVisible, selector: definition.isView ? '.table-actions' : '.column-actions' }, css: { 'assist-table': definition.isView, 'assist-column': definition.isColumn }">