Ver código fonte

HUE-7546 [dashboard] Auto calculate height of tile based on content

Enrico Berti 8 anos atrás
pai
commit
7b07d4a

+ 9 - 2
desktop/libs/dashboard/src/dashboard/static/dashboard/js/search.ko.js

@@ -51,7 +51,7 @@ function loadSearchLayout(viewModel, json_layout) {
 
 function layoutToGridster(vm) {
   var numCols = 12;
-  var defaultWidgetHeight = 5;
+  var defaultWidgetHeight = 40;
   var layout = [];
 
   // flat layout
@@ -59,12 +59,19 @@ function layoutToGridster(vm) {
   $.each(vm.columns(), function (indexY, column) {
     $.each(column.rows(), function (indexY, row) {
       $.each(row.widgets(), function (indexX, widget) {
-        layout.push({col: 1, row: 1 + rowCnt*defaultWidgetHeight, sizex: numCols, sizey: defaultWidgetHeight, widget: vm.getWidgetById(widget.id())});
+        layout.push({
+          col: 1,
+          row: 1 + rowCnt * defaultWidgetHeight,
+          sizex: numCols,
+          sizey: defaultWidgetHeight,
+          widget: vm.getWidgetById(widget.id())
+        });
         rowCnt++;
       });
     });
   });
 
+
   // $.each(vm.columns(), function (indexY, column) {
   //   $.each(column.rows(), function (indexY, row) {
   //     var rowColSize = numCols / row.widgets().length; // Full length of row if 1 widget

+ 12 - 2
desktop/libs/dashboard/src/dashboard/templates/common_search.mako

@@ -3612,12 +3612,13 @@ $(document).ready(function () {
   });
 
 %if USE_GRIDSTER.get():
+  var WIDGET_BASE_HEIGHT = 50;
   $(".gridster>ul").gridster({
     widget_margins: [5, 5],
-    widget_base_dimensions: ['auto', 100],
+    widget_base_dimensions: ['auto', WIDGET_BASE_HEIGHT],
     avoid_overlapped_widgets: true,
     max_cols: 12,
-    max_row: 20,
+    max_rows: 60,
 ##     draggable: {
 ##       handle: '.move-gridster-widget'
 ##     },
@@ -3628,6 +3629,15 @@ $(document).ready(function () {
       },
     }
   });
+
+  huePubSub.subscribe('calculate.gridster.heights', function () {
+    var g = $('.gridster ul').data('gridster');
+    $('.gridster ul li.gs-w').each(function () {
+      var $el = $(this);
+      g.resize_widget($el, $el.data('sizex'), Math.ceil($el.find('.card-widget').height() / WIDGET_BASE_HEIGHT));
+    });
+  }, 'dashboard');
+
 %endif
 
   $(document).on("click", ".widget-settings-pill", function(){