Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style and behavior changes. Added return links to discussions.

Browse Source
This commit is contained in:
Arthur Barrett
2013-02-12 19:08:23 -05:00
parent 0c70d201f8
commit 6b5bf319c3
4 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
common/lib/xmodule/xmodule/annotatable_module.py
View File

@@ -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

26
common/lib/xmodule/xmodule/css/annotatable/display.scss
View File

@@ -1,13 +1,13 @@
.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);
}
}
}

54
common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
View File

@@ -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

3
lms/templates/annotatable.html
View File

@@ -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>