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 10e4ead4cd..8183e46a96 100644 --- a/common/static/common/js/discussion/views/discussion_inline_view.js +++ b/common/static/common/js/discussion/views/discussion_inline_view.js @@ -14,6 +14,7 @@ }, 'click .new-post-btn': 'toggleNewPost', 'click .all-posts-btn': 'navigateToAllPosts', + keydown: 'handleKeydown', 'keydown .new-post-btn': function(event) { return DiscussionUtil.activateOnSpace(event, this.toggleNewPost); } @@ -28,6 +29,7 @@ this.showByDefault = options.showByDefault || false; this.toggleDiscussionBtn = this.$('.discussion-show'); this.listenTo(this.model, 'change', this.render); + this.escKey = 27; match = this.page_re.exec(window.location.href); if (match) { @@ -89,6 +91,7 @@ if (this.$('section.discussion').length) { edx.HtmlUtils.setHtml(this.$el, discussionHtml); + this.$('section.discussion').replaceWith(edx.HtmlUtils.ensureHtml(discussionHtml).toString()); } else { edx.HtmlUtils.append(this.$el, discussionHtml); } @@ -117,6 +120,7 @@ this.newPostView.render(); + this.listenTo(this.newPostView, 'newPost:createPost', this.hideNewPost); this.listenTo(this.newPostView, 'newPost:cancel', this.hideNewPost); this.discussion.on('add', this.addThread); @@ -124,7 +128,7 @@ this.showed = true; if (this.isWaitingOnNewPost) { - this.newPostForm.show().focus(); + this.newPostForm.removeClass('is-hidden').focus(); } // Hide the thread view initially @@ -169,7 +173,6 @@ this.toggleDiscussionBtn.addClass('shown'); this.toggleDiscussionBtn.find('.button-text').text(gettext('Hide Discussion')); if (this.retrieved) { - this.$('section.discussion').slideDown(); this.$('section.discussion').removeClass('is-hidden'); this.showed = true; } else { @@ -185,7 +188,6 @@ }, hideDiscussion: function() { - this.$('section.discussion').slideUp(); this.$('section.discussion').addClass('is-hidden'); this.toggleDiscussionBtn.removeClass('shown'); this.toggleDiscussionBtn.find('.button-text').text(gettext('Show Discussion')); @@ -200,20 +202,29 @@ return; } if (this.showed) { - this.newPostForm.slideDown(300); - } else { - this.newPostForm.show().focus(); + this.$('section.discussion').find('.inline-discussion-thread-container').addClass('is-hidden'); + this.$('section.discussion').find('.new-post-btn').addClass('is-hidden'); + this.newPostForm.removeClass('is-hidden').find('.js-post-title').focus(); } this.newPostView.$el.removeClass('is-hidden'); this.toggleDiscussionBtn.addClass('shown'); this.toggleDiscussionBtn.find('.button-text').text(gettext('Hide Discussion')); - this.$('section.discussion').slideDown(); this.showed = true; }, hideNewPost: function() { - this.newPostView.$el.addClass('is-hidden'); - return this.newPostForm.slideUp(300); + this.$('section.discussion').find('.inline-discussion-thread-container').removeClass('is-hidden'); + this.$('section.discussion').find('.new-post-btn') + .removeClass('is-hidden') + .focus(); + this.newPostForm.addClass('is-hidden'); + }, + + handleKeydown: function(event) { + var keyCode = event.keyCode; + if (keyCode === this.escKey) { + this.$('section.discussion').find('.cancel').trigger('click'); + } } }); }).call(window); diff --git a/common/static/common/js/discussion/views/discussion_thread_list_view.js b/common/static/common/js/discussion/views/discussion_thread_list_view.js index c6a8c379d0..dbc44250d3 100644 --- a/common/static/common/js/discussion/views/discussion_thread_list_view.js +++ b/common/static/common/js/discussion/views/discussion_thread_list_view.js @@ -107,7 +107,7 @@ this.boardName = null; this.current_search = ''; this.mode = 'all'; - this.showThreadPreview = options.showThreadPreview; + this.showThreadPreview = true; this.searchAlertCollection = new Backbone.Collection([], { model: Backbone.Model }); diff --git a/common/static/common/js/discussion/views/new_post_view.js b/common/static/common/js/discussion/views/new_post_view.js index a6e4d74f72..d7c375d48f 100644 --- a/common/static/common/js/discussion/views/new_post_view.js +++ b/common/static/common/js/discussion/views/new_post_view.js @@ -100,6 +100,7 @@ 'submit .forum-new-post-form': 'createPost', 'change .post-option-input': 'postOptionChange', 'click .cancel': 'cancel', + 'click .add-post-cancel': 'cancel', 'reset .forum-new-post-form': 'updateStyles' }; @@ -156,17 +157,26 @@ success: function(response) { var thread; thread = new Thread(response.content); - self.$el.hide(); + self.$el.addClass('is-hidden'); self.resetForm(); + self.trigger('newPost:createPost'); return self.collection.add(thread); } }); }; + NewPostView.prototype.formModified = function() { + var postBodyHasContent = this.$('.js-post-body').find('.wmd-input').val() !== '', + titleHasContent = this.$('.js-post-title').val() !== ''; + return postBodyHasContent || titleHasContent; + }; + NewPostView.prototype.cancel = function(event) { event.preventDefault(); - if (!confirm(gettext('Your post will be discarded.'))) { - return; + if (this.formModified()) { + if (!confirm(gettext('Your post will be discarded.'))) { // eslint-disable-line no-alert + return; + } } this.trigger('newPost:cancel'); return this.resetForm(); diff --git a/common/static/common/js/spec/discussion/view/discussion_inline_view_spec.js b/common/static/common/js/spec/discussion/view/discussion_inline_view_spec.js index 2f31058183..09a2b55a59 100644 --- a/common/static/common/js/spec/discussion/view/discussion_inline_view_spec.js +++ b/common/static/common/js/spec/discussion/view/discussion_inline_view_spec.js @@ -114,6 +114,14 @@ testView.$('.forum-new-post-form .cancel').click(); expect(testView.$('.new-post-article')).toHaveClass('is-hidden'); }); + + it('should be hidden when the "close" button is clicked', function() { + var testView = createTestView(this); + showDiscussion(this, testView); + testView.$('.new-post-btn').click(); + testView.$('.forum-new-post-form .add-post-cancel').click(); + expect(testView.$('.new-post-article')).toHaveClass('is-hidden'); + }); }); describe('thread listing', function() { diff --git a/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js b/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js index 8a270fa22e..a6ec3cb8fd 100644 --- a/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js +++ b/common/static/common/js/spec/discussion/view/discussion_thread_list_view_spec.js @@ -188,12 +188,11 @@ renderSingleThreadWithProps = function(props) { return makeView(new Discussion([new Thread(DiscussionViewSpecHelper.makeThreadWithProps(props))])).render(); }; - makeView = function(discussion, options) { - var opts = options || {}; + makeView = function(discussion) { return new DiscussionThreadListView({ el: $('#fixture-element'), collection: discussion, - showThreadPreview: opts.showThreadPreview || true, + showThreadPreview: true, courseSettings: new DiscussionCourseSettings({ is_cohorted: true }) @@ -676,10 +675,8 @@ it('should not be shown when showThreadPreview is false', function() { var view, discussion = new Discussion([]), - options = { - showThreadPreview: false - }; - view = makeView(discussion, options); + showThreadPreview = false; + view = makeView(discussion, showThreadPreview); view.render(); expect(view.$el.find('.thread-preview-body').length).toEqual(0); }); diff --git a/common/static/common/templates/discussion/inline-discussion.underscore b/common/static/common/templates/discussion/inline-discussion.underscore index b2081125f4..a591fc1390 100644 --- a/common/static/common/templates/discussion/inline-discussion.underscore +++ b/common/static/common/templates/discussion/inline-discussion.underscore @@ -5,17 +5,19 @@ -
-
+
+
+
-
-
- -
-
+
+
+ +
+
+
diff --git a/common/static/common/templates/discussion/new-post.underscore b/common/static/common/templates/discussion/new-post.underscore index 2289dcec62..2ee1f7557c 100644 --- a/common/static/common/templates/discussion/new-post.underscore +++ b/common/static/common/templates/discussion/new-post.underscore @@ -1,4 +1,11 @@
+ <% if (mode === 'inline') { %> +

<%- gettext("Add a Post") %>

+ + <% } %>
<% if (cohort_options) { %> diff --git a/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js b/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js index c6bd9c2677..cf9c2cba7b 100644 --- a/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js +++ b/lms/djangoapps/discussion/static/discussion/js/views/discussion_board_view.js @@ -32,7 +32,6 @@ initialize: function(options) { this.courseSettings = options.courseSettings; - this.showThreadPreview = true; this.sidebar_padding = 10; this.current_search = ''; this.mode = 'all'; @@ -46,8 +45,7 @@ this.discussionThreadListView = new DiscussionThreadListView({ collection: this.discussion, el: this.$('.discussion-thread-list-container'), - courseSettings: this.courseSettings, - showThreadPreview: this.showThreadPreview + courseSettings: this.courseSettings }).render(); this.searchView = new DiscussionSearchView({ el: this.$('.forum-search') diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index f98180d172..69f6494e1d 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -356,6 +356,7 @@ section.discussion { } .new-post-article { + .inner-wrapper { max-width: 1180px; min-width: 760px; @@ -369,6 +370,7 @@ section.discussion { color: $gray-d3; font-weight: 700; } + } .edit-post-form { diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index 75e05c7e6a..b3e509062c 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -385,7 +385,9 @@ &:hover, &:focus { color: $forum-color-active-text; - background-color: $forum-color-active-thread; + // !important overrides the one set here: + // https://github.com/edx/edx-platform/blob/master/lms/static/sass/elements/_controls.scss#L472 + background-color: $forum-color-active-thread !important; } } diff --git a/lms/static/sass/discussion/views/_inline.scss b/lms/static/sass/discussion/views/_inline.scss index 8c8557a73e..f6c0dd17b5 100644 --- a/lms/static/sass/discussion/views/_inline.scss +++ b/lms/static/sass/discussion/views/_inline.scss @@ -39,4 +39,25 @@ .wmd-preview { @include discussion-wmd-preview; } + + .new-post-article { + position: relative; + border: 1px solid $forum-color-border; + + .add-post-cancel { + @include right($baseline / 2); + top: $baseline / 2; + position: absolute; + color: $uxpl-primary-blue; + + &:hover, + &:focus { + border-color: transparent; + box-shadow: none; + background-color: transparent; + background-image: none; + } + } + } + }