Distribute health display boxes evenly across page

hawtio · Oct 25, 2013 · 9d16679 · 9d16679
1 parent 05d29f7
commit 9d16679
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 3 deletions.
diff --git a/hawtio-web/src/main/webapp/app/health/html/health.html b/hawtio-web/src/main/webapp/app/health/html/health.html
@@ -8,9 +8,10 @@
   </div>
 
   <div class="row-fluid">
-    <div class="inline-block health-displays"
+    <div class="health-displays"
          ng-repeat="display in displays"
-         ng-show="filterValues(display)">
+         ng-show="filterValues(display)"
+         hawtio-auto-columns=".health-display">
       <div class="health-display-title">{{display.mbean}}</div>
       <div ng-show="display.values.length === 0">No displays to show...</div>
       <div ng-repeat="value in display.values"

diff --git a/hawtio-web/src/main/webapp/app/ui/js/autoColumns.ts b/hawtio-web/src/main/webapp/app/ui/js/autoColumns.ts
@@ -0,0 +1,58 @@
+module UI {
+
+  export class AutoColumns {
+    public restrict = 'A';
+
+    public link = ($scope, $element, $attr) => {
+
+      var selector = getIfSet('hawtioAutoColumns', $attr, 'div');
+
+      var go = function() {
+
+        var containerWidth = $element.innerWidth();
+        var childWidth = 0;
+
+        var children = $element.children(selector);
+
+        // find the biggest child, though really they should all be the same size...
+        children.each(function(child) {
+          var self = $(this);
+          if (!self.is(':visible')) {
+            return;
+          }
+          if (self.outerWidth() > childWidth) {
+            childWidth = self.outerWidth();
+          }
+        });
+
+        if (childWidth === 0) {
+          return;
+        }
+
+        var columns = Math.floor(containerWidth / childWidth);
+        var margin = (containerWidth - (columns * childWidth)) / columns / 2;
+        /*
+        log.debug("child width: ", childWidth);
+        log.debug("Inner width: ", containerWidth);
+        log.debug("columns: ", columns);
+        log.debug("margin: ", margin);
+        */
+
+        children.each(function(child) {
+          $(this).css({
+            'margin-left': margin,
+            'margin-right': margin
+          });
+        });
+
+      };
+
+      //$scope.$watch(go);
+      setTimeout(go, 300);
+      $(window).resize(go);
+
+    };
+
+  }
+
+}
diff --git a/hawtio-web/src/main/webapp/app/ui/js/helpers.ts b/hawtio-web/src/main/webapp/app/ui/js/helpers.ts
@@ -4,6 +4,17 @@ module UI {
 
   export var scrollBarWidth:number = null;
 
+  export function getIfSet(attribute, $attr, def) {
+    if (attribute in $attr) {
+      var wantedAnswer = $attr[attribute];
+      if (wantedAnswer && !wantedAnswer.isBlank()) {
+        return wantedAnswer;
+      }
+    }
+    return def;
+  }
+
+
   /*
    * Helper function to ensure a directive attribute has some default value
    */

diff --git a/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts b/hawtio-web/src/main/webapp/app/ui/js/uiPlugin.ts
@@ -48,6 +48,8 @@ module UI {
         return new UI.MessagePanel();
       }).directive('hawtioInfoPanel', () => {
         return new UI.InfoPanel();
+      }).directive('hawtioAutoColumns', () => {
+        return new UI.AutoColumns();
       }).run(function (helpRegistry) {
 
         helpRegistry.addDevDoc("ui1", 'app/ui/doc/developerPage1.md');

diff --git a/hawtio-web/src/main/webapp/css/site-base.css b/hawtio-web/src/main/webapp/css/site-base.css
@@ -2875,7 +2875,8 @@ fs-donut svg g text.units {
   display: inline-block;
   width: 300px;
   height: 300px;
-  margin-left: 10px;
+  margin-left: 0;
+  margin-right: 0;
   margin-bottom: 10px;
   overflow: hidden;
 }