From 8ba7d7d2cd48148433018768ba0c8a166d78c786 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ma=C3=ABl=20Solard?= <mael.solard@laposte.net>
Date: Wed, 13 Aug 2014 15:14:07 +0200
Subject: [PATCH] Repare forms in "add fielter" modal window

---
 modoboa/extensions/sievefilters/forms.py      | 10 ++++----
 .../static/sievefilters/css/style.css         |  8 -------
 .../sievefilters/js/jquery.dynfields.js       | 23 ++++++++++++++-----
 .../templatetags/sfilters_tags.py             | 12 ++++++++--
 4 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/modoboa/extensions/sievefilters/forms.py b/modoboa/extensions/sievefilters/forms.py
index 8e30f940f..6f95e0856 100644
--- a/modoboa/extensions/sievefilters/forms.py
+++ b/modoboa/extensions/sievefilters/forms.py
@@ -33,7 +33,7 @@ class CustomRadioInput(RadioInput):
             label_for = ''
         choice_label = conditional_escape(force_unicode(self.choice_label))
         return mark_safe(
-            u'<label%s class="radio-inline">%s %s</label>'
+            u'<label%s">%s %s</label>'
             % (label_for, self.tag(), choice_label)
         )
 
@@ -122,9 +122,9 @@ class FilterForm(forms.Form):
                     vfield = forms.CharField(max_length=255, initial=value, widget=forms.TextInput(attrs={"class": "form-control"}))
 
         self.fields["cond_target_%d" % self.conds_cnt] = \
-            forms.ChoiceField(initial=name, choices=targets)
+            forms.ChoiceField(initial=name, choices=targets, widget=forms.Select(attrs={"class": "form-control"}))
         self.fields["cond_operator_%d" % self.conds_cnt] = \
-            forms.ChoiceField(initial=op, choices=ops)
+            forms.ChoiceField(initial=op, choices=ops, widget=forms.Select(attrs={"class": "form-control"}))
         self.fields["cond_value_%d" % self.conds_cnt] = vfield
         self.conds_cnt += 1
 
@@ -151,7 +151,7 @@ class FilterForm(forms.Form):
             if name == tpl["name"]:
                 args = tpl["args"]
         self.fields["action_name_%d" % self.actions_cnt] = \
-            forms.ChoiceField(initial=name, choices=actions)
+            forms.ChoiceField(initial=name, choices=actions, widget=forms.Select(attrs={"class": "form-control"}))
         for cnt in xrange(0, len(args)):
             arg = args[cnt]
             aname = "action_arg_%d_%d" % (self.actions_cnt, cnt)
@@ -159,7 +159,7 @@ class FilterForm(forms.Form):
                 self.fields[aname] = forms.CharField(max_length=255, initial=value, widget=forms.TextInput(attrs={"class": "form-control"}))
             elif arg["type"] == "list":
                 choices = getattr(self, arg["vloader"])(request)
-                self.fields[aname] = forms.ChoiceField(initial=value, choices=choices)
+                self.fields[aname] = forms.ChoiceField(initial=value, choices=choices, widget=forms.Select(attrs={"class": "form-control"}))
         self.actions_cnt += 1
 
     def _build_redirect_field(self, request, value):
diff --git a/modoboa/extensions/sievefilters/static/sievefilters/css/style.css b/modoboa/extensions/sievefilters/static/sievefilters/css/style.css
index 0876d6e33..a36e36948 100644
--- a/modoboa/extensions/sievefilters/static/sievefilters/css/style.css
+++ b/modoboa/extensions/sievefilters/static/sievefilters/css/style.css
@@ -85,14 +85,6 @@ div.item {
     overflow: auto;
 }
 
-div.item input[type=text], div.item select {
-    width: 190px;
-}
-
-div.item input, div.item select {
-    margin: 0 2px;
-}
-
 ul.errors {
     list-style: none;
     display: inline;
diff --git a/modoboa/extensions/sievefilters/static/sievefilters/js/jquery.dynfields.js b/modoboa/extensions/sievefilters/static/sievefilters/js/jquery.dynfields.js
index 1271bbb7d..015a1669a 100644
--- a/modoboa/extensions/sievefilters/static/sievefilters/js/jquery.dynfields.js
+++ b/modoboa/extensions/sievefilters/static/sievefilters/js/jquery.dynfields.js
@@ -65,16 +65,19 @@
             });
             var $condtarget = $("<select />", {
                 id: "id_cond_target_" + this.nextid,
-                name: "cond_target_" + this.nextid
+                name: "cond_target_" + this.nextid,
+                class: "form-control element-inline-block"
             }).change($.proxy(this.target_change, this));
             var $condoperator = $("<select />", {
                 id: "id_cond_operator_" + this.nextid,
-                name: "cond_operator_" + this.nextid
+                name: "cond_operator_" + this.nextid,
+                class: "form-control element-inline-block"
             });
             var $condvalue = $("<input />", {
                 id: "id_cond_value_" + this.nextid,
                 name: "cond_value_" + this.nextid,
-                type: "text"
+                type: "text",
+                class: "form-control element-inline-block"
             });
             var $rmlink = this.newrmlink();
 
@@ -93,6 +96,9 @@
             }
 
             $div.append($condtarget, $condoperator, $condvalue, $rmlink);
+            $condtarget.wrap('<div class="col-lg-3 col-md-3 col-sm-3"/>');
+            $condoperator.wrap('<div class="col-lg-3 col-md-3 col-sm-3"/>');
+            $condvalue.wrap('<div class="col-lg-4 col-md-4 col-sm-4"/>');
             this.$element.after($div);
             this.nextid++;
             this.fields_cnt++;
@@ -202,7 +208,7 @@
                 var $child = null;
 
                 if (tpl.args[acpt].type == "list") {
-                    $child = $("<select />", {id: "id_" + argname, name: argname});
+                    $child = $("<select />", {id: "id_" + argname, name: argname, class: "form-control"});
                     if (tpl.args[acpt].vloader != undefined) {
                         this[tpl.args[acpt].vloader]($child);
                     }
@@ -210,7 +216,8 @@
                     $child = $("<input />", {
                         type: "text",
                         id: "id_" + argname,
-                        name: argname
+                        name: argname,
+                        class: "form-control"
                     });
                 }
                 res.push($child);
@@ -259,7 +266,8 @@
             var $div = $("<div />", {id: "action_" + this.nextid, "class": "item"});
             var $actioname = $("<select />", {
                 id: "id_action_name_" + this.nextid,
-                name: "action_name_" + this.nextid
+                name: "action_name_" + this.nextid,
+                class: "form-control element-inline-block"
             });
             var $rmlink = this.newrmlink();
             var args = null;
@@ -281,7 +289,10 @@
             $actioname.change($.proxy(this.name_change, this));
             $.each(args, function(idx, element) {
                 $div.append(element);
+                element.wrap('<div class="col-lg-5 col-md-5 col-sm-5"/>');
             });
+
+            $actioname.wrap('<div class="col-lg-5 col-md-5 col-sm-5"/>');
             $div.append($rmlink);
             this.$element.after($div);
             this.nextid++;
diff --git a/modoboa/extensions/sievefilters/templatetags/sfilters_tags.py b/modoboa/extensions/sievefilters/templatetags/sfilters_tags.py
index b7993c0a8..f015b3249 100644
--- a/modoboa/extensions/sievefilters/templatetags/sfilters_tags.py
+++ b/modoboa/extensions/sievefilters/templatetags/sfilters_tags.py
@@ -127,7 +127,10 @@ def display_condition(form, cnt):
     value = form["cond_value_%d" % cnt]
     t = template.Template("""
 <div id="condition_{{ idx }}" class="item">
-  {{ tfield }}{{ofield}}{{ vfield }}{{ verrors }}
+  <div class="col-lg-3 col-md-3 col-sm-3">{{ tfield }}</div>
+  <div class="col-lg-3 col-md-3 col-sm-3">{{ofield}}</div>
+  <div class="col-lg-4 col-md-4 col-sm-4">{{ vfield }}</div>
+  {{ verrors }}
 </div>
 """)
     return t.render(template.Context({
@@ -155,7 +158,12 @@ def display_action(form, cnt):
             break
     t = template.Template("""
 <div id="action_{{ idx }}" class="item">
-  {{ afield }}{% for v in values %}{{ v }}{% endfor %}{{ verrors }}
+<div class="col-lg-5 col-md-5 col-sm-5">
+  {{ afield }}
+  </div>
+  {% for v in values %}
+    <div class="col-lg-5 col-md-5 col-sm-5">{{ v }}</div>
+  {% endfor %}{{ verrors }}
 </div>
 """)
     return t.render(template.Context({