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

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.

Browse Source
This commit is contained in:
Arthur Barrett
2013-02-15 13:46:38 -05:00
parent 2848df8282
commit 24f519e32f
3 changed files with 37 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

6
lms/templates/annotatable.html
View File

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