Commits

Torsten Irländer  committed 082b5df Merge

Merged

  • Participants
  • Parent commits dfa6f1e, 0d20122

Comments (0)

Files changed (16)

 f942e173c3c72d52f214da7786a5acc77cce35d9 0.4.2
 3fb78facf61f20058a6d3c3b3783b1a48b76a2ca 0.4.2
 ae60bfc485a1f34046d7cdce7d1c47a59fdc89b7 0.4.3
+a451c02f6b70489cc639d22d990e3ad51bb2b465 0.4.4
 - Added Testcases for i18n.
 - Added Testcases Custom renderers.
 
+0.5.0
+=====
+- Make formbar compatible with Bootstrap 3
+
 0.4.4
 =====
 - Added datetime conversion. Converts submitted strings in with format

File formbar/renderer.py

                 'autocomplete': self._form._config.autocomplete,
                 'enctype': self._form._config.enctype,
                 '_': self.translate}
-        html.append('<form id="%(id)s" class="%(css)s" '
+        html.append('<form id="%(id)s" class="%(css)s" role="form" '
                     'method="%(method)s" action="%(action)s" '
                     'autocomplete="%(autocomplete)s" enctype="%(enctype)s">' % attr)
         # Add hidden field with csrf_token if this is not None.
 
     def _render_form_buttons(self):
         html = []
-        html.append('<div class="row-fluid">')
-        html.append('<div class="span12 button-pane well-small">')
+        html.append('<div class="row row-fluid">')
+        if len(self._form._config.get_pages()) > 0:
+            html.append('<div class="col-md-9 col-md-offset-3 offset3 span9 button-pane well-small">')
+        else:
+            html.append('<div class="col-md-12 span12 button-pane well-small">')
         html.append('<button type="submit" '
-                    'class="btn btn-primary">%s</button>' % 'Submit')
+                    'class="btn btn-default">%s</button>' % 'Submit')
         html.append('<button type="reset" '
-                    'class="btn btn-warning">%s</button>' % 'Reset')
+                    'class="btn btn-default">%s</button>' % 'Reset')
         html.append('</div>')
         html.append('</div>')
         return "".join(html)
         # TODO: Split rendering in four parts: label, fieldbody, errors,
         # help. Each in its own template.
         html = []
+        html.append('<div class="form-group">')
         html.append(self._render_label())
         values = self._get_template_values()
         html.append(self.template.render(**values))
         html.append(self._render_errors())
         html.append(self._render_help())
+        html.append('</div>')
         return "".join(html)
 
 class InfoFieldRenderer(FieldRenderer):

File formbar/templates/datefield.mako

     ${field.get_value("")}
   </div>
 % else:
-  <input class="formbar-datepicker" type="text" name="${field.name}" value="${field.get_value()}"/>
+  <input class="formbar-datepicker form-control" type="text" name="${field.name}" value="${field.get_value()}"/>
 % endif

File formbar/templates/dropdown.mako

     ${field.get_value(expand=True) or "&nbsp;"}
   </div>
 % else:
-  <select id="${field.id}" name="${field.name}">
+  <select class="form-control" id="${field.id}" name="${field.name}">
     % for option in options:
       <option value="${option[1]}">${option[0]}</option>
     % endfor

File formbar/templates/filefield.mako

   <div class="readonlyfield" name="${field.name}">
   </div>
 % else:
-  <input id="${field.id}" name="${field.name}" type="file" value=""/>
+  <input class="form-control" id="${field.id}" name="${field.name}" type="file" value=""/>
 % endif

File formbar/templates/form.mako

 ## Render pages
+<div class="row">
 % if len(form._config.get_pages()) > 0:
-  ## Render tabs
-  <div class="tabbable tabs-right">
-    <ul class="nav nav-tabs">
-    % for num, page in enumerate(form._config.get_pages()):
-      <li class="${num==form.current_page-1 and 'active'}"><a href="#${page.attrib.get('id')}" data-toggle="tab" formbar-item="${form.change_page_callback.get('item')}" formbar-itemid="${form.change_page_callback.get('itemid')}">${page.attrib.get('label')}</a></li>
-    % endfor
-    </ul>
-    ## Render tabs-content 
-    <div class="tab-content">
-    % for num, page in enumerate(form._config.get_pages()):
-      <div class="tab-pane ${num==form.current_page-1 and 'active'}" id="${page.attrib.get('id')}">
-        ${self.render_recursive(page)}
+  <div class="col-sm-3">
+    <div>
+      <div class="panel panel-default formbar-outline">
+        <!-- Default panel contents -->
+        <div class="panel-heading">${_('Outline')}</div>
+        <!-- List group -->
+        <ul class="list-group">
+          % for num, page in enumerate(form._config.get_pages()):
+            <a href="#${page.attrib.get('id')}" class="list-group-item" formbar-item="${form.change_page_callback.get('item')}" formbar-itemid="${form.change_page_callback.get('itemid')}">${page.attrib.get('label')}</a>
+          % endfor
+        </ul>
       </div>
-    % endfor
     </div>
   </div>
+  <div class="col-sm-9">
+  % for num, page in enumerate(form._config.get_pages()):
+    <div class="formbar-page ${num==form.current_page-1 and 'active'}" id="formbar-page-${num+1}">
+      <h2>${page.attrib.get('label')}</h2>
+      ${self.render_recursive(page)}
+    </div>
+  % endfor
+  </div>
 % else:
+  <div class="col-sm-12">
     ${self.render_recursive(form._config._tree)}
+  </div>
 % endif
+</div>
 
 <%def name="render_recursive(elem)">
   % for child in elem:
     % if len(child) > 0:
       % if child.tag == "row":
-        <div class="row-fluid">
+        <div class="row row-fluid">
       % elif child.tag == "col":
         <% width = child.attrib.get('width', (12/len(elem))) %>
-        <div class="span${width}">
+        <div class="col-md-${width} span${width}">
       % elif child.tag == "fieldset":
         <fieldset>
         <legend>${child.attrib.get('label')}</legend>

File formbar/templates/formbar.css

 .button-pane {
   padding: 0px;
 }
+.formbar-outline {
+  margin-top: 10px;
+}
+
+.formbar-page {
+  display: none;
+}
+
+.formbar-page h2 {
+  margin-top: 5px;
+}
+
+.active {
+  display: block;
+}
+
+// Media depended affix CSS.
+@media(max-width:767px){
+  .formbar-outline.affix {
+    position: static;
+    width: 100%;
+    top: 0;
+    z-index:10;
+  }
+}
+@media(min-width:768px){
+  .formbar-outline.affix {
+    position: fixed;
+    top: 0;
+    z-index:10;
+    width: 126px;
+  }
+}
+@media(min-width:992px){
+  .formbar-outline.affix {
+    width: 213px;
+}
+@media(min-width:1200px){
+  .formbar-outline.affix {
+    width: 290px;
+}

File formbar/templates/formbar.js

         function(data, status) {});
 });
 
+$('div.formbar-outline a').click(function() {
+  var page = $(this).attr('href').split('#p')[1];
+  var item = $(this).attr('formbar-item');
+  var itemid = $(this).attr('formbar-itemid');
+  $.get('/set_current_form_page', 
+        {
+            page: page,
+            item: item,
+            itemid: itemid
+        },
+        function(data, status) {});
+  $('.formbar-page').hide();
+  $('#formbar-page-'+page).show();
+});
 /*
  * Evaluate when values in the form changes 
 */

File formbar/templates/help.mako

 % if field.help is not None:
-<div class="text-help">
+<p class="help-block">
   <i class="icon-info-sign"></i>
   ${_(field.help)}
-</div>
+</p>
 % endif

File formbar/templates/password.mako

     ${field.get_value("")}
   </div>
 % else:
-  <input type="password" id="${field.id}" name="${field.name}" value="${field.get_value()}"/>
+  <input class="form-control" type="password" id="${field.id}" name="${field.name}" value="${field.get_value()}"/>
 % endif

File formbar/templates/selection.mako

     ${field.get_value(expand=True) or "&nbsp;"}
   </div>
 % else:
-  <select id="${field.id}" name="${field.name}" size="5" multiple>
+  <select class="form-control" id="${field.id}" name="${field.name}" size="5" multiple>
     % for option in field.get_options():
       <option value="${option[1]}">${option[0]}</option>
     % endfor

File formbar/templates/textarea.mako

     ${field.get_value("").replace('\n', '<br>')}
   </div>
 % else:
-  <textarea id="${field.id}" name="${field.name}">${field.get_value()}</textarea>
+  <textarea class="form-control" id="${field.id}" name="${field.name}">${field.get_value()}</textarea>
 % endif

File formbar/templates/textfield.mako

     ${field.get_value("")}
   </div>
 % else:
-  <input type="text" id="${field.id}" name="${field.name}" value="${field.get_value()}"/>
+  <input class="form-control" type="text" id="${field.id}" name="${field.name}" value="${field.get_value()}"/>
 % endif

File formbar/templates/timefield.mako

     ${field.get_value("")}
   </div>
 % else:
-  <input id="${field.id}" type="text" name="${field.name}" value="${field.get_value()}" placeholder="HH:MM:SS"/>
+  <input class="form-control" id="${field.id}" type="text" name="${field.name}" value="${field.get_value()}" placeholder="HH:MM:SS"/>
 % endif
 <script>
 $('#${field.id}').keyup(function() {
 from setuptools import setup, find_packages
 import sys, os
 
-version = '0.4.3'
+version = '0.4.4'
 
 setup(name='formbar',
       version=version,