Style and behavior changes. Added return links to discussions.

common/lib/xmodule/xmodule/annotatable_module.py

@@ -50,18 +50,13 @@ class AnnotatableModule(XModule):
             del span.attrib['discussion']
     
     def _decorate_span(self, span, index, xmltree):
-        """ Decorates the span highlight.  """
+        """ Adds a highlight class to the span. """
 
         cls = ['annotatable-span', 'highlight']
         marker = self._get_marker_color(span)
         if marker is not None:
             cls.append('highlight-'+marker)
 
-        icon = etree.Element('span', { 'class': 'annotatable-icon ss-icon ss-textchat' })
-        icon.append(etree.Entity('#xE396'))
-        icon.tail = span.text
-        span.text = ''
-        span.insert(0, icon)
         span.set('class', ' '.join(cls))
         span.tag = 'div'
         
@@ -79,7 +74,7 @@ class AnnotatableModule(XModule):
             comment.set('class', 'annotatable-comment')
 
     def _get_marker_color(self, span):
-        """ Returns the name of the marker color for the span if it is valid, otherwise none."""
+        """ Returns the name of the marker/highlight color for the span if it is valid, otherwise none."""
 
         valid_markers = ['yellow', 'orange', 'purple', 'blue', 'green']
         if 'marker' in span.attrib:
@@ -88,7 +83,7 @@ class AnnotatableModule(XModule):
             if marker in valid_markers:
                 return marker
         return None
-    
+
     def _render(self):
         """ Renders annotatable content by transforming spans and adding discussions. """
 
@@ -98,6 +93,7 @@ class AnnotatableModule(XModule):
             self._decorate_span,
             self._decorate_comment
         ])
+        xmltree.tag = 'div'
 
         return etree.tostring(xmltree)
 
@@ -120,8 +116,6 @@ class AnnotatableModule(XModule):
         
         self.element_id = self.location.html_id();
         self.content = self.definition['data']
-        self.spans = {} 
-
 
 class AnnotatableDescriptor(RawDescriptor):
     module_class = AnnotatableModule

common/lib/xmodule/xmodule/css/annotatable/display.scss

 .annotatable-header {
   margin-bottom: 1em;
   .annotatable-title {
-    font-size: em(20);
+    font-size: em(22);
     text-transform: uppercase;
     padding: 2px 4px;
   }
   .annotatable-description {
     position: relative;
-    font-size: em(14);
+    font-size: $body-font-size;
     padding: 2px 4px;
     border: 1px solid $border-color;
     border-radius: 3px;
@@ -57,7 +57,8 @@
   background: url(../images/info-icon.png) no-repeat;
 }
 
-.ui-tooltip.qtip.ui-tooltip-annotatable {
+.ui-tooltip.qtip.ui-tooltip {
+  font-size: $body-font-size;
   border: 1px solid #333;
   border-radius: 1em;
   background-color: rgba(0,0,0,.85);
@@ -65,6 +66,7 @@
   -webkit-font-smoothing: antialiased;
 
   .ui-tooltip-titlebar {
+    font-size: em(16);
     color: inherit;
     background-color: transparent;
     padding: 5px 10px;
@@ -85,26 +87,30 @@
   }
   .ui-tooltip-content {
     color: inherit;
-    background-color: transparent;
+    font-size: em(14);
     text-align: left;
     font-weight: 400;
-    font-size: 11px;
-    padding: 0 10px;
+    padding: 0 10px 10px 10px;
+    background-color: transparent;
   } 
-  p { color: inherit; }
+  p { 
+      color: inherit; 
+      line-height: normal;
+  }
 }
 
-.ui-tooltip.qtip.ui-tooltip-annotatable-comment {
+.ui-tooltip.qtip.ui-tooltip-annotatable {
   max-width: 350px;
   .ui-tooltip-title:before { 
     font-weight: normal;
     content: "Guided Discussion: ";
   }
   .ui-tooltip-content {  
+    padding: 0 10px;
     .annotatable-comment {
       display: block;
       margin: 0px 0px 10px 0;
-      max-height: 200px;
+      max-height: 175px;
       overflow: hidden;
     }
     .annotatable-reply {
@@ -127,4 +133,4 @@
     border: 10px solid transparent;
     border-top-color: rgba(0, 0, 0, .85);
   }
-}
\ No newline at end of file
+}

common/lib/xmodule/xmodule/js/src/annotatable/display.coffee

@@ -6,8 +6,10 @@ class @Annotatable
     spanSelector:    '.annotatable-span'
     commentSelector: '.annotatable-comment'
     replySelector:   '.annotatable-reply'
+    returnSelector:  '.annotatable-return'
     helpSelector:    '.annotatable-help-icon'
-    inlineDiscussionSelector: '.xmodule_DiscussionModule .discussion-module'
+    discussionXModuleSelector: '.xmodule_DiscussionModule'
+    discussionSelector: '.discussion-module'
  
     constructor: (el) ->
         console.log 'loaded Annotatable' if @_debug
@@ -20,11 +22,13 @@ class @Annotatable
     init: () ->
         @initEvents()
         @initTips()
+        @initDiscussionReturnLinks()
 
     initEvents: () ->
         @annotationsHidden = false
         @$(@toggleSelector).bind 'click', @onClickToggleAnnotations
         @$(@wrapperSelector).delegate @replySelector, 'click', @onClickReply
+        $(@discussionXModuleSelector).delegate @returnSelector, 'click', @onClickReturn
 
     initTips: () ->
         @savedTips = []
@@ -35,13 +39,12 @@ class @Annotatable
                 at: 'bottom left'
                 container: @$(@wrapperSelector)
             content:
-                title: 'Annotated Reading Help'
-                text: "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."
-            style:
-                classes: 'ui-tooltip-annotatable'
+                title: 'Annotated Reading'
+                text: true # use title attribute of this element
+
+    initDiscussionReturnLinks: () ->
+        $(@discussionXModuleSelector).find(@discussionSelector).each (index, el) =>
+            $(el).after @createReturnLink(@getDiscussionId el)
 
     getTipOptions: (el) ->
         content:
@@ -62,7 +65,7 @@ class @Annotatable
         hide:
             event: 'unfocus'
         style:
-            classes: 'ui-tooltip-annotatable ui-tooltip-annotatable-comment'
+            classes: 'ui-tooltip-annotatable'
         events:
             show: @onShowTip
 
@@ -74,11 +77,20 @@ class @Annotatable
 
     onClickReply: (e) =>
         e.preventDefault()
-        @scrollTo(@getInlineDiscussion e.currentTarget)
+        discussion_el = @getInlineDiscussion e.currentTarget
+        @scrollTo(discussion_el, @afterScrollToDiscussion)
+
+    onClickReturn: (e) =>
+        e.preventDefault()
+        @scrollTo(@getSpan e.currentTarget, @afterScrollToSpan)
+
+    getSpan: (el) ->
+        discussion_id = @getDiscussionId(el)
+        @$(@spanSelector).filter("[data-discussion-id='#{discussion_id}']")
     
     getInlineDiscussion: (el) ->
         discussion_id = @getDiscussionId(el)
-        $(@inlineDiscussionSelector).filter("[data-discussion-id='#{discussion_id}']")
+        $(@discussionXModuleSelector).find(@discussionSelector).filter("[data-discussion-id='#{discussion_id}']")
 
     getDiscussionId: (el) ->
         $(el).data('discussion-id')
@@ -99,18 +111,19 @@ class @Annotatable
     toggleSpans: (hide) ->
         @$(@spanSelector).toggleClass 'hide', hide
 
-    scrollTo: (el) ->
+    scrollTo: (el, after) ->
         $('html,body').scrollTo(el, {
-            duration: 500,
-            onAfter: @makeAfterScroll(el)
+            duration: 500
+            #onAfter: @_once => after.call this, el
         })
  
-    makeAfterScroll: (el, duration = 1500) ->
-        @_once ->
+    afterScrollToDiscussion: () ->
+        (el) ->
             btn = $('.discussion-show', el)
-            if !btn.hasClass('shown')
-                btn.click()
-            #el.effect 'highlight', {}, duration
+            btn.click() if !btn.hasClass('shown')
+
+    afterScrollToSpan: (el) ->
+        (el) -> el.effect('highlight', {}, 500)
 
     makeTipContent: (el) ->
         (api) =>
@@ -128,6 +141,9 @@ class @Annotatable
     createReplyLink: (discussion_id) ->
         $("<a class=\"annotatable-reply\" href=\"javascript:void(0);\" data-discussion-id=\"#{discussion_id}\">See Full Discussion</a>")
 
+    createReturnLink: (discussion_id) ->
+        $("<a class=\"annotatable-return button\" href=\"javascript:void(0);\" data-discussion-id=\"#{discussion_id}\">Return to annotation</a>")
+
     openSavedTips: () ->
         @showTips @savedTips
 

lms/templates/annotatable.html

@@ -4,10 +4,9 @@
 		  <div class="annotatable-title">${display_name} </div>
 		% endif
 		<div class="annotatable-description">
-				<div class="annotatable-help-icon"></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>
 				Annotated Reading + Guided Discussion<br/>
 				<a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
-				
 		</div>
 	</div>