From d0c2d31558f70e89366be5f6565d68d2718680aa Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Mon, 10 Sep 2012 14:03:39 -0400
Subject: [PATCH] new show/hide button for inline discussions

---
 .../discussion/discussion_module_view.coffee  |  14 ++++++---
 .../images/show-hide-discussion-icon.png      | Bin 0 -> 1610 bytes
 lms/static/sass/_discussion.scss              |  27 ++++++++++++++++--
 .../discussion/_discussion_module.html        |   2 +-
 4 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 lms/static/images/show-hide-discussion-icon.png

diff --git a/lms/static/coffee/src/discussion/discussion_module_view.coffee b/lms/static/coffee/src/discussion/discussion_module_view.coffee
index 2b0081bb8f..3697faddee 100644
--- a/lms/static/coffee/src/discussion/discussion_module_view.coffee
+++ b/lms/static/coffee/src/discussion/discussion_module_view.coffee
@@ -28,14 +28,20 @@ if Backbone?
       @newPostForm.slideUp(300)
 
     toggleDiscussion: (event) ->
+      thisButton = $(event.target).closest('a')
       if @showed
-        @$("section.discussion").hide()
-        $(event.target).html("Show Discussion")
+        @$("section.discussion").slideUp()
+        thisButton.removeClass('shown')
+        thisButton.find('.button-text').html("Show Discussion")
         @showed = false
       else
-        $(event.target).html("Hide Discussion")
+        thisButton.addClass('shown')
+        thisButton.find('.button-text').html("Hide Discussion")
+
+        console.log($(event.target))
+
         if @retrieved
-          @$("section.discussion").show()          
+          @$("section.discussion").slideDown()
           @showed = true
         else
           $elem = $(event.target)
diff --git a/lms/static/images/show-hide-discussion-icon.png b/lms/static/images/show-hide-discussion-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..17d319378035e1b462fd449402d5f5b0be841cd3
GIT binary patch
literal 1610
zcmaJ>X;2eq7>+=x1wo})6cM*k6e!tTB#=nR0GmLNq%qJj!)PVP23FkNu)9de)OMhV
zb(ngziqRGUooH(TM^J9Xt3@TA1!wTUqoWeEib&On)@~4Je`t4h_xrwg-sgFr_n2?J
zT9xeQ6YRraF#HrLkcM6(>F>kI-t_-&V`V(O%%WskDjhdb1v&y|Bp7i$3@A`tHmrel
z#=^YQa2$i-IUmW;Qd(u2*np#;&g}zQP&18YFyf>Zv(AtUQ-B`MMlcEUQCkNSK#UUR
zQh}1AG$+A1NQ#w!)2*rugEiM6GBTy{K%7NP6QD4q11#t&j1*fW%u!x3y?2}0OkmW7
z%9SwRh|((6KoU;CfB@vP3>+>O5DGzVv_L52Mgcqym&fMNuaL!!77K)8UJNkyFzIN7
z(InPD^08R-Ny5ybD6^Q&E+{Af3-};TWV5*<k;u)#<FRND7Fmc<ItvRU=Z!N!FlitV
zGlk$7;AYh6@q9|cq?Nu&0X0w1V&qtv=z_5=Iy0LKa@;A6J1Uj`?~0-m-Xx`g|JD0e
zVlt!946`*biRTjrx^bp??oeiN5&`QdoXEiORpV7u=in4h=HO-^DP0JJD|H40a~mQ?
z5lW?4fsvFBGr$T+!lXGs1Tl(*99gW8%aO^FWOUtS+*l|^2*nCx1biMpR?ZcTV<Fs-
zkHQ!=jy2L)S*(mNg19^x#DU(5bq@n-rXxczfvkp&aso$z(WJ%5yR{^}Tgw})@hw`$
z@_^onWz%BV?$-XN)#E05e%#xM!KDuqqYq>Byc6_b6YWtDgW=JxfD$q+S8B?YxxooD
zJG1l4GQuFm$!#I~<WpxTs#hEZWYf5|^a#mwmUX~B{E>B_Rx*4c;8fT#DDc2QYSrHI
z;^@HC@Wj+7iT*-c)(*7sbp&RsyMM&#`PE&x()A~wf8GHuR0M2BNiw}oUX`r&Y4vqg
z=k`y2;c<9fUt(v;fu5evcELAi-!3L=Lb?tVVJPZS*CcHGc=pA{8y7z5kLcb#XKi9a
z&&9}~_P&%VyT%#XnI|~7=46R3EyxgB)!I>C&l~ze1KLKQo!6f}U46mSa7g{vu_D{_
z2mW))T9aM%i22yyHLsOTS6A$|349GzzFF;R?|q$T?>+I@Ivs3kXyC6KD!F{x%X@G}
z<C%)CJ2@LR6D>7eYuPcwTZfxpIvkEyUv}*G=`uAGXMSbZD1N4H5V0XkwyZ!-ObMFg
zYhBj&$74rDW#upD_GH$A8@JmBe7ro0eu(S2eZ0KqO6Ib@N6#M34Gq=jhaKu&EN=>J
znO}P1mS;=tueCiZUpH@0D>Yn=jWe_~x?C<v|EYn5@75mm|50`CQ`dX)W{1C%a0b43
zY<cN7bo0{6O^oGHAb7;<{?vw<t=FuF!6mb9oeBE;L2qxbb?@&AKku)vnpBIjUfJ#T
zeO-4VcNJD!;soHx2g|3)@@lVR(rDZFORLrWK*0LRKS`13;Jr>N^K3p7Y*iuB^Uq)2
zEIjf}*xX6_5%2zv-^k790vEQfyXN#bxS@0QSyQ@^RO!lFHieJW7X`ErYD8_?sHd!%
zQ&yL{p83A;UsD<%{z~8oT<VktgttXvO>Ns!=Ev*zoX@Pi{LnVi?bw!EQg*lQ;^TQm
zmlg+!E`2NC4R=@i7Mt}8s`5$~4M`skK1q#we@EH^Y2o3|tzqpaCN=MrZ|c@Q9L(OX
q_1_YlCG%=d-m_{;*>T>p{R~eAS&>q)W_d`B`*v5zR8U=FR`EYdo_c}+

literal 0
HcmV?d00001

diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 7c21b70a4d..cd804e1ba6 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -1571,16 +1571,33 @@ body.discussion {
 .discussion-module {
   @extend .discussion-body;
   margin: 20px 0;
-  padding: 20px;
+  padding: 20px 20px 28px 20px;
   background: #f6f6f6 !important;
   border-radius: 3px;  
 
   .discussion-show {
-    @include white-button;
     display: block;
     width: 200px;
-    margin: auto;    
+    margin: auto;
+    font-size: 14px;
     text-align: center;
+
+    &.shown {
+      .show-hide-discussion-icon {
+        background-position: 0 0;
+      }
+    }
+
+    .show-hide-discussion-icon {
+      display: inline-block;
+      position: relative;
+      top: 5px;
+      margin-right: 6px;
+      width: 21px;
+      height: 19px;
+      background: url(../images/show-hide-discussion-icon.png) no-repeat;
+      background-position: -21px 0;
+    }
   }
 
   .new-post-btn {
@@ -1590,6 +1607,10 @@ body.discussion {
   section.discussion {
     margin-top: 20px;
 
+    .threads {
+      margin-top: 20px;
+    }
+
     /* Course content p has a default margin-bottom of 1.416em, this is just to reset that */
     .discussion-thread {
       padding: 0;
diff --git a/lms/templates/discussion/_discussion_module.html b/lms/templates/discussion/_discussion_module.html
index e43f7ae2a8..5c44495c08 100644
--- a/lms/templates/discussion/_discussion_module.html
+++ b/lms/templates/discussion/_discussion_module.html
@@ -1,5 +1,5 @@
 <%include file="_underscore_templates.html" />
 
 <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}">Show Discussion</a>
+    <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>
 </div>