Explorar o código

HUE-7758 [dashboard] Allow to collapse facets

jdesjean %!s(int64=8) %!d(string=hai) anos
pai
achega
f6f14cdfe9

+ 25 - 1
desktop/core/src/desktop/static/desktop/js/ko.common-dashboard.js

@@ -136,6 +136,7 @@ var Row = function (widgets, vm, columns) {
       col.percWidth(Math.max(3, (100 - self.columns().length * BOOTSTRAP_RATIOS.margin()) / self.columns().length));
     });
   });
+  self.isOpen = ko.observable(true);
 
   self.addWidget = function (widget) {
     self.widgets.push(widget);
@@ -217,6 +218,10 @@ var Row = function (widgets, vm, columns) {
       widget.size(Math.floor(12 / self.widgets().length));
     });
   }
+
+  self.toggleOpen = function () {
+    self.isOpen(self.isOpen());
+  };
 }
 
 
@@ -230,6 +235,7 @@ var Widget = function (params) {
 
   self.size = ko.observable(params.size).extend({ numeric: 0 });
   self.gridsterHeight = ko.observable(params.gridsterHeight).extend({ numeric: 0 });
+  self.gridsterHeightOpen = ko.observable(params.gridsterHeight).extend({ numeric: 0 });
 
   self.name = ko.observable(params.name);
   self.id = ko.observable(params.id);
@@ -237,9 +243,10 @@ var Widget = function (params) {
   self.properties = ko.observable(typeof params.properties != "undefined" && params.properties != null ? params.properties : {});
   self.offset = ko.observable(typeof params.offset != "undefined" && params.offset != null ? params.offset : 0).extend({ numeric: 0 });
   self.isLoading = ko.observable(typeof params.isLoading != "undefined" && params.isLoading != null ? params.isLoading : false);
+  self.isOpen = ko.observable(typeof params.isOpen != "undefined" ? params.isOpen : true);
 
   self.klass = ko.computed(function () {
-    return "card card-widget span" + self.size() + (self.offset() * 1 > 0 ? " offset" + self.offset() : "");
+    return "card card-widget span" + self.size() + (self.offset() * 1 > 0 ? " offset" + self.offset() : "") + (!self.isOpen() && " widget-collapsed");
   });
 
   self.expand = function () {
@@ -266,6 +273,23 @@ var Widget = function (params) {
     }
     row.widgets.remove(widget);
   }
+
+  self.toggleOpen = function (gridsterElement) {
+    self.isOpen(!self.isOpen());
+    if (gridsterElement) {
+      var $gridsterElement = $(gridsterElement);
+      var grid = $gridsterElement.coords().grid;
+      if (self.isOpen()) {
+        self.gridsterHeight(self.gridsterHeightOpen());
+      } else {
+        self.gridsterHeightOpen(grid.size_y);
+        self.gridsterHeight(1);
+      }
+      var size_x = grid.size_x;
+      var size_y = self.gridsterHeight();
+      $('.gridster ul').data("gridster").resize_widget($gridsterElement, size_x, size_y);
+    }
+  };
 };
 
 Widget.prototype.clone = function () {

+ 6 - 3
desktop/core/src/desktop/templates/common_dashboard.mako

@@ -258,7 +258,7 @@
         <a href="javascript:void(0)" data-bind="visible: $parent.rows().length > 1, click: function(){remove($parent, this)}"><i class="fa fa-times"></i></a>
       </div>
     </div>
-    <div data-bind="css: {'row-fluid': true, 'row-container':true, 'is-editing': $root.isEditing},
+    <div data-bind="css: {'row-fluid': true, 'row-container':true, 'is-editing': $root.isEditing, 'widget-collapsed': isOpen},
         sortable: { template: 'widget-template${ suffix }', data: widgets, isEnabled: $root.isEditing,
         options: {'handle': '.move-widget', 'opacity': 0.7, 'placeholder': 'row-highlight', 'greedy': true,
             'stop': function(event, ui){$('.card-body').slideDown('fast', function(){$(window).scrollTop(lastWindowScrollPosition)});},
@@ -276,7 +276,7 @@
 
 <script type="text/html" id="widget-template${ suffix }">
   <div data-bind="attr: {'id': 'wdg_'+ id(),}, css: klass, droppable: { data: function() { $root.collection.dropOnWidget(id()) }, options:{ greedy:true }}">
-    <h2 class="card-heading simple">
+    <h2 class="card-heading simple" data-bind="style: { marginBottom: !isOpen() ? '0px' : '' }" >
       %if not USE_GRIDSTER.get():
       <span data-bind="visible: $root.isEditing">
         <a href="javascript:void(0)" class="move-widget"><i class="fa fa-arrows"></i></a>
@@ -296,8 +296,11 @@
       <div class="inline pull-right" data-bind="visible: $root.isEditing">
         <a href="javascript:void(0)" class="remove-widget" data-bind="click: $root.removeWidget"><i class="fa fa-times"></i></a>
       </div>
+      <div class="inline pull-right">
+        <a href="javascript:void(0)" class="remove-widget" data-bind="click: function() { toggleOpen($parent.gridsterElement); if ($parent.toggleOpen) { $parent.toggleOpen(); } }"><i class="fa fa-chevron-down" data-bind="css: { 'fa-rotate-90': !isOpen() }"></i></a>
+      </div>
     </h2>
-    <div class="card-body" style="padding: 5px;">
+    <div class="card-body" style="padding: 5px;" data-bind="visible: isOpen, css: {'widget-collapsed': !isOpen()}">
       <div data-bind="template: { name: function() { return widgetType(); }}" class="widget-main-section"></div>
       <div class="clearfix"></div>
     </div>

A diferenza do arquivo foi suprimida porque é demasiado grande
+ 0 - 0
desktop/libs/dashboard/src/dashboard/static/dashboard/css/common_dashboard.css


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

@@ -452,4 +452,12 @@
     -ms-transition: border-left-color 0.2s ease;
     transition: border-left-color 0.2s ease;
   }
+
+  .widget-collapsed {
+    min-height: 0px !important;
+  }
+
+  .widget-container-collapsed {
+    height: 24px;
+  }
 }

Algúns arquivos non se mostraron porque demasiados arquivos cambiaron neste cambio