diff options
author | Petr Vobornik <pvoborni@redhat.com> | 2011-12-09 14:13:17 +0100 |
---|---|---|
committer | Endi S. Dewata <edewata@redhat.com> | 2011-12-09 22:46:12 +0000 |
commit | 34e357e7138ee838583f69001c1d2ad067c98b27 (patch) | |
tree | 2bbed0127d3656ee5a1af203064aa9bc246e8a4f /install/ui | |
parent | 790ffc42a8e9ebd549eebffdef05da28ee96e129 (diff) | |
download | freeipa-34e357e7138ee838583f69001c1d2ad067c98b27.tar.gz freeipa-34e357e7138ee838583f69001c1d2ad067c98b27.tar.xz freeipa-34e357e7138ee838583f69001c1d2ad067c98b27.zip |
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
Diffstat (limited to 'install/ui')
-rw-r--r-- | install/ui/facet.js | 23 | ||||
-rw-r--r-- | install/ui/ipa.css | 18 | ||||
-rw-r--r-- | install/ui/ipa.js | 13 | ||||
-rw-r--r-- | install/ui/widget.js | 48 |
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(' » '); @@ -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); } |