From 24f519e32f37086b9ca6730787d5310be2eb68d6 Mon Sep 17 00:00:00 2001
From: Arthur Barrett <abarrett@edx.org>
Date: Fri, 15 Feb 2013 13:46:38 -0500
Subject: [PATCH] Moved the return link above the inline discussion and updated
 the header styling so the hide annotations button is right-aligned with the
 help icon.

---
 .../xmodule/css/annotatable/display.scss      | 27 +++++++++--------
 .../xmodule/js/src/annotatable/display.coffee | 29 ++++++++++++-------
 lms/templates/annotatable.html                |  6 ++--
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss
index 5973d17222..e5dacb9e87 100644
--- a/common/lib/xmodule/xmodule/css/annotatable/display.scss
+++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss
@@ -11,7 +11,21 @@
     padding: 2px 4px;
     border: 1px solid $border-color;
     border-radius: 3px;
-    .annotatable-toggle { }
+    .annotatable-toggle {
+      position: absolute;
+      top: 0;
+      right: 30px;
+    }
+    .annotatable-help-icon {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 17px;
+      height: 17px;
+      background: url(../images/info-icon.png) no-repeat;
+    }
+    .annotatable-toggle, .annotatable-help-icon { margin: 2px 7px 2px 0; }
   }
 }
 
@@ -46,17 +60,6 @@
   }
 }
 
-.annotatable-help-icon {
-  display: block;
-  position: absolute;
-  right: 0;
-  top: 33%;
-  width: 17px;
-  height: 17px;
-  margin: 0 7px 0 0;
-  background: url(../images/info-icon.png) no-repeat;
-}
-
 .ui-tooltip.qtip.ui-tooltip {
   font-size: $body-font-size;
   border: 1px solid #333;
diff --git a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
index 75720c1cb8..397035300e 100644
--- a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
+++ b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
@@ -47,7 +47,7 @@ class @Annotatable
 
     initDiscussionReturnLinks: () ->
         $(@discussionXModuleSelector).find(@discussionSelector).each (index, el) =>
-            $(el).after @createReturnLink(@getDiscussionId el)
+            $(el).before @createReturnLink(@getDiscussionId el)
 
     getTipOptions: (el) ->
         content:
@@ -80,14 +80,22 @@ class @Annotatable
 
     onClickReply: (e) =>
         e.preventDefault()
+
         discussion_el = @getInlineDiscussion e.currentTarget
-        @scrollTo(discussion_el, @afterScrollToDiscussion)
+        return_el = discussion_el.prev(@returnSelector)
+
+        if return_el.length == 1
+            @scrollTo(return_el, () -> @afterScrollToDiscussion(discussion_el))
+        else
+            @scrollTo(discussion_el, @afterScrollToDiscussion)
 
     onClickReturn: (e) =>
         e.preventDefault()
-        span_el = @getSpan e.currentTarget
+
+        el = @getSpan e.currentTarget
         offset = -200
-        @scrollTo(span_el, @afterScrollToSpan, offset)
+
+        @scrollTo(el, @afterScrollToSpan, offset)
 
     getSpan: (el) ->
         discussion_id = @getDiscussionId(el)
@@ -125,14 +133,15 @@ class @Annotatable
             duration: 500
             onAfter: @_once => after?.call this, el
             offset: offset
-        })
+        }) if el
  
-    afterScrollToDiscussion: (el) ->
-        btn = $('.discussion-show', el)
+    afterScrollToDiscussion: (discussion_el) ->
+        btn = $('.discussion-show', discussion_el)
+        console.log(btn)
         btn.click() if !btn.hasClass('shown')
 
-    afterScrollToSpan: (el) ->
-        el.effect 'highlight', {color: 'rgba(0,0,0,0.5)' }, 1000
+    afterScrollToSpan: (span_el) ->
+        span_el.effect 'highlight', {color: 'rgba(0,0,0,0.5)' }, 1000
 
     makeTipContent: (el) ->
         (api) =>
@@ -193,4 +202,4 @@ class @Annotatable
         if text.length > limit
             text.substring(0, limit - 1).split(' ').slice(0, -1).join(' ') + '...' # truncate on word boundary
         else
-            text
\ No newline at end of file
+            text
diff --git a/lms/templates/annotatable.html b/lms/templates/annotatable.html
index 41df903265..d3d19c8636 100644
--- a/lms/templates/annotatable.html
+++ b/lms/templates/annotatable.html
@@ -4,10 +4,10 @@
 		  <div class="annotatable-title">${display_name} </div>
 		% endif
 		<div class="annotatable-description">
-				<div class="annotatable-help-icon" title="Move your cursor over the highlighted areas to display annotations. Discuss the annotations in the forums using the link at the bottom of the annotation. You may hide annotations at any time by using the button at the top of the section."></div>
-				Annotated Reading + Guided Discussion<br/>
+                Annotated Reading + Guided Discussion
 				<a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
-		</div>
+                <div class="annotatable-help-icon" title="Move your cursor over the highlighted areas to display annotations. Discuss the annotations in the forums using the link at the bottom of the annotation. You may hide annotations at any time by using the button at the top of the section."></div>
+        </div>
 	</div>
 	
 	<div class="annotatable-content">