mirror of
https://salsa.debian.org/freeipa-team/freeipa.git
synced 2025-01-12 01:01:55 -06:00
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
This commit is contained in:
Petr Vobornik
parent
2403545163
commit
a1c9e3618c
@ -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(' » ');
|
||||
that.path.append(breadcrumb[i]);
|
||||
that.path.append(item);
|
||||
}
|
||||
|
||||
that.path.append(' » ');
|
||||
|
||||
$('<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);
|
||||
};
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user