Commit a099d600 by Andy Armstrong Committed by Brian Jacobel

Implement inline discussion drill-down to see post

parent c655c5a6
/* globals /* globals
_, Backbone, Content, Discussion, DiscussionUtil, DiscussionUser, DiscussionCourseSettings, _, Backbone, Content, Discussion, DiscussionUtil, DiscussionUser, DiscussionCourseSettings,
DiscussionThreadListView, NewPostView DiscussionThreadListView, DiscussionThreadView, NewPostView
*/ */
(function() { (function() {
'use strict'; 'use strict';
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
return DiscussionUtil.activateOnSpace(event, this.toggleDiscussion); return DiscussionUtil.activateOnSpace(event, this.toggleDiscussion);
}, },
'click .new-post-btn': 'toggleNewPost', 'click .new-post-btn': 'toggleNewPost',
'click .all-posts-btn': 'navigateToAllPosts',
'keydown .new-post-btn': function(event) { 'keydown .new-post-btn': function(event) {
return DiscussionUtil.activateOnSpace(event, this.toggleNewPost); return DiscussionUtil.activateOnSpace(event, this.toggleNewPost);
} }
...@@ -76,13 +77,15 @@ ...@@ -76,13 +77,15 @@
} }
this.threadListView = new DiscussionThreadListView({ this.threadListView = new DiscussionThreadListView({
el: this.$('section.threads'), el: this.$('.inline-threads'),
collection: self.discussion, collection: self.discussion,
courseSettings: self.course_settings courseSettings: self.course_settings
}); });
this.threadListView.render(); this.threadListView.render();
this.threadListView.on('thread:selected', _.bind(this.navigateToThread, this));
DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info); DiscussionUtil.bulkUpdateContentInfo(window.$$annotated_content_info);
this.newPostForm = this.$el.find('.new-post-article'); this.newPostForm = this.$el.find('.new-post-article');
...@@ -106,6 +109,35 @@ ...@@ -106,6 +109,35 @@
if (this.isWaitingOnNewPost) { if (this.isWaitingOnNewPost) {
this.newPostForm.show().focus(); 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() { toggleDiscussion: function() {
......
...@@ -5,6 +5,17 @@ ...@@ -5,6 +5,17 @@
<article class="new-post-article"></article> <article class="new-post-article"></article>
<section class="threads"> <section class="inline-threads">
</section> </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> </section>
...@@ -327,17 +327,6 @@ body.discussion { ...@@ -327,17 +327,6 @@ body.discussion {
top: -25px; 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 { div.add-response.post-extended-content {
margin-top: $baseline; margin-top: $baseline;
margin-bottom: $baseline; margin-bottom: $baseline;
......
...@@ -122,6 +122,7 @@ ...@@ -122,6 +122,7 @@
// ------------------- // -------------------
// Sort and filter bar // Sort and filter bar
// ------------------- // -------------------
.forum-nav-refine-bar { .forum-nav-refine-bar {
@include clearfix(); @include clearfix();
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
......
...@@ -9,3 +9,4 @@ ...@@ -9,3 +9,4 @@
// app - discussion // app - discussion
@import 'build-discussion'; @import 'build-discussion';
@import 'views/inline';
...@@ -9,3 +9,4 @@ ...@@ -9,3 +9,4 @@
// app - discussion // app - discussion
@import 'build-discussion'; @import 'build-discussion';
@import 'views/inline';
// discussion - utilities - variables // discussion - utilities - variables
// ==================== // ====================
// color variables // base color variables
$forum-color-primary: $blue !default;
// contextual color variables
$forum-color-background: $white; $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-hover: $action-primary-bg !default;
$forum-color-active-text: $white !default; $forum-color-active-text: $white !default;
$forum-color-pinned: $pink !default; $forum-color-pinned: $pink !default;
$forum-color-reported: $pink !default; $forum-color-reported: $pink !default;
$forum-color-closed: $black !default; $forum-color-closed: $black !default;
$forum-color-following: $blue !default; $forum-color-following: $forum-color-primary !default;
$forum-color-staff: $blue !default; $forum-color-staff: $forum-color-primary !default;
$forum-color-community-ta: $green-d1 !default; $forum-color-community-ta: $green-d1 !default;
$forum-color-marked-answer: $green-d1 !default; $forum-color-marked-answer: $green-d1 !default;
$forum-color-border: $gray-l3 !default; $forum-color-border: $gray-l3 !default;
$forum-color-error: $red !default; $forum-color-error: $red !default;
$forum-color-hover-thread: #f6f6f6 !default; $forum-color-hover-thread: #f6f6f6 !default;
$forum-color-reading-thread: $gray-d3 !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-never-read-post: $gray-d3 !default;
$forum-color-editor-preview-label: $gray-d2 !default; $forum-color-editor-preview-label: $gray-d2 !default;
$forum-color-response-count: $gray-d2 !default; $forum-color-response-count: $gray-d2 !default;
$forum-color-navigation-bar: $forum-color-primary !default;
// post images // post images
$post-image-dimension: ($baseline*3) !default; // image size + margin $post-image-dimension: ($baseline*3) !default; // image size + margin
......
// discussion - utilities - variables // 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-background: $lms-container-background-color !default;
$forum-color-active-thread: $lms-active-color !default; $forum-color-active-thread: $lms-active-color !default;
$forum-color-hover: palette(primary, dark) !default; $forum-color-hover: palette(primary, dark) !default;
...@@ -9,18 +12,19 @@ $forum-color-active-text: $lms-container-background-color !default; ...@@ -9,18 +12,19 @@ $forum-color-active-text: $lms-container-background-color !default;
$forum-color-pinned: palette(secondary, dark) !default; $forum-color-pinned: palette(secondary, dark) !default;
$forum-color-reported: palette(secondary, dark) !default; $forum-color-reported: palette(secondary, dark) !default;
$forum-color-closed: $black !default; $forum-color-closed: $black !default;
$forum-color-following: palette(primary, base) !default; $forum-color-following: $forum-color-primary !default;
$forum-color-staff: palette(primary, base) !default; $forum-color-staff: $forum-color-primary !default;
$forum-color-community-ta: palette(success, text) !default; $forum-color-community-ta: palette(success, text) !default;
$forum-color-marked-answer: palette(success, text) !default; $forum-color-marked-answer: palette(success, text) !default;
$forum-color-border: palette(grayscale, back) !default; $forum-color-border: palette(grayscale, back) !default;
$forum-color-error: palette(error, accent) !default; $forum-color-error: palette(error, accent) !default;
$forum-color-hover-thread: palette(grayscale, x-back) !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-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-editor-preview-label: palette(grayscale, base) !default;
$forum-color-response-count: palette(grayscale, base) !default; $forum-color-response-count: palette(grayscale, base) !default;
$forum-color-navigation-bar: $forum-color-primary !default;
// post images // post images
$post-image-dimension: ($baseline*3) !default; // image size + margin $post-image-dimension: ($baseline*3) !default; // image size + margin
......
// 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;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment