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 97 additions and 102 deletions
common/lib/xmodule/xmodule/annotatable_module.py
...@@ -57,8 +57,13 @@ class AnnotatableModule(XModule): ...@@ -57,8 +57,13 @@ class AnnotatableModule(XModule):
if marker is not None: if marker is not None:
cls.append('highlight-'+marker) 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.set('class', ' '.join(cls))
span.tag = 'div'
def _decorate_comment(self, span, index, xmltree): def _decorate_comment(self, span, index, xmltree):
""" Sets the comment class. """ """ Sets the comment class. """
......
common/lib/xmodule/xmodule/css/annotatable/display.scss
.annotatable-header { .annotatable-header {
border: 1px solid $border-color;
border-radius: 3px;
margin-bottom: 1em; margin-bottom: 1em;
padding: 2px 4px;
position: relative;
.annotatable-title { .annotatable-title {
font-size: em(18); font-size: em(20);
text-transform: uppercase; text-transform: uppercase;
padding: 2px 4px;
} }
.annotatable-description { .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 { .annotatable-span {
display: inline; display: inline;
cursor: pointer; cursor: pointer;
@each $highlight in ( @each $highlight in (
(red rgba(178,19,16,0.3)), (red rgba(178,19,16,0.3)), (orange rgba(255,165,0,0.3)),
(orange rgba(255,165,0,0.3)), (yellow rgba(255,255,10,0.3)), (green rgba(25,255,132,0.3)),
(yellow rgba(255,255,10,0.3)), (blue rgba(35,163,255,0.3)), (purple rgba(115,9,178,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); $marker: nth($highlight,1);
$color: nth($highlight,2); $color: nth($highlight,2);
@if $marker == yellow { &.highlight { background-color: $color; } }
@if $marker == yellow {
&.highlight { background-color: $color; }
}
&.highlight-#{$marker} { background-color: $color; } &.highlight-#{$marker} { background-color: $color; }
} }
&.hide { &.hide {
cursor: none; cursor: none;
background-color: inherit; background-color: inherit;
...@@ -45,14 +44,6 @@ ...@@ -45,14 +44,6 @@
.annotatable-comment { .annotatable-comment {
display: none; display: none;
} }
.annotatable-icon {
margin: auto 2px auto 4px;
}
}
.annotatable-reply {
display: block;
margin-bottom: 10px;
} }
.annotatable-help-icon { .annotatable-help-icon {
...@@ -67,31 +58,21 @@ ...@@ -67,31 +58,21 @@
} }
.ui-tooltip.qtip.ui-tooltip-annotatable { .ui-tooltip.qtip.ui-tooltip-annotatable {
$color: #fff; border: 1px solid #333;
$background: rgba(0,0,0,.85); border-radius: 1em;
$border-radius: 1em; background-color: rgba(0,0,0,.85);
color: #fff;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
.ui-tooltip-titlebar { .ui-tooltip-titlebar {
color: $color; color: inherit;
background: $background; background-color: transparent;
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;
padding: 5px 10px; padding: 5px 10px;
border: none;
.ui-tooltip-title { .ui-tooltip-title {
margin-right: 25px;
padding: 5px 0px; padding: 5px 0px;
border-bottom: 2px solid #333; border-bottom: 2px solid #333;
font-weight: bold; font-weight: bold;
&:before {
font-weight: normal;
content: "Guided Discussion: "
}
} }
.ui-tooltip-icon { .ui-tooltip-icon {
right: 10px; right: 10px;
...@@ -103,38 +84,46 @@ ...@@ -103,38 +84,46 @@
} }
} }
.ui-tooltip-content { .ui-tooltip-content {
color: $color; color: inherit;
background: $background; background-color: transparent;
text-align: left; text-align: left;
font-weight: 400; font-weight: 400;
font-size: 11px; font-size: 11px;
padding: 0 10px; padding: 0 10px;
max-width: 300px; }
max-height: 300px; p { color: inherit; }
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;
.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 { .annotatable-comment {
display: block; display: block;
margin: 0px 0px 10px 0; margin: 0px 0px 10px 0;
max-height: 200px;
overflow: hidden;
}
.annotatable-reply {
display: block;
border-top: 2px solid #333;
padding: 5px 0;
margin: 0;
text-align: center;
} }
} }
p { color: $color }
&:after { &:after {
content: ' '; content: '';
display: block; display: inline-block;
position: absolute; position: absolute;
bottom: -14px; bottom: -20px;
left: 50%; left: 50%;
height: 0; height: 0;
width: 0; width: 0;
margin-left: -7px; margin-left: -5px;
border: 10px solid transparent; border: 10px solid transparent;
border-top-color: rgba(0, 0, 0, .85); border-top-color: rgba(0, 0, 0, .85);
} }
......
common/lib/xmodule/xmodule/js/src/annotatable/display.coffee
...@@ -32,64 +32,65 @@ class @Annotatable ...@@ -32,64 +32,65 @@ class @Annotatable
position: position:
my: 'right top' my: 'right top'
at: 'bottom left' at: 'bottom left'
container: @$(@wrapperSelector)
content: content:
title: 'Annotated Reading Help' title: 'Annotated Reading Help'
text: "To reveal annotations in the reading, click the highlighted areas. text: "Move your cursor over the highlighted areas to display annotations.
Discuss the annotations in the forums using the reply link at the Discuss the annotations in the forums using the link at the
end of the annotation.<br/><br/> bottom of the annotation. You may hide annotations at any time by
To conceal annotations, use the <i>Hide Annotations</i> button." using the button at the top of the section."
style:
classes: 'ui-tooltip-annotatable'
getTipOptions: (el) -> getTipOptions: (el) ->
content: content:
title: title:
text: @makeTipTitle(el) text: @makeTipTitle(el)
button: 'Close'
text: @makeTipContent(el) text: @makeTipContent(el)
position: position:
my: 'bottom center' # of tooltip my: 'bottom center' # of tooltip
at: 'top center' # of target at: 'top center' # of target
target: 'mouse' target: 'mouse'
container: @$(@wrapperSelector) container: @$(@wrapperSelector)
viewport: true,
adjust: adjust:
method: 'none shift'
mouse: false # dont follow the mouse mouse: false # dont follow the mouse
y: -10
show: show:
event: 'click' event: 'mouseenter'
solo: true
hide: hide:
event: 'click' event: 'unfocus'
style: style:
classes: 'ui-tooltip-annotatable' classes: 'ui-tooltip-annotatable ui-tooltip-annotatable-comment'
events: events:
render: @onRenderTip
show: @onShowTip show: @onShowTip
onRenderTip: (event, api) =>
$(api.elements.tooltip).draggable
handle: '.ui-tooltip-title'
cursor: 'move'
onShowTip: (event, api) => onShowTip: (event, api) =>
event.preventDefault() if @annotationsHidden event.preventDefault() if @annotationsHidden
onClickToggleAnnotations: (e) => onClickToggleAnnotations: (e) =>
@annotationsHidden = not @annotationsHidden @toggleAnnotations()
@toggleButtonText @annotationsHidden
@toggleSpans @annotationsHidden
@toggleTips @annotationsHidden
onClickReply: (e) => 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) == '#' if hash?.charAt(0) == '#'
name = hash.substr(1) name = hash.substr(1)
anchor = $("a[name='#{name}']").first() anchor = $("a[name='#{name}']").first()
@scrollTo(anchor) anchor
toggleAnnotations: () ->
@annotationsHidden = not @annotationsHidden
@toggleButtonText @annotationsHidden
@toggleSpans @annotationsHidden
@toggleTips @annotationsHidden
toggleTips: (hide) -> toggleTips: (hide) ->
if hide if hide then @closeAndSaveTips() else @openSavedTips()
@closeAndSaveTips()
else
@openSavedTips()
toggleButtonText: (hide) -> toggleButtonText: (hide) ->
buttonText = (if hide then 'Show' else 'Hide')+' Annotations' buttonText = (if hide then 'Show' else 'Hide')+' Annotations'
...@@ -99,16 +100,19 @@ class @Annotatable ...@@ -99,16 +100,19 @@ class @Annotatable
@$(@spanSelector).toggleClass 'hide', hide @$(@spanSelector).toggleClass 'hide', hide
scrollTo: (el) -> scrollTo: (el) ->
options = $('html,body').scrollTo(el, {
duration: 500 duration: 500,
onAfter: @_once -> el.effect 'highlight', {}, 2000 onAfter: @makeAfterScroll(el)
$('html,body').scrollTo(el, options) })
makeAfterScroll: (el, duration = 2000) ->
@_once -> el.effect 'highlight', {}, duration
makeTipContent: (el) -> makeTipContent: (el) ->
(api) => (api) =>
anchor = $(el).data('discussion-anchor') anchor = $(el).data('discussion-anchor')
comment = $(@commentSelector, el).first().clone() comment = $(@commentSelector, el).first().clone()
comment = comment.after(@createReplyLink(anchor)) if anchor comment = comment.after(@createReplyLink anchor) if anchor
comment comment
makeTipTitle: (el) -> makeTipTitle: (el) ->
...@@ -120,7 +124,7 @@ class @Annotatable ...@@ -120,7 +124,7 @@ class @Annotatable
createReplyLink: (anchor) -> createReplyLink: (anchor) ->
cls = 'annotatable-reply' cls = 'annotatable-reply'
href = '#' + anchor href = '#' + anchor
text = 'Reply to this comment' text = 'See Full Discussion'
$("<a class=\"#{cls}\" href=\"#{href}\">#{text}</a>") $("<a class=\"#{cls}\" href=\"#{href}\">#{text}</a>")
openSavedTips: () -> openSavedTips: () ->
......
lms/templates/annotatable.html
<div class="annotatable-wrapper" id="${element_id}-wrapper"> <div class="annotatable-wrapper" id="${element_id}-wrapper">
<div class="annotatable-header"> <div class="annotatable-header">
<div class="annotatable-help-icon"></div>
% if display_name is not UNDEFINED and display_name is not None: % if display_name is not UNDEFINED and display_name is not None:
<div class="annotatable-title">${display_name} </div> <div class="annotatable-title">${display_name} </div>
% endif % endif
<div class="annotatable-description">Annotated Reading + Guided Discussion</div> <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> <a href="javascript:void(0)" class="annotatable-toggle">Hide Annotations</a>
</div>
</div> </div>
<div class="annotatable-content"> <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