Skip to content

E
edx-platform
Commit 6b5bf319 by Arthur Barrett
Options

Style and behavior changes. Added return links to discussions.

parent 0c70d201
Showing with 56 additions and 42 deletions
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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment