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

Style and behavior changes to the header and tooltips.

Browse Source
This commit is contained in:
Arthur Barrett
2013-02-11 16:17:34 -05:00
parent 3a81ed0651
commit a144896154
5 changed files with 104 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,9 +56,14 @@ class AnnotatableModule(XModule):
marker = self._get_marker_color(span)
if marker is not None:
cls.append('highlight-'+marker)
span.tag = 'div'
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'
def _decorate_comment(self, span, index, xmltree):
""" Sets the comment class. """

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

@@ -1,39 +1,38 @@
.annotatable-header {
border: 1px solid $border-color;
border-radius: 3px;
margin-bottom: 1em;
padding: 2px 4px;
position: relative;
.annotatable-title {
font-size: em(18);
font-size: em(20);
text-transform: uppercase;
padding: 2px 4px;
}
.annotatable-description {
font-size: $body-font-size;
position: relative;
font-size: em(14);
padding: 2px 4px;
border: 1px solid $border-color;
border-radius: 3px;
.annotatable-toggle { }
}
}
.annotatable-toggle {
display: block;
font-size: $body-font-size;
}
.annotatable-span {
display: inline;
cursor: pointer;
@each $highlight in (
(red rgba(178,19,16,0.3)),
(orange rgba(255,165,0,0.3)),
(yellow rgba(255,255,10,0.3)),
(green rgba(25,255,132,0.3)),
(blue rgba(35,163,255,0.3)),
(purple rgba(115,9,178,0.3))) {
(red rgba(178,19,16,0.3)), (orange rgba(255,165,0,0.3)),
(yellow rgba(255,255,10,0.3)), (green rgba(25,255,132,0.3)),
(blue rgba(35,163,255,0.3)), (purple rgba(115,9,178,0.3))) {
$marker: nth($highlight,1);
$color: nth($highlight,2);
@if $marker == yellow { &.highlight { background-color: $color; } }
@if $marker == yellow {
&.highlight { background-color: $color; }
}
&.highlight-#{$marker} { background-color: $color; }
}
&.hide {
cursor: none;
background-color: inherit;
@@ -45,14 +44,6 @@
.annotatable-comment {
display: none;
}
.annotatable-icon {
margin: auto 2px auto 4px;
}
}
.annotatable-reply {
display: block;
margin-bottom: 10px;
}
.annotatable-help-icon {
@@ -67,31 +58,21 @@
}
.ui-tooltip.qtip.ui-tooltip-annotatable {
$color: #fff;
$background: rgba(0,0,0,.85);
$border-radius: 1em;
border: 1px solid #333;
border-radius: 1em;
background-color: rgba(0,0,0,.85);
color: #fff;
-webkit-font-smoothing: antialiased;
.ui-tooltip-titlebar {
color: $color;
background: $background;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-top: 1px solid #333;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
color: inherit;
background-color: transparent;
padding: 5px 10px;
border: none;
.ui-tooltip-title {
margin-right: 25px;
padding: 5px 0px;
border-bottom: 2px solid #333;
font-weight: bold;
&:before {
font-weight: normal;
content: "Guided Discussion: "
}
}
.ui-tooltip-icon {
right: 10px;
@@ -103,39 +84,47 @@
}
}
.ui-tooltip-content {
color: $color;
background: $background;
color: inherit;
background-color: transparent;
text-align: left;
font-weight: 400;
font-size: 11px;
padding: 0 10px;
max-width: 300px;
max-height: 300px;
border: none;
border-bottom-left-radius: $border-radius;
border-bottom-right-radius: $border-radius;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
overflow: auto;
}
p { color: inherit; }
}
.ui-tooltip.qtip.ui-tooltip-annotatable-comment {
max-width: 350px;
.ui-tooltip-title:before {
font-weight: normal;
content: "Guided Discussion: ";
}
.ui-tooltip-content {
.annotatable-comment {
display: block;
margin: 0px 0px 10px 0;
max-height: 200px;
overflow: hidden;
}
}
p { color: $color }
.annotatable-reply {
display: block;
border-top: 2px solid #333;
padding: 5px 0;
margin: 0;
text-align: center;
}
}
&:after {
content: ' ';
display: block;
content: '';
display: inline-block;
position: absolute;
bottom: -14px;
bottom: -20px;
left: 50%;
height: 0;
width: 0;
margin-left: -7px;
margin-left: -5px;
border: 10px solid transparent;
border-top-color: rgba(0, 0, 0, .85);
}
}
}

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

@@ -32,64 +32,65 @@ class @Annotatable
position:
my: 'right top'
at: 'bottom left'
container: @$(@wrapperSelector)
content:
title: 'Annotated Reading Help'
text: "To reveal annotations in the reading, click the highlighted areas.
Discuss the annotations in the forums using the reply link at the
end of the annotation.<br/><br/>
To conceal annotations, use the <i>Hide Annotations</i> button."
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'
getTipOptions: (el) ->
content:
title:
text: @makeTipTitle(el)
button: 'Close'
text: @makeTipContent(el)
position:
my: 'bottom center' # of tooltip
at: 'top center' # of target
target: 'mouse'
container: @$(@wrapperSelector)
viewport: true,
adjust:
method: 'none shift'
mouse: false # dont follow the mouse
y: -10
show:
event: 'click'
event: 'mouseenter'
solo: true
hide:
event: 'click'
event: 'unfocus'
style:
classes: 'ui-tooltip-annotatable'
classes: 'ui-tooltip-annotatable ui-tooltip-annotatable-comment'
events:
render: @onRenderTip
show: @onShowTip
onRenderTip: (event, api) =>
$(api.elements.tooltip).draggable
handle: '.ui-tooltip-title'
cursor: 'move'
onShowTip: (event, api) =>
event.preventDefault() if @annotationsHidden
onClickToggleAnnotations: (e) =>
@toggleAnnotations()
onClickReply: (e) =>
e.preventDefault()
anchorEl = @getAnchorByName e.currentTarget
@scrollTo anchorEl if anchorEl
getAnchorByName: (el) ->
hash = $(el).attr('href')
if hash?.charAt(0) == '#'
name = hash.substr(1)
anchor = $("a[name='#{name}']").first()
anchor
toggleAnnotations: () ->
@annotationsHidden = not @annotationsHidden
@toggleButtonText @annotationsHidden
@toggleSpans @annotationsHidden
@toggleTips @annotationsHidden
onClickReply: (e) =>
hash = $(e.currentTarget).attr('href')
if hash?.charAt(0) == '#'
name = hash.substr(1)
anchor = $("a[name='#{name}']").first()
@scrollTo(anchor)
toggleTips: (hide) ->
if hide
@closeAndSaveTips()
else
@openSavedTips()
if hide then @closeAndSaveTips() else @openSavedTips()
toggleButtonText: (hide) ->
buttonText = (if hide then 'Show' else 'Hide')+' Annotations'
@@ -99,16 +100,19 @@ class @Annotatable
@$(@spanSelector).toggleClass 'hide', hide
scrollTo: (el) ->
options =
duration: 500
onAfter: @_once -> el.effect 'highlight', {}, 2000
$('html,body').scrollTo(el, options)
$('html,body').scrollTo(el, {
duration: 500,
onAfter: @makeAfterScroll(el)
})
makeAfterScroll: (el, duration = 2000) ->
@_once -> el.effect 'highlight', {}, duration
makeTipContent: (el) ->
(api) =>
anchor = $(el).data('discussion-anchor')
comment = $(@commentSelector, el).first().clone()
comment = comment.after(@createReplyLink(anchor)) if anchor
comment = comment.after(@createReplyLink anchor) if anchor
comment
makeTipTitle: (el) ->
@@ -116,11 +120,11 @@ class @Annotatable
comment = $(@commentSelector, el).first()
title = comment.attr('title')
(if title then title else 'Commentary')
createReplyLink: (anchor) ->
cls = 'annotatable-reply'
href = '#' + anchor
text = 'Reply to this comment'
text = 'See Full Discussion'
$("<a class=\"#{cls}\" href=\"#{href}\">#{text}</a>")
openSavedTips: () ->

9
lms/templates/annotatable.html
View File

@@ -1,11 +1,14 @@
<div class="annotatable-wrapper" id="${element_id}-wrapper">
<div class="annotatable-header">
<div class="annotatable-help-icon"></div>
% if display_name is not UNDEFINED and display_name is not None:
<div class="annotatable-title">${display_name} </div>
% endif
<div class="annotatable-description">Annotated Reading + Guided Discussion</div>
<a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
<div class="annotatable-description">
<div class="annotatable-help-icon"></div>
Annotated Reading + Guided Discussion<br/>
<a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
</div>
</div>
<div class="annotatable-content">

6
lms/templates/annotatable_discussion.html
View File

@@ -1,6 +0,0 @@
<div class="annotatable-discussion" data-discussion-id="${discussion_id}">
<div class="annotatable-icon"> </div>
<span class="annotatable-discussion-label">Guided Discussion: </span>
<span class="annotatable-discussion-thread">${discussion_title}</span>
<a class="annotatable-show-discussion" href="javascript:void(0);">Show Discussion</a>
</div>