Browse Source

[core] Introduced mCustomScrollbar

Enrico Berti 9 năm trước cách đây
mục cha
commit
103cb3dc50

+ 3 - 3
apps/metastore/src/metastore/templates/metastore.mako

@@ -389,8 +389,8 @@ ${ assist.assistPanel() }
             <th width="1%" style="text-align: center"><div class="hueCheckbox fa" data-bind="hueCheckAll: { allValues: filteredTables, selectedValues: selectedTables }"></div></th>
             <th>&nbsp;</th>
             <th>${ _('Table Name') }</th>
-            <th>${ _('Comment') }</th>
-            <th>${ _('Type') }</th>
+            <th width="50%">${ _('Comment') }</th>
+            <th width="1%">${ _('Type') }</th>
           </tr>
           </thead>
           <tbody data-bind="hueach: {data: filteredTables, itemHeight: 29, scrollable: '.right-panel', scrollableOffset: 277}">
@@ -411,7 +411,7 @@ ${ assist.assistPanel() }
                 <a class="tableLink" href="javascript:void(0);" data-bind="text: name, click: function() { $parent.setTable($data, function(){ huePubSub.publish('metastore.url.change'); }) }"></a>
               </td>
               <td data-bind="text: comment"></td>
-              <td>
+              <td class="center">
                 <!-- ko if: type == 'Table' -->
                   <i class="fa fa-fw fa-table muted" title="${ _('Table') }"></i>
                 <!-- /ko -->

Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 0 - 0
desktop/core/src/desktop/static/desktop/ext/css/jquery.mCustomScrollbar.min.css


Những thai đổi đã bị hủy bỏ vì nó quá lớn
+ 1 - 0
desktop/core/src/desktop/static/desktop/ext/js/jquery/plugins/jquery.mCustomScrollbar.concat.min.js


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

@@ -3219,13 +3219,13 @@
       };
 
       var renderThrottle = -1;
-
       var lastScrollTop = -1;
       var onScroll = function () {
-        if (startIndex > incrementLimit && Math.abs(lastScrollTop - $container.scrollTop()) < (incrementLimit * options.minHeight)) {
+        var scrollTop = $container.data('scrollTop') || $container.scrollTop();
+        if (startIndex > incrementLimit && Math.abs(lastScrollTop - scrollTop) < (incrementLimit * options.minHeight)) {
           return;
         }
-        lastScrollTop = $container.scrollTop();
+        lastScrollTop = scrollTop;
         setStartAndEndFromScrollTop();
         clearTimeout(renderThrottle);
         if (Math.abs($parentFVOwnerElement.data('startIndex') - startIndex) > incrementLimit ||
@@ -3324,8 +3324,9 @@
       var render = function () {
         if ($parent.parents('.hueach').length === 0) {
           var heightCorrection = 0, fluidCorrection = 0;
+          var scrollTop = wrappable.data('scrollTop') || $parent.parents(scrollable).scrollTop();
           if (wrappable.is('table')) {
-            if ($parent.parents(scrollable).scrollTop() < scrollableOffset + itemHeight) {
+            if (scrollTop < scrollableOffset + itemHeight) {
               wrappable.find('thead').css('opacity', '1');
             }
             else {
@@ -3345,7 +3346,7 @@
               fluidCorrection = ko.utils.domData.get(element, 'heightCorrection') - 20;
             }
           }
-          startItem = Math.max(0, Math.floor(Math.max(1, ($parent.parents(scrollable).scrollTop() - heightCorrection - fluidCorrection - scrollableOffset)) / itemHeight) - 10);
+          startItem = Math.max(0, Math.floor(Math.max(1, (scrollTop - heightCorrection - fluidCorrection - scrollableOffset)) / itemHeight) - 10);
           if (wrappable.is('table') && startItem % 2 == 1) {
             startItem--;
           }
@@ -3361,6 +3362,7 @@
         ko.bindingHandlers.foreach.update(element, valueAccessorBuilder, allBindings, viewModel, bindingContext);
       }
 
+
       $parent.parents(scrollable).off('scroll');
       $parent.parents(scrollable).on('scroll', render);
 
@@ -3399,4 +3401,30 @@
     }
   };
 
+  ko.bindingHandlers.customScrollbar = {
+    init: function (element, valueAccessor, allBindings) {
+      $(element).mCustomScrollbar({
+        autoHideScrollbar: true,
+        theme: 'minimal-dark',
+        autoExpandScrollbar: true,
+        callbacks: {
+          onInit: function () {
+            huePubSub.publish('customScrollbar.init', {
+              element: element,
+              mcs: this.mcs
+            });
+            $(element).trigger('scroll');
+          },
+          whileScrolling: function () {
+            huePubSub.publish('customScrollbar.scroll', {
+              element: element,
+              mcs: this.mcs
+            });
+            $(element).trigger('scroll');
+          }
+        }
+      });
+    }
+  };
+
 }));

+ 2 - 0
desktop/core/src/desktop/templates/common_header.mako

@@ -53,6 +53,7 @@ from django.utils.translation import ugettext as _
   <link href="${ static('desktop/ext/css/font-awesome.min.css') }" rel="stylesheet">
   <link href="${ static('desktop/css/hue3.css') }" rel="stylesheet">
   <link href="${ static('desktop/ext/css/fileuploader.css') }" rel="stylesheet">
+  <link href="${ static('desktop/ext/css/jquery.mCustomScrollbar.min.css') }" rel="stylesheet">
 
   <style type="text/css">
     % if conf.CUSTOM.BANNER_TOP_HTML.get():
@@ -188,6 +189,7 @@ from django.utils.translation import ugettext as _
   <script src="${ static('desktop/ext/js/jquery/plugins/jquery.total-storage.min.js') }"></script>
   <script src="${ static('desktop/ext/js/jquery/plugins/jquery.placeholder.min.js') }"></script>
   <script src="${ static('desktop/ext/js/jquery/plugins/jquery.dataTables.1.8.2.min.js') }"></script>
+  <script src="${ static('desktop/ext/js/jquery/plugins/jquery.mCustomScrollbar.concat.min.js') }"></script>
   <script src="${ static('desktop/ext/js/jquery/plugins/floatlabels.min.js') }"></script>
   <script src="${ static('desktop/js/jquery.datatables.sorting.js') }"></script>
   <script src="${ static('desktop/ext/js/bootstrap.min.js') }"></script>

+ 1 - 1
desktop/libs/notebook/src/notebook/templates/editor_components.mako

@@ -337,7 +337,7 @@ ${ require.config() }
       }"></div>
   </div>
   <div class="resizer" data-bind="visible: $root.isLeftPanelVisible() && $root.assistAvailable(), splitDraggable : { appName: 'notebook', leftPanelVisible: $root.isLeftPanelVisible }"><div class="resize-bar">&nbsp;</div></div>
-  <div class="right-panel" data-bind="event: { scroll: function(){ $(document).trigger('hideAutocomplete'); } }">
+  <div class="right-panel" data-bind="event: { scroll: function(){ $(document).trigger('hideAutocomplete'); } }, customScrollbar">
     <div>
       <div class="row-fluid row-container sortable-snippets" data-bind="css: {'is-editing': $root.isEditing},
         sortable: {

Một số tệp đã không được hiển thị bởi vì quá nhiều tập tin thay đổi trong này khác