Merge pull request #2266 from edx/jsa/forums-response-button

add "Add A Response" button to thread views in discussion tab / inline

common/static/coffee/src/discussion/content.coffee

@@ -159,6 +159,9 @@ if Backbone?
     created_at_time: ->
       new Date(@get("created_at")).getTime()
 
+    hasResponses: ->
+      @get('comments_count') > 0
+
   class @Comment extends @Content
     urlMappers:
       'reply': -> DiscussionUtil.urlFor('create_sub_comment', @id)

common/static/coffee/src/discussion/views/discussion_thread_view.coffee

@@ -3,6 +3,7 @@ if Backbone?
 
     events:
       "click .discussion-submit-post": "submitComment"
+      "click .add-response-btn": "scrollToAddResponse"
 
     $: (selector) ->
       @$el.find(selector)
@@ -25,6 +26,7 @@ if Backbone?
 
       @$("span.timeago").timeago()
       @makeWmdEditor "reply-body"
+      @renderAddResponseButton()
       @renderResponses()
       @
 
@@ -55,6 +57,18 @@ if Backbone?
         @$el.find(".responses").append(view.el)
         view.afterInsert()
 
+    renderAddResponseButton: ->
+      if @model.hasResponses()
+        @$el.find('div.add-response').show()
+      else
+        @$el.find('div.add-response').hide()
+
+    scrollToAddResponse: (event) ->
+      event.preventDefault()
+      form = $(event.target).parents('article.discussion-article').find('form.discussion-reply-new')
+      $('html, body').scrollTop(form.offset().top)
+      form.find('.wmd-panel textarea').focus()
+
     addComment: =>
       @model.comment()
 
@@ -72,6 +86,7 @@ if Backbone?
       comment.set('thread', @model.get('thread'))
       @renderResponse(comment)
       @model.addComment()
+      @renderAddResponseButton()
 
       DiscussionUtil.safeAjax
         $elem: $(event.target)

common/static/coffee/src/discussion/views/discussion_thread_view_inline.coffee

@@ -5,6 +5,7 @@ if Backbone?
       "click .discussion-submit-post": "submitComment"
       "click .expand-post": "expandPost"
       "click .collapse-post": "collapsePost"
+      "click .add-response-btn": "scrollToAddResponse"
 
     initialize: ->
       super()
@@ -36,6 +37,7 @@ if Backbone?
       @$el.find('.post-extended-content').hide()
       if @expanded
         @makeWmdEditor "reply-body"
+        @renderAddResponseButton()
         @renderResponses()
       @
     createShowView: () ->
@@ -106,6 +108,7 @@ if Backbone?
       @makeWmdEditor "reply-body"
       @renderAttrs()
       if @$el.find('.loading').length
+        @renderAddResponseButton()
         @renderResponses()
 
     collapsePost: (event) ->

lms/static/sass/_discussion.scss

@@ -1186,6 +1186,8 @@ body.discussion {
 
   .blank-slate {
 
+    padding: 40px 40px 10px;
+
     section {
       border-bottom: 1px solid #ccc;
     }
@@ -1336,7 +1338,6 @@ body.discussion {
 
   .discussion-article {
     position: relative;
-    padding: $baseline*2;
     min-height: 468px;         
 
     a {
@@ -1397,7 +1398,7 @@ body.discussion {
   }
 
   .discussion-post {
-    padding: $baseline/2 $baseline;
+    padding: $baseline*2 $baseline*2 $baseline/2 $baseline*2;
 
     > header .vote-btn {
       position: relative;
@@ -1443,7 +1444,7 @@ body.discussion {
   .responses {
     list-style: none;
     margin-top: $baseline;
-    padding: 0;
+    padding: 0px $baseline*2;
 
     > li {
       position: relative;
@@ -1511,6 +1512,27 @@ body.discussion {
     }
   }
 
+  div.add-response {
+    margin-top: $baseline;
+    padding: 0px 30px;
+
+    button.add-response-btn {
+      @include white-button;
+      position: relative;
+      padding: 0px 30px;
+      border: 1px solid #b2b2b2;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
+      font-size: 13px;
+      text-align: left;
+      @include animation(fadeIn .3s);
+      width: 100%;
+
+      span.add-response-btn-text {
+        padding-left: 4px;
+      }
+    }
+  }
+
   .vote-btn {
     position: relative;
     z-index: 100;
@@ -1783,7 +1805,7 @@ body.discussion {
 
 
   .discussion-reply-new {
-    padding: $baseline;
+    padding: 0px 30px $baseline;
     @include clearfix;
     @include transition(opacity .2s linear 0s);
 
@@ -1856,11 +1878,31 @@ body.discussion {
     margin-top: $baseline*2;
 
     > li {
-      margin: 0 $baseline $baseline !important;
       padding: 26px 30px $baseline !important;
     }
   }
 
+  div.add-response.post-extended-content {
+    margin-top: $baseline;
+    margin-bottom: 20px; 
+
+    button.add-response-btn {
+      @include white-button;
+      position: relative;
+      border: 1px solid #b2b2b2;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
+      font-size: 13px;
+      text-align: left;
+      @include animation(fadeIn .3s);
+      width: 100%; 
+      padding-left: 30px;
+
+      span.add-response-btn-text {
+        padding-left: 4px;
+      }
+    }
+  }
+
   .loading-animation {
     background-image: url(../images/spinner-on-grey.gif);
   }
@@ -1938,7 +1980,7 @@ body.discussion {
         @include transition(all .2s linear 0s);
 
         .discussion-post {
-          padding: 12px $baseline 0 $baseline;
+          padding: 12px 30px 0px;
           @include clearfix;
 
           .inline-comment-count {

lms/templates/discussion/_underscore_templates.html

@@ -5,7 +5,12 @@
 <script type="text/template" id="thread-template">
     <article class="discussion-article" data-id="${'<%- id %>'}">
         <div class="thread-content-wrapper"></div>
-
+        <div class="add-response">
+            <button class="button add-response-btn">
+                <i class="icon icon-reply"></i>
+                <span class="add-response-btn-text">${_('Add A Response')}</span>
+            </button>
+        </div>
         <ol class="responses">
             <li class="loading"><div class="loading-animation"><span class="sr">${_('Loading content')}</span></div></li>
         </ol>

lms/templates/discussion/mustache/_inline_thread.mustache

@@ -2,7 +2,12 @@
 
 <article class="discussion-article" data-id="{{id}}">
     <div class="thread-content-wrapper"></div>
-
+    <div class="add-response post-extended-content">
+        <button class="button add-response-btn">
+            <i class="icon icon-reply"></i>
+            <span class="add-response-btn-text">${_('Add A Response')}</span>
+        </button>
+    </div>
     <ol class="responses post-extended-content">
         <li class="loading"><div class="loading-animation"><span class="sr">${_("Loading content")}</span></div></li>
     </ol>
@@ -20,4 +25,4 @@
         <a href="javascript:void(0)" class="collapse-post">${_("Hide discussion")}</a>
     </div>
 
-</article>
+</article>

lms/templates/discussion/mustache/_inline_thread_cohorted.mustache

@@ -4,9 +4,14 @@
 <div class="group-visibility-label">{{group_string}}</div>
 
     <div class="thread-content-wrapper"></div>
-
+    <div class="add-response post-extended-content">
+        <button class="button add-response-btn">
+            <i class="icon icon-reply"></i>
+            <span class="add-response-btn-text">${_('Add A Response')}</span>
+        </button>
+    </div>
     <ol class="responses post-extended-content">
-        <li class="loading"><div class="loading-animation"><span class="sr">${_("Loading content")})</span></div></li>
+        <li class="loading"><div class="loading-animation"><span class="sr">${_("Loading content")}</span></div></li>
     </ol>
     <form class="local discussion-reply-new post-extended-content"  data-id="{{id}}">
         <h4>${_("Post a response:")}</h4>
@@ -22,4 +27,4 @@
         <a href="javascript:void(0)" class="collapse-post">${_("Hide discussion")}</a>
     </div>
 
-</article>
+</article>