From ff94541e40be41e30622cc04900be2641cb9dacd Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Tue, 11 Sep 2012 11:30:05 -0400
Subject: [PATCH] tweaked inline hide/show and new post buttons

---
 .../discussion/discussion_module_view.coffee  | 30 ++++++++++++-------
 lms/static/sass/_discussion.scss              | 10 +++----
 .../discussion/_discussion_module.html        |  1 +
 .../mustache/_inline_discussion.mustache      |  2 +-
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/lms/static/coffee/src/discussion/discussion_module_view.coffee b/lms/static/coffee/src/discussion/discussion_module_view.coffee
index d7a555f004..2d2f3eaa04 100644
--- a/lms/static/coffee/src/discussion/discussion_module_view.coffee
+++ b/lms/static/coffee/src/discussion/discussion_module_view.coffee
@@ -9,7 +9,8 @@ if Backbone?
     paginationTemplate: -> DiscussionUtil.getTemplate("_pagination")
     page_re: /\?discussion_page=(\d+)/
     initialize: ->
-      # Set the page if it was set in the URL. This is used to allow deep linking to pages
+      @toggleDiscussionBtn = @$(".discussion-show")
+      # Set the page if it was set in the URL. This is used to allow deep linking to pages      
       match = @page_re.exec(window.location.href)
       if match
         @page = parseInt(match[1])
@@ -18,31 +19,38 @@ if Backbone?
 
     toggleNewPost: (event) ->
       event.preventDefault()
-      if @newPostForm.is(':hidden')
+      if !@newPostForm
+        @toggleDiscussion()
+        @isWaitingOnNewPost = true;        
+        return
+      if @showed
         @newPostForm.slideDown(300)
       else
-        @newPostForm.slideUp(300)
+        @newPostForm.show()
+      @toggleDiscussionBtn.addClass('shown')
+      @toggleDiscussionBtn.find('.button-text').html("Hide Discussion")
+      @$("section.discussion").slideDown()
+      @showed = true
 
     hideNewPost: (event) ->
       event.preventDefault()
       @newPostForm.slideUp(300)
 
     toggleDiscussion: (event) ->
-      thisButton = $(event.target).closest('a')
       if @showed
         @$("section.discussion").slideUp()
-        thisButton.removeClass('shown')
-        thisButton.find('.button-text').html("Show Discussion")
+        @toggleDiscussionBtn.removeClass('shown')
+        @toggleDiscussionBtn.find('.button-text').html("Show Discussion")
         @showed = false
       else
-        thisButton.addClass('shown')
-        thisButton.find('.button-text').html("Hide Discussion")
+        @toggleDiscussionBtn.addClass('shown')
+        @toggleDiscussionBtn.find('.button-text').html("Hide Discussion")
 
         if @retrieved
           @$("section.discussion").slideDown()
           @showed = true
         else
-          $elem = $(event.target)
+          $elem = @toggleDiscussionBtn
           @loadPage $elem
 
     loadPage: ($elem)=>
@@ -59,7 +67,7 @@ if Backbone?
     renderDiscussion: ($elem, response, textStatus, discussionId) =>
       window.user = new DiscussionUser(response.user_info)
       Content.loadContentInfos(response.annotated_content_info)
-      $elem.html("Hide Discussion")
+      # $elem.html("Hide Discussion")
       @discussion = new Discussion()
       @discussion.reset(response.discussion_data, {silent: false})
       $discussion = $(Mustache.render $("script#_inline_discussion").html(), {'threads':response.discussion_data, 'discussionId': discussionId})
@@ -77,6 +85,8 @@ if Backbone?
       @retrieved = true
       @showed = true
       @renderPagination(2, response.num_pages)
+      if @isWaitingOnNewPost
+        @newPostForm.show()
 
     addThread: (thread, collection, options) =>
       # TODO: When doing pagination, this will need to repaginate. Perhaps just reload page 1?
diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 8bc4a30d8f..8386314ef9 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -1620,7 +1620,7 @@ body.discussion {
 .discussion-module {
   @extend .discussion-body;
   margin: 20px 0;
-  padding: 20px 20px 28px 20px;
+  padding: 20px;
   background: #f6f6f6 !important;
   border-radius: 3px;
 
@@ -1634,9 +1634,8 @@ body.discussion {
   }
 
   .discussion-show {
-    display: block;
-    width: 200px;
-    margin: auto;
+    position: relative;
+    top: 3px;
     font-size: 14px;
     text-align: center;
 
@@ -1660,10 +1659,11 @@ body.discussion {
 
   .new-post-btn {
     display: inline-block;
+    float: right;
   }
 
   section.discussion {
-    margin-top: 20px;
+    margin-top: 30px;
 
     .threads {
       margin-top: 20px;
diff --git a/lms/templates/discussion/_discussion_module.html b/lms/templates/discussion/_discussion_module.html
index 5c44495c08..bb172093f6 100644
--- a/lms/templates/discussion/_discussion_module.html
+++ b/lms/templates/discussion/_discussion_module.html
@@ -2,4 +2,5 @@
 
 <div class="discussion-module" data-discussion-id="${discussion_id | h}">
     <a class="discussion-show control-button" href="javascript:void(0)" data-discussion-id="${discussion_id | h}"><span class="show-hide-discussion-icon"></span><span class="button-text">Show Discussion</span></a>
+    <a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a>
 </div>
diff --git a/lms/templates/discussion/mustache/_inline_discussion.mustache b/lms/templates/discussion/mustache/_inline_discussion.mustache
index de15431ca1..22c0564426 100644
--- a/lms/templates/discussion/mustache/_inline_discussion.mustache
+++ b/lms/templates/discussion/mustache/_inline_discussion.mustache
@@ -1,5 +1,5 @@
 <section class="discussion" data-discussion-id="{{discussionId}}">
-    <a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a>
+    
 
     <article class="new-post-article">
         <span class="topic"  data-discussion-id="{{discussionId}}" />