Improve the 'add tag' form

3 files changed, 33 insertions, 11 deletions

diff --git a/hyperkitty/static/css/thread.css b/hyperkitty/static/css/thread.css
index cc3e8a4..cdd14e7 100644
--- a/hyperkitty/static/css/thread.css
+++ b/hyperkitty/static/css/thread.css
@@ -111,7 +111,7 @@ header .thread-newer {
 
 #tags {
     color: rgb(167, 169, 172);
-    margin-top: 20px;
+    margin-top: 2em;
 }
 
 #tag_title {
@@ -120,16 +120,16 @@ header .thread-newer {
 }
 
 #tags ul {
-    padding: 10px 0px 10px 0px;
+    padding: 10px 0;
     margin: 0;
 }
 
-#add_tag_field {
-    width:70%;
+#add_tag {
+    margin-top: 0.3em;
 }
 
 #participants {
-    margin-top: 20px;
+    margin-top: 2em;
     color: rgb(167, 169, 172);
 }
 
@@ -139,7 +139,7 @@ header .thread-newer {
 }
 
 #participants ul {
-    padding: 10px 0px 10px 0px;
+    padding: 0;
     margin: 0;
 }
 
diff --git a/hyperkitty/templates/threads/right_col.html b/hyperkitty/templates/threads/right_col.html
index 836da75..4534dae 100644
--- a/hyperkitty/templates/threads/right_col.html
+++ b/hyperkitty/templates/threads/right_col.html
@@ -30,6 +30,7 @@
 	<hr id="grey"/>
 	<div id="tags">
 		<span id="tag_title">tags </span>({{tags|length}})
+		{% if tags|length %}
 		<ul class="inline">
 			{% for tag in tags %}
 			<li>
@@ -37,14 +38,12 @@
 			</li>
 			{% endfor %}
 		</ul>
+		{% endif %}
 	</div>
 	<div id="add_tag">
 		<form id="add_tag_form" name="addtag" action="{% url add_tag mlist_fqdn=list_address, email_id=threadid %}" method="post">
 			{% csrf_token %}
 			{{ addtag_form.as_p }}
-			<button type="submit">
-				Add a tag
-			</button>
 		</form>
 	</div>
 	<div id="participants">
diff --git a/hyperkitty/views/forms.py b/hyperkitty/views/forms.py
index fc885c8..8e458d0 100644
--- a/hyperkitty/views/forms.py
+++ b/hyperkitty/views/forms.py
@@ -1,6 +1,8 @@
 from django import forms
 from django.core import validators
 from django.contrib.auth.models import User
+from django.utils.safestring import mark_safe
+
 
 def isValidUsername(username):
         try:
@@ -9,6 +11,7 @@ def isValidUsername(username):
             return
         raise validators.ValidationError('The username "%s" is already taken.' % username)
 
+
 class RegistrationForm(forms.Form):
 
     username =  forms.CharField(label='username', help_text=None,
@@ -32,10 +35,30 @@ class RegistrationForm(forms.Form):
         return u
 
 
+class TextInputWithButton(forms.TextInput):
+    """
+    Render a text field and a button following the Twitter Bootstrap
+    directives: http://twitter.github.com/bootstrap/base-css.html#buttons
+
+    Use the 'button_text' class attribute to set the button's text.
+    """
+
+    def render(self, name, value, attrs=None):
+        button_text = self.attrs.pop("button_text", u"")
+        initial_rendering = forms.TextInput.render(
+                self, name, value, attrs)
+        button = mark_safe(u'<button type="submit" class="btn">%s</button>'
+                           % button_text)
+        return "".join([u'<span class="input-append">',
+                        initial_rendering, button, u'</span>'])
+
+
 class AddTagForm(forms.Form):
     tag =  forms.CharField(label='', help_text=None,
-                widget=forms.TextInput(
-                    attrs={'placeholder': 'Add a tag...'}
+                widget=TextInputWithButton(
+                    attrs={'placeholder': 'Add a tag...',
+                           'class': 'span2',
+                           'button_text': 'Add'}
                     )
                 )
     from_url = forms.CharField(widget=forms.HiddenInput, required=False)