webui: improve usability of attributes widget

Attributes widget layour was changed from tiny table which allowed
to display only few options to a checkbox list with multiple
columns (depends on container).

Check all attributes option was removed to force the user
to read through the attributes which he selects.

Initial version authored by: Adam Misnyovszki

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

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
This commit is contained in:
Petr Vobornik 2014-07-04 13:24:47 +02:00
parent cd4fd60c0e
commit b68f819de7
6 changed files with 26 additions and 96 deletions

View File

@ -345,7 +345,7 @@ table.scrollable tbody {
.option_widget {
list-style-type: none;
margin: 0;
padding: 0;
padding: 0 0 0 1px;
}
.option_widget.nested {
@ -365,6 +365,19 @@ table.scrollable tbody {
max-width: 150px;
}
.option_widget.columns.attribute_widget {
position: relative;
overflow-y: auto;
max-height: 36em;
}
.option_widget.columns.attribute_widget > li {
float: left;
width: 50%;
min-width: 90px;
max-width: 200px;
}
.combobox-widget-input {
position: relative;
}

View File

@ -544,6 +544,7 @@ return {
aci.attributes_widget = function(spec) {
spec = spec || {};
spec.layout = spec.layout || 'columns attribute_widget';
var that = IPA.checkboxes_widget(spec);
@ -552,83 +553,6 @@ aci.attributes_widget = function(spec) {
var id = spec.name;
that.create = function(container) {
that.container = container;
var attr_container = $('<div/>', {
'class': 'aci-attribute-table-container'
}).appendTo(container);
that.$node = that.table = $('<table/>', {
id: id,
name: that.name,
'class': 'table table-bordered table-condensed aci-attribute-table scrollable'
}).
append('<thead/>').
append('<tbody/>').
appendTo(attr_container);
var tr = $('<tr></tr>').appendTo($('thead', that.table));
var th = $('<th/>').appendTo(tr);
IPA.standalone_option({
type: "checkbox",
click: function() {
$('.aci-attribute', that.table).
prop('checked', $(this).prop('checked'));
that.value_changed.notify([], that);
that.emit('value-change', { source: that });
}
}, th);
tr.append($('<th/>', {
'class': 'aci-attribute-column',
html: text.get('@i18n:objects.aci.attribute')
}));
if (that.undo) {
that.create_undo(container);
}
if (that.object_type) {
that.populate(that.object_type);
}
that.create_error_link(container);
};
that.create_options = function(options) {
var tbody = $('tbody', that.table);
for (var i=0; i<options.length ; i++){
var option = options[i];
var value = option.value.toLowerCase();
var tr = $('<tr/>').appendTo(tbody);
var td = $('<td/>').appendTo(tr);
var name = that.get_input_name();
var id = that._option_next_id + name;
var opt = IPA.standalone_option({
id: id,
type: 'checkbox',
name: name,
value: value,
'class': 'aci-attribute',
change: function() {
that.value_changed.notify([], that);
that.emit('value-change', { source: that });
}
}, td);
td = $('<td/>').appendTo(tr);
td.append($('<label/>',{
text: value,
'for': id
}));
option.input_node = opt[0];
that.new_option_id();
}
};
that.update = function(values) {
that.values = [];
@ -646,14 +570,12 @@ aci.attributes_widget = function(spec) {
that.populate(that.object_type);
that.append();
that.create_options(that.options);
that.owb_create(that.container);
that.owb_update(values);
};
that.populate = function(object_type) {
$('tbody tr', that.table).remove();
if (!object_type || object_type === '') return;
var metadata = metadata_provider.get('@mo:'+object_type);
@ -689,10 +611,6 @@ aci.attributes_widget = function(spec) {
return false;
};
that.show_undo = function() {
$(that.undo_span).css('display', 'inline-block');
};
return that;
};
@ -1080,4 +998,4 @@ aci.register = function() {
phases.on('registration', aci.register);
return aci;
});
});

View File

@ -1444,7 +1444,6 @@ IPA.option_widget_base = function(spec, that) {
that.create = function(container) {
that.destroy();
that.create_options(that.$node);
var css_class = [that.css_class, 'option_widget', that.layout,
that.nested ? 'nested': ''].join(' ');

View File

@ -33,11 +33,11 @@ DATA = {
('textbox', 'aciname', PKEY),
('combobox', 'group', 'editors'),
('combobox', 'memberof', 'ipausers'),
('table', 'attrs', 'audio'),
('table', 'attrs', 'businesscategory'),
('checkbox', 'attrs', 'audio'),
('checkbox', 'attrs', 'businesscategory'),
],
'mod': [
('table', 'attrs', 'businesscategory'),
('checkbox', 'attrs', 'businesscategory'),
],
}

View File

@ -61,11 +61,11 @@ PERMISSION_DATA = {
('checkbox', 'ipapermright', 'write'),
('checkbox', 'ipapermright', 'read'),
('selectbox', 'type', 'user'),
('table', 'attrs', 'audio'),
('table', 'attrs', 'cn'),
('checkbox', 'attrs', 'audio'),
('checkbox', 'attrs', 'cn'),
],
'mod': [
('table', 'attrs', 'carlicense'),
('checkbox', 'attrs', 'carlicense'),
],
}

View File

@ -30,11 +30,11 @@ DATA = {
'pkey': PKEY,
'add': [
('textbox', 'aciname', PKEY),
('table', 'attrs', 'audio'),
('table', 'attrs', 'businesscategory'),
('checkbox', 'attrs', 'audio'),
('checkbox', 'attrs', 'businesscategory'),
],
'mod': [
('table', 'attrs', 'businesscategory'),
('checkbox', 'attrs', 'businesscategory'),
],
}