Implement inline discussion drill-down to see post

common/static/common/js/discussion/views/discussion_inline_view.js

@@ -1,7 +1,7 @@
 /* globals
-    _, Backbone, Content, Discussion, DiscussionUtil, DiscussionUser, DiscussionCourseSettings,
-    DiscussionThreadListView, NewPostView
-*/
+ _, Backbone, Content, Discussion, DiscussionUtil, DiscussionUser, DiscussionCourseSettings,
+ DiscussionThreadListView, DiscussionThreadView, NewPostView
+ */
 
 (function() {
     'use strict';
@@ -13,6 +13,7 @@
                 return DiscussionUtil.activateOnSpace(event, this.toggleDiscussion);
             },
             'click .new-post-btn': 'toggleNewPost',
+            'click .all-posts-btn': 'navigateToAllPosts',
             'keydown .new-post-btn': function(event) {
                 return DiscussionUtil.activateOnSpace(event, this.toggleNewPost);
             }
@@ -76,13 +77,15 @@
             }
 
             this.threadListView = new DiscussionThreadListView({
-                el: this.$('section.threads'),
+                el: this.$('.inline-threads'),
                 collection: self.discussion,
                 courseSettings: self.course_settings
             });
 
             this.threadListView.render();
 
+            this.threadListView.on('thread:selected', _.bind(this.navigateToThread, this));
+
             DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info);
 
             this.newPostForm = this.$el.find('.new-post-article');
@@ -106,6 +109,35 @@
             if (this.isWaitingOnNewPost) {
                 this.newPostForm.show().focus();
             }
+
+            // Hide the thread view initially
+            this.$('.inline-thread').addClass('is-hidden');
+        },
+
+        navigateToThread: function(threadId) {
+            var thread = this.discussion.get(threadId);
+            this.threadView = new DiscussionThreadView({
+                el: this.$('.forum-content'),
+                model: thread,
+                mode: 'tab',
+                course_settings: this.course_settings
+            });
+            this.threadView.render();
+            this.threadListView.$el.addClass('is-hidden');
+            this.$('.inline-thread').removeClass('is-hidden');
+        },
+
+        navigateToAllPosts: function() {
+            // Hide the inline thread section
+            this.$('.inline-thread').addClass('is-hidden');
+
+            // Delete the thread view
+            this.threadView.$el.empty().off();
+            this.threadView.stopListening();
+            this.threadView = null;
+
+            // Show the thread list view
+            this.threadListView.$el.removeClass('is-hidden');
         },
 
         toggleDiscussion: function() {

common/static/common/templates/discussion/inline-discussion.underscore

@@ -5,6 +5,17 @@
 
     <article class="new-post-article"></article>
 
-    <section class="threads">
+    <section class="inline-threads">
     </section>
+
+    <div class="inline-thread">
+        <div class="forum-nav-bar">
+            <button class="btn-link all-posts-btn">
+                <span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
+                <span><%- gettext('All Posts') %></span>
+            </button>
+        </div>
+        <div class="forum-content">
+        </div>
+    </div>
 </section>

lms/static/sass/discussion/_discussion.scss

@@ -327,17 +327,6 @@ body.discussion {
     top: -25px;
   }
 
-  .discussion {
-    &.inline-discussion {
-      padding-top: $baseline * 1.5;
-
-      section.threads {
-        border: 1px solid $forum-color-border;
-        border-radius: $forum-border-radius;
-      }
-    }
-  }
-
   div.add-response.post-extended-content {
     margin-top: $baseline;
     margin-bottom: $baseline;

lms/static/sass/discussion/elements/_navigation.scss

@@ -122,6 +122,7 @@
 // -------------------
 // Sort and filter bar
 // -------------------
+
 .forum-nav-refine-bar {
     @include clearfix();
     @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);

lms/static/sass/discussion/inline-discussion-rtl.scss

@@ -9,3 +9,4 @@
 
 // app - discussion
 @import 'build-discussion';
+@import 'views/inline';

lms/static/sass/discussion/inline-discussion.scss

@@ -9,3 +9,4 @@
 
 // app - discussion
 @import 'build-discussion';
+@import 'views/inline';

lms/static/sass/discussion/utilities/_variables-v1.scss

@@ -1,26 +1,30 @@
 // discussion - utilities - variables
 // ====================
 
-// color variables
+// base color variables
+$forum-color-primary: $blue !default;
+
+// contextual color variables
 $forum-color-background: $white;
-$forum-color-active-thread: $blue !default;
+$forum-color-active-thread: $forum-color-primary !default;
 $forum-color-hover: $action-primary-bg !default;
 $forum-color-active-text: $white !default;
 $forum-color-pinned: $pink !default;
 $forum-color-reported: $pink !default;
 $forum-color-closed: $black !default;
-$forum-color-following: $blue !default;
-$forum-color-staff: $blue !default;
+$forum-color-following: $forum-color-primary !default;
+$forum-color-staff: $forum-color-primary !default;
 $forum-color-community-ta: $green-d1 !default;
 $forum-color-marked-answer: $green-d1 !default;
 $forum-color-border: $gray-l3 !default;
 $forum-color-error: $red !default;
 $forum-color-hover-thread: #f6f6f6 !default;
 $forum-color-reading-thread: $gray-d3 !default;
-$forum-color-read-post: $blue !default;
+$forum-color-read-post: $forum-color-primary !default;
 $forum-color-never-read-post: $gray-d3 !default;
 $forum-color-editor-preview-label: $gray-d2 !default;
 $forum-color-response-count: $gray-d2 !default;
+$forum-color-navigation-bar: $forum-color-primary !default;
 
 // post images
 $post-image-dimension: ($baseline*3) !default;  // image size  + margin

lms/static/sass/discussion/utilities/_variables-v2.scss

@@ -1,7 +1,10 @@
 // discussion - utilities - variables
 // ====================
 
-// color variables
+// base color variables
+$forum-color-primary: palette(primary, base) !default;
+
+// contextual color variables
 $forum-color-background: $lms-container-background-color !default;
 $forum-color-active-thread: $lms-active-color !default;
 $forum-color-hover: palette(primary, dark) !default;
@@ -9,18 +12,19 @@ $forum-color-active-text: $lms-container-background-color !default;
 $forum-color-pinned: palette(secondary, dark) !default;
 $forum-color-reported: palette(secondary, dark) !default;
 $forum-color-closed: $black !default;
-$forum-color-following: palette(primary, base) !default;
-$forum-color-staff: palette(primary, base) !default;
+$forum-color-following: $forum-color-primary !default;
+$forum-color-staff: $forum-color-primary !default;
 $forum-color-community-ta: palette(success, text) !default;
 $forum-color-marked-answer: palette(success, text) !default;
 $forum-color-border: palette(grayscale, back) !default;
 $forum-color-error: palette(error, accent) !default;
 $forum-color-hover-thread: palette(grayscale, x-back) !default;
-$forum-color-reading-thread: palette(primary, base) !default;
+$forum-color-reading-thread: $forum-color-primary !default;
 $forum-color-read-post: palette(grayscale, base) !default;
-$forum-color-never-read-post: palette(primary, base) !default;
+$forum-color-never-read-post: $forum-color-primary !default;
 $forum-color-editor-preview-label: palette(grayscale, base) !default;
 $forum-color-response-count: palette(grayscale, base) !default;
+$forum-color-navigation-bar: $forum-color-primary !default;
 
 // post images
 $post-image-dimension: ($baseline*3) !default;  // image size  + margin

lms/static/sass/discussion/views/_inline.scss

@@ -0,0 +1,30 @@
+// forums - inline discussion styling
+// ====================
+
+.inline-discussion {
+    padding-top: $baseline * 1.5;
+
+    .inline-threads {
+        border: 1px solid $forum-color-border;
+        border-radius: $forum-border-radius;
+    }
+
+    .inline-thread {
+        border: 1px solid $forum-color-border;
+        border-radius: $forum-border-radius;
+
+        .forum-nav-bar {
+            background-color: $forum-color-navigation-bar;
+
+            .btn-link {
+                color: $forum-color-active-text;
+            }
+        }
+
+        .forum-content {
+            padding: $baseline / 2;
+            max-height: 500px;
+            overflow-y: auto;
+        }
+    }
+}