Skip to content

E
edx-platform
Commit a1448961 by Arthur Barrett
Options

Style and behavior changes to the header and tooltips.

parent 3a81ed06
Showing with 104 additions and 108 deletions
common/lib/xmodule/xmodule/annotatable_module.py
......@@ -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. """
......
common/lib/xmodule/xmodule/css/annotatable/display.scss
.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);
}
}
}
\ No newline at end of file
common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
......@@ -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) =>
@annotationsHidden = not @annotationsHidden
@toggleButtonText @annotationsHidden
@toggleSpans @annotationsHidden
@toggleTips @annotationsHidden
@toggleAnnotations()
onClickReply: (e) =>
hash = $(e.currentTarget).attr('href')
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()
@scrollTo(anchor)
anchor
toggleAnnotations: () ->
@annotationsHidden = not @annotationsHidden
@toggleButtonText @annotationsHidden
@toggleSpans @annotationsHidden
@toggleTips @annotationsHidden
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: () ->
......
lms/templates/annotatable.html
<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">
......
lms/templates/annotatable_discussion.html deleted 100644 → 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>
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