Add flair removal to the flair selector.

r2/r2/controllers/api.py

@@ -2427,13 +2427,17 @@ class ApiController(RedditController):
             flair_type = USER_FLAIR
             site = c.site
 
-        try:
-            flair_template = FlairTemplateBySubredditIndex.get_template(
-                site._id, flair_template_id, flair_type=flair_type)
-        except NotFound:
-            # TODO: serve error to client
-            g.log.debug('invalid flair template for subreddit %s', site._id)
-            return
+        if flair_template_id:
+            try:
+                flair_template = FlairTemplateBySubredditIndex.get_template(
+                    site._id, flair_template_id, flair_type=flair_type)
+            except NotFound:
+                # TODO: serve error to client
+                g.log.debug('invalid flair template for subreddit %s', site._id)
+                return
+        else:
+            flair_template = None
+            text = None
 
         if not site.is_moderator(c.user) and not c.user_is_admin:
             if not site.flair_self_assign_enabled:
@@ -2445,13 +2449,15 @@ class ApiController(RedditController):
             user = c.user
 
             # Ignore given text if user doesn't have permission to customize it.
-            if not flair_template.text_editable:
+            if not (flair_template and flair_template.text_editable):
                 text = None
 
         if not text:
-            text = flair_template.text
+            text = flair_template.text if flair_template else None
 
-        css_class = flair_template.css_class
+        css_class = flair_template.css_class if flair_template else None
+        text_editable = (
+            flair_template.text_editable if flair_template else False)
 
         if flair_type == USER_FLAIR:
             site.add_flair(user)
@@ -2466,7 +2472,7 @@ class ApiController(RedditController):
 
             # Push some client-side updates back to the browser.
             u = WrappedUser(user, force_show_flair=True,
-                            flair_text_editable=flair_template.text_editable,
+                            flair_text_editable=text_editable,
                             include_flair_selector=True)
             flair = u.render(style='html')
             jquery('.tagline .flairselectable.id-%s'
@@ -2486,16 +2492,17 @@ class ApiController(RedditController):
 
             # Push some client-side updates back to the browser.
 
-            # TODO: move this to a template
-            flair = '<span class="linkflair %s">%s</span>' % (
-                ' '.join('linkflair-' + c for c in css_class.split()), text)
-
             jquery('.id-%s .entry .linkflair' % link._fullname).remove()
             title_path = '.id-%s .entry > .title > .title' % link._fullname
-            if c.site.link_flair_position == 'left':
-                jquery(title_path).before(flair)
-            elif c.site.link_flair_position == 'right':
-                jquery(title_path).after(flair)
+
+            # TODO: move this to a template
+            if flair_template:
+                flair = '<span class="linkflair %s">%s</span>' % (
+                    ' '.join('linkflair-' + c for c in css_class.split()), text)
+                if c.site.link_flair_position == 'left':
+                    jquery(title_path).before(flair)
+                elif c.site.link_flair_position == 'right':
+                    jquery(title_path).after(flair)
 
             # TODO: close the selector popup more gracefully
             jquery('body').click()

r2/r2/public/static/css/reddit.css

@@ -804,6 +804,8 @@ a.author { margin-right: 0.5em; }
 .flairselector .customizer input { display: none; }
 .flairselector .customizer button { display: inline !important; }
 
+.flairselector .flairremove { display: none; }
+
 .media-button .option { color: red; }
 .media-button .option.active {
     background: transparent none no-repeat scroll right center;

r2/r2/public/static/js/flair.js

@@ -1,7 +1,7 @@
 $(function() {
     function showSaveButton(field) {
         $(field).parent().parent().addClass("edited");
-        $(field).parent().parent().find(".status").html("");
+        $(field).parent().parent().find(".status").empty();
     }
 
     function onEdit() {
@@ -54,14 +54,25 @@ $(function() {
             });
         } else {
             customizer.removeClass("texteditable");
-            input.attr("disabled", "disabled");
-            input.css("display", "none");
+            input.attr("disabled", "disabled").hide();
         }
-        $(".flairselection").html($(this).first().children().clone());
-        $(".flairselector button").removeAttr("disabled");
+        var remover = $(".flairselector .flairremove").detach();
+        $(".flairselection").html($(this).first().children().clone())
+            .append(remover);
+        $(".flairselector .flairremove").css("display", "inline-block");
         return false;
     }
 
+    function removeFlairInSelector(e) {
+        var form = $(this).parent().parent();
+        $(form).children('input[name="flair_template_id"]').val("");
+        $(form).children(".customizer").hide();
+        var remover = $(".flairselector .flairremove").detach();
+        $(remover).hide();
+        $(".flairselector li").removeClass("selected");
+        $(".flairselection").empty().append(remover);
+    }
+
     function postFlairSelection(e) {
         $(this).parent().parent().siblings("input").val(this.id);
         post_form(this.parentNode.parentNode.parentNode, "selectflair");
@@ -142,14 +153,14 @@ $(function() {
                 .find(".customizer input")
                     .attr("disabled", "disabled")
                 .end()
-                .find("button")
-                    .attr("disabled", "disabled")
-                .end()
                 .find("li.selected")
                     .each(selectFlairInSelector)
                 .end()
                 .find("li:not(.error)")
                     .click(selectFlairInSelector)
+                .end()
+                .find(".flairremove")
+                    .click(removeFlairInSelector)
                 .end();
         }
 

r2/r2/templates/flairselector.html

@@ -39,7 +39,11 @@
     </ul>
   </div>
   <form action="/post/selectflair" method="post">
-    <div class="flairselection"></div>
+    <div class="flairselection">
+      <div class="flairremove">
+        (<a href="javascript://">${_('remove flair')}</a>)
+      </div>
+    </div>
     <input type="hidden" name="name" value="${thing.target_name}">
     <input type="hidden" name="flair_template_id">
     <div class="customizer">

r2/r2/templates/navmenu.html

@@ -124,12 +124,11 @@
         ${"id='%s'" % thing._id if thing._id else ""}>
       %for i, option in enumerate(thing):
         <%
-           li_id = (
-               "id='tab-%s'" % option.tab_name if hasattr(option, 'tab_name')
-               else "")
+           tab_name = getattr(option, 'tab_name', None)
+           li_id = "id='tab-%s'" % tab_name if tab_name else ""
            li_class = "class='selected'" if option == thing.selected else ""
         %>
-        <li ${id_class} ${li_class}>
+        <li ${li_id} ${li_class}>
           ${option}
         </li>
       %endfor