Support horizontal and inline form layouts

deform/field.py

@@ -278,12 +278,15 @@ def clone(self):
         attribute of the node is not cloned; instead the field
         receives a new order attribute; it will be a number larger
         than the last rendered field of this set.  The parent of the cloned
-        node will become ``None`` unconditionally."""
+        node will be retained by the clone."""
         cloned = self.__class__(self.schema)
         cloned.__dict__.update(self.__dict__)
         cloned.order = next(cloned.counter)
         cloned.oid = 'deformField%s' % cloned.order
-        cloned._parent = None
+        parent = self.parent
+        if parent is not None:
+            parent = weakref.ref(parent)
+        cloned._parent = parent
         children = []
         for field in self.children:
             cloned_child = field.clone()

deform/templates/form.pt

@@ -11,7 +11,9 @@
               ajax_options ajax_options|field.ajax_options;
               formid formid|field.formid;
               action action|field.action or None;
-              method method|field.method;"
+              method method|field.method;
+              column_classes column_classes|field.widget.column_classes;"
+
   tal:attributes="autocomplete autocomplete;
                   style style;
                   class css_class;
@@ -43,11 +45,19 @@
     </p>
 
     <div tal:repeat="child field"
-         tal:replace="structure child.render_template(item_template)"/>
+         tal:replace="structure child.render_template(item_template, form_class=css_class, column_classes=column_classes)"/>
 
-    <div class="form-group">
-      <tal:loop tal:repeat="button buttons">
-        <button
+    <div tal:define="horizontal css_class == 'form-horizontal';
+                     left_column_class column_classes[0]|'col-xs-12';
+                     right_column_class column_classes[1]|'col-xs-12';"
+         tal:omit-tag="not horizontal"
+         class="form-group">
+      <div class="${left_column_class}"
+           tal:condition="horizontal and column_classes">
+      </div>
+      <div class="${right_column_class}" tal:omit-tag="not horizontal">
+        <tal:loop tal:repeat="button buttons">
+          <button
               tal:define="btn_disposition repeat.button.start and 'btn-primary' or 'btn-default';
               btn_icon button.icon|None"
               tal:attributes="disabled button.disabled if button.disabled else None"
@@ -56,12 +66,12 @@
               type="${button.type}"
               class="btn ${btn_disposition} ${button.css_class}"
               value="${button.value}">
-          <i tal:condition="btn_icon" class="${btn_icon}"> </i>
-          ${button.title}
-        </button>
-      </tal:loop>
+            <i tal:condition="btn_icon" class="${btn_icon}"> </i>
+            ${button.title}
+          </button>
+        </tal:loop>
+      </div>
     </div>
-
   </fieldset>
 
   <script type="text/javascript" tal:condition="use_ajax">

deform/templates/mapping.pt

@@ -1,7 +1,8 @@
 <tal:def tal:define="title title|field.title;
                      description description|field.description;
                      errormsg errormsg|field.errormsg;
-                     item_template item_template|field.widget.item_template"
+                     item_template item_template|field.widget.item_template;
+                     column_classes column_classes|field.widget.column_classes;"
          i18n:domain="deform">
 
   <div class="panel panel-default" title="${description}">
@@ -22,7 +23,7 @@
 
       ${field.start_mapping()}
       <div tal:repeat="child field.children"
-           tal:replace="structure child.render_template(item_template)" >
+           tal:replace="structure child.render_template(item_template, column_classes=column_classes)" >
       </div>     
       ${field.end_mapping()}
 

deform/templates/mapping_item.pt

@@ -1,48 +1,60 @@
 <div tal:define="error_class error_class|field.widget.error_class;
-                 description description|field.description;
-                 title title|field.title;
-                 oid oid|field.oid;
-                 hidden hidden|field.widget.hidden;
-                 category category|field.widget.category;
-                 structural hidden or category == 'structural';
-                 required required|field.required;"
+     description description|field.description;
+     title title|field.title;
+     oid oid|field.oid;
+     hidden hidden|field.widget.hidden;
+     category category|field.widget.category;
+     structural category == 'structural';
+     required required|field.required;
+
+     form field.get_root();
+     form_class form_class|string:${form.widget.css_class or form.css_class or ''};
+     horizontal form_class == 'form-horizontal';
+     inline form_class == 'form-inline';
+     column_classes column_classes|field.parent.widget.column_classes;
+     left_column_class column_classes[0]|'col-xs-12';
+     right_column_class column_classes[1]|'col-xs-12';
+     label_class (not horizontal or column_classes) and 'control-label' or '';
+     label_class inline and 'sr-only' or label_class;"
      class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''}"
-     title="${description}"
      id="item-${oid}"
-     tal:omit-tag="structural"
+     tal:attributes="title inline and description or None"
+     tal:omit-tag="hidden or (structural and not horizontal)"
      i18n:domain="deform">
 
   <label for="${oid}"
-         class="control-label ${required and 'required' or ''}"
-         tal:condition="not structural"
+         class="${label_class} ${horizontal and left_column_class or ''} ${required and not structural and 'required' or ''}"
+         tal:condition="not (hidden or (structural and not horizontal))"
          id="req-${oid}"
          >
-    ${title}
+    <tal:span tal:condition="not structural">${title}</tal:span>
   </label>
 
-  <div tal:define="input_prepend field.widget.input_prepend | None;
-                   input_append field.widget.input_append  | None"
-       tal:omit-tag="not (input_prepend or input_append)"
-       class="input-group">
-    <span class="input-group-addon"
-          tal:condition="input_prepend">${input_prepend}</span
-    ><span tal:replace="structure field.serialize(cstruct).strip()"
-    /><span class="input-group-addon"
-            tal:condition="input_append">${input_append}</span>
-  </div>
-
-  <p class="help-block"
-     tal:define="errstr 'error-%s' % field.oid"
-     tal:repeat="msg field.error.messages()"
-     i18n:translate=""
-     tal:attributes="id repeat.msg.index==0 and errstr or
-     ('%s-%s' % (errstr, repeat.msg.index))"
-     tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
-    ${msg}
-  </p>
+  <div class="${right_column_class}" tal:omit-tag="hidden or not horizontal">
+    <div tal:define="input_prepend field.widget.input_prepend | None;
+         input_append field.widget.input_append  | None"
+         tal:omit-tag="not (input_prepend or input_append)"
+         class="input-group">
+      <span class="input-group-addon"
+            tal:condition="input_prepend">${input_prepend}</span
+      ><span tal:replace="structure field.serialize(cstruct).strip()"
+      /><span class="input-group-addon"
+              tal:condition="input_append">${input_append}</span>
+    </div>
 
-  <p tal:condition="field.description and not field.widget.hidden"
-     class="help-block" >
-    ${field.description}
-  </p>
+    <p class="help-block"
+       tal:define="errstr 'error-%s' % field.oid"
+       tal:repeat="msg field.error.messages()"
+       i18n:translate=""
+       tal:attributes="id repeat.msg.index==0 and errstr or
+       ('%s-%s' % (errstr, repeat.msg.index))"
+       tal:condition="field.error and not hidden and not field.typ.__class__.__name__=='Mapping' and not inline">
+      ${msg}
+    </p>
+
+    <p tal:condition="field.description and not hidden and not inline"
+       class="help-block" >
+      ${field.description}
+    </p>
+  </div>
 </div>

deform/widget.py

@@ -1324,6 +1324,16 @@ class MappingWidget(Widget):
         The template name used to render each item in the form.
         Default: ``readonly/mapping_item``.
 
+    column_classes
+        A 2-tuple of strings specifying the classes used to set the widths
+        of the left and right columns in a horizontal form layout.
+        This is ignored unless the ``bootstrap_form_style`` attribute
+        of the form is set to ``form-horizontal``.
+
+        If ``column_classes`` is ``None`` (or some other false value)
+        within a horizontal form, the default templates will attempt
+        emulate to emulate the “vertical” form layout.
+
     Note that the MappingWidget template does not honor the ``css_class``
     or ``style`` attributes of the widget.
     """
@@ -1332,6 +1342,7 @@ class MappingWidget(Widget):
     item_template = 'mapping_item'
     readonly_item_template = 'readonly/mapping_item'
     error_class = None
+    column_classes = None
     category = 'structural'
     requirements = ( ('deform', None), )
 
@@ -1396,6 +1407,7 @@ class FormWidget(MappingWidget):
     """
     template = 'form'
     readonly_template = 'readonly/form'
+    column_classes = ('col-sm-4 col-md-3', 'col-sm-8 col-md-9')
 
 class SequenceWidget(Widget):
     """Renders a sequence (0 .. N widgets, each the same as the other)