mirror of
https://salsa.debian.org/freeipa-team/freeipa.git
synced 2025-01-26 16:16:31 -06:00
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:
parent
cd4fd60c0e
commit
b68f819de7
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
});
|
||||
});
|
||||
|
@ -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(' ');
|
||||
|
||||
|
@ -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'),
|
||||
],
|
||||
}
|
||||
|
||||
|
@ -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'),
|
||||
],
|
||||
}
|
||||
|
||||
|
@ -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'),
|
||||
],
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user