Additional better displaying of long names

 - facet group headers, error dialog, non-scrollable tables, can manage long names

 Size calculation of scrollable and non-scrollable tables was united. Now these types of tables differ only by style.

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

4 files changed, 53 insertions, 49 deletions

diff --git a/install/ui/facet.js b/install/ui/facet.js
index e16ee6704..316e90cc5 100644
--- a/install/ui/facet.js
+++ b/install/ui/facet.js
@@ -193,24 +193,11 @@ 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);
+        var limited_value = IPA.limit_text(value, 60);
 
         if (!that.facet.disable_breadcrumb) {
             var breadcrumb = [];
@@ -234,13 +221,13 @@ IPA.facet_header = function(spec) {
             }
 
             that.path.empty();
-            var key_max_lenght = 60/breadcrumb.length;
+            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);
+                var limited_entity_key = IPA.limit_text(entity_key, key_max_lenght);
                 item.text(limited_entity_key);
 
                 that.path.append(' &raquo; ');
@@ -381,13 +368,15 @@ IPA.facet_header = function(spec) {
 
                 var label = facet_group.label;
                 if (pkey && label) {
-                    label = label.replace('${primary_key}', pkey);
+                    var limited_pkey = IPA.limit_text(pkey, 20);
+                    label = label.replace('${primary_key}', limited_pkey);
                 } else {
                     label = '';
                 }
 
                 var label_container = $('.facet-group-label', span);
                 label_container.text(label);
+                if (pkey) label_container.attr('title', pkey);
 
                 var facets = facet_group.facets.values;
                 for (var j=0; j<facets.length; j++) {
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index b4453df2b..703f37cf0 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -624,11 +624,18 @@ span.main-nav-off > a:visited {
     height: 100%;
 }
 
+.content-table thead {
+    position: absolute;
+    top: 0px;
+    left: 3px;
+    right: 3px;
+}
+
 .content-table tbody {
     position: absolute;
     top: 31px;
     left: 3px;
-    right: 4px;
+    right: 3px;
     bottom: 35px;
 }
 
@@ -895,17 +902,18 @@ a, .ui-widget-content a {
 /* ---- Dialog ---- */
 
 .ui-dialog .ui-dialog-titlebar-close span {
-        background-color: transparent !important;
+    background-color: transparent !important;
 }
 
 .ui-dialog .ui-dialog-content {
+    word-wrap: break-word;
     /* this should go away once we can fix table scrolling */
-    overflow:auto;
+    overflow: auto;
 }
 
 .ui-dialog .ui-dialog-titlebar {
-        padding: 0.5em 1em;
-        position: relative;
+    padding: 0.5em 1em;
+    position: relative;
 }
 
 .ui-dialog .ui-dialog-buttonpane button {
diff --git a/install/ui/ipa.js b/install/ui/ipa.js
index 6b0704606..b39a4e566 100644
--- a/install/ui/ipa.js
+++ b/install/ui/ipa.js
@@ -1097,6 +1097,19 @@ IPA.error_list = function() {
     return that;
 };
 
+IPA.limit_text = function(value, max_length) {
+
+    if (!value) return '';
+
+    var limited_text = value;
+
+    if (value.length && value.length > max_length) {
+        limited_text = value.substring(0, max_length - 3)+'...';
+    }
+
+    return limited_text;
+};
+
 IPA.config = {
     default_priority: 500
 };
diff --git a/install/ui/widget.js b/install/ui/widget.js
index ffbcbadf1..69fe704b8 100644
--- a/install/ui/widget.js
+++ b/install/ui/widget.js
@@ -1091,32 +1091,27 @@ IPA.table_widget = function (spec) {
 
             th = $('<th/>').appendTo(tr);
 
-            if (that.scrollable) {
-                var width;
-                if (column.width) {
-                    width = parseInt(
-                        column.width.substring(0, column.width.length-2),10);
-                    width += 16;
-                } else {
-                    /* 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() - 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;
+            var width;
+            var cell_spacing = 16; //cell padding(2x6px), border (2x1px), spacing (2px)
+            if (column.width) {
+                width = parseInt(
+                    column.width.substring(0, column.width.length-2),10);
+                width += 16;
             } else {
-                if (column.width) {
-                    th.css('width', column.width);
-                    th.css('max-width', column.width);
-                }
+                /* 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.thead.width() -
+                        2 - //first cell spacing
+                        ((that.selectable ? IPA.checkbox_column_width +
+                          cell_spacing : 0))) /
+                        columns.length;
+                width -= cell_spacing;
             }
+            width += 'px';
+            th.css('width', width);
+            th.css('max-width', width);
+            column.width = width;
 
             var label = column.label;
 
@@ -1131,9 +1126,7 @@ IPA.table_widget = function (spec) {
                     'style': 'float: right;'
                 }).appendTo(th);
             }
-            if (that.scrollable && !column.width){
-                column.width = th.width() +'px';
-            }
+
         }
 
         that.tbody = $('<tbody/>').appendTo(that.table);
@@ -1174,6 +1167,7 @@ IPA.table_widget = function (spec) {
                 width = parseInt(
                         column.width.substring(0, column.width.length-2),10);
                 width += 7; //data cells lack right padding
+                width += 'px';
                 td.css('width', width);
                 td.css('max-width', width);
             }