diff --git a/common/lib/xmodule/xmodule/annotatable_module.py b/common/lib/xmodule/xmodule/annotatable_module.py index a96dd22f3e..92ba987256 100644 --- a/common/lib/xmodule/xmodule/annotatable_module.py +++ b/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. """ diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss index bfd5f8567c..796c204c0b 100644 --- a/common/lib/xmodule/xmodule/css/annotatable/display.scss +++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss @@ -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); } -} +} \ No newline at end of file diff --git a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee index 60d8e9e9e4..dc580125d8 100644 --- a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee +++ b/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.

- To conceal annotations, use the Hide Annotations 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' $("#{text}") openSavedTips: () -> diff --git a/lms/templates/annotatable.html b/lms/templates/annotatable.html index 1cb40a0068..8f379c7007 100644 --- a/lms/templates/annotatable.html +++ b/lms/templates/annotatable.html @@ -1,11 +1,14 @@
-
% if display_name is not UNDEFINED and display_name is not None:
${display_name}
% endif -
Annotated Reading + Guided Discussion
- Hide Annotations +
+
+ Annotated Reading + Guided Discussion
+ Hide Annotations + +
diff --git a/lms/templates/annotatable_discussion.html b/lms/templates/annotatable_discussion.html deleted file mode 100644 index 1525cc7b6b..0000000000 --- a/lms/templates/annotatable_discussion.html +++ /dev/null @@ -1,6 +0,0 @@ -
-
- Guided Discussion: - ${discussion_title} - Show Discussion -