Better displaying of long names in tables and facet headers

Tables columns have computed width. If value in one column is very long it widens the column and shortens others. This change causes that body columns are not aligned with header columns which makes the table less readable.

Applying 'word-break: break-all' style breaks the word to multiple lines and solves the problem.

Simililar problem is in details facet when displaying text values. Very long values widens the table and a horizontal slider is displayed, which is bad. Applying same solution.

In facet headers and breadcrumb navigation breaking the pkey looks bad - there should be only on line of pkey. To solve this, the pkey is limited to 63 characters (empirically measured). Long pkeys are cut. Uncut pkey is set as a title to avoid losing information.

Whole breadcrump could be about 140 chars (with current styles). 10 chars is reserved for entity link, 60 for pkey the rest (about 60) for parent pkeys. The assumtion is that the parent pkeys wouldn't be so long so they won't be cut anyway.

Column width calculation in tables was iproved. Now it counts with cell spacing, padding, border. It uses these assumtions:
cell-spacing: 2px
cell-padding: 6px th:right, left; td: left
cell-border: th:1px; td:0px

It would be better to get these measures dynamically. Right now it is good enough - better than previous calculation.

Result: data cells are aligned with their header. This alignment fails if vertical scrollbar is displayed (existing problem).

Also added padding to headers in association adder dialog.

https://fedorahosted.org/freeipa/ticket/1890

3 files changed, 63 insertions, 20 deletions

diff --git a/install/ui/facet.js b/install/ui/facet.js
index 0680c150..df5743b1 100644
--- a/install/ui/facet.js
+++ b/install/ui/facet.js
@@ -193,12 +193,28 @@ IPA.facet_header = function(spec) {
         }
     };
 
+    that.limit_text = function(value, max_length) {
+
+        if (!value) return '';
+
+        var limited_text = value;
+
+        if (value.length && value.length > max_length + 3) {
+            limited_text = value.substring(0, max_length)+'...';
+        }
+
+        return limited_text;
+    };
+
     that.set_pkey = function(value) {
 
         if (!value) return;
 
+        var limited_value = that.limit_text(value, 60);
+
         if (!that.facet.disable_breadcrumb) {
             var breadcrumb = [];
+
             var entity = that.facet.entity.get_containing_entity();
 
             while (entity) {
@@ -218,17 +234,25 @@ IPA.facet_header = function(spec) {
             }
 
             that.path.empty();
+            var key_max_lenght = 60/breadcrumb.length;
+
+            for (var i=0; i<breadcrumb.length; i++) {
+                var item = breadcrumb[i];
+
+                var entity_key = item.text();
+                var limited_entity_key = that.limit_text(entity_key, key_max_lenght);
+                item.text(limited_entity_key);
 
-            for (var i=0; i<breadcrumb.length; i++){
                 that.path.append(' &raquo; ');
-                that.path.append(breadcrumb[i]);
+                that.path.append(item);
             }
 
             that.path.append(' &raquo; ');
 
             $('<span>', {
                 'class': 'breadcrumb-element',
-                text: value
+                title: value,
+                text: limited_value
             }).appendTo(that.path);
         }
 
@@ -239,7 +263,8 @@ IPA.facet_header = function(spec) {
 
         $('<span/>', {
             'class': 'facet-pkey',
-            text: value
+            title: value,
+            text: limited_value
         }).appendTo(h3);
     };
 
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 529a08f1..b4453df2 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -680,7 +680,7 @@ span.main-nav-off > a:visited {
 }
 
 .search-table thead tr th {
-    padding: 0 0.5em;
+    padding: 0 6px;
     background-color:#f6f6f6;
     color:#333333;
     text-align: left;
@@ -689,11 +689,17 @@ span.main-nav-off > a:visited {
 }
 
 .search-table thead tr th .action-button {
-    margin: 0 0 0 0.5em;
+    margin: 0 0 0 6px;
 }
 
 .search-table tbody td {
-    padding-left: 0.5em;
+    padding: 0 0 0 7px;
+}
+
+.search-table thead th div,
+.search-table tbody td div
+{
+    word-wrap: break-word;
 }
 
 .search-table tfoot td {
@@ -820,9 +826,11 @@ hr {
 .section-cell-label {
     vertical-align: top;
     width: 120px;
+    max-width: 120px;
 }
 
 .section-cell-field {
+    max-width: 650px;
 }
 
 .details-section {
@@ -841,10 +849,12 @@ hr {
     text-align: right;
     vertical-align: top;
     width: 120px;
+    word-wrap: break-word;
 }
 
 .details-section .section-cell-field {
     font-weight: bold;
+    word-wrap: break-word;
 }
 
 .undo {
@@ -1111,11 +1121,12 @@ table.scrollable tbody {
     right: 0;
     height: 1.5em;
     line-height: 1.5em;
+    padding: 0.2em 1em;
 }
 
 .adder-dialog-content {
     position: absolute;
-    top: 1.5em;
+    top: 1.9em;
     left: 0;
     right: 0;
     bottom: 0;
@@ -1177,7 +1188,7 @@ table.scrollable tbody {
 }
 
 .adder-dialog-external .adder-dialog-content {
-    top: 1.9em;
+    top: 2.1em;
 }
 
 .adder-dialog-external input {
diff --git a/install/ui/widget.js b/install/ui/widget.js
index a8ad5cd8..ffbcbadf 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -1064,7 +1064,7 @@ IPA.table_widget = function (spec) {
 
         if (that.selectable) {
             th = $('<th/>', {
-                'style': 'width: 22px;'
+                'style': 'width: '+IPA.checkbox_column_width+'px;'
             }).appendTo(tr);
 
             if (that.multivalued) {
@@ -1101,29 +1101,32 @@ IPA.table_widget = function (spec) {
                     /* don't use the checkbox column as part of the overall
                        calculation for column widths.  It is so small
                        that it throws off the average. */
-                    width = (that.table.width() -
-                             (that.selectable ?
-                              IPA.checkbox_column_width : 0)) /
+                    width = (that.table.width() - 4 -
+                             ((that.selectable ?
+                              IPA.checkbox_column_width : 0) + 14)) /
                         columns.length;
+                    width -= 16; //cell padding, border, spacing
                 }
                 width += 'px';
                 th.css('width', width);
+                th.css('max-width', width);
                 column.width = width;
             } else {
                 if (column.width) {
                     th.css('width', column.width);
+                    th.css('max-width', column.width);
                 }
             }
 
             var label = column.label;
 
-            $('<span/>', {
+            $('<div/>', {
                 'style': 'float: left;',
                 'html': label
             }).appendTo(th);
 
             if (i == columns.length-1) {
-                that.buttons = $('<span/>', {
+                that.buttons = $('<div/>', {
                     'name': 'buttons',
                     'style': 'float: right;'
                 }).appendTo(th);
@@ -1145,7 +1148,7 @@ IPA.table_widget = function (spec) {
 
         if (that.selectable) {
             td = $('<td/>', {
-                'style': 'width: '+ IPA.checkbox_column_width +'px;'
+                'style': 'width: '+ (IPA.checkbox_column_width + 7) +'px;'
             }).appendTo(that.row);
 
             if (that.multivalued) {
@@ -1168,10 +1171,14 @@ IPA.table_widget = function (spec) {
 
             td = $('<td/>').appendTo(that.row);
             if (column.width) {
-                td.css('width', column.width);
+                width = parseInt(
+                        column.width.substring(0, column.width.length-2),10);
+                width += 7; //data cells lack right padding
+                td.css('width', width);
+                td.css('max-width', width);
             }
 
-            $('<span/>', {
+            $('<div/>', {
                 'name': column.name
             }).appendTo(td);
         }
@@ -1375,9 +1382,9 @@ IPA.table_widget = function (spec) {
                 $('input[name="'+that.name+'"]', tr).val(value);
             }
 
-            var span = $('span[name="'+column.name+'"]', tr);
+            var div = $('div[name="'+column.name+'"]', tr);
 
-            column.setup(span, record);
+            column.setup(div, record);
         }
     };