From 1a0d8827f5e0a1b57ac0f918e71ad1b703c9a233 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Wed, 11 Jun 2014 11:55:06 -0400
Subject: [PATCH 1/6] Refactor global var setup for forum Jasmine tests

Originally reviewed in #4072
---
 common/static/coffee/spec/discussion/content_spec.coffee    | 5 +----
 .../coffee/spec/discussion/discussion_spec_helper.coffee    | 6 ++++++
 .../discussion/view/discussion_content_view_spec.coffee     | 3 +--
 .../discussion/view/discussion_thread_list_view_spec.coffee | 4 +---
 .../discussion/view/discussion_thread_show_view_spec.coffee | 3 +--
 .../view/discussion_user_profile_view_spec.coffee           | 2 +-
 .../discussion/view/response_comment_show_view_spec.coffee  | 1 +
 .../spec/discussion/view/response_comment_view_spec.coffee  | 4 +---
 .../discussion/view/thread_response_show_view_spec.coffee   | 2 +-
 9 files changed, 14 insertions(+), 16 deletions(-)
 create mode 100644 common/static/coffee/spec/discussion/discussion_spec_helper.coffee

diff --git a/common/static/coffee/spec/discussion/content_spec.coffee b/common/static/coffee/spec/discussion/content_spec.coffee
index b6075fe05a..10c2ec33d7 100644
--- a/common/static/coffee/spec/discussion/content_spec.coffee
+++ b/common/static/coffee/spec/discussion/content_spec.coffee
@@ -1,9 +1,6 @@
 describe 'All Content', ->
     beforeEach ->
-        # TODO: figure out a better way of handling this
-        # It is set up in main.coffee DiscussionApp.start
-        window.$$course_id = 'edX/999/test'
-        window.user = new DiscussionUser {id: '567'}
+        DiscussionSpecHelper.setUpGlobals()
 
     describe 'Content', ->
         beforeEach ->
diff --git a/common/static/coffee/spec/discussion/discussion_spec_helper.coffee b/common/static/coffee/spec/discussion/discussion_spec_helper.coffee
new file mode 100644
index 0000000000..fc7286e92c
--- /dev/null
+++ b/common/static/coffee/spec/discussion/discussion_spec_helper.coffee
@@ -0,0 +1,6 @@
+class @DiscussionSpecHelper
+    # This is sad. We should avoid dependence on global vars.
+    @setUpGlobals = ->
+        DiscussionUtil.loadRoles({"Moderator": [], "Administrator": [], "Community TA": []})
+        window.$$course_id = "edX/999/test"
+        window.user = new DiscussionUser({id: "567", upvoted_ids: []})
diff --git a/common/static/coffee/spec/discussion/view/discussion_content_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_content_view_spec.coffee
index 2a2f3fa7d3..06e8db3dc7 100644
--- a/common/static/coffee/spec/discussion/view/discussion_content_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_content_view_spec.coffee
@@ -1,6 +1,6 @@
 describe "DiscussionContentView", ->
     beforeEach ->
-
+        DiscussionSpecHelper.setUpGlobals()
         setFixtures(
             """
             <div class="discussion-post">
@@ -36,7 +36,6 @@ describe "DiscussionContentView", ->
         @thread = new Thread(@threadData)
         @view = new DiscussionContentView({ model: @thread })
         @view.setElement($('.discussion-post'))
-        window.user = new DiscussionUser({id: '567', upvoted_ids: []})
 
     it 'defines the tag', ->
         expect($('#jasmine-fixtures')).toExist
diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
index 7c7e82abc4..a36b98f618 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -1,7 +1,7 @@
 describe "DiscussionThreadListView", ->
 
     beforeEach ->
-
+        DiscussionSpecHelper.setUpGlobals()
         setFixtures """
         <script type="text/template" id="thread-list-item-template">
           <a href="<%- id %>" data-id="<%- id %>">
@@ -75,8 +75,6 @@ describe "DiscussionThreadListView", ->
           {id: "2", title: "Thread2", body: "dummy body", votes: {up_count: '42'}, unread_comments_count:0, comments_count:2, created_at: '2013-04-03T20:07:39Z',},
           {id: "3", title: "Thread3", body: "dummy body", votes: {up_count: '12'}, unread_comments_count:0, comments_count:3, created_at: '2013-04-03T20:06:39Z',},
         ]
-        window.$$course_id = "TestOrg/TestCourse/TestRun"
-        window.user = new DiscussionUser({id: "567", upvoted_ids: []})
 
         spyOn($, "ajax")
 
diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_show_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_show_view_spec.coffee
index 4c6a06e453..0d171dbda9 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_show_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_show_view_spec.coffee
@@ -1,5 +1,6 @@
 describe "DiscussionThreadShowView", ->
     beforeEach ->
+        DiscussionSpecHelper.setUpGlobals()
         setFixtures(
             """
             <div class="discussion-post">
@@ -14,8 +15,6 @@ describe "DiscussionThreadShowView", ->
             """
         )
 
-        window.$$course_id = "TestOrg/TestCourse/TestRun"
-        window.user = new DiscussionUser({id: "567", upvoted_ids: []})
         @threadData = {
             id: "dummy",
             user_id: user.id,
diff --git a/common/static/coffee/spec/discussion/view/discussion_user_profile_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_user_profile_view_spec.coffee
index d07480183b..af5395f4ca 100644
--- a/common/static/coffee/spec/discussion/view/discussion_user_profile_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_user_profile_view_spec.coffee
@@ -1,5 +1,6 @@
 describe "DiscussionUserProfileView", ->
     beforeEach ->
+        DiscussionSpecHelper.setUpGlobals()
         setFixtures(
             """
             <script type="text/template" id="_user_profile">
@@ -46,7 +47,6 @@ describe "DiscussionUserProfileView", ->
             <div class="user-profile-fixture"/>
             """
         )
-        window.$$course_id = "dummy_course_id"
         spyOn(DiscussionThreadProfileView.prototype, "render")
 
     makeView = (threads, page, numPages) ->
diff --git a/common/static/coffee/spec/discussion/view/response_comment_show_view_spec.coffee b/common/static/coffee/spec/discussion/view/response_comment_show_view_spec.coffee
index 1ea4f88e07..e916954b09 100644
--- a/common/static/coffee/spec/discussion/view/response_comment_show_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/response_comment_show_view_spec.coffee
@@ -1,5 +1,6 @@
 describe 'ResponseCommentShowView', ->
     beforeEach ->
+        DiscussionSpecHelper.setUpGlobals()
         # set up the container for the response to go in
         setFixtures """
         <ol class="responses"></ol>
diff --git a/common/static/coffee/spec/discussion/view/response_comment_view_spec.coffee b/common/static/coffee/spec/discussion/view/response_comment_view_spec.coffee
index 4ce062e9b9..979343193c 100644
--- a/common/static/coffee/spec/discussion/view/response_comment_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/response_comment_view_spec.coffee
@@ -1,8 +1,6 @@
 describe 'ResponseCommentView', ->
     beforeEach ->
-        window.$$course_id = 'edX/999/test'
-        window.user = new DiscussionUser {id: '567'}
-        DiscussionUtil.loadRoles []
+        DiscussionSpecHelper.setUpGlobals()
         @comment = new Comment {
                 id: '01234567',
                 user_id: user.id,
diff --git a/common/static/coffee/spec/discussion/view/thread_response_show_view_spec.coffee b/common/static/coffee/spec/discussion/view/thread_response_show_view_spec.coffee
index 7ba00c66d1..21b0c300f0 100644
--- a/common/static/coffee/spec/discussion/view/thread_response_show_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/thread_response_show_view_spec.coffee
@@ -1,5 +1,6 @@
 describe "ThreadResponseShowView", ->
     beforeEach ->
+        DiscussionSpecHelper.setUpGlobals()
         setFixtures(
             """
             <div class="discussion-post">
@@ -22,7 +23,6 @@ describe "ThreadResponseShowView", ->
         @comment = new Comment(@commentData)
         @view = new ThreadResponseShowView({ model: @comment })
         @view.setElement($(".discussion-post"))
-        window.user = new DiscussionUser({id: "567", upvoted_ids: []})
 
     it "renders the vote correctly", ->
         DiscussionViewSpecHelper.checkRenderVote(@view, @comment)

From 89ba90a69505845acb3f284c4463e8d20042c533 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 10 Jun 2014 10:54:56 -0400
Subject: [PATCH 2/6] Re-design forum thread list

Use larger and lighter title font, decrease padding, and use lighter
solid backgrounds instead of gradients. Also, refactor SASS code to
conform better to our new style, including using more specific class
names.

Originally reviewed in #4072
---
 .../discussion_thread_list_view_spec.coffee   | 123 +++++++----
 .../views/discussion_thread_list_view.coffee  |  68 +++---
 lms/static/images/comment-icon-bottoms.png    | Bin 960 -> 0 bytes
 lms/static/sass/application-extend2.scss.mako |   8 +-
 lms/static/sass/discussion/_discussion.scss   | 199 ------------------
 .../sass/discussion/elements/_navigation.scss | 112 ++++++++++
 .../_developer.scss}                          |   0
 .../sass/discussion/utilities/_shame.scss     |  36 ++++
 .../sass/discussion/utilities/_variables.scss |   1 +
 .../discussion/_thread_list_template.html     |   5 +-
 .../discussion/_underscore_templates.html     |  42 ++--
 11 files changed, 293 insertions(+), 301 deletions(-)
 delete mode 100644 lms/static/images/comment-icon-bottoms.png
 create mode 100644 lms/static/sass/discussion/elements/_navigation.scss
 rename lms/static/sass/discussion/{_discussion-developer.scss => utilities/_developer.scss} (100%)
 create mode 100644 lms/static/sass/discussion/utilities/_shame.scss
 create mode 100644 lms/static/sass/discussion/utilities/_variables.scss

diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
index a36b98f618..577893caa0 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -4,34 +4,41 @@ describe "DiscussionThreadListView", ->
         DiscussionSpecHelper.setUpGlobals()
         setFixtures """
         <script type="text/template" id="thread-list-item-template">
-          <a href="<%- id %>" data-id="<%- id %>">
-            <span class="title"><%- title %></span>
-            <span class="comments-count">
-                <%
-            var fmt;
-            var data = {
-                'span_sr_open': '<span class="sr">',
-                'span_close': '</span>',
-                'unread_comments_count': unread_comments_count,
-                'comments_count': comments_count
-                };
-            if (unread_comments_count > 0) {
-                fmt = '%(comments_count)s %(span_sr_open)scomments (%(unread_comments_count)s unread comments)%(span_close)s';
-            } else {
-                fmt = '%(comments_count)s %(span_sr_open)scomments %(span_close)s';
-            }
-            print(interpolate(fmt, data, true));
-            %>
-            </span>
-
-            <span class="votes-count">+<%=
-                interpolate(
-                    '%(votes_up_count)s%(span_sr_open)s votes %(span_close)s',
-                    {'span_sr_open': '<span class="sr">', 'span_close': '</span>', 'votes_up_count': votes['up_count']},
-                    true
-                    )
-            %></span>
-          </a>
+          <li data-id="<%- id %>" class="forum-nav-thread<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>">
+            <a href="#" class="forum-nav-thread-link">
+              <div class="forum-nav-thread-wrapper-1">
+                <span class="forum-nav-thread-title"><%- title %></span>
+              </div><div class="forum-nav-thread-wrapper-2">
+                <% if (endorsed) { %>
+                  <span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">Endorsed response</span></span>
+                <% } %>
+                <span class="forum-nav-thread-votes-count">+<%=
+                    interpolate(
+                        '%(votes_up_count)s%(span_sr_open)s votes %(span_close)s',
+                        {'span_sr_open': '<span class="sr">', 'span_close': '</span>', 'votes_up_count': votes['up_count']},
+                        true
+                        )
+                %></span>
+                <span class="forum-nav-thread-comments-count <% if (unread_comments_count > 0) { %>is-unread<% } %>">
+                    <%
+                var fmt;
+                var data = {
+                    'span_sr_open': '<span class="sr">',
+                    'span_close': '</span>',
+                    'unread_comments_count': unread_comments_count,
+                    'comments_count': comments_count
+                    };
+                if (unread_comments_count > 0) {
+                    fmt = '%(comments_count)s %(span_sr_open)scomments (%(unread_comments_count)s unread comments)%(span_close)s';
+                } else {
+                    fmt = '%(comments_count)s %(span_sr_open)scomments %(span_close)s';
+                }
+                print(interpolate(fmt, data, true));
+                %>
+                </span>
+              </div>
+            </a>
+          </li>
         </script>
         <script type="text/template" id="thread-list-template">
             <div class="browse-search">
@@ -53,9 +60,7 @@ describe "DiscussionThreadListView", ->
               </ul>
             </div>
             <div class="search-alerts"></div>
-            <div class="post-list-wrapper">
-                <ul class="post-list"></ul>
-            </div>
+            <ul class="forum-nav-thread-list"></ul>
         </script>
         <script aria-hidden="true" type="text/template" id="search-alert-template">
             <div class="search-alert" id="search-alert-<%- cid %>">
@@ -71,9 +76,27 @@ describe "DiscussionThreadListView", ->
         <div class="sidebar"></div>
         """
         @threads = [
-          {id: "1", title: "Thread1", body: "dummy body", votes: {up_count: '20'}, unread_comments_count:0, comments_count:1, created_at: '2013-04-03T20:08:39Z',},
-          {id: "2", title: "Thread2", body: "dummy body", votes: {up_count: '42'}, unread_comments_count:0, comments_count:2, created_at: '2013-04-03T20:07:39Z',},
-          {id: "3", title: "Thread3", body: "dummy body", votes: {up_count: '12'}, unread_comments_count:0, comments_count:3, created_at: '2013-04-03T20:06:39Z',},
+          makeThreadWithProps({
+            id: "1",
+            title: "Thread1",
+            votes: {up_count: '20'},
+            comments_count: 1,
+            created_at: '2013-04-03T20:08:39Z',
+          }),
+          makeThreadWithProps({
+            id: "2",
+            title: "Thread2",
+            votes: {up_count: '42'},
+            comments_count: 2,
+            created_at: '2013-04-03T20:07:39Z',
+          }),
+          makeThreadWithProps({
+            id: "3",
+            title: "Thread3",
+            votes: {up_count: '12'},
+            comments_count: 3,
+            created_at: '2013-04-03T20:06:39Z',
+          }),
         ]
 
         spyOn($, "ajax")
@@ -82,6 +105,21 @@ describe "DiscussionThreadListView", ->
         @view = new DiscussionThreadListView({collection: @discussion, el: $(".sidebar")})
         @view.render()
 
+    makeThreadWithProps = (props) ->
+      # Minimal set of properties necessary for rendering
+      thread = {
+        id: "dummy_id",
+        pinned: false,
+        endorsed: false,
+        votes: {up_count: '0'},
+        unread_comments_count: 0,
+        comments_count: 0,
+      }
+      $.extend(thread, props)
+
+    renderSingleThreadWithProps = (props) ->
+      makeView(new Discussion([new Thread(makeThreadWithProps(props))])).render()
+
     makeView = (discussion) ->
       return new DiscussionThreadListView(
           el: $(".sidebar"),
@@ -89,10 +127,10 @@ describe "DiscussionThreadListView", ->
       )
 
     checkThreadsOrdering =  (view, sort_order, type) ->
-      expect(view.$el.find(".post-list .list-item").children().length).toEqual(3)
-      expect(view.$el.find(".post-list .list-item:nth-child(1) .title").text()).toEqual(sort_order[0])
-      expect(view.$el.find(".post-list .list-item:nth-child(2) .title").text()).toEqual(sort_order[1])
-      expect(view.$el.find(".post-list .list-item:nth-child(3) .title").text()).toEqual(sort_order[2])
+      expect(view.$el.find(".forum-nav-thread").children().length).toEqual(3)
+      expect(view.$el.find(".forum-nav-thread:nth-child(1) .forum-nav-thread-title").text()).toEqual(sort_order[0])
+      expect(view.$el.find(".forum-nav-thread:nth-child(2) .forum-nav-thread-title").text()).toEqual(sort_order[1])
+      expect(view.$el.find(".forum-nav-thread:nth-child(3) .forum-nav-thread-title").text()).toEqual(sort_order[2])
       expect(view.$el.find(".sort-bar a.active").text()).toEqual(type)
 
     describe "thread rendering should be correct", ->
@@ -269,3 +307,12 @@ describe "DiscussionThreadListView", ->
             @view.searchForUser("dummy")
             expect($.ajax).toHaveBeenCalled()
             expect(@view.addSearchAlert).not.toHaveBeenCalled()
+
+    describe "endorsed renders correctly", ->
+      it "when absent", ->
+        renderSingleThreadWithProps({})
+        expect($(".forum-nav-thread-endorsed").length).toEqual(0)
+
+      it "when present", ->
+        renderSingleThreadWithProps({endorsed: true})
+        expect($(".forum-nav-thread-endorsed").length).toEqual(1)
diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
index 4a0a2ccc06..5e27aa8f3d 100644
--- a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -9,8 +9,8 @@ if Backbone?
       "click .sort-bar a": "sortThreads"
       "click .browse-topic-drop-menu": "filterTopic"
       "click .browse-topic-drop-search-input": "ignoreClick"
-      "click .post-list .list-item a": "threadSelected"
-      "click .post-list .more-pages a": "loadMorePages"
+      "click .forum-nav-thread-link": "threadSelected"
+      "click .forum-nav-load-more-link": "loadMorePages"
       "change .cohort-options": "chooseCohort"
       'keyup .browse-topic-drop-search-input': DiscussionFilter.filterDrop
 
@@ -68,8 +68,8 @@ if Backbone?
       @clearSearchAlerts()
       thread_id = thread.get('id')
       content = @renderThread(thread)
-      current_el = @$("a[data-id=#{thread_id}]")
-      active = current_el.hasClass("active")
+      current_el = @$(".forum-nav-thread[data-id=#{thread_id}]")
+      active = current_el.has(".forum-nav-thread-link.is-active").length != 0
       current_el.replaceWith(content)
       if active
         @setActiveThread(thread_id)
@@ -111,8 +111,7 @@ if Backbone?
       sidebarHeight = Math.min(sidebarHeight + 1, discussionBody.outerHeight())
       sidebar.css 'height', sidebarHeight
 
-      postListWrapper = @$('.post-list-wrapper')
-      postListWrapper.css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px')
+      @$('.forum-nav-thread-list').css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px')
 
 
     # Because we want the behavior that when the body is clicked the menu is
@@ -138,30 +137,32 @@ if Backbone?
       @
 
     renderThreads: =>
-      @$(".post-list").html("")
+      @$(".forum-nav-thread-list").html("")
       rendered = $("<div></div>")
       for thread in @displayedCollection.models
         content = @renderThread(thread)
         rendered.append content
-        content.wrap("<li class='list-item' data-id='\"#{thread.get('id')}\"' />")
 
-      @$(".post-list").html(rendered.html())
+      @$(".forum-nav-thread-list").html(rendered.html())
       @renderMorePages()
       @updateSidebar()
       @trigger "threads:rendered"
 
     renderMorePages: ->
       if @displayedCollection.hasMorePages()
-        @$(".post-list").append("<li class='more-pages'><a href='#'>" + gettext("Load more") + "</a></li>")
+        @$(".forum-nav-thread-list").append("<li class='forum-nav-load-more'><a href='#' class='forum-nav-load-more-link'>" + gettext("Load more") + "</a></li>")
 
-    loadMorePages: (event) ->
+    getLoadingContent: (srText) ->
+      return '<div class="forum-nav-loading" tabindex="0"><span class="icon-spinner icon-spin"/><span class="sr" role="alert">' + srText + '</span></div>'
+
+    loadMorePages: (event) =>
       if event
         event.preventDefault()
-      @$(".more-pages").html('<div class="loading-animation" tabindex=0><span class="sr" role="alert">' + gettext('Loading more threads') + '</span></div>')
-      @$(".more-pages").addClass("loading")
-      loadingDiv = @$(".more-pages .loading-animation")
-      DiscussionUtil.makeFocusTrap(loadingDiv)
-      loadingDiv.focus()
+      loadMoreElem = @$(".forum-nav-load-more")
+      loadMoreElem.html(@getLoadingContent(gettext("Loading more threads")))
+      loadingElem = loadMoreElem.find(".forum-nav-loading")
+      DiscussionUtil.makeFocusTrap(loadingElem)
+      loadingElem.focus()
       options = {}
       switch @mode
         when 'search'
@@ -184,12 +185,12 @@ if Backbone?
       if lastThread
         # Pagination; focus the first thread after what was previously the last thread
         @once("threads:rendered", ->
-          $(".post-list li:has(a[data-id='#{lastThread}']) + li a").focus()
+          $(".forum-nav-thread[data-id='#{lastThread}'] + .forum-nav-thread .forum-nav-thread-link").focus()
         )
       else
         # Totally refreshing the list (e.g. from clicking a sort button); focus the first thread
         @once("threads:rendered", ->
-          $(".post-list a").first()?.focus()
+          $(".forum-nav-thread-link").first()?.focus()
         )
 
       error = =>
@@ -200,15 +201,9 @@ if Backbone?
 
     renderThread: (thread) =>
       content = $(_.template($("#thread-list-item-template").html())(thread.toJSON()))
-      if thread.get('subscribed')
-        content.addClass("followed")
-      if thread.get('endorsed')
-        content.addClass("resolved")
-      if thread.get('read')
-        content.addClass("read")
       unreadCount = thread.get('unread_comments_count')
       if unreadCount > 0
-        content.find('.comments-count').addClass("unread").attr(
+        content.find('.forum-nav-thread-comments-count').attr(
           "data-tooltip",
           interpolate(
             ngettext('%(unread_count)s new comment', '%(unread_count)s new comments', unreadCount),
@@ -216,25 +211,14 @@ if Backbone?
             true
           )
         )
-      @highlight(content)
-
-
-    highlight: (el) ->
-      el.html(el.html().replace(/&lt;mark&gt;/g, "<mark>").replace(/&lt;\/mark&gt;/g, "</mark>"))
-
-    renderThreadListItem: (thread) =>
-      view = new ThreadListItemView(model: thread)
-      view.on "thread:selected", @threadSelected
-      view.on "thread:removed", @threadRemoved
-      view.render()
-      @$(".post-list").append(view.el)
+      content
 
     threadSelected: (e) =>
       # Use .attr('data-id') rather than .data('id') because .data does type
       # coercion. Usually, this is fine, but when Mongo gives an object id with
       # no letters, it casts it to a Number.
 
-      thread_id = $(e.target).closest("a").attr("data-id")
+      thread_id = $(e.target).closest(".forum-nav-thread").attr("data-id")
       @setActiveThread(thread_id)
       @trigger("thread:selected", thread_id)  # This triggers a callback in the DiscussionRouter which calls the line above...
       false
@@ -243,8 +227,8 @@ if Backbone?
       @trigger("thread:removed", thread_id)
 
     setActiveThread: (thread_id) ->
-      @$(".post-list a[data-id!='#{thread_id}']").removeClass("active")
-      @$(".post-list a[data-id='#{thread_id}']").addClass("active")
+      @$(".forum-nav-thread[data-id!='#{thread_id}'] .forum-nav-thread-link").removeClass("is-active")
+      @$(".forum-nav-thread[data-id='#{thread_id}'] .forum-nav-thread-link").addClass("is-active")
 
     showSearch: ->
       @$(".browse").removeClass('is-dropped')
@@ -257,7 +241,7 @@ if Backbone?
     goHome: ->
       @template = _.template($("#discussion-home").html())
       $(".discussion-column").html(@template)
-      $(".post-list a").removeClass("active")
+      $(".forum-nav-thread-list a").removeClass("is-active")
       $("input.email-setting").bind "click", @updateEmailNotifications
       url = DiscussionUtil.urlFor("notifications_status",window.user.get("id"))
       DiscussionUtil.safeAjax
@@ -448,7 +432,7 @@ if Backbone?
         dataType: 'json'
         $loading: $
         loadingCallback: =>
-          @$(".post-list").html('<li class="loading"><div class="loading-animation"><span class="sr">' + gettext('Loading thread list') + '</span></div></li>')
+          @$(".forum-nav-thread-list").html("<li class='forum-nav-load-more'>" + @getLoadingContent(gettext("Loading thread list")) + "</li>")
         loadedCallback: =>
           if callback
             callback.apply @, [value]
diff --git a/lms/static/images/comment-icon-bottoms.png b/lms/static/images/comment-icon-bottoms.png
deleted file mode 100644
index e72127f6cf9fe1a36a19c401ab7b7850aee825ec..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 960
zcmaJ=O^ee&7>-s&3wu!!^)zM$6>Pq`Nt4jH)TXu3O)1@iy$G8o(>8RI$xfy=ErL)_
zdiL(Yv;G0W^(1)qCgR=0;?<**ZqxN(4M}F^<$0d>b6&QZ4>t1G^9;jmSPipH*R%A?
zpFc<c&$QP9U9OQ@m+YcGnK&3S6%X|wumWcQ+tBf*2VY>BVRAS9PM37;9o<C%=cE`e
z2_nj7nDTZKIqnD&(1Qa%G}vDs4q4!P2K!jH1v{$3q2HKcxI1fh+}X(0Ja+pYC?`4<
z2q1Al66}Yuo*3*xSEu{b%(GwtAtQr54ytRnKowyKWUg3n1yKZw!iih5qKJ2aB#06(
z&{rvlTe__1QVA>{mU_cpUvHcBr7wCi*dZa2&hwMWgqsvOga^E+X<DiwNd<~1#M6*C
zNg<3kGX)dIF7_khqY$KuP7jTV!O}>NQwXA!Y#1-gL<`0zPQ;6xkfxLYZTtVwAXuSe
z(uODT{!=*aOe4s*VT{JurH$)vrmiBrilIXg?jW?ERk1Zh1jR!Xf$FXTZrhIQhpFMt
zf??ab6~@E~U1*sGOEoy(_w<S?oAtV^)ihNS#hR#^CB;;gl3bLEYF*Sau8G`n07H^-
zy%TO_EjJy8Afld4i2bL~t78;^Mbf&zK9<s2y(QOMAB(z{%hO=^w6%Y=Iy2GvNw=%P
zrH9q%!;sE9rh|>Xe?|0CNS0aYB;R^F-GifiF84yoUEDj}y9GYJ;(q6!%r88A+YoO2
koIetN96o=;T{(5;D)af><xfYK)LMF{tXk82e}8ZO2bKXP^8f$<

diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako
index 7c78a2993e..1bce4f4e77 100644
--- a/lms/static/sass/application-extend2.scss.mako
+++ b/lms/static/sass/application-extend2.scss.mako
@@ -48,8 +48,12 @@
 @import 'views/shoppingcart';
 
 // applications
-@import 'discussion/discussion';
-@import 'discussion/discussion-developer';
+@import "discussion/utilities/variables";
+@import 'discussion/discussion'; // Process old file after definitions but before everything else
+@import "discussion/elements/navigation";
+@import 'discussion/utilities/developer';
+@import 'discussion/utilities/shame';
+
 @import 'news';
 
 // temp - shame and developer
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index c63d30e921..d401df9a5f 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -953,205 +953,6 @@ body.discussion {
     }
   }
 
-  .post-list-wrapper {
-    overflow-y: scroll;
-    overflow-x: hidden;
-    //border-right: 1px solid transparent;
-  }
-
-  .post-list {
-    background-color: #ddd;
-
-    .loading {
-      padding: ($baseline*.75) 0;
-      background: $gray-l6;
-
-      .loading-animation {
-        background-image: url(../images/spinner-on-grey.gif);
-      }
-    }
-
-    .more-pages a {
-      background: #eee;
-      font-size: 12px;
-      line-height: 33px;
-      text-align: center;
-
-      &:hover, &:focus {
-        background-image: none;
-        background-color: #e6e6e6;
-      }
-    }
-
-    a {
-      display: block;
-      position: relative;
-      float: left;
-      clear: both;
-      width: 100%;
-      padding: 0 ($baseline/2) 0 18px;
-      margin-bottom: 1px;
-      margin-right: -1px;
-      @include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
-      background-color: $white;
-      @include clearfix;
-
-      &:hover, &:focus {
-        @include linear-gradient(top, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
-        background-color: #eee;
-      }
-
-      &.staff-post.staff-response {
-        .staff-post-icon {
-          top: 5px;
-        }
-
-        .staff-response-icon {
-          top: 18px;
-        }
-      }
-
-      .staff-post-icon,
-      .staff-response-icon {
-        position: absolute;
-        top: 11px;
-        left: 3px;
-        width: 13px;
-        height: 13px;
-        background: url(../images/staff-icons.png) no-repeat;
-      }
-
-      .staff-post-icon {
-        left: 2px;
-        background-position: 0 0;
-      }
-
-      .staff-response-icon {
-        background-position: -13px 0;
-      }
-
-      .title {
-        display: block;
-        float: left;
-        width: 70%;
-        margin: ($baseline/2) 0 ($baseline/2);
-        font-size: 13px;
-        font-weight: 700;
-        line-height: 1.4;
-        color: $dark-gray;
-      }
-
-      &.read {
-        background: #f2f2f2;
-
-        .title {
-          font-weight: 400;
-          color: #737373;
-        }
-      }
-
-      &.resolved:before {
-        content: '';
-        position: absolute;
-        top: 12px;
-        right: 75px;
-        width: 9px;
-        height: 8px;
-        background: url(../images/sidebar-resolved-icons.png) no-repeat;
-      }
-
-      &.followed:after {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 12px;
-        height: 12px;
-        background: url(../images/following-flag.png) no-repeat;
-      }
-
-      &.active {
-        @include linear-gradient(top, #96e0fd, #61c7fc);
-        border-color: #4697c1;
-        box-shadow: 0 1px 0 #4697c1, 0 -1px 0 #4697c1;
-
-        .title {
-          color: #333;
-        }
-
-        .staff-post-icon {
-          background-position: 0 -13px;
-        }
-
-        .staff-response-icon {
-          background-position: -13px -13px;
-        }
-
-        .comments-count {
-          @include linear-gradient(top, #3994c7, #4da7d3);
-          color: $white;
-
-          &:after {
-            background-position: 0 0;
-          }
-        }
-
-        &.followed:after {
-          background-position: 0 -12px;
-        }
-
-        &.resolved:before {
-          background-position: 0 -8px;
-        }
-      }
-    }
-
-    .votes-count,
-    .comments-count {
-      display: block;
-      float: right;
-      margin-top: 8px;
-      border-radius: 2px;
-      width: 36px;
-      height: 20px;
-      color: #767676;
-      text-align: center;
-      font-size: 11px;
-      line-height: 20px;
-    }
-
-    .comments-count {
-      @include linear-gradient(top, #d4d4d4, #dfdfdf);
-      position: relative;
-      margin-left: ($baseline/4);
-      margin-right:($baseline/4);
-      width: 28px;
-      font-weight: 700;
-
-      &:after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 20px;
-        right: 3px;
-        width: 5px;
-        height: 5px;
-        background: url(../images/comment-icon-bottoms.png) no-repeat;
-        background-position: 0 -5px;
-      }
-
-      &.unread {
-        @include linear-gradient(top, #84d7fe, #60a8d6);
-        color: #333;
-
-        &:after {
-          color: #99e0fe;
-          background-position: 0 0px;
-        }
-      }
-    }
-  }
-
   .bottom-post-status {
     padding: 30px;
     font-size: 20px;
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
new file mode 100644
index 0000000000..b8ac14061e
--- /dev/null
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -0,0 +1,112 @@
+// -----------
+// Thread list
+// -----------
+.forum-nav-thread-list {
+  overflow-y: scroll;
+}
+
+.forum-nav-thread {
+  border-bottom: 1px solid $gray-l3;
+}
+
+.forum-nav-thread-link {
+  @include clearfix();
+}
+
+%forum-nav-thread-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.forum-nav-thread-wrapper-1 {
+  @extend %forum-nav-thread-wrapper;
+  width: 70%;
+}
+
+.forum-nav-thread-wrapper-2 {
+  @extend %forum-nav-thread-wrapper;
+  width: 30%;
+  text-align: right;
+}
+
+.forum-nav-thread-title {
+  @extend %t-title7;
+  display: block;
+}
+
+%forum-nav-thread-wrapper-2-content {
+  @include font-size(11);
+  display: inline-block;
+  margin-right: ($baseline/4);
+  text-align: center;
+  color: $black;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.forum-nav-thread-endorsed {
+  @extend %forum-nav-thread-wrapper-2-content;
+  color: $green-d1;
+}
+
+.forum-nav-thread-votes-count {
+  @extend %forum-nav-thread-wrapper-2-content;
+}
+
+.forum-nav-thread-comments-count {
+  @extend %forum-nav-thread-wrapper-2-content;
+  @extend %t-weight4;
+  position: relative;
+  margin-left: ($baseline/4);
+  margin-bottom: ($baseline/4); // Because tail is position: absolute
+  border-radius: 2px;
+  padding: ($baseline/10) ($baseline/5);
+  min-width: 2em; // Fit most comment counts but allow expansion if necessary
+  background-color: $gray-l3;
+
+  // Speech bubble tail
+  &:after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: (-$baseline/4);
+    right: ($baseline/4);
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0 ($baseline/4) ($baseline/4) 0;
+    border-color: transparent $gray-l3 transparent transparent;
+  }
+
+  &.is-unread {
+    background-color: $white;
+
+    &:after {
+      border-right-color: $white
+    }
+  }
+}
+
+.forum-nav-thread.is-unread .forum-nav-thread-comments-count {
+  background-color: $blue;
+  color: $white;
+
+  &:after {
+    border-right-color: $blue;
+  }
+}
+
+%forum-nav-load-more-content {
+  text-align: center;
+}
+
+.forum-nav-load-more-link {
+  @extend %forum-nav-load-more-content;
+  color: $link-color;
+}
+
+.forum-nav-loading {
+  @extend %forum-nav-load-more-content;
+}
diff --git a/lms/static/sass/discussion/_discussion-developer.scss b/lms/static/sass/discussion/utilities/_developer.scss
similarity index 100%
rename from lms/static/sass/discussion/_discussion-developer.scss
rename to lms/static/sass/discussion/utilities/_developer.scss
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
new file mode 100644
index 0000000000..eaa2a6edea
--- /dev/null
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -0,0 +1,36 @@
+// The sidebar class does a lot of things that we don't want in the thread list;
+// the following rules contain styling that is necessary and would otherwise
+// reside in elements/_navigation.scss if the sidebar styling did not make the
+// !important directive necessary.
+
+.forum-nav-thread {
+  background-color: $gray-l5 !important;
+
+  &.is-unread {
+    background-color: $white !important;
+  }
+}
+
+.forum-nav-thread-link {
+  padding: ($baseline/4) ($baseline/2) !important;
+
+  &.is-active, &:hover, &:focus {
+    background-color: $forum-color-active-thread !important;
+  }
+}
+
+.forum-nav-load-more {
+  border-bottom: 1px solid $gray-l3 !important;
+  background-color: $gray-l5 !important;
+}
+
+.forum-nav-load-more-link {
+  &:hover, &:focus {
+    color: $link-color !important;
+    background-color: $forum-color-active-thread !important;
+  }
+}
+
+.forum-nav-load-more-link, .forum-nav-loading {
+  padding: $baseline 0 !important;
+}
diff --git a/lms/static/sass/discussion/utilities/_variables.scss b/lms/static/sass/discussion/utilities/_variables.scss
new file mode 100644
index 0000000000..bfc9bf8677
--- /dev/null
+++ b/lms/static/sass/discussion/utilities/_variables.scss
@@ -0,0 +1 @@
+$forum-color-active-thread: tint($blue, 85%);
diff --git a/lms/templates/discussion/_thread_list_template.html b/lms/templates/discussion/_thread_list_template.html
index 90255a1db8..0ea9964642 100644
--- a/lms/templates/discussion/_thread_list_template.html
+++ b/lms/templates/discussion/_thread_list_template.html
@@ -45,8 +45,5 @@
         %endif
     </div>
     <div class="search-alerts"></div>
-    <div class="post-list-wrapper">
-        <ul class="post-list">
-        </ul>
-    </div>
+    <ul class="forum-nav-thread-list"></ul>
 </script>
diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html
index a1c3585bee..185a9ec640 100644
--- a/lms/templates/discussion/_underscore_templates.html
+++ b/lms/templates/discussion/_underscore_templates.html
@@ -205,9 +205,29 @@
 </script>
 
 <script aria-hidden="true" type="text/template" id="thread-list-item-template">
-    <a href="${'<%- id %>'}" data-id="${'<%- id %>'}">
-        <span class="title">${"<%- title %>"}</span>
+  <li data-id="${'<%- id %>'}" class="forum-nav-thread${'<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>'}">
+    <a href="#" class="forum-nav-thread-link">
+      <div class="forum-nav-thread-wrapper-1">
+        <span class="forum-nav-thread-title">${"<%- title %>"}</span>
+      </div><div class="forum-nav-thread-wrapper-2">
+        ${"<% if (endorsed) { %>"}
+          ## Translators: This is a label for a forum thread with a response that was endorsed by the course staff
+          <span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">${_("Endorsed response")}</span></span>
+        ${"<% } %>"}
         <%
+        js_block = u"""
+            interpolate(
+                '{}',
+                {{'span_sr_open': '<span class=\"sr\">', 'span_close': '</span>', 'votes_up_count': votes['up_count']}},
+                true
+                )
+        """.format(
+                ## Translators: 'votes_up_count' is a numerical placeholder for a specific discussion thread; 'span_*' placeholders refer to HTML markup.  Please translate the word 'votes'.
+                escapejs( _('%(votes_up_count)s%(span_sr_open)s votes %(span_close)s'))
+            )
+        %>
+        <span class="forum-nav-thread-votes-count">+${'<%='}${js_block}${'%>'}</span>
+        <% 
         js_block =  u"""
         var fmt;
         var data = {{
@@ -229,24 +249,14 @@
                 markup_none_unread=escapejs(_('%(comments_count)s %(span_sr_open)scomments %(span_close)s'))
             )
         %>
-        <span class="comments-count">
+        <span class="forum-nav-thread-comments-count ${'<% if (unread_comments_count > 0) { %>is-unread<% } %>'}">
             ${'<%'}${js_block}${'%>'}
         </span>
-        <%
-        js_block = u"""
-            interpolate(
-                '{}',
-                {{'span_sr_open': '<span class=\"sr\">', 'span_close': '</span>', 'votes_up_count': votes['up_count']}},
-                true
-                )
-        """.format(
-                ## Translators: 'votes_up_count' is a numerical placeholder for a specific discussion thread; 'span_*' placeholders refer to HTML markup.  Please translate the word 'votes'.
-                escapejs( _('%(votes_up_count)s%(span_sr_open)s votes %(span_close)s'))
-            )
-        %>
-        <span class="votes-count">+${'<%='}${js_block}${'%>'}</span>
+      </div>
     </a>
+  </li>
 </script>
+
 <script aria-hidden="true" type="text/template" id="discussion-home">
   <div class="discussion-article blank-slate">
     <section class="home-header">

From 551cea937903730f19ed7ff296f03a0bcba0f62b Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 10 Jun 2014 11:09:10 -0400
Subject: [PATCH 3/6] Add labels to forum thread list

A thread will be labeled if it is pinned, if the user is following it,
or if it was authored by a staff member or community TA. This also
slightly changes the color used for community TA labels.

Originally reviewed in #4072
---
 .../discussion_thread_list_view_spec.coffee   | 57 ++++++++++++++++++-
 .../coffee/src/discussion/content.coffee      |  5 +-
 .../static/coffee/src/discussion/main.coffee  |  2 +
 .../static/coffee/src/discussion/utils.coffee |  4 +-
 lms/static/sass/discussion/_discussion.scss   |  6 +-
 .../sass/discussion/elements/_navigation.scss | 43 ++++++++++++++
 .../sass/discussion/utilities/_shame.scss     | 20 +++++++
 .../sass/discussion/utilities/_variables.scss |  4 ++
 .../discussion/_underscore_templates.html     | 30 ++++++++++
 9 files changed, 163 insertions(+), 8 deletions(-)

diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
index 577893caa0..48c941cb13 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -8,6 +8,24 @@ describe "DiscussionThreadListView", ->
             <a href="#" class="forum-nav-thread-link">
               <div class="forum-nav-thread-wrapper-1">
                 <span class="forum-nav-thread-title"><%- title %></span>
+                <%
+                var labels = "";
+                if (pinned) {
+                    labels += '<li class="forum-nav-thread-label-pinned"><i class="icon icon-pushpin"></i>Pinned</li> ';
+                }
+                if (typeof(subscribed) != "undefined" && subscribed) {
+                    labels += '<li class="forum-nav-thread-label-following"><i class="icon icon-star"></i>Following</li> ';
+                }
+                if (staff_authored) {
+                    labels += '<li class="forum-nav-thread-label-staff"><i class="icon icon-user"></i>By: Staff</li> ';
+                }
+                if (community_ta_authored) {
+                    labels += '<li class="forum-nav-thread-label-community-ta"><i class="icon icon-user"></i>By: Community TA</li> ';
+                }
+                if (labels != "") {
+                    print('<ul class="forum-nav-thread-labels">' + labels + '</ul>');
+                }
+                %>
               </div><div class="forum-nav-thread-wrapper-2">
                 <% if (endorsed) { %>
                   <span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">Endorsed response</span></span>
@@ -135,7 +153,7 @@ describe "DiscussionThreadListView", ->
 
     describe "thread rendering should be correct", ->
         checkRender = (threads, type, sort_order) ->
-            discussion = new Discussion(threads, {pages: 1, sort: type})
+            discussion = new Discussion(_.map(threads, (thread) -> new Thread(thread)), {pages: 1, sort: type})
             view = makeView(discussion)
             view.render()
             checkThreadsOrdering(view, sort_order, type)
@@ -151,7 +169,7 @@ describe "DiscussionThreadListView", ->
 
     describe "Sort click should be correct", ->
       changeSorting = (threads, selected_type, new_type, sort_order) ->
-        discussion = new Discussion(threads, {pages: 1, sort: selected_type})
+        discussion = new Discussion(_.map(threads, (thread) -> new Thread(thread)), {pages: 1, sort: selected_type})
         view = makeView(discussion)
         view.render()
         expect(view.$el.find(".sort-bar a.active").text()).toEqual(selected_type)
@@ -316,3 +334,38 @@ describe "DiscussionThreadListView", ->
       it "when present", ->
         renderSingleThreadWithProps({endorsed: true})
         expect($(".forum-nav-thread-endorsed").length).toEqual(1)
+
+    describe "post labels render correctly", ->
+      beforeEach ->
+        @moderatorId = "42"
+        @administratorId = "43"
+        @communityTaId = "44"
+        DiscussionUtil.loadRoles({
+          "Moderator": [parseInt(@moderatorId)],
+          "Administrator": [parseInt(@administratorId)],
+          "Community TA": [parseInt(@communityTaId)],
+        })
+
+      it "for pinned", ->
+        renderSingleThreadWithProps({pinned: true})
+        expect($(".forum-nav-thread-label-pinned").length).toEqual(1)
+
+      it "for following", ->
+        renderSingleThreadWithProps({subscribed: true})
+        expect($(".forum-nav-thread-label-following").length).toEqual(1)
+
+      it "for moderator", ->
+        renderSingleThreadWithProps({user_id: @moderatorId})
+        expect($(".forum-nav-thread-label-staff").length).toEqual(1)
+
+      it "for administrator", ->
+        renderSingleThreadWithProps({user_id: @administratorId})
+        expect($(".forum-nav-thread-label-staff").length).toEqual(1)
+
+      it "for community TA", ->
+        renderSingleThreadWithProps({user_id: @communityTaId})
+        expect($(".forum-nav-thread-label-community-ta").length).toEqual(1)
+
+      it "when none should be present", ->
+        renderSingleThreadWithProps({})
+        expect($(".forum-nav-thread-labels").length).toEqual(0)
diff --git a/common/static/coffee/src/discussion/content.coffee b/common/static/coffee/src/discussion/content.coffee
index 7090063f6a..ebb7a9b299 100644
--- a/common/static/coffee/src/discussion/content.coffee
+++ b/common/static/coffee/src/discussion/content.coffee
@@ -53,9 +53,12 @@ if Backbone?
 
     initialize: ->
       Content.addContent @id, @
+      userId = @get('user_id')
+      @set('staff_authored', DiscussionUtil.isStaff(userId))
+      @set('community_ta_authored', DiscussionUtil.isTA(userId))
       if Content.getInfo(@id)
         @updateInfo(Content.getInfo(@id))
-      @set 'user_url', DiscussionUtil.urlFor('user_profile', @get('user_id'))
+      @set 'user_url', DiscussionUtil.urlFor('user_profile', userId)
       @resetComments(@get('children'))
 
     remove: ->
diff --git a/common/static/coffee/src/discussion/main.coffee b/common/static/coffee/src/discussion/main.coffee
index 29e97161d3..67c15d1e34 100644
--- a/common/static/coffee/src/discussion/main.coffee
+++ b/common/static/coffee/src/discussion/main.coffee
@@ -20,6 +20,8 @@ if Backbone?
       Backbone.history.start({pushState: true, root: "/courses/#{$$course_id}/discussion/forum/"})
   DiscussionProfileApp =
     start: (elem) ->
+      # Roles are not included in user profile page, but they are not used for anything
+      DiscussionUtil.loadRoles({"Moderator": [], "Administrator": [], "Community TA": []})
       element = $(elem)
       window.$$course_id = element.data("course-id")
       threads = element.data("threads")
diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee
index 8242779c8a..09ab0a9343 100644
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/common/static/coffee/src/discussion/utils.coffee
@@ -32,12 +32,12 @@ class @DiscussionUtil
     @loadFlagModerator($("#discussion-container").data("flag-moderator"))
 
   @isStaff: (user_id) ->
-    user_id ?= @user.id
+    user_id ?= @user?.id
     staff = _.union(@roleIds['Moderator'], @roleIds['Administrator'])
     _.include(staff, parseInt(user_id))
 
   @isTA: (user_id) ->
-    user_id ?= @user.id
+    user_id ?= @user?.id
     ta = _.union(@roleIds['Community TA'])
     _.include(ta, parseInt(user_id))
 
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index d401df9a5f..f07f15b0a2 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -1241,7 +1241,7 @@ body.discussion {
 
       &.community-ta{
         padding-top: 38px;
-        border-color: #449944;
+        border-color: $forum-color-community-ta;
       }
 
       .staff-banner {
@@ -1269,7 +1269,7 @@ body.discussion {
         padding: 1px 5px;
         @include box-sizing(border-box);
         border-radius: 2px 2px 0 0;
-        background: #449944;
+        background: $forum-color-community-ta;
         font-size: 9px;
         font-weight: 700;
         color: $white;
@@ -1473,7 +1473,7 @@ body.discussion {
     margin-left: ($baseline/10);
     padding: 0 ($baseline/5);
     border-radius: 2px;
-    background: #449944;
+    background: $forum-color-community-ta;
     font-size: 9px;
     font-weight: 700;
     font-style: normal;
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index b8ac14061e..7a0b94e2e8 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -34,6 +34,49 @@
   display: block;
 }
 
+%forum-nav-thread-label {
+  @extend %t-weight4;
+  @include font-size(9);
+  display: inline;
+  border: 1px solid;
+  border-radius: 3px;
+  text-transform: uppercase;
+  white-space: nowrap;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  .icon {
+    margin-right: ($baseline/5);
+  }
+
+}
+
+.forum-nav-thread-label-pinned {
+  @extend %forum-nav-thread-label;
+  border-color: $forum-color-pinned;
+  color: $forum-color-pinned;
+}
+
+.forum-nav-thread-label-following {
+  @extend %forum-nav-thread-label;
+  border-color: $forum-color-following;
+  color: $forum-color-following;
+}
+
+.forum-nav-thread-label-staff {
+  @extend %forum-nav-thread-label;
+  border-color: $forum-color-staff;
+  color: $forum-color-staff;
+}
+
+.forum-nav-thread-label-community-ta {
+  @extend %forum-nav-thread-label;
+  border-color: $forum-color-community-ta;
+  color: $forum-color-community-ta;
+}
+
 %forum-nav-thread-wrapper-2-content {
   @include font-size(11);
   display: inline-block;
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
index eaa2a6edea..991cec5df0 100644
--- a/lms/static/sass/discussion/utilities/_shame.scss
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -19,6 +19,11 @@
   }
 }
 
+li[class*=forum-nav-thread-label-] {
+  margin-top: ($baseline/4) !important;
+  padding: 1px 6px !important;
+}
+
 .forum-nav-load-more {
   border-bottom: 1px solid $gray-l3 !important;
   background-color: $gray-l5 !important;
@@ -34,3 +39,18 @@
 .forum-nav-load-more-link, .forum-nav-loading {
   padding: $baseline 0 !important;
 }
+
+// The following rules would be unnecessary but for broadly scoped rules defined
+// elsewhere in our CSS.
+
+li[class*=forum-nav-thread-label-] {
+  // Override global span rules
+  span {
+    color: inherit;
+  }
+
+  // Override clearfix stuff in .sidebar ul li rules
+  &:before, &:after {
+    display: none !important;
+  }
+}
diff --git a/lms/static/sass/discussion/utilities/_variables.scss b/lms/static/sass/discussion/utilities/_variables.scss
index bfc9bf8677..4009d74d3b 100644
--- a/lms/static/sass/discussion/utilities/_variables.scss
+++ b/lms/static/sass/discussion/utilities/_variables.scss
@@ -1 +1,5 @@
 $forum-color-active-thread: tint($blue, 85%);
+$forum-color-pinned: $pink;
+$forum-color-following: $blue;
+$forum-color-staff: $blue;
+$forum-color-community-ta: $green-d1;
diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html
index 185a9ec640..f7b9bbd57a 100644
--- a/lms/templates/discussion/_underscore_templates.html
+++ b/lms/templates/discussion/_underscore_templates.html
@@ -209,6 +209,36 @@
     <a href="#" class="forum-nav-thread-link">
       <div class="forum-nav-thread-wrapper-1">
         <span class="forum-nav-thread-title">${"<%- title %>"}</span>
+        <%
+        js_block = u"""
+        var labels = "";
+        if (pinned) {{
+            labels += '<li class="forum-nav-thread-label-pinned"><i class="icon icon-pushpin"></i>{pinned_text}</li> ';
+        }}
+        if (typeof(subscribed) != "undefined" && subscribed) {{
+            labels += '<li class="forum-nav-thread-label-following"><i class="icon icon-star"></i>{following_text}</li> ';
+        }}
+        if (staff_authored) {{
+            labels += '<li class="forum-nav-thread-label-staff"><i class="icon icon-user"></i>{staff_text}</li> ';
+        }}
+        if (community_ta_authored) {{
+            labels += '<li class="forum-nav-thread-label-community-ta"><i class="icon icon-user"></i>{community_ta_text}</li> ';
+        }}
+        if (labels != "") {{
+            print('<ul class="forum-nav-thread-labels">' + labels + '</ul>');
+        }}
+        """.format(
+            ## Translators: This is a label for a forum thread that has been pinned
+            pinned_text=escapejs(_("Pinned")),
+            ## Translators: This is a label for a forum thread that the user is subscribed to
+            following_text=escapejs(_("Following")),
+            ## Translators: This is a label for a forum thread that was authored by a member of the course staff
+            staff_text=escapejs(_("By: Staff")),
+            ## Translators: This is a label for a forum thread that was authored by a community TA
+            community_ta_text=escapejs(_("By: Community TA"))
+        )
+         %>
+        ${"<%"}${js_block}${"%>"}
       </div><div class="forum-nav-thread-wrapper-2">
         ${"<% if (endorsed) { %>"}
           ## Translators: This is a label for a forum thread with a response that was endorsed by the course staff

From e049cfaf3b46ab2061cf940d94b37ca2390bc5d1 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 17 Jun 2014 11:36:47 -0400
Subject: [PATCH 4/6] Make "load more" in forums not appear incorrectly

The rendering of the link happens in an event handler, and the
collection's attributes were not getting set properly before the reset
event triggering the rendering occurred.

Originally reviewed in #4072
---
 common/static/coffee/src/discussion/discussion.coffee | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/static/coffee/src/discussion/discussion.coffee b/common/static/coffee/src/discussion/discussion.coffee
index 1e5fdd693b..8b6162f54b 100644
--- a/common/static/coffee/src/discussion/discussion.coffee
+++ b/common/static/coffee/src/discussion/discussion.coffee
@@ -62,9 +62,9 @@ if Backbone?
           new_threads = [new Thread(data) for data in response.discussion_data][0]
           new_collection = _.union(models, new_threads)
           Content.loadContentInfos(response.annotated_content_info)
-          @reset new_collection
           @pages = response.num_pages
           @current_page = response.page
+          @reset new_collection
         error: error
 
     sortByDate: (thread) ->

From 05d8eeecd7d8e81c96b64a1092690ace2d112475 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 17 Jun 2014 11:43:26 -0400
Subject: [PATCH 5/6] Improve forum sorting and cohort filtering UX

Thread entries now show an activity count that includes the original
post, and only one of the vote count and activity count is displayed
based on the user's selected sort. The sorting and filtering options now
both use a select and are somewhat more verbose, and the visual styling
of the sort/filter bar is updated.

Originally reviewed in #4165 with a bugfix in #4211
---
 .../discussion_thread_list_view_spec.coffee   | 27 ++++----
 .../views/discussion_thread_list_view.coffee  | 59 +++++++++--------
 .../test/acceptance/pages/lms/discussion.py   |  9 +--
 .../test/acceptance/tests/test_discussion.py  |  8 +--
 lms/static/sass/discussion/_discussion.scss   | 65 -------------------
 .../sass/discussion/elements/_navigation.scss | 31 +++++++++
 .../sass/discussion/utilities/_shame.scss     | 13 ++++
 .../discussion/_thread_list_template.html     | 28 ++++----
 .../discussion/_underscore_templates.html     |  5 +-
 9 files changed, 120 insertions(+), 125 deletions(-)

diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
index 48c941cb13..26160ff8f2 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -69,13 +69,14 @@ describe "DiscussionThreadListView", ->
                     </form>
                 </div>
             </div>
-            <div class="sort-bar">
-              <span class="sort-label" id="sort-label">Sort by:</span>
-              <ul role="radiogroup" aria-labelledby="sort-label">
-                  <li><a href="#" role="radio" aria-checked="false" data-sort="date">date</a></li>
-                  <li><a href="#" role="radio" aria-checked="false" data-sort="votes">votes</a></li>
-                  <li><a href="#" role="radio" aria-checked="false" data-sort="comments">comments</a></li>
-              </ul>
+            <div class="forum-nav-refine-bar">
+                <span class="forum-nav-sort">
+                    <select class="forum-nav-sort-control">
+                        <option value="date">by recent activity</option>
+                        <option value="comments">by most activity</option>
+                        <option value="votes">by most votes</option>
+                    </select>
+                </span>
             </div>
             <div class="search-alerts"></div>
             <ul class="forum-nav-thread-list"></ul>
@@ -149,7 +150,7 @@ describe "DiscussionThreadListView", ->
       expect(view.$el.find(".forum-nav-thread:nth-child(1) .forum-nav-thread-title").text()).toEqual(sort_order[0])
       expect(view.$el.find(".forum-nav-thread:nth-child(2) .forum-nav-thread-title").text()).toEqual(sort_order[1])
       expect(view.$el.find(".forum-nav-thread:nth-child(3) .forum-nav-thread-title").text()).toEqual(sort_order[2])
-      expect(view.$el.find(".sort-bar a.active").text()).toEqual(type)
+      expect(view.$el.find(".forum-nav-sort-control").val()).toEqual(type)
 
     describe "thread rendering should be correct", ->
         checkRender = (threads, type, sort_order) ->
@@ -157,6 +158,8 @@ describe "DiscussionThreadListView", ->
             view = makeView(discussion)
             view.render()
             checkThreadsOrdering(view, sort_order, type)
+            expect(view.$el.find(".forum-nav-thread-comments-count:visible").length).toEqual(if type == "votes" then 0 else 3)
+            expect(view.$el.find(".forum-nav-thread-votes-count:visible").length).toEqual(if type == "votes" then 3 else 0)
 
         it "with sort preference date", ->
             checkRender(@threads, "date", [ "Thread1", "Thread2", "Thread3"])
@@ -167,12 +170,13 @@ describe "DiscussionThreadListView", ->
         it "with sort preference comments", ->
             checkRender(@threads, "comments", [ "Thread3", "Thread2", "Thread1"])
 
-    describe "Sort click should be correct", ->
+    describe "Sort change should be correct", ->
       changeSorting = (threads, selected_type, new_type, sort_order) ->
         discussion = new Discussion(_.map(threads, (thread) -> new Thread(thread)), {pages: 1, sort: selected_type})
         view = makeView(discussion)
         view.render()
-        expect(view.$el.find(".sort-bar a.active").text()).toEqual(selected_type)
+        sortControl = view.$el.find(".forum-nav-sort-control")
+        expect(sortControl.val()).toEqual(selected_type)
         sorted_threads = []
         if new_type == 'date'
           sorted_threads = [threads[0], threads[1], threads[2]]
@@ -186,9 +190,8 @@ describe "DiscussionThreadListView", ->
           )
           {always: ->}
         )
-        view.$el.find(".sort-bar a[data-sort='"+new_type+"']").click()
+        sortControl.val(new_type).change()
         expect($.ajax).toHaveBeenCalled()
-        expect(view.sortBy).toEqual(new_type)
         checkThreadsOrdering(view, sort_order, new_type)
 
       it "with sort preference date", ->
diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
index 5e27aa8f3d..88f5b99067 100644
--- a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -6,18 +6,17 @@ if Backbone?
       "click .browse": "toggleTopicDrop"
       "keydown .post-search-field": "performSearch"
       "focus .post-search-field": "showSearch"
-      "click .sort-bar a": "sortThreads"
+      "change .forum-nav-sort-control": "sortThreads"
       "click .browse-topic-drop-menu": "filterTopic"
       "click .browse-topic-drop-search-input": "ignoreClick"
       "click .forum-nav-thread-link": "threadSelected"
       "click .forum-nav-load-more-link": "loadMorePages"
-      "change .cohort-options": "chooseCohort"
+      "change .forum-nav-filter-cohort-control": "chooseCohort"
       'keyup .browse-topic-drop-search-input': DiscussionFilter.filterDrop
 
     initialize: ->
       @displayedCollection = new Discussion(@collection.models, pages: @collection.pages)
       @collection.on "change", @reloadDisplayedCollection
-      @sortBy = "date"
       @discussionIds=""
       @collection.on "reset", (discussion) =>
         board = $(".current-board").html()
@@ -30,7 +29,6 @@ if Backbone?
         #   @filterTopic($.Event("filter", {'target': target[0]}))
       @collection.on "add", @addAndSelectThread
       @sidebar_padding = 10
-      @sidebar_header_height = 87
       @boardName
       @template = _.template($("#thread-list-template").html())
       @current_search = ""
@@ -71,6 +69,7 @@ if Backbone?
       current_el = @$(".forum-nav-thread[data-id=#{thread_id}]")
       active = current_el.has(".forum-nav-thread-link.is-active").length != 0
       current_el.replaceWith(content)
+      @showMetadataAccordingToSort()
       if active
         @setActiveThread(thread_id)
 
@@ -88,7 +87,7 @@ if Backbone?
       scrollTop = $(window).scrollTop();
       windowHeight = $(window).height();
 
-      discussionBody = $(".discussion-article")
+      discussionBody = $(".discussion-column")
       discussionsBodyTop = if discussionBody[0] then discussionBody.offset().top
       discussionsBodyBottom = discussionsBodyTop + discussionBody.outerHeight()
 
@@ -111,7 +110,9 @@ if Backbone?
       sidebarHeight = Math.min(sidebarHeight + 1, discussionBody.outerHeight())
       sidebar.css 'height', sidebarHeight
 
-      @$('.forum-nav-thread-list').css('height', (sidebarHeight - @sidebar_header_height - 4) + 'px')
+      browseSearchHeight = @$(".browse-search").outerHeight()
+      refineBarHeight = @$(".forum-nav-refine-bar").outerHeight()
+      @$('.forum-nav-thread-list').css('height', (sidebarHeight - browseSearchHeight - refineBarHeight - 2) + 'px')
 
 
     # Because we want the behavior that when the body is clicked the menu is
@@ -123,6 +124,7 @@ if Backbone?
     render: ->
       @timer = 0
       @$el.html(@template())
+      @$(".forum-nav-sort-control").val(@collection.sort_preference)
 
       $(window).bind "load", @updateSidebar
       $(window).bind "scroll", @updateSidebar
@@ -131,9 +133,6 @@ if Backbone?
       @displayedCollection.on "reset", @renderThreads
       @displayedCollection.on "thread:remove", @renderThreads
       @renderThreads()
-      sort_element = @$('.sort-bar a[data-sort="' + this.collection.sort_preference + '"]')
-      sort_element.attr('aria-checked',true)
-      sort_element.addClass('active')
       @
 
     renderThreads: =>
@@ -144,10 +143,24 @@ if Backbone?
         rendered.append content
 
       @$(".forum-nav-thread-list").html(rendered.html())
+      @showMetadataAccordingToSort()
+
       @renderMorePages()
       @updateSidebar()
       @trigger "threads:rendered"
 
+    showMetadataAccordingToSort: () =>
+      # Ensure that threads display metadata appropriate for the current sort
+      voteCounts = @$(".forum-nav-thread-votes-count")
+      commentCounts = @$(".forum-nav-thread-comments-count")
+      voteCounts.hide()
+      commentCounts.hide()
+      switch @$(".forum-nav-sort-control").val()
+        when "date", "comments"
+          commentCounts.show()
+        when "votes"
+          voteCounts.show()
+
     renderMorePages: ->
       if @displayedCollection.hasMorePages()
         @$(".forum-nav-thread-list").append("<li class='forum-nav-load-more'><a href='#' class='forum-nav-load-more-link'>" + gettext("Load more") + "</a></li>")
@@ -197,17 +210,17 @@ if Backbone?
         @renderThreads()
         DiscussionUtil.discussionAlert(gettext("Sorry"), gettext("We had some trouble loading more threads. Please try again."))
 
-      @collection.retrieveAnotherPage(@mode, options, {sort_key: @sortBy}, error)
+      @collection.retrieveAnotherPage(@mode, options, {sort_key: @$(".forum-nav-sort-control").val()}, error)
 
     renderThread: (thread) =>
       content = $(_.template($("#thread-list-item-template").html())(thread.toJSON()))
-      unreadCount = thread.get('unread_comments_count')
+      unreadCount = thread.get('unread_comments_count') + (if thread.get("read") then 0 else 1)
       if unreadCount > 0
         content.find('.forum-nav-thread-comments-count').attr(
           "data-tooltip",
           interpolate(
             ngettext('%(unread_count)s new comment', '%(unread_count)s new comments', unreadCount),
-            {unread_count: thread.get('unread_comments_count')},
+            {unread_count: unreadCount},
             true
           )
         )
@@ -340,26 +353,26 @@ if Backbone?
         if discussionId == "#all"
           @discussionIds = ""
           @$(".post-search-field").val("")
-          @$('.cohort').show()                    
+          @$('.forum-nav-filter-cohort').show()
           @retrieveAllThreads()
         else if discussionId == "#flagged"
           @discussionIds = ""
           @$(".post-search-field").val("")
-          @$('.cohort').hide() 
+          @$('.forum-nav-filter-cohort').hide()
           @retrieveFlaggedThreads() 
         else if discussionId == "#following"
           @retrieveFollowed(event)
-          @$('.cohort').hide()
+          @$('.forum-nav-filter-cohort').hide()
         else
           discussionIds = _.map item.find(".board-name[data-discussion_id]"), (board) -> $(board).data("discussion_id").id
           
           if $(event.target).attr('cohorted') == "True"
-            @retrieveDiscussions(discussionIds, "function(){$('.cohort').show();}")
+            @retrieveDiscussions(discussionIds, "function(){$('.forum-nav-filter-cohort').show();}")
           else
-            @retrieveDiscussions(discussionIds, "function(){$('.cohort').hide();}")
+            @retrieveDiscussions(discussionIds, "function(){$('.forum-nav-filter-cohort').hide();}")
     
     chooseCohort: (event) ->
-      @group_id = @$('.cohort-options :selected').val()
+      @group_id = @$('.forum-nav-filter-cohort-control :selected').val()
       @collection.current_page = 0
       @collection.reset()
       @loadMorePages(event)
@@ -400,14 +413,8 @@ if Backbone?
       @loadMorePages(event)
 
     sortThreads: (event) ->
-      activeSort = @$(".sort-bar a.active")
-      activeSort.removeClass("active")
-      activeSort.attr("aria-checked", "false")
-      newSort = $(event.target)
-      newSort.addClass("active")
-      newSort.attr("aria-checked", "true")
-      @sortBy = newSort.data("sort")
-      @displayedCollection.setSortComparator(@sortBy)
+      @displayedCollection.setSortComparator(@$(".forum-nav-sort-control").val())
+
       @retrieveFirstPage(event)
 
     performSearch: (event) ->
diff --git a/common/test/acceptance/pages/lms/discussion.py b/common/test/acceptance/pages/lms/discussion.py
index 431784716c..cd812a1dbd 100644
--- a/common/test/acceptance/pages/lms/discussion.py
+++ b/common/test/acceptance/pages/lms/discussion.py
@@ -179,19 +179,20 @@ class DiscussionSortPreferencePage(CoursePage):
         """
         Return true if the browser is on the right page else false.
         """
-        return self.q(css="body.discussion .sort-bar").present
+        return self.q(css="body.discussion .forum-nav-sort-control").present
 
-    def get_selected_sort_preference_text(self):
+    def get_selected_sort_preference(self):
         """
         Return the text of option that is selected for sorting.
         """
-        return self.q(css="body.discussion .sort-bar a.active").text[0].lower()
+        options = self.q(css="body.discussion .forum-nav-sort-control option")
+        return options.filter(lambda el: el.is_selected())[0].get_attribute("value")
 
     def change_sort_preference(self, sort_by):
         """
         Change the option of sorting by clicking on new option.
         """
-        self.q(css="body.discussion .sort-bar a[data-sort='{0}']".format(sort_by)).click()
+        self.q(css="body.discussion .forum-nav-sort-control option[value='{0}']".format(sort_by)).click()
 
     def refresh_page(self):
         """
diff --git a/common/test/acceptance/tests/test_discussion.py b/common/test/acceptance/tests/test_discussion.py
index d7e7be8c29..a71f0f9b31 100644
--- a/common/test/acceptance/tests/test_discussion.py
+++ b/common/test/acceptance/tests/test_discussion.py
@@ -509,7 +509,7 @@ class DiscussionSortPreferenceTest(UniqueCourseTest):
         """
         Test to check the default sorting preference of user. (Default = date )
         """
-        selected_sort = self.sort_page.get_selected_sort_preference_text()
+        selected_sort = self.sort_page.get_selected_sort_preference()
         self.assertEqual(selected_sort, "date")
 
     def test_change_sort_preference(self):
@@ -520,7 +520,7 @@ class DiscussionSortPreferenceTest(UniqueCourseTest):
         for sort_type in ["votes", "comments", "date"]:
             self.assertNotEqual(selected_sort, sort_type)
             self.sort_page.change_sort_preference(sort_type)
-            selected_sort = self.sort_page.get_selected_sort_preference_text()
+            selected_sort = self.sort_page.get_selected_sort_preference()
             self.assertEqual(selected_sort, sort_type)
 
     def test_last_preference_saved(self):
@@ -531,8 +531,8 @@ class DiscussionSortPreferenceTest(UniqueCourseTest):
         for sort_type in ["votes", "comments", "date"]:
             self.assertNotEqual(selected_sort, sort_type)
             self.sort_page.change_sort_preference(sort_type)
-            selected_sort = self.sort_page.get_selected_sort_preference_text()
+            selected_sort = self.sort_page.get_selected_sort_preference()
             self.assertEqual(selected_sort, sort_type)
             self.sort_page.refresh_page()
-            selected_sort = self.sort_page.get_selected_sort_preference_text()
+            selected_sort = self.sort_page.get_selected_sort_preference()
             self.assertEqual(selected_sort, sort_type)
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index f07f15b0a2..0be8886ac2 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -888,71 +888,6 @@ body.discussion {
     }
   }
 
-  .sort-bar {
-    height: auto;
-    min-height: 27px;
-    border-bottom: 1px solid #a3a3a3;
-    @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-    background-color: #aeaeae;
-    box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
-
-    span,
-    a {
-      font-size: 9px;
-      font-weight: bold;
-      line-height: 25px;
-      color: #333;
-      text-transform: uppercase;
-      text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
-    }
-
-    .sort-label {
-      display: block;
-      float: left;
-      margin: 0 $baseline/2;
-    }
-
-    li {
-      float: left;
-      margin: 4px 4px 0 0;
-    }
-
-    a {
-      display: block;
-      height: 18px;
-      padding: 0 9px;
-      border-radius: 19px;
-      color: #333;
-      line-height: 17px;
-
-      &:hover, &:focus {
-        @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, .2));
-        color: #333;
-      }
-
-      &.active {
-        @include linear-gradient(top, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));
-        background-color: #999;
-        color: $white;
-        text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
-        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, .2) inset;
-      }
-
-    }
-    .group-filter-label {
-      width: 40px;
-      margin-left: $baseline/2;
-    }
-
-    .group-filter-select {
-      margin: 5px 0px 5px 5px;
-      width: 80px;
-      font-size:10px;
-      background: transparent;
-      border-color: #ccc;
-    }
-  }
-
   .bottom-post-status {
     padding: 30px;
     font-size: 20px;
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index 7a0b94e2e8..2a1a26df84 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -1,3 +1,34 @@
+// -------------------
+// Sort and filter bar
+// -------------------
+.forum-nav-refine-bar {
+  @include clearfix();
+  @include font-size(11);
+  border-bottom: 1px solid $gray-l3;
+  background-color: $gray-l5;
+  padding: ($baseline/4) ($baseline/2);
+  color: $black;
+}
+
+%forum-nav-select {
+  border: none;
+  max-width: 100%;
+  background-color: transparent;
+  font: inherit;
+}
+
+.forum-nav-filter-cohort-control {
+  @extend %forum-nav-select;
+}
+
+.forum-nav-sort {
+  float: right;
+}
+
+.forum-nav-sort-control {
+  @extend %forum-nav-select;
+}
+
 // -----------
 // Thread list
 // -----------
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
index 991cec5df0..0f069889fa 100644
--- a/lms/static/sass/discussion/utilities/_shame.scss
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -1,3 +1,16 @@
+// --------------------------------
+// navigation - sort and filter bar
+// --------------------------------
+
+// Override global span rules
+.forum-nav-sort-label {
+  color: inherit;
+}
+
+// --------------------------------
+// navigation - thread list
+// --------------------------------
+
 // The sidebar class does a lot of things that we don't want in the thread list;
 // the following rules contain styling that is necessary and would otherwise
 // reside in elements/_navigation.scss if the sidebar styling did not make the
diff --git a/lms/templates/discussion/_thread_list_template.html b/lms/templates/discussion/_thread_list_template.html
index 0ea9964642..e1c95c8197 100644
--- a/lms/templates/discussion/_thread_list_template.html
+++ b/lms/templates/discussion/_thread_list_template.html
@@ -26,23 +26,27 @@
             </form>
         </div>
     </div>
-    <div class="sort-bar">
-        <span class="sort-label" id="sort-label">${_("Sort by:")}</span>
-        <ul role="radiogroup" aria-labelledby="sort-label">
-            <li><a href="#" role="radio" aria-checked="false" data-sort="date">${_("date")}</a></li>
-            <li><a href="#" role="radio" aria-checked="false" data-sort="votes">${_("votes")}</a></li>
-            <li><a href="#" role="radio" aria-checked="false" data-sort="comments">${_("comments")}</a></li>
-        </ul>
-
+    <div class="forum-nav-refine-bar">
         %if is_course_cohorted and is_moderator:
-        <span class="group-filter-label cohort">${_("Show:")}</span>
-            <select class="group-filter-select cohort-options cohort">
-                <option value="all">${_("View All")}</option>
+        <span class="forum-nav-filter-cohort">
+            <select class="forum-nav-filter-cohort-control">
+                <option value="all">${_("View all cohorts")}</option>
                     %for c in cohorts:
-                        <option value="${c['id']}">${_("View as {name}").format(name=c['name'])}</option>
+                        <option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
                     %endfor
             </select>
         %endif
+
+        <span class="forum-nav-sort">
+            <select class="forum-nav-sort-control">
+                ## Translators: This is a menu option for sorting forum threads
+                <option value="date">${_("by recent activity")}</option>
+                ## Translators: This is a menu option for sorting forum threads
+                <option value="comments">${_("by most activity")}</option>
+                ## Translators: This is a menu option for sorting forum threads
+                <option value="votes">${_("by most votes")}</option>
+            </select>
+        </span>
     </div>
     <div class="search-alerts"></div>
     <ul class="forum-nav-thread-list"></ul>
diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html
index f7b9bbd57a..d6dc58ffca 100644
--- a/lms/templates/discussion/_underscore_templates.html
+++ b/lms/templates/discussion/_underscore_templates.html
@@ -260,11 +260,12 @@
         <% 
         js_block =  u"""
         var fmt;
+        // Counts in data do not include the post itself, but the UI should
         var data = {{
             'span_sr_open': '<span class=\"sr\">',
             'span_close': '</span>',
-            'unread_comments_count': unread_comments_count,
-            'comments_count': comments_count
+            'unread_comments_count': unread_comments_count + (read ? 0 : 1),
+            'comments_count': comments_count + 1
             }};
         if (unread_comments_count > 0) {{
             fmt = '{markup_with_unread}';

From 6d87443a39ecb780f26768203f44629655069606 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Wed, 25 Jun 2014 17:13:05 -0400
Subject: [PATCH 6/6] Update discussion tab sidebar header

The home button is removed, the search box is always displayed, and many
visual adjustments are made, along with a large amount of refactoring.

Originally reviewed in #4211
---
 .../discussion_thread_list_view_spec.coffee   | 221 ++++++++++++-
 .../static/coffee/src/discussion/utils.coffee |   4 +
 .../views/discussion_thread_list_view.coffee  | 232 +++++++-------
 .../test/acceptance/pages/lms/discussion.py   |   7 +-
 lms/static/sass/discussion/_discussion.scss   | 293 ------------------
 .../sass/discussion/elements/_navigation.scss |  93 ++++++
 .../sass/discussion/utilities/_shame.scss     |  82 +++++
 .../discussion/_filter_dropdown.html          |  48 +--
 .../discussion/_thread_list_template.html     |  89 +++---
 lms/templates/discussion/index.html           |   2 +-
 10 files changed, 557 insertions(+), 514 deletions(-)

diff --git a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
index 26160ff8f2..324d336e8e 100644
--- a/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
+++ b/common/static/coffee/spec/discussion/view/discussion_thread_list_view_spec.coffee
@@ -59,24 +59,79 @@ describe "DiscussionThreadListView", ->
           </li>
         </script>
         <script type="text/template" id="thread-list-template">
-            <div class="browse-search">
-                <div class="home"></div>
-                <div class="browse is-open"></div>
-                <div class="search">
-                    <form class="post-search">
-                        <label class="sr" for="search-discussions">Search</label>
-                        <input type="text" id="search-discussions" placeholder="Search all discussions" class="post-search-field">
-                    </form>
-                </div>
+            <div class="forum-nav-header">
+                <a href="#" class="forum-nav-browse" aria-haspopup="true">
+                    <i class="icon icon-reorder"></i>
+                    <span class="sr">Discussion topics; current selection is: </span>
+                    <span class="forum-nav-browse-current">All Discussions</span>
+                    ▾
+                </a>
+                <form class="forum-nav-search">
+                    <label>
+                        <span class="sr">Search</span>
+                        <input class="forum-nav-search-input" type="text" placeholder="Search all posts">
+                    </label>
+                </form>
             </div>
-            <div class="forum-nav-refine-bar">
-                <span class="forum-nav-sort">
-                    <select class="forum-nav-sort-control">
-                        <option value="date">by recent activity</option>
-                        <option value="comments">by most activity</option>
-                        <option value="votes">by most votes</option>
-                    </select>
-                </span>
+            <div class="forum-nav-browse-menu-wrapper" style="display: none">
+                <form class="forum-nav-browse-filter">
+                    <label>
+                        <span class="sr">Filter Topics</span>
+                        <input type="text" class="forum-nav-browse-filter-input" placeholder="filter topics">
+                    </label>
+                </form>
+                <ul class="forum-nav-browse-menu">
+                    <li class="forum-nav-browse-menu-item forum-nav-browse-menu-all">
+                        <a href="#" class="forum-nav-browse-title">All Discussions</a>
+                    </li>
+                    <li class="forum-nav-browse-menu-item forum-nav-browse-menu-flagged">
+                        <a href="#" class="forum-nav-browse-title"><i class="icon icon-flag"></i>Flagged Discussions</a>
+                    </li>
+                    <li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
+                        <a href="#" class="forum-nav-browse-title"><i class="icon icon-star"></i>Posts I'm Following</a>
+                    </li>
+                    <li class="forum-nav-browse-menu-item">
+                        <a href="#" class="forum-nav-browse-title">Parent</a>
+                        <ul class="forum-nav-browse-submenu">
+                            <li class="forum-nav-browse-menu-item">
+                                <a href="#" class="forum-nav-browse-title">Target</a>
+                                <ul class="forum-nav-browse-submenu">
+                                    <li
+                                        class="forum-nav-browse-menu-item"
+                                        data-discussion-id='{"sort_key": null, "id": "child"}'
+                                        data-cohorted="false"
+                                    >
+                                        <a href="#" class="forum-nav-browse-title">Child</a>
+                                    </li>
+                                </ul>
+                            <li
+                                class="forum-nav-browse-menu-item"
+                                data-discussion-id='{"sort_key": null, "id": "sibling"}'
+                                data-cohorted="false"
+                            >
+                                <a href="#" class="forum-nav-browse-title">Sibling</a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li
+                        class="forum-nav-browse-menu-item"
+                        data-discussion-id='{"sort_key": null, "id": "other"}'
+                        data-cohorted="false"
+                    >
+                        <a href="#" class="forum-nav-browse-title">Other Category</a>
+                    </li>
+                </ul>
+            </div>
+            <div class="forum-nav-thread-list-wrapper">
+                <div class="forum-nav-refine-bar">
+                    <span class="forum-nav-sort">
+                        <select class="forum-nav-sort-control">
+                            <option value="date">by recent activity</option>
+                            <option value="comments">by most activity</option>
+                            <option value="votes">by most votes</option>
+                        </select>
+                    </span>
+                </div>
             </div>
             <div class="search-alerts"></div>
             <ul class="forum-nav-thread-list"></ul>
@@ -372,3 +427,135 @@ describe "DiscussionThreadListView", ->
       it "when none should be present", ->
         renderSingleThreadWithProps({})
         expect($(".forum-nav-thread-labels").length).toEqual(0)
+
+    describe "browse menu", ->
+      setupAjax = (callback) ->
+        $.ajax.andCallFake(
+          (params) =>
+            if callback
+              callback(params)
+            params.success({discussion_data: [], page: 1, num_pages: 1})
+            {always: ->}
+        )
+
+      afterEach ->
+        # Remove handler added to make browse menu disappear
+        $("body").unbind("click")
+
+      expectBrowseMenuVisible = (isVisible) ->
+        expect($(".forum-nav-browse-menu:visible").length).toEqual(if isVisible then 1 else 0)
+        expect($(".forum-nav-thread-list-wrapper:visible").length).toEqual(if isVisible then 0 else 1)
+
+      it "should not be visible by default", ->
+        expectBrowseMenuVisible(false)
+
+      it "should show when header button is clicked", ->
+        $(".forum-nav-browse").click()
+        expectBrowseMenuVisible(true)
+
+      describe "when shown", ->
+        beforeEach ->
+          $(".forum-nav-browse").click()
+
+        it "should hide when header button is clicked", ->
+          $(".forum-nav-browse").click()
+          expectBrowseMenuVisible(false)
+
+        it "should hide when a click outside the menu occurs", ->
+          $(".forum-nav-search-input").click()
+          expectBrowseMenuVisible(false)
+
+        it "should hide when a search is executed", ->
+          setupAjax()
+          $(".forum-nav-search-input").trigger($.Event("keydown", {which: 13}))
+          expectBrowseMenuVisible(false)
+
+        it "should hide when a category is clicked", ->
+          $(".forum-nav-browse-title")[0].click()
+          expectBrowseMenuVisible(false)
+
+        it "should still be shown when filter input is clicked", ->
+          $(".forum-nav-browse-filter-input").click()
+          expectBrowseMenuVisible(true)
+
+        describe "filtering", ->
+          checkFilter = (filterText, expectedItems) ->
+            $(".forum-nav-browse-filter-input").val(filterText).keyup()
+            visibleItems = $(".forum-nav-browse-title:visible").map(
+              (i, elem) -> $(elem).text()
+            ).get()
+            expect(visibleItems).toEqual(expectedItems)
+
+          it "should be case-insensitive", ->
+            checkFilter("flagged", ["Flagged Discussions"])
+
+          it "should match partial words", ->
+            checkFilter("ateg", ["Other Category"])
+
+          it "should show ancestors and descendants of matches", ->
+            checkFilter("Target", ["Parent", "Target", "Child"])
+
+          it "should handle multiple words regardless of order", ->
+            checkFilter("Following Posts", ["Posts I'm Following"])
+
+          it "should handle multiple words in different depths", ->
+            checkFilter("Parent Child", ["Parent", "Target", "Child"])
+
+      describe "selecting an item", ->
+        it "should clear the search box", ->
+          setupAjax()
+          $(".forum-nav-search-input").val("foobar")
+          $(".forum-nav-browse-menu-following .forum-nav-browse-title").click()
+          expect($(".forum-nav-search-input").val()).toEqual("")
+
+        it "should change the button text", ->
+          setupAjax()
+          $(".forum-nav-browse-menu-following .forum-nav-browse-title").click()
+          expect($(".forum-nav-browse-current").text()).toEqual("Posts I'm Following")
+
+        testSelectionRequest = (callback, itemText) ->
+          setupAjax(callback)
+          $(".forum-nav-browse-title:contains(#{itemText})").click()
+
+        it "should get all discussions", ->
+          testSelectionRequest(
+            (params) -> expect(params.url.path()).toEqual(DiscussionUtil.urlFor("threads")),
+            "All"
+          )
+
+        it "should get flagged threads", ->
+          testSelectionRequest(
+            (params) ->
+              expect(params.url.path()).toEqual(DiscussionUtil.urlFor("search"))
+              expect(params.data.flagged).toEqual(true)
+            ,
+            "Flagged"
+          )
+
+        it "should get followed threads", ->
+          testSelectionRequest(
+            (params) ->
+              expect(params.url.path()).toEqual(
+                DiscussionUtil.urlFor("followed_threads", window.user.id)
+              )
+            ,
+            "Following"
+          )
+
+        it "should get threads for the selected leaf", ->
+          testSelectionRequest(
+            (params) ->
+              expect(params.url.path()).toEqual(DiscussionUtil.urlFor("search"))
+              expect(params.data.commentable_ids).toEqual("child")
+            ,
+            "Child"
+          )
+
+        it "should get threads for children of the selected intermediate node", ->
+          testSelectionRequest(
+            (params) ->
+              expect(params.url.path()).toEqual(DiscussionUtil.urlFor("search"))
+              expect(params.data.commentable_ids).toEqual("child,sibling")
+            ,
+            "Parent"
+          )
diff --git a/common/static/coffee/src/discussion/utils.coffee b/common/static/coffee/src/discussion/utils.coffee
index 09ab0a9343..0835534d0b 100644
--- a/common/static/coffee/src/discussion/utils.coffee
+++ b/common/static/coffee/src/discussion/utils.coffee
@@ -93,6 +93,10 @@ class @DiscussionUtil
       "notifications_status" : "/notification_prefs/status/"
     }[name]
 
+  @ignoreEnterKey: (event) =>
+    if event.which == 13
+      event.preventDefault()
+
   @activateOnSpace: (event, func) ->
     if event.which == 32
       event.preventDefault()
diff --git a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
index 88f5b99067..96d5cff6d3 100644
--- a/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
+++ b/common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee
@@ -1,18 +1,16 @@
 if Backbone?
   class @DiscussionThreadListView extends Backbone.View
     events:
-      "click .search": "showSearch"
-      "click .home": "goHome"
-      "click .browse": "toggleTopicDrop"
-      "keydown .post-search-field": "performSearch"
-      "focus .post-search-field": "showSearch"
+      "click .forum-nav-browse": "toggleBrowseMenu"
+      "keypress .forum-nav-browse-filter-input": (event) => DiscussionUtil.ignoreEnterKey(event)
+      "keyup .forum-nav-browse-filter-input": "filterTopics"
+      "click .forum-nav-browse-menu-wrapper": "ignoreClick"
+      "click .forum-nav-browse-title": "selectTopic"
+      "keydown .forum-nav-search-input": "performSearch"
       "change .forum-nav-sort-control": "sortThreads"
-      "click .browse-topic-drop-menu": "filterTopic"
-      "click .browse-topic-drop-search-input": "ignoreClick"
       "click .forum-nav-thread-link": "threadSelected"
       "click .forum-nav-load-more-link": "loadMorePages"
       "change .forum-nav-filter-cohort-control": "chooseCohort"
-      'keyup .browse-topic-drop-search-input': DiscussionFilter.filterDrop
 
     initialize: ->
       @displayedCollection = new Discussion(@collection.models, pages: @collection.pages)
@@ -77,8 +75,8 @@ if Backbone?
     #TODO fix this entire chain of events
     addAndSelectThread: (thread) =>
       commentable_id = thread.get("commentable_id")
-      commentable = @$(".board-name[data-discussion_id]").filter(-> $(this).data("discussion_id").id == commentable_id)
-      @setTopicHack(commentable)
+      menuItem = @$(".forum-nav-browse-menu-item[data-discussion-id]").filter(-> $(this).data("discussion-id").id == commentable_id)
+      @setCurrentTopicDisplay(@getPathText(menuItem))
       @retrieveDiscussion commentable_id, =>
         @trigger "thread:created", thread.get('id')
 
@@ -97,9 +95,6 @@ if Backbone?
       else
         sidebar.css('top', '0');
 
-      sidebarWidth = .31 * $(".discussion-body").width();
-      sidebar.css('width', sidebarWidth + 'px');
-
       sidebarHeight = windowHeight - Math.max(discussionsBodyTop - scrollTop, @sidebar_padding)
 
       topOffset = scrollTop + windowHeight
@@ -110,14 +105,15 @@ if Backbone?
       sidebarHeight = Math.min(sidebarHeight + 1, discussionBody.outerHeight())
       sidebar.css 'height', sidebarHeight
 
-      browseSearchHeight = @$(".browse-search").outerHeight()
+      headerHeight = @$(".forum-nav-header").outerHeight()
       refineBarHeight = @$(".forum-nav-refine-bar").outerHeight()
-      @$('.forum-nav-thread-list').css('height', (sidebarHeight - browseSearchHeight - refineBarHeight - 2) + 'px')
+      @$('.forum-nav-thread-list').css('height', (sidebarHeight - headerHeight - refineBarHeight - 2) + 'px')
+      @$('.forum-nav-browse-menu-wrapper').css('height', (sidebarHeight - headerHeight - 2) + 'px')
 
 
     # Because we want the behavior that when the body is clicked the menu is
-    # closed, we need to ignore clicks in the search field and stop propagation.
-    # Without this, clicking the search field would also close the menu.
+    # closed, we need to stop propagation of a click in any part of the menu
+    # that is not a link.
     ignoreClick: (event) ->
         event.stopPropagation()
 
@@ -243,14 +239,6 @@ if Backbone?
       @$(".forum-nav-thread[data-id!='#{thread_id}'] .forum-nav-thread-link").removeClass("is-active")
       @$(".forum-nav-thread[data-id='#{thread_id}'] .forum-nav-thread-link").addClass("is-active")
 
-    showSearch: ->
-      @$(".browse").removeClass('is-dropped')
-      @hideTopicDrop()
-
-      @$(".search").addClass('is-open')
-      @$(".browse").removeClass('is-open')
-      setTimeout (-> @$(".post-search-field").focus()), 200 unless @$(".post-search-field").is(":focus")
-
     goHome: ->
       @template = _.template($("#discussion-home").html())
       $(".discussion-column").html(@template)
@@ -269,51 +257,64 @@ if Backbone?
       @trigger("thread:removed")  
       #select all threads
 
+    isBrowseMenuVisible: =>
+      @$(".forum-nav-browse-menu-wrapper").is(":visible")
 
-    toggleTopicDrop: (event) =>
+    showBrowseMenu: =>
+      if not @isBrowseMenuVisible()
+        @$(".forum-nav-browse").addClass("is-active")
+        @$(".forum-nav-browse-menu-wrapper").show()
+        @$(".forum-nav-thread-list-wrapper").hide()
+        $(".forum-nav-browse-filter-input").focus()
+        $("body").bind "click", @hideBrowseMenu
+
+    hideBrowseMenu: =>
+      if @isBrowseMenuVisible()
+        @$(".forum-nav-browse").removeClass("is-active")
+        @$(".forum-nav-browse-menu-wrapper").hide()
+        @$(".forum-nav-thread-list-wrapper").show()
+        $("body").unbind "click", @hideBrowseMenu
+
+    toggleBrowseMenu: (event) =>
       event.preventDefault()
       event.stopPropagation()
-      if @current_search != ""
-        @clearSearch()
-      @$(".search").removeClass('is-open')
-      @$(".browse").addClass('is-open')
-      @$(".browse").toggleClass('is-dropped')
 
-      if @$(".browse").hasClass('is-dropped')
-        @$(".browse-topic-drop-menu-wrapper").show()
-        $(".browse-topic-drop-search-input").focus()
-        $("body").bind "click", @toggleTopicDrop
-        $("body").bind "keydown", @setActiveItem
+      if @isBrowseMenuVisible()
+        @hideBrowseMenu()
       else
-        @hideTopicDrop()
+        @showBrowseMenu()
 
-    hideTopicDrop: ->
-      @$(".browse-topic-drop-menu-wrapper").hide()
-      $("body").unbind "click", @toggleTopicDrop
-      $("body").unbind "keydown", @setActiveItem
+    # Given a menu item, get the text for it and its ancestors
+    # (starting from the root, separated by " / ")
+    getPathText: (item) ->
+      path = item.parents(".forum-nav-browse-menu-item").andSelf()
+      pathTitles = path.children(".forum-nav-browse-title").map((i, elem) -> $(elem).text()).get()
+      pathText = pathTitles.join(" / ")
 
-    # TODO get rid of this asap
-    setTopicHack: (boardNameContainer) ->
-      item = $(boardNameContainer).closest('a')
-      boardName = item.find(".board-name").html()
-      _.each item.parents('ul').not('.browse-topic-drop-menu'), (parent) ->
-        boardName = $(parent).siblings('a').find('.board-name').html() + ' / ' + boardName
-      @$(".current-board").html(@fitName(boardName))
+    filterTopics: (event) =>
+      query = $(event.target).val()
+      items = @$(".forum-nav-browse-menu-item")
+      if query.length == 0
+        items.show()
+      else
+        # If all filter terms occur in the path to an item then that item and
+        # all its descendants are displayed
+        items.hide()
+        items.each (i, item) =>
+          item = $(item)
+          if not item.is(":visible")
+            pathText = @getPathText(item).toLowerCase()
+            if query.split(" ").every((term) -> pathText.search(term.toLowerCase()) != -1)
+              path = item.parents(".forum-nav-browse-menu-item").andSelf()
+              path.add(item.find(".forum-nav-browse-menu-item")).show()
 
-    setTopic: (event) ->
-      item = $(event.target).closest('a')
-      boardName = item.find(".board-name").html()
-      _.each item.parents('ul').not('.browse-topic-drop-menu'), (parent) ->
-        boardName = $(parent).siblings('a').find('.board-name').html() + ' / ' + boardName
-      @$(".current-board").html(@fitName(boardName))
-
-    setSelectedTopic: (name) ->
-      @$(".current-board").html(@fitName(name))
+    setCurrentTopicDisplay: (text) ->
+      @$(".forum-nav-browse-current").text(@fitName(text))
 
     getNameWidth: (name) ->
       test = $("<div>")
       test.css
-        "font-size": @$(".current-board").css('font-size')
+        "font-size": @$(".forum-nav-browse-current").css('font-size')
         opacity: 0
         position: 'absolute'
         left: -1000
@@ -325,52 +326,55 @@ if Backbone?
       return width
 
     fitName: (name) ->
-      @maxNameWidth = (@$el.width() * .8) - 50
+      @maxNameWidth = @$(".forum-nav-browse").width() -
+        parseInt(@$(".forum-nav-browse").css("padding-left")) -
+        parseInt(@$(".forum-nav-browse").css("padding-right")) -
+        @$(".forum-nav-browse .icon").outerWidth(true) -
+        @$(".forum-nav-browse-drop-arrow").outerWidth(true)
       width = @getNameWidth(name)
       if width < @maxNameWidth
         return name
       path = (x.replace /^\s+|\s+$/g, "" for x in name.split("/"))
+      prefix = ""
       while path.length > 1
+        prefix = gettext("…") + "/"
         path.shift()
-        partialName = gettext("…") + "/" + path.join("/")
+        partialName = prefix + path.join("/")
         if  @getNameWidth(partialName) < @maxNameWidth
           return partialName
       rawName = path[0]
-      name = gettext("…") + "/" + rawName
+      name = prefix + rawName
       while @getNameWidth(name) > @maxNameWidth
         rawName = rawName[0...rawName.length-1]
-        name =  gettext("…") + "/" + rawName + gettext("…")
+        name =  prefix + rawName + gettext("…")
       return name
 
-    filterTopic: (event) ->
-      if @current_search != ""
-        @setTopic(event)
-        @clearSearch @filterTopic, event
+    selectTopic: (event) ->
+      event.preventDefault()
+      @hideBrowseMenu()
+      @clearSearch()
+
+      item = $(event.target).closest('.forum-nav-browse-menu-item')
+      @setCurrentTopicDisplay(@getPathText(item))
+      if item.hasClass("forum-nav-browse-menu-all")
+        @discussionIds = ""
+        @$('.forum-nav-filter-cohort').show()
+        @retrieveAllThreads()
+      else if item.hasClass("forum-nav-browse-menu-flagged")
+        @discussionIds = ""
+        @$('.forum-nav-filter-cohort').hide()
+        @retrieveFlaggedThreads() 
+      else if item.hasClass("forum-nav-browse-menu-following")
+        @retrieveFollowed()
+        @$('.forum-nav-filter-cohort').hide()
       else
-        @setTopic(event)  # just sets the title for the dropdown
-        item = $(event.target).closest('li')
-        discussionId = item.find("span.board-name").data("discussion_id")
-        if discussionId == "#all"
-          @discussionIds = ""
-          @$(".post-search-field").val("")
-          @$('.forum-nav-filter-cohort').show()
-          @retrieveAllThreads()
-        else if discussionId == "#flagged"
-          @discussionIds = ""
-          @$(".post-search-field").val("")
-          @$('.forum-nav-filter-cohort').hide()
-          @retrieveFlaggedThreads() 
-        else if discussionId == "#following"
-          @retrieveFollowed(event)
-          @$('.forum-nav-filter-cohort').hide()
-        else
-          discussionIds = _.map item.find(".board-name[data-discussion_id]"), (board) -> $(board).data("discussion_id").id
-          
-          if $(event.target).attr('cohorted') == "True"
-            @retrieveDiscussions(discussionIds, "function(){$('.forum-nav-filter-cohort').show();}")
-          else
-            @retrieveDiscussions(discussionIds, "function(){$('.forum-nav-filter-cohort').hide();}")
-    
+        allItems = item.find(".forum-nav-browse-menu-item").andSelf()
+        discussionIds = allItems.filter("[data-discussion-id]").map(
+          (i, elem) -> $(elem).data("discussion-id").id
+        ).get()
+        @retrieveDiscussions(discussionIds)
+        @$(".forum-nav-filter-cohort").toggle(item.data('cohorted') == true)
+
     chooseCohort: (event) ->
       @group_id = @$('.forum-nav-filter-cohort-control :selected').val()
       @collection.current_page = 0
@@ -420,10 +424,12 @@ if Backbone?
     performSearch: (event) ->
       if event.which == 13
         event.preventDefault()
-        text = @$(".post-search-field").val()
+        @hideBrowseMenu()
+        @setCurrentTopicDisplay(gettext("Search Results"))
+        text = @$(".forum-nav-search-input").val()
         @searchFor(text)
 
-    searchFor: (text, callback, value) ->
+    searchFor: (text) ->
       @clearSearchAlerts()
       @mode = 'search'
       @current_search = text
@@ -432,7 +438,7 @@ if Backbone?
       # Mainly because this currently does not reset any pagination variables which could cause problems.
       # This doesn't use pagination either.
       DiscussionUtil.safeAjax
-        $elem: @$(".post-search-field")
+        $elem: @$(".forum-nav-search-input")
         data: { text: text }
         url: url
         type: "GET"
@@ -441,8 +447,7 @@ if Backbone?
         loadingCallback: =>
           @$(".forum-nav-thread-list").html("<li class='forum-nav-load-more'>" + @getLoadingContent(gettext("Loading thread list")) + "</li>")
         loadedCallback: =>
-          if callback
-            callback.apply @, [value]
+          @$(".forum-nav-thread-list .forum-nav-load-more").remove()
         success: (response, textStatus) =>
           if textStatus == 'success'
             # TODO: Augment existing collection?
@@ -488,40 +493,13 @@ if Backbone?
             )
             @addSearchAlert(message)
 
-    clearSearch: (callback, value) ->
-      @$(".post-search-field").val("")
-      @searchFor("", callback, value)
+    clearSearch: ->
+      @$(".forum-nav-search-input").val("")
+      @current_search = ""
 
-    setActiveItem: (event) ->
-      if event.which == 13
-        $(".browse-topic-drop-menu-wrapper .focused").click()
-        return
-      if event.which != 40 && event.which != 38
-        return
-
-      event.preventDefault()
-
-      items = $.makeArray($(".browse-topic-drop-menu-wrapper a").not(".hidden"))
-      index = items.indexOf($('.browse-topic-drop-menu-wrapper .focused')[0])
-
-      if event.which == 40
-          index = Math.min(index + 1, items.length - 1)
-      if event.which == 38
-          index = Math.max(index - 1, 0)
-
-      $(".browse-topic-drop-menu-wrapper .focused").removeClass("focused")
-      $(items[index]).addClass("focused")
-
-      itemTop = $(items[index]).parent().offset().top
-      scrollTop = $(".browse-topic-drop-menu").scrollTop()
-      itemFromTop = $(".browse-topic-drop-menu").offset().top - itemTop
-      scrollTarget = Math.min(scrollTop - itemFromTop, scrollTop)
-      scrollTarget = Math.max(scrollTop - itemFromTop - $(".browse-topic-drop-menu").height() + $(items[index]).height(), scrollTarget)
-      $(".browse-topic-drop-menu").scrollTop(scrollTarget)
-
-    retrieveFollowed: (event)=>
+    retrieveFollowed: () =>
       @mode = 'followed'
-      @retrieveFirstPage(event)
+      @retrieveFirstPage()
 
     updateEmailNotifications: () =>
       if $('input.email-setting').attr('checked')
diff --git a/common/test/acceptance/pages/lms/discussion.py b/common/test/acceptance/pages/lms/discussion.py
index cd812a1dbd..6bcb96053d 100644
--- a/common/test/acceptance/pages/lms/discussion.py
+++ b/common/test/acceptance/pages/lms/discussion.py
@@ -353,12 +353,7 @@ class DiscussionTabHomePage(CoursePage, DiscussionPageMixin):
         return self.q(css=".discussion-body section.home-header").present
 
     def perform_search(self, text="dummy"):
-        self.q(css=".discussion-body .sidebar .search").first.click()
-        EmptyPromise(
-            lambda: self.q(css=".discussion-body .sidebar .search.is-open").present,
-            "waiting for search input to be available"
-        ).fulfill()
-        self.q(css="#search-discussions").fill(text + chr(10))
+        self.q(css=".forum-nav-search-input").fill(text + chr(10))
         EmptyPromise(
             self.is_ajax_finished,
             "waiting for server to return result"
diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss
index 0be8886ac2..8b90dbf209 100644
--- a/lms/static/sass/discussion/_discussion.scss
+++ b/lms/static/sass/discussion/_discussion.scss
@@ -595,299 +595,6 @@ body.discussion {
   box-shadow: none;
   line-height: 1.4;
 
-  .sidebar {
-    @include box-sizing(border-box);
-    float: left;
-    border: 1px solid #aaa;
-    border-right: 1px solid #bcbcbc;
-    border-radius: 3px;
-    width: 31%;
-    height: 550px;
-    background: #f6f6f6;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-  }
-
-  .browse-search {
-    position: relative;
-    display: block;
-    border-bottom: 1px solid #a3a3a3;
-    border-radius: 3px 0 0 0;
-    height: 60px;
-
-
-    .home, .browse,
-    .search {
-      @include linear-gradient(top, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
-      @include transition(all .2s ease-out);
-      position: relative;
-      float: left;
-      width: 20%;
-      height: 100%;
-      background-color: #dedede;
-
-      &:hover, &:focus {
-        background-color: $white;
-      }
-    }
-
-    .icon {
-      @include transition(all .2s ease-out);
-      z-index: 100;
-      display: inline-block;
-      width: 100%;
-      color: #aeaeae;
-      text-align: center;
-      font-size: 28px;
-      line-height: 60px;
-      opacity: 1;
-    }
-
-    .home {
-      border-radius: 3px 0 0 0;
-      box-shadow: -1px 0 0 #aaa inset;
-      cursor: pointer;
-    }
-
-    .home-icon {
-      width: 100%;
-      height: 100%;
-      display: block;
-    }
-
-    .browse {
-      border-radius: 3px 0 0 0;
-      box-shadow: -1px 0 0 #aaa inset;
-
-      &.is-open {
-        width:60%;
-        .browse-topic-drop-btn {
-          visibility: visible;
-        }
-
-        .browse-topic-drop-icon {
-          visibility: hidden;
-        }
-
-        &.is-dropped {
-          .browse-topic-drop-btn {
-
-            span {
-              color: $white;
-              text-shadow: none;
-            }
-
-            border-color: #4b4b4b;
-          }
-        }
-      }
-
-      &.is-dropped {
-        .browse-topic-drop-btn {
-          background-color: #616161;
-        }
-      }
-    }
-
-    .search {
-      cursor: pointer;
-      border-radius: 0 3px 0 0;
-
-      &.is-open {
-        cursor: auto;
-        width: 60%;
-
-        .home {
-          width:0%;
-        }
-
-        .post-search {
-          padding: 0 $baseline/2;
-          max-width: 1000px;
-        }
-
-        .post-search-field {
-          cursor: text;
-          pointer-events: auto;
-
-          &::-webkit-input-placeholder,
-          &:-moz-placeholder,
-          &:-ms-input-placeholder {
-            opacity: 1.0;
-          }
-        }
-      }
-    }
-
-    .browse-topic-drop-btn {
-      @include transition(none);
-      position: absolute;
-      top: -1px;
-      left: -1px;
-      display: block;
-      visibility: hidden;
-      overflow: hidden;
-      width: 100%;
-      height: 100%;
-      border: 1px solid transparent;
-      text-align: center;
-
-      span {
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 58px;
-        color: #333;
-        text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-      }
-
-      .drop-arrow {
-        font-size: 16px;
-      }
-    }
-
-    .browse-topic-drop-icon {
-      display: block;
-      visibility: visible;
-      @include transition(none);
-    }
-
-    .browse-topic-drop-menu-wrapper {
-      display: none;
-      position: absolute;
-      top: 60px;
-      left: -1px;
-      z-index: 9999;
-      width: 100%;
-      background: #797979;
-      border: 1px solid #4b4b4b;
-      border-left: none;
-      border-radius: 0 0 3px 3px;
-      box-shadow: 1px 0 0 #4b4b4b inset;
-
-      .browse-topic-drop-menu {
-        max-height: 400px;
-        overflow-y: scroll;
-      }
-
-
-      ul {
-        position: inline;
-      }
-
-      > li:first-child a {
-        border-top: none;
-      }
-
-      a {
-        display: block;
-        padding: 0 $baseline;
-        border-top: 1px solid #5f5f5f;
-        font-size: 12px;
-        font-weight: 700;
-        line-height: 22px;
-        color: $white;
-        @include clearfix;
-        @include transition(none);
-
-        &.hidden {
-          display: none;
-        }
-
-        &:hover, &:focus {
-          background-color: #636363;
-        }
-
-        .board-name {
-          float: left;
-          width: 80%;
-          margin: 13px 0;
-          color: $white;
-        }
-
-        .unread {
-          float: right;
-          padding: 0 5px;
-          margin-top: 13px;
-          font-size: 11px;
-          line-height: 22px;
-          border-radius: 2px;
-          @include linear-gradient(top, #4c4c4c, #5a5a5a);
-        }
-      }
-
-      li li {
-        a {
-          padding-left: 44px;
-          background: url(../images/nested-icon.png) no-repeat 22px 14px;
-        }
-      }
-
-      li li li {
-        a {
-          padding-left: 68px;
-          background: url(../images/nested-icon.png) no-repeat 46px 14px;
-        }
-      }
-    }
-
-    .browse-topic-drop-search {
-      padding: $baseline/2;
-    }
-
-    .browse-topic-drop-search-input {
-      width: 100%;
-      height: 30px;
-      padding: 0 15px;
-      @include box-sizing(border-box);
-      border-radius: 30px;
-      border: 1px solid #333;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .25) inset;
-      background: -webkit-linear-gradient(top, #eee, $white);
-      font-size: 11px;
-      line-height: 16px;
-      color: #333;
-    }
-
-    .post-search {
-      width: 100%;
-      max-width: 30px;
-      margin: auto;
-      @include box-sizing(border-box);
-      @include transition(all .2s linear 0s);
-    }
-
-    .post-search-field {
-      display: block;
-      width: 100%;
-      height: 30px;
-      padding: 0 0 0 30px;
-      margin: 14px auto;
-      @include box-sizing(border-box);
-      border: 1px solid #acacac;
-      border-radius: 30px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 0 1px 0 rgba(255, 255, 255, .5);
-      background: url(../images/search-icon.png) no-repeat 7px center #fff;
-      font-family: 'Open Sans', sans-serif;
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 20px;
-      color: #333;
-      cursor: pointer;
-      pointer-events: none;
-      @include transition(all .2s ease-out 0s);
-
-      &::-webkit-input-placeholder,
-      &:-moz-placeholder,
-      &:-ms-input-placeholder {
-        opacity: 0.0;
-        @include transition(opacity .2s linear 0s);
-      }
-
-      &:focus {
-        border-color: #4697c1;
-      }
-    }
-  }
-
   .bottom-post-status {
     padding: 30px;
     font-size: 20px;
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index 2a1a26df84..323e2d0337 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -1,3 +1,96 @@
+.forum-nav {
+  @include box-sizing(border-box);
+  float: left;
+  border: 1px solid #aaa;
+  border-radius: 3px;
+}
+
+// ------
+// Header
+// ------
+.forum-nav-header {
+  @include box-sizing(border-box);
+  display: table;
+  border-bottom: 1px solid $gray-l2;
+  background-color: $gray-l3;
+}
+
+.forum-nav-browse {
+  @include box-sizing(border-box);
+  display: table-cell;
+  vertical-align: middle;
+  width: 50%;
+  padding: ($baseline/4);
+
+  &:hover, &:focus, &.is-active {
+    background-color: $gray-l5;
+  }
+
+  .icon {
+    margin-right: ($baseline/4);
+  }
+}
+
+.forum-nav-browse-current {
+  @include font-size(12);
+}
+
+.forum-nav-browse-drop-arrow {
+  margin-left: ($baseline/4);
+}
+
+.forum-nav-search {
+  @include box-sizing(border-box);
+  display: table-cell;
+  position: relative;
+  vertical-align: middle;
+  width: 50%;
+  padding: ($baseline/4);
+}
+
+.forum-nav-search .icon {
+  @include font-size(12);
+  position: absolute;
+  margin-top: -6px;
+  top: 50%;
+  right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
+}
+
+.forum-nav-search-input {
+  width: 100%;
+}
+
+// -----------
+// Browse menu
+// -----------
+.forum-nav-browse-menu-wrapper {
+  overflow-y: scroll;
+  border-bottom: 1px solid $gray-l3;
+  background: $gray-l5;
+}
+
+.forum-nav-browse-filter {
+  position: relative;
+  border-bottom: 1px solid $gray-l2;
+  padding: ($baseline/4);
+}
+
+.forum-nav-browse-filter .icon {
+  @include font-size(12);
+  position: absolute;
+  margin-top: -6px;
+  top: 50%;
+  right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
+}
+
+.forum-nav-browse-filter-input {
+  width: 100%;
+}
+
+.forum-nav-browse-title .icon {
+  margin-right: ($baseline/2);
+}
+
 // -------------------
 // Sort and filter bar
 // -------------------
diff --git a/lms/static/sass/discussion/utilities/_shame.scss b/lms/static/sass/discussion/utilities/_shame.scss
index 0f069889fa..e45977183b 100644
--- a/lms/static/sass/discussion/utilities/_shame.scss
+++ b/lms/static/sass/discussion/utilities/_shame.scss
@@ -1,3 +1,85 @@
+// -------------------
+// navigation - header
+// -------------------
+
+// Override global a rules
+.forum-nav-browse {
+  color: $black !important;
+}
+
+// Override global label rules
+.forum-nav-search label {
+  margin-bottom: 0;
+}
+
+// Override global input rules
+.forum-nav-search-input {
+  box-shadow: none !important;
+  border: 1px solid $gray-l2 !important;
+  border-radius: 3px !important;
+  height: auto !important;
+  padding-left: ($baseline/4) !important;
+  padding-right: ($baseline/2 + 12px) !important; // Leave room for icon
+  font-size: 12px !important;
+}
+
+// Firefox does not compute the correct containing box for absolute positioning
+// of .forum-nav-search .icon, so there's an extra div to make it happy
+.forum-nav-search-ff-position-fix {
+  position: relative;
+}
+
+// The sidebar class does a lot of things that we don't want in the thread list;
+// the following rules contain styling that is necessary and would otherwise
+// reside in elements/_navigation.scss if the sidebar styling did not make the
+// !important directive necessary.
+
+.forum-nav {
+  width: 31% !important;
+}
+
+// ------------------------
+// navigation - browse menu
+// ------------------------
+
+// Override global a rules
+.forum-nav-browse-title {
+  color: inherit !important;
+}
+
+// Override global label rules
+.forum-nav-browse-filter label {
+  margin-bottom: 0;
+}
+
+// Override global input rules
+.forum-nav-browse-filter-input {
+  box-shadow: none !important;
+  border-radius: 3px !important;
+  height: auto !important;
+  padding-left: ($baseline/4) !important;
+  padding-right: ($baseline/2 + 12px) !important; // Leave room for icon
+  font-size: 12px !important;
+}
+
+// The sidebar class does a lot of things that we don't want in the thread list;
+// the following rules contain styling that is necessary and would otherwise
+// reside in elements/_navigation.scss if the sidebar styling did not make the
+// !important directive necessary.
+
+.forum-nav-browse-title {
+  border-bottom: 1px solid $gray-l3 !important;
+  padding: ($baseline/2) ($baseline/2) !important;
+
+  &:hover, &:focus {
+    background: $forum-color-active-thread !important;
+  }
+}
+
+.forum-nav-browse-submenu {
+  padding-left: $baseline !important;
+}
+
 // --------------------------------
 // navigation - sort and filter bar
 // --------------------------------
diff --git a/lms/templates/discussion/_filter_dropdown.html b/lms/templates/discussion/_filter_dropdown.html
index 4a44f2cd5a..7fb3cbfa8f 100644
--- a/lms/templates/discussion/_filter_dropdown.html
+++ b/lms/templates/discussion/_filter_dropdown.html
@@ -12,41 +12,43 @@
 </%def>
 
 <%def name="render_entry(entries, entry)">
-    <li><a href="#" class="drop-menu-entry"><span class="board-name" data-discussion_id='${json.dumps(entries[entry])}' cohorted = "${str(entries[entry]['is_cohorted']).lower()}">${entry}</span></a></li>
+    <li
+        class="forum-nav-browse-menu-item"
+        data-discussion-id='${json.dumps(entries[entry])}'
+        data-cohorted="${str(entries[entry]['is_cohorted']).lower()}"
+    >
+        <a href="#" class="forum-nav-browse-title">${entry}</a>
+    </li>
 </%def>
 
 <%def name="render_category(categories, category)">
-    <li>
-        <a href="#" class="drop-menu-parent-category"><span class="board-name">${category}</span></a>
-        <ul>
+    <li class="forum-nav-browse-menu-item">
+        <a href="#" class="forum-nav-browse-title">${category}</a>
+        <ul class="forum-nav-browse-submenu">
             ${render_dropdown(categories[category])}
         </ul>
     </li>
 </%def>
 
-<div class="browse-topic-drop-menu-wrapper">
-    <div class="browse-topic-drop-search">
-        <label class="sr" for="browse-topic">${_("Filter Topics")}</label>
-        <input type="text" id="browse-topic" class="browse-topic-drop-search-input" placeholder="${_('filter topics')}">
-    </div>
-    <ul class="browse-topic-drop-menu">
-        <li>
-            <a href="#" class="drop-menu-meta-category">
-                <span class="board-name" data-discussion_id='#all'>${_("Show All Discussions")}</span>
-            </a>
+<div class="forum-nav-browse-menu-wrapper" style="display: none">
+    <form class="forum-nav-browse-filter">
+        <label>
+            <span class="sr">${_("Filter Topics")}</span>
+            <input type="text" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
+            <i class="icon icon-filter"></i>
+        </label>
+    </form>
+    <ul class="forum-nav-browse-menu">
+        <li class="forum-nav-browse-menu-item forum-nav-browse-menu-all">
+            <a href="#" class="forum-nav-browse-title">${_("All Discussions")}</a>
         </li>
         %if flag_moderator:
-        <li>
-            <a href="#">
-                <span class="board-name" data-discussion_id='#flagged'><i class="icon-flag" style="padding-right:5px;"></i>${_("Show Flagged Discussions")}</span>
-            </a>
+        <li class="forum-nav-browse-menu-item forum-nav-browse-menu-flagged">
+            <a href="#" class="forum-nav-browse-title"><i class="icon icon-flag"></i>${_("Flagged Discussions")}</a>
         </li>
-        
         %endif
-        <li>
-            <a href="#" class="drop-menu-meta-category">
-                <span class="board-name" data-discussion_id='#following'><i class="icon-star" style="padding-right:5px;"></i>${_("Posts I'm Following")}</span>
-            </a>
+        <li class="forum-nav-browse-menu-item forum-nav-browse-menu-following">
+            <a href="#" class="forum-nav-browse-title"><i class="icon icon-star"></i>${_("Posts I'm Following")}</a>
         </li>
         ${render_dropdown(category_map)}
     </ul>
diff --git a/lms/templates/discussion/_thread_list_template.html b/lms/templates/discussion/_thread_list_template.html
index e1c95c8197..2dac6167e8 100644
--- a/lms/templates/discussion/_thread_list_template.html
+++ b/lms/templates/discussion/_thread_list_template.html
@@ -1,53 +1,48 @@
 <%! from django.utils.translation import ugettext as _ %>
 <script type="text/template" id="thread-list-template">
-    <div class="browse-search">
-        <div class="home">
-            <a href="#" class="home-icon">
-                <i class="icon icon-home"></i>
-                <span class="sr">${_("Discussion Home")}</span>
-            </a>
-        </div>
-        <div class="browse is-open">
-            <a href="#" class="browse-topic-drop-icon">
-                <i class="icon icon-reorder"></i>
-                <span class="sr">${_("Discussion Topics")}</span>
-            </a>
-            <a href="#" class="browse-topic-drop-btn" aria-haspopup="true" aria-owns="browse-topic-drop-menu">
-                <span class="sr">${_("Discussion topics; current selection is: ")}</span>
-                <span class="current-board">${_("Show All Discussions")}</span>
-                <span class="drop-arrow" aria-hidden="true">▾</span>
-            </a>
-        </div>
-        <%include file="_filter_dropdown.html" />
-        <div class="search">
-            <form class="post-search">
-                <label class="sr" for="search-discussions">${_("Search")}</label>
-                <input type="text" id="search-discussions" placeholder="${_("Search all discussions")}" class="post-search-field">
-            </form>
-        </div>
+    <div class="forum-nav-header">
+        <a href="#" class="forum-nav-browse" aria-haspopup="true">
+            ## There is no whitespace between these because the front-end JS code
+            ## needs to precisely compute the available width for forum-nav-
+            ## browse-current in order to do truncation of topic names.
+            <i class="icon icon-reorder"></i><span class="sr">${_("Discussion topics; current selection is: ")}</span><span class="forum-nav-browse-current">${_("All Discussions")}</span><span class="forum-nav-browse-drop-arrow">▾</span>
+        </a>
+        <form class="forum-nav-search">
+            <div class="forum-nav-search-ff-position-fix">
+                <label>
+                    <span class="sr">${_("Search")}</span>
+                    <input class="forum-nav-search-input" type="text" placeholder="${_("Search all posts")}">
+                    <i class="icon icon-search"></i>
+                </label>
+            </div>
+        </form>
     </div>
-    <div class="forum-nav-refine-bar">
-        %if is_course_cohorted and is_moderator:
-        <span class="forum-nav-filter-cohort">
-            <select class="forum-nav-filter-cohort-control">
-                <option value="all">${_("View all cohorts")}</option>
-                    %for c in cohorts:
-                        <option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
-                    %endfor
-            </select>
-        %endif
+    <%include file="_filter_dropdown.html" />
+    <div class="forum-nav-thread-list-wrapper">
+        <div class="forum-nav-refine-bar">
+            %if is_course_cohorted and is_moderator:
+            <span class="forum-nav-filter-cohort">
+                <select class="forum-nav-filter-cohort-control">
+                    <option value="all">${_("View all cohorts")}</option>
+                        %for c in cohorts:
+                            <option value="${c['id']}">${_("View as {cohort_name}").format(cohort_name=c['name'])}</option>
+                        %endfor
+                </select>
+            </span>
+            %endif
 
-        <span class="forum-nav-sort">
-            <select class="forum-nav-sort-control">
-                ## Translators: This is a menu option for sorting forum threads
-                <option value="date">${_("by recent activity")}</option>
-                ## Translators: This is a menu option for sorting forum threads
-                <option value="comments">${_("by most activity")}</option>
-                ## Translators: This is a menu option for sorting forum threads
-                <option value="votes">${_("by most votes")}</option>
-            </select>
-        </span>
+            <span class="forum-nav-sort">
+                <select class="forum-nav-sort-control">
+                    ## Translators: This is a menu option for sorting forum threads
+                    <option value="date">${_("by recent activity")}</option>
+                    ## Translators: This is a menu option for sorting forum threads
+                    <option value="comments">${_("by most activity")}</option>
+                    ## Translators: This is a menu option for sorting forum threads
+                    <option value="votes">${_("by most votes")}</option>
+                </select>
+            </span>
+        </div>
+        <div class="search-alerts"></div>
+        <ul class="forum-nav-thread-list"></ul>
     </div>
-    <div class="search-alerts"></div>
-    <ul class="forum-nav-thread-list"></ul>
 </script>
diff --git a/lms/templates/discussion/index.html b/lms/templates/discussion/index.html
index 12be8542e3..6ffaf6a842 100644
--- a/lms/templates/discussion/index.html
+++ b/lms/templates/discussion/index.html
@@ -37,7 +37,7 @@
          data-user-cohort-id="${user_cohort}"
          data-course-settings="${course_settings}">
     <div class="discussion-body">
-        <div class="sidebar"></div>
+        <div class="sidebar forum-nav"></div>
         <div class="discussion-column">
         </div>
     </div>