Browse Source

[core] Fixed resize draggable conflicts

Removed flickering from certain browsers
Redrawn fixed tabled headers on Beeswax, RDBMS and Spark after assist resize
Enrico Berti 10 năm trước cách đây
mục cha
commit
efe7000ef0

+ 1 - 1
apps/beeswax/src/beeswax/templates/execute.mako

@@ -202,7 +202,7 @@ ${layout.menubar(section='query')}
       </div>
     </div>
   </div>
-  <div class="resize" data-bind="draggable: { axis: 'x', limits: { min: 10, max: 80 }, throttle: 5, horizontalPercent: $root.leftPanelWidth, container: '.resize-container', clone: false }"><div class="resize-bar" style="margin-left: 0.5%"><i class="fa fa-ellipsis-v"></i></div></div>
+  <div class="resize" data-bind="splitDraggable: { axis: 'x', limits: { min: 10, max: 80 }, throttle: 5, horizontalPercent: $root.leftPanelWidth, container: '.resize-container', onStop: function(){ window.setTimeout(reinitializeTableExtenders, 100); }  }"><div class="resize-bar" style="margin-left: 0.5%"><i class="fa fa-ellipsis-v"></i></div></div>
   <div id="querySide"  style="float:right; margin-left: 0;" data-bind="style: { 'width': (99 - $root.leftPanelWidth()) + '%' }">
     <div class="alert" data-bind="visible: design.isRedacted">
       ${ _('This query had some sensitive information removed when saved.') }

+ 1 - 1
apps/rdbms/src/rdbms/templates/execute.mako

@@ -66,7 +66,7 @@ ${ commonheader(_('Query'), app_name, user) | n,unicode }
 
 
       </div>
-      <div class="resize" data-bind="draggable: { axis: 'x', limits: { min: 10, max: 80 }, throttle: 5, horizontalPercent: $root.leftPanelWidth, container: '.resize-container', clone: false }"><div class="resize-bar"><i class="fa fa-ellipsis-v"></i></div></div>
+      <div class="resize" data-bind="splitDraggable: { axis: 'x', limits: { min: 10, max: 80 }, throttle: 5, horizontalPercent: $root.leftPanelWidth, container: '.resize-container', onStop: function(){ window.setTimeout(reinitializeTableExtenders, 100); }"><div class="resize-bar"><i class="fa fa-ellipsis-v"></i></div></div>
       <div style="float:right; margin-left: 0;" data-bind="style: { 'width': (99 - $root.leftPanelWidth()) + '%' }">
         <div id="query">
           <div class="card card-small">

+ 1 - 1
apps/spark/src/spark/templates/editor.mako

@@ -237,7 +237,7 @@ ${ commonheader(_('Query'), app_name, user, "68px") | n,unicode }
   <div class="assist-container left-panel" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), style: { 'width': $root.leftPanelWidth() + '%' }">
     <div class="assist" data-bind="component: { name: 'assist-panel', params: { assist: assist, isAssistVisible: $root.isAssistVisible, isAssistAvailable: $root.isAssistAvailable, totalStorageId: 'sparkAssistVisible' }}"></div>
   </div>
-  <div class="resize" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), draggable: { axis: 'x', limits: { min: 2, max: 98 },horizontalPercent: $root.leftPanelWidth, container: '.resize-container' }"><div class="resize-bar">&nbsp;</div></div>
+  <div class="resize" data-bind="visible: $root.isAssistVisible() && $root.isAssistAvailable(), splitDraggable: { axis: 'x', limits: { min: 2, max: 98 },horizontalPercent: $root.leftPanelWidth, container: '.resize-container', onStop: function(){ window.setTimeout(redrawFixedHeaders, 100); } }"><div class="resize-bar">&nbsp;</div></div>
   <div class="right-panel" data-bind="style: { 'width': $root.isAssistVisible() ? (99.5 - $root.leftPanelWidth()) + '%' : '100%' }">
     <div>
       <div data-bind="css: {'row-fluid row-container sortable-snippets':true, 'is-editing': $root.isEditing},

+ 7 - 6
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -644,7 +644,7 @@ ko.bindingHandlers.daterangepicker = {
   }
 };
 
-ko.bindingHandlers.draggable = {
+ko.bindingHandlers.splitDraggable = {
   init: function (element, valueAccessor) {
     var options = valueAccessor();
     var $container = $(options.container);
@@ -652,6 +652,7 @@ ko.bindingHandlers.draggable = {
     var throttle = typeof options.throttle != "undefined" ? options.throttle : 20;
 
     var dragTimeout = -1;
+    var onStop = options.onStop || function() {};
     var onDrag = function(event, ui) {
       window.clearTimeout(dragTimeout);
       dragTimeout = window.setTimeout(function () {
@@ -666,13 +667,13 @@ ko.bindingHandlers.draggable = {
       containment: $container,
       drag: onDrag,
       start: onDrag,
-      stop: onDrag
+      stop: function(event, ui) {
+        onDrag(event, ui);
+        onStop(event, ui);
+      }
     };
 
-    if (typeof options.clone == "undefined" || options.clone ) {
-      draggableOptions.helper = 'clone';
-    }
-
+    draggableOptions.opacity = 0.01;
     $element.draggable(draggableOptions);
   }
 };