Ver código fonte

[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 anos atrás
pai
commit
efe7000

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