浏览代码

HUE-7611 [dashboard] Add drop functionality to an empty widget

Enrico Berti 8 年之前
父节点
当前提交
5b043c4

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 4 - 1
desktop/core/src/desktop/static/desktop/less/components/hue-gridster.less

@@ -40,6 +40,9 @@
     margin-top: 2px;
   }
   .gs-resize-handle-both {
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPHN2ZyB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCgl4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIg0KCXg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCINCj4NCgk8Zz4NCjxwYXRoIGQ9Ik0gNiA2IEwgMCA2IEwgMCA0LjIgTCA0IDQuMiBMIDQuMiA0LjIgTCA0LjIgMCBMIDYgMCBMIDYgNiBMIDYgNiBaIiBmaWxsPSIjMEI3RkFEIi8+DQo8L2c+DQo8L3N2Zz4=)!important;
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg0KPHN2ZyB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCgl4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIg0KCXg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNnB4IiBoZWlnaHQ9IjZweCINCj4NCgk8Zz4NCjxwYXRoIGQ9Ik0gNiA2IEwgMCA2IEwgMCA0LjIgTCA0IDQuMiBMIDQuMiA0LjIgTCA0LjIgMCBMIDYgMCBMIDYgNiBMIDYgNiBaIiBmaWxsPSIjMEI3RkFEIi8+DQo8L2c+DQo8L3N2Zz4=) !important;
+  }
+  .empty-gridster-widget {
+    height: 215px;
   }
 }

+ 7 - 5
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -170,7 +170,7 @@
   %if USE_GRIDSTER.get():
 
     <div class="container-fluid" data-bind="visible: $root.isEditing() && columns().length > 0">
-      <div class="add-row-gridster" data-bind="droppable: { data: showAddFacetDemiModal, options:{ greedy:true }}">
+      <div class="add-row-gridster" data-bind="droppable: { data: showAddFacetDemiModal, options: { greedy:true, hoverClass: 'droppable-hover' }}">
         ${ _('Drag a widget here') }
       </div>
     </div>
@@ -205,14 +205,16 @@
 <script id="widget-template-gridster${ suffix }" type="text/html">
   <li>
     <!-- ko ifnot: widget -->
-    <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 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>
     </div>
     <!-- /ko -->
-    <!-- ko with: widget -->
+  <!-- ko with: widget -->
     <span data-bind="template: 'widget-template${ suffix }'"></span>
     <div class="clearfix"></div>
-    <!-- /ko -->
+  <!-- /ko -->
   </li>
 </script>
 

文件差异内容过多而无法显示
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


+ 5 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/less/common_dashboard.less

@@ -161,6 +161,7 @@
     margin-top: 10px;
     margin-left: 10px;
     cursor: move;
+    background-color: @cui-white;
   }
 
   .draggable-widget.disabled {
@@ -201,6 +202,10 @@
     background-color: @cui-gray-400;
   }
 
+  .droppable-hover {
+    background-color: @cui-gray-300 !important;
+  }
+
   .with-top-margin {
     margin-top: 60px;
   }

+ 28 - 17
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -3673,19 +3673,28 @@ $(document).ready(function () {
     huePubSub.publish('gridster.remove', "#wdg_" + widgetId);
   }, 'dashboard');
 
-
-  huePubSub.subscribe('gridster.add.widget', function (widgetId){
-    var newPosition = $('.gridster ul').data('gridster').next_position(12, 12);
-    searchViewModel.gridItems.push(ko.mapping.fromJS({
-      col: newPosition.col,
-      row: newPosition.row,
-      size_x: 12,
-      size_y: 12,
-      widget: searchViewModel.getWidgetById(widgetId),
-      callback: function(el){
-        $('.gridster ul').data('gridster').move_widget(el, 1, 1);
-      }
-    }));
+  huePubSub.subscribe('gridster.add.widget', function (options) {
+    var widgetId = options.id;
+    if (options.target) {
+      searchViewModel.gridItems().forEach(function (item) {
+        if (item.col() === options.target.col() && item.row() === options.target.row()) {
+          item.widget(searchViewModel.getWidgetById(widgetId));
+        }
+      });
+    }
+    else {
+      var newPosition = $('.gridster ul').data('gridster').next_position(12, 12);
+      searchViewModel.gridItems.push(ko.mapping.fromJS({
+        col: newPosition.col,
+        row: newPosition.row,
+        size_x: 12,
+        size_y: 12,
+        widget: searchViewModel.getWidgetById(widgetId),
+        callback: function (el) {
+          $('.gridster ul').data('gridster').move_widget(el, 1, 1);
+        }
+      }));
+    }
   }, 'dashboard');
 
 %endif
@@ -3891,9 +3900,11 @@ $(document).ready(function () {
   var selectedWidget = null;
   var selectedRow = null;
   %if USE_GRIDSTER.get():
-  function showAddFacetDemiModal(widget) {
+  var selectedGridster = null;
+  function showAddFacetDemiModal(widget, gridsterTarget) {
     var fakeRow = searchViewModel.columns()[0].addEmptyRow(true);
-    fakeRow.addWidget(widget)
+    fakeRow.addWidget(widget);
+    selectedGridster = gridsterTarget;
 
     if (["resultset-widget", "html-resultset-widget", "filter-widget", "leafletmap-widget"].indexOf(widget.widgetType()) == -1) {
       searchViewModel.collection.template.fieldsModalFilter("");
@@ -3919,7 +3930,7 @@ $(document).ready(function () {
       }
     }
     else {
-      huePubSub.publish('gridster.add.widget', widget.id());
+      huePubSub.publish('gridster.add.widget', { id: widget.id(), target: gridsterTarget });
     }
   }
 
@@ -3935,7 +3946,7 @@ $(document).ready(function () {
         _existingFacet.field(field.name());
       }
       $("#addFacetDemiModal").modal("hide");
-      huePubSub.publish('gridster.add.widget', selectedWidget.id());
+      huePubSub.publish('gridster.add.widget', { id: selectedWidget.id(), target: selectedGridster });
     }
   }
   %else:

部分文件因为文件数量过多而无法显示