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] 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>