diff --git a/common/static/common/js/discussion/views/discussion_inline_view.js b/common/static/common/js/discussion/views/discussion_inline_view.js index f897edfac2..5332d75868 100644 --- a/common/static/common/js/discussion/views/discussion_inline_view.js +++ b/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() { diff --git a/common/static/common/templates/discussion/inline-discussion.underscore b/common/static/common/templates/discussion/inline-discussion.underscore index 45dae2d95d..97162b6451 100644 --- a/common/static/common/templates/discussion/inline-discussion.underscore +++ b/common/static/common/templates/discussion/inline-discussion.underscore @@ -5,6 +5,17 @@ - + + + + + + + <%- gettext('All Posts') %> + + + + + diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index b0584ec67d..13a120096b 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/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; diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index d38076d1af..2fcf7331e4 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/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); diff --git a/lms/static/sass/discussion/inline-discussion-rtl.scss b/lms/static/sass/discussion/inline-discussion-rtl.scss index c8b887ab0b..55cf452543 100644 --- a/lms/static/sass/discussion/inline-discussion-rtl.scss +++ b/lms/static/sass/discussion/inline-discussion-rtl.scss @@ -9,3 +9,4 @@ // app - discussion @import 'build-discussion'; +@import 'views/inline'; diff --git a/lms/static/sass/discussion/inline-discussion.scss b/lms/static/sass/discussion/inline-discussion.scss index a8f048d9d7..38a048250a 100644 --- a/lms/static/sass/discussion/inline-discussion.scss +++ b/lms/static/sass/discussion/inline-discussion.scss @@ -9,3 +9,4 @@ // app - discussion @import 'build-discussion'; +@import 'views/inline'; diff --git a/lms/static/sass/discussion/utilities/_variables-v1.scss b/lms/static/sass/discussion/utilities/_variables-v1.scss index 0e57bb85a1..13b89db4fc 100644 --- a/lms/static/sass/discussion/utilities/_variables-v1.scss +++ b/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 diff --git a/lms/static/sass/discussion/utilities/_variables-v2.scss b/lms/static/sass/discussion/utilities/_variables-v2.scss index 6dfdb0b900..07420b80f0 100644 --- a/lms/static/sass/discussion/utilities/_variables-v2.scss +++ b/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 diff --git a/lms/static/sass/discussion/views/_inline.scss b/lms/static/sass/discussion/views/_inline.scss new file mode 100644 index 0000000000..7218d7e8f5 --- /dev/null +++ b/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; + } + } +}