瀏覽代碼

HUE-7797 [dashboard] Avoid drag highlighting over already populated gridster items

Enrico Berti 8 年之前
父節點
當前提交
86e9e17

+ 2 - 0
desktop/core/src/desktop/static/desktop/js/gridster-knockout.js

@@ -93,11 +93,13 @@ ko.bindingHandlers.gridster = {
         switch (change.status) {
           case 'added':
             var addedWidget = addWidget(change.value);
+            huePubSub.publish('gridster.added.widget', addedWidget);
             if (change.value.callback) {
               ko.unwrap(change.value.callback)(addedWidget);
             }
             break;
           case 'deleted':
+            huePubSub.publish('gridster.deleted.widget', change.value.gridsterElement);
             gridster.remove_widget(change.value.gridsterElement);
             break;
           default:

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

@@ -202,7 +202,7 @@
 <script id="widget-template-gridster${ suffix }" type="text/html">
   <li>
     <!-- ko ifnot: widget -->
-    <div class="empty-gridster-widget" data-bind="droppable: { data: function(w) { showAddFacetDemiModal(w, $data); }, options: { greedy:true, hoverClass: 'droppable-hover', over: function() { huePubSub.publish('dashboard.gridster.widget.over'); }, out: function() { huePubSub.publish('dashboard.gridster.widget.out'); } }}">
+    <div class="empty-gridster-widget" data-bind="droppable: { data: function(w) { showAddFacetDemiModal(w, $data); }, options: { greedy:true, hoverClass: 'droppable-hover' }}">
       <div class="inline pull-right remove-empty-gridster" data-bind="visible: $root.isEditing">
         <a href="javascript:void(0)" data-bind="click: function(data, e){ huePubSub.publish('gridster.remove', e.target); }"><i class="fa fa-times"></i></a>
       </div>

文件差異過大導致無法顯示
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


+ 1 - 1
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -203,7 +203,7 @@
   }
 
   .droppable-hover {
-    background-color: @cui-gray-300 !important;
+    background-color: @cui-gray-200 !important;
   }
 
   .with-top-margin {

+ 24 - 5
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -3650,10 +3650,30 @@ $(document).ready(function () {
   }
 
   function movePreviewHolder (options) {
-    if (!$('.gridster').hasClass('dragging')) {
+    var coords = {
+      col: Math.max(1, Math.ceil((options.event.clientX - $('.gridster').offset().left) / (widgetGridWidth + 10))),
+      row: Math.max(1, Math.ceil((options.event.pageY - $('.gridster').offset().top) / (widgetGridHeight + 10)))
+    }
+    var overlaps = false;
+    $('li.gs-w').each(function(){
+      var dimensions = {
+        col: parseInt($(this).attr('data-col')),
+        row: parseInt($(this).attr('data-row')),
+        sizex: parseInt($(this).attr('data-sizex')),
+        sizey: parseInt($(this).attr('data-sizey'))
+      }
+      if (coords.col >= dimensions.col && coords.row >= dimensions.row && coords.col < dimensions.col + dimensions.sizex && coords.row < dimensions.row + dimensions.sizey){
+        overlaps = true;
+      }
+    });
+    if (!$('.gridster').hasClass('dragging') && !overlaps) {
+      $('.hue-preview-holder').show();
       $('.hue-preview-holder').attr('data-sizey', options.widgetHeight || 6);
-      $('.hue-preview-holder').attr('data-col', Math.max(1, Math.ceil((options.event.clientX - $('.gridster').offset().left) / (widgetGridWidth + 10))));
-      $('.hue-preview-holder').attr('data-row', Math.max(1, Math.ceil((options.event.pageY - $('.gridster').offset().top) / (widgetGridHeight + 10))));
+      $('.hue-preview-holder').attr('data-col', coords.col);
+      $('.hue-preview-holder').attr('data-row', coords.row);
+    }
+    else {
+      $('.hue-preview-holder').hide();
     }
   }
 
@@ -3673,8 +3693,7 @@ $(document).ready(function () {
 
   huePubSub.subscribe('draggable.text.meta', addPreviewHolder, 'dashboard');
 
-  huePubSub.subscribe('dashboard.gridster.widget.over', removePreviewHolder, 'dashboard');
-  huePubSub.subscribe('dashboard.gridster.widget.out', addPreviewHolder, 'dashboard');
+  huePubSub.subscribe('gridster.added.widget', removePreviewHolder, 'dashboard');
 
   huePubSub.subscribe('dashboard.drop.on.page', function (options) {
     removePreviewHolder();

部分文件因文件數量過多而無法顯示