IntenseWebs/freeipa
3
0
Fork 0
mirror of https://salsa.debian.org/freeipa-team/freeipa.git synced 2025-02-25 18:55:28 -06:00
Code Issues Packages Projects Releases Wiki Activity

webui: allow multiple base section layouts

Browse Source 
i.e. one for details facet and other for dialogs

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>
This commit is contained in:
Petr Vobornik 2014-04-09 16:38:18 +02:00
parent bcb2ce7f24
commit 216e710188
4 changed files with 75 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
install/ui/src/freeipa/details.js
View File

@ -43,6 +43,12 @@ define([
*/
var exp = {};
/**
* CSS classes for defining basic layout of sections in details facets
* @type {String}
*/
exp.details_section_layout_class = 'col-sm-12 col-md-6';
/**
* Details builder
*
@ -194,10 +200,9 @@ exp.section_builder = IPA.section_builder = function(spec) {
/**
* Default section factory
*
* TODO: should be modified so it can be a class too
* @property {IPA.composite_widget}
* @property {IPA.composite_widget|Object}
*/
that.section_factory = spec.section_factory || IPA.details_section;
that.section_spec = spec.section_spec || IPA.details_section;
/**
* Field builder
@ -231,23 +236,32 @@ exp.section_builder = IPA.section_builder = function(spec) {
* is not specified in spec
*/
that.build_section = function(section_spec, index) {
section_spec.entity = that.container.entity;
section_spec.facet = that.container;
if (!section_spec.label && section_spec.name && that.container.entity) {
var section_label = '@i18n:objects.'+that.container.entity.name+
'.' + section_spec.name;
section_spec.label = section_label;
var spec = section_spec;
var overrides = {};
var spec_type = typeof that.section_spec;
if (spec_type === 'object') {
spec = lang.mixin({}, that.section_spec);
spec = lang.mixin(spec, section_spec);
} else if (spec_type === "function") {
overrides = that.section_spec;
}
if(!section_spec.name) section_spec.name = 'section'+index;
if (!spec.label && spec.name && that.container.entity) {
var section_label = '@i18n:objects.'+that.container.entity.name+
'.' + spec.name;
spec.label = section_label;
}
section_spec.$factory = section_spec.$factory || that.section_factory;
var section = section_spec.$factory(section_spec);
if (!spec.name) spec.name = 'section'+index;
var section = builder.build('widget', spec, {
entity: that.container.entity,
facet: that.container
}, overrides);
that.container.widgets.add_widget(section);
that.create_fields(section, section_spec.fields);
that.create_fields(section, spec.fields);
};
/**
@ -564,6 +578,12 @@ exp.details_facet = IPA.details_facet = function(spec, no_init) {
that.fields.container_add_field(field);
};
/**
* Class for details section, defines layout
* @property {string}
*/
that.section_layout_class = spec.section_layout_class || exp.details_section_layout_class;
/**
* Dirty
*
@ -1091,7 +1111,11 @@ exp.details_facet = IPA.details_facet = function(spec, no_init) {
var section_builder = IPA.section_builder({
container: that,
widget_builder: widget_builder,
field_builder: field_builder
field_builder: field_builder,
section_spec: {
$factory: IPA.details_section,
layout_css_class: that.section_layout_class
}
});
that.builder = IPA.details_builder({

2
install/ui/src/freeipa/dialog.js
View File

@ -252,7 +252,7 @@ IPA.dialog = function(spec) {
}).appendTo(that.dom_node);
that.dialog_node = $('<div/>', {
'class': 'rcue-dialog',
'class': 'rcue-dialog row',
id: that.get_id(),
'data-name' : that.name,
role: 'dialog',

2
install/ui/src/freeipa/dns.js
View File

@ -416,7 +416,7 @@ IPA.dnszone_name_section_layout = function(spec) {
var label_text = widget.label + that.get_measurement_unit_text(widget);
var label_cont = $('<div/>', { 'class': 'control-label col-sm-3' });
var label_cont = $('<div/>', { 'class': that.label_cls });
widget.create_radio(label_cont);

60
install/ui/src/freeipa/widget.js
View File

@ -143,13 +143,29 @@ IPA.widget = function(spec) {
*/
that.visible = spec.visible === undefined ? true : spec.visible;
/**
* Default main element's css classes
* @type {string}
*/
that.base_css_class = spec.base_css_class || 'widget';
/**
* Additional main element's css classes
*
* Intended to be overridden in spec objects
*
* @type {string}
*/
that.css_class = spec.css_class || '';
/**
* Create HTML representation of a widget.
* @method
* @param {HTMLElement} container - Container node
*/
that.create = function(container) {
container.addClass('widget');
container.addClass(that.base_css_class);
container.addClass(that.css_class);
that.container = container;
};
@ -659,6 +675,7 @@ IPA.text_widget = function(spec) {
*/
that.input_type = spec.input_type || 'text';
that.base_css_class = that.base_css_class + ' text-widget';
/**
* Select range of text
@ -674,8 +691,6 @@ IPA.text_widget = function(spec) {
that.widget_create(container);
container.addClass('text-widget');
that.display_control = $('<p/>', {
name: that.name,
'class': 'form-control-static',
@ -831,6 +846,8 @@ IPA.multivalued_widget = function(spec) {
that.rows = [];
that.base_css_class = that.base_css_class + ' multivalued-widget';
that.on_child_value_changed = function(row) {
if (that.test_dirty_row(row)) {
that.toggle_remove_link(row, false);
@ -1047,8 +1064,6 @@ IPA.multivalued_widget = function(spec) {
that.create = function(container) {
container.addClass('multivalued-widget');
that.widget_create(container);
that.create_error_link(container);
@ -1658,11 +1673,12 @@ IPA.radio_widget = function(spec) {
var that = IPA.input_widget(spec);
IPA.option_widget_base(spec, that);
that.base_css_class = that.base_css_class + ' radio-widget';
/** @inheritDoc */
that.create = function(container) {
that.widget_create(container);
that.owb_create(container);
container.addClass('radio-widget');
if (that.undo) {
that.create_undo(container);
@ -1810,12 +1826,12 @@ IPA.select_widget = function(spec) {
that.options = spec.options || [];
that.base_css_class = that.base_css_class + ' select-widget';
that.create = function(container) {
that.widget_create(container);
container.addClass('select-widget');
that.select = $('<select/>', {
name: that.name,
'class':'form-control',
@ -1944,12 +1960,12 @@ IPA.textarea_widget = function (spec) {
that.cols = spec.cols || 40;
that.style = spec.style;
that.base_css_class = that.base_css_class + ' textarea-widget';
that.create = function(container) {
that.widget_create(container);
container.addClass('textarea-widget');
that.input = $('<textarea/>', {
name: that.name,
rows: that.rows,
@ -2385,6 +2401,7 @@ IPA.table_widget = function (spec) {
that.columns = $.ordered_map();
that.value_attr_name = spec.value_attribute || that.name;
that.base_css_class = that.base_css_class + ' table-widget table-responsive';
that.get_columns = function() {
return that.columns.values;
@ -2425,8 +2442,6 @@ IPA.table_widget = function (spec) {
that.widget_create(container);
container.addClass('table-widget table-responsive');
that.table = $('<table/>', {
'class': 'content-table table table-condensed table-striped table-hover table-bordered',
name: that.name
@ -3255,12 +3270,11 @@ IPA.combobox_widget = function(spec) {
that.empty_option = spec.empty_option === undefined ? true : spec.empty_option;
that.options = spec.options || [];
that.z_index = spec.z_index ? spec.z_index + 9000000 : 9000000;
that.base_css_class = that.base_css_class + ' combobox-widget';
that.create = function(container) {
that.widget_create(container);
container.addClass('combobox-widget');
that.input_group = $('<div/>', {}).appendTo(container);
that.input_container = $('<div/>', {
@ -4061,17 +4075,11 @@ IPA.html_widget = function(spec) {
/** Code to render */
that.html = spec.html;
/** Container CSS class */
that.css_class = spec.css_class;
that.create = function(container) {
that.widget_create(container);
if (that.css_class) {
container.addClass(that.css_class);
}
if (that.html) {
container.append(that.html);
}
@ -4127,11 +4135,13 @@ IPA.section = function(spec) {
var that = IPA.composite_widget(spec);
that.show_header = spec.show_header === undefined ? true : spec.show_header;
that.base_css_class = that.base_css_class + ' details-section';
that.layout_css_class = spec.layout_css_class || 'col-sm-12';
that.create = function(container) {
that.widget_create(container);
container.addClass('details-section col-sm-12');
that.container.addClass(that.layout_css_class);
if (that.show_header) {
that.create_header(container);
@ -4270,8 +4280,8 @@ exp.fluid_layout = IPA.fluid_layout = function(spec) {
var that = IPA.layout(spec);
that.cont_cls = spec.cont_cls || 'form-horizontal';
that.widget_cls = spec.widget_cls || 'col-md-6 controls';
that.label_cls = spec.label_cls || 'col-md-2 control-label';
that.widget_cls = spec.widget_cls || 'col-sm-9 controls';
that.label_cls = spec.label_cls || 'col-sm-3 control-label';
that.group_cls = spec.group_cls || 'form-group';
that.create = function(widgets) {
@ -4979,8 +4989,6 @@ IPA.sshkey_widget = function(spec) {
that.widget_create(container);
container.addClass('text-widget');
that.status_label = $('<span />', {
'class': 'sshkey-status',
text: ''
@ -5297,10 +5305,10 @@ IPA.value_map_widget = function(spec) {
that.value_map = spec.value_map || {};
that.default_label = text.get(spec.default_label || '');
that.value = '';
that.base_css_class = that.base_css_class + ' status-section';
that.create = function(container) {
that.widget_create(container);
container.addClass('status-widget');
that.display_control = $('<span/>', {
name: that.name