webui: allow multiple base section layouts

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

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

4 files changed, 74 insertions, 42 deletions

diff --git a/install/ui/src/freeipa/details.js b/install/ui/src/freeipa/details.js
index 8359b7fcb..fcfd667dc 100644
--- a/install/ui/src/freeipa/details.js
+++ b/install/ui/src/freeipa/details.js
@@ -44,6 +44,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
  *
  * Processes containers spec and builds sections, widget and fields according
@@ -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 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 (!spec.label && spec.name && that.container.entity) {
             var section_label = '@i18n:objects.'+that.container.entity.name+
-                    '.' + section_spec.name;
-            section_spec.label = section_label;
+                    '.' + spec.name;
+            spec.label = section_label;
         }
 
-        if(!section_spec.name) section_spec.name = 'section'+index;
+        if (!spec.name) spec.name = 'section'+index;
 
-        section_spec.$factory = section_spec.$factory || that.section_factory;
-        var section = section_spec.$factory(section_spec);
+        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);
     };
 
     /**
@@ -565,6 +579,12 @@ exp.details_facet = IPA.details_facet = function(spec, no_init) {
     };
 
     /**
+     * Class for details section, defines layout
+     * @property {string}
+     */
+    that.section_layout_class = spec.section_layout_class || exp.details_section_layout_class;
+
+    /**
      * Dirty
      *
      * - true if any field is 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({
diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js
index a7f5e09fd..228bc218d 100644
--- a/install/ui/src/freeipa/dialog.js
+++ b/install/ui/src/freeipa/dialog.js
@@ -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',
diff --git a/install/ui/src/freeipa/dns.js b/install/ui/src/freeipa/dns.js
index ae76b59a1..1efdb55a3 100644
--- a/install/ui/src/freeipa/dns.js
+++ b/install/ui/src/freeipa/dns.js
@@ -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);
 
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index c17f7ca27..39b1192ef 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -144,12 +144,28 @@ 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