make new post view overlay-ish

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);

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
                 });

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();

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() {

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);
             });

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

@@ -5,17 +5,19 @@
 
     <article class="new-post-article is-hidden"></article>
 
-    <section class="inline-threads">
-    </section>
+    <div class="inline-discussion-thread-container">
+        <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 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>
     </div>
 </section>

common/static/common/templates/discussion/new-post.underscore

 <form class="forum-new-post-form">
+    <% if (mode === 'inline') { %>
+        <h3 class="thread-title"><%- gettext("Add a Post") %></h3>
+        <button class="btn-default add-post-cancel">
+            <span class="sr"><%- gettext('Cancel') %></span>
+            <span class="fa fa-close" aria-hidden="true"></span>
+        </button>
+    <% } %>
     <ul class="post-errors" style="display: none"></ul>
     <div class="forum-new-post-form-wrapper"></div>
     <% if (cohort_options) { %>

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')

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 {

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;
     }
 }
 

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;
+            }
+        }
+    }
+
 }