From 1f160d6ef4659bc1a6b0ac0f19424c53aae55616 Mon Sep 17 00:00:00 2001 From: Arthur Barrett Date: Mon, 25 Feb 2013 16:29:19 -0500 Subject: [PATCH] added a box around the instructions text --- .../lib/xmodule/xmodule/annotatable_module.py | 35 ++++++++----------- .../xmodule/css/annotatable/display.scss | 24 +++++++++---- .../xmodule/js/src/annotatable/display.coffee | 10 +++--- .../xmodule/tests/test_annotatable_module.py | 7 ++++ lms/templates/annotatable.html | 17 +++++---- 5 files changed, 56 insertions(+), 37 deletions(-) create mode 100644 common/lib/xmodule/xmodule/tests/test_annotatable_module.py diff --git a/common/lib/xmodule/xmodule/annotatable_module.py b/common/lib/xmodule/xmodule/annotatable_module.py index 7ed0906c00..7a0adc0bf2 100644 --- a/common/lib/xmodule/xmodule/annotatable_module.py +++ b/common/lib/xmodule/xmodule/annotatable_module.py @@ -12,7 +12,6 @@ from xmodule.contentstore.content import StaticContent log = logging.getLogger(__name__) class AnnotatableModule(XModule): - # Note: js and css in common/lib/xmodule/xmodule js = {'coffee': [resource_string(__name__, 'js/src/javascript_loader.coffee'), resource_string(__name__, 'js/src/collapsible.coffee'), resource_string(__name__, 'js/src/html/display.coffee'), @@ -77,22 +76,32 @@ class AnnotatableModule(XModule): attr = {} attr.update(self._get_annotation_class_attr(index, el)) attr.update(self._get_annotation_data_attr(index, el)) + for key in attr.keys(): el.set(key, attr[key]['value']) - if '_delete' in attr[key]: + if '_delete' in attr[key] and attr[key]['_delete'] is not None: delete_key = attr[key]['_delete'] del el.attrib[delete_key] + index += 1 return etree.tostring(xmltree, encoding='unicode') + def _extract_instructions(self, xmltree): + """ Removes from the xmltree and returns them as a string, otherwise None. """ + instructions = xmltree.find('instructions') + if instructions is not None: + instructions.tag = 'div' + xmltree.remove(instructions) + return etree.tostring(instructions, encoding='unicode') + return None + def get_html(self): """ Renders parameters to template. """ context = { 'display_name': self.display_name, 'element_id': self.element_id, - 'discussion_id': self.discussion_id, - 'instructions_html': self.instructions_html, + 'instructions_html': self.instructions, 'content_html': self._render_content() } @@ -103,25 +112,11 @@ class AnnotatableModule(XModule): XModule.__init__(self, system, location, definition, descriptor, instance_state, shared_state, **kwargs) - self.element_id = self.location.html_id() - xmltree = etree.fromstring(self.definition['data']) - # extract discussion id - self.discussion_id = xmltree.get('discussion', '') - del xmltree.attrib['discussion'] - - # extract instructions text (if any) - instructions = xmltree.find('instructions') - instructions_html = None - if instructions is not None: - instructions.tag = 'div' - instructions_html = etree.tostring(instructions, encoding='unicode') - xmltree.remove(instructions) - self.instructions_html = instructions_html - - # everything else is annotatable content + self.instructions = self._extract_instructions(xmltree) self.content = etree.tostring(xmltree, encoding='unicode') + self.element_id = self.location.html_id() class AnnotatableDescriptor(RawDescriptor): module_class = AnnotatableModule diff --git a/common/lib/xmodule/xmodule/css/annotatable/display.scss b/common/lib/xmodule/xmodule/css/annotatable/display.scss index 2870ba990f..eef4ab28b7 100644 --- a/common/lib/xmodule/xmodule/css/annotatable/display.scss +++ b/common/lib/xmodule/xmodule/css/annotatable/display.scss @@ -7,19 +7,29 @@ } } -.annotatable-description { +.annotatable-section { position: relative; - padding: 2px 4px; + padding: .5em 1em; border: 1px solid $border-color; - border-radius: 3px; + border-radius: .5em; margin-bottom: .5em; - .annotatable-toggle { - position: absolute; - right: 0; - margin: 2px 7px 2px 0; + + .annotatable-section-title {} + .annotatable-section-body { + border-top: 1px solid $border-color; + margin-top: .5em; + padding-top: .5em; } } +.annotatable-toggle { + position: absolute; + right: 0; + margin: 2px 1em 2px 0; + &.expanded:after { content: " \2191" } + &.collapsed:after { content: " \2193" } +} + .annotatable-span { display: inline; cursor: pointer; diff --git a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee index 43d0536d32..bb4ddf5404 100644 --- a/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee +++ b/common/lib/xmodule/xmodule/js/src/annotatable/display.coffee @@ -5,6 +5,7 @@ class @Annotatable toggleAnnotationsSelector: '.annotatable-toggle-annotations' toggleInstructionsSelector: '.annotatable-toggle-instructions' instructionsSelector: '.annotatable-instructions' + sectionSelector: '.annotatable-section' spanSelector: '.annotatable-span' replySelector: '.annotatable-reply' @@ -109,12 +110,13 @@ class @Annotatable toggleInstructions: () -> hide = (@instructionsHidden = not @instructionsHidden) - @toggleInstructionsButtonText hide + @toggleInstructionsButton hide @toggleInstructionsText hide - toggleInstructionsButtonText: (hide) -> - buttonText = (if hide then 'Show' else 'Hide')+' Instructions' - @$(@toggleInstructionsSelector).text(buttonText) + toggleInstructionsButton: (hide) -> + txt = (if hide then 'Expand' else 'Collapse')+' Instructions' + cls = (if hide then ['expanded', 'collapsed'] else ['collapsed','expanded']) + @$(@toggleInstructionsSelector).text(txt).removeClass(cls[0]).addClass(cls[1]) toggleInstructionsText: (hide) -> @$(@instructionsSelector)[if hide then 'slideUp' else 'slideDown']() diff --git a/common/lib/xmodule/xmodule/tests/test_annotatable_module.py b/common/lib/xmodule/xmodule/tests/test_annotatable_module.py new file mode 100644 index 0000000000..5d270d2350 --- /dev/null +++ b/common/lib/xmodule/xmodule/tests/test_annotatable_module.py @@ -0,0 +1,7 @@ +"""Module annotatable tests""" + +import unittest +from xmodule import annotatable + +class AnnotatableModuleTestCase(unittest.TestCase): + diff --git a/lms/templates/annotatable.html b/lms/templates/annotatable.html index ca7413adec..abefe77f1b 100644 --- a/lms/templates/annotatable.html +++ b/lms/templates/annotatable.html @@ -1,4 +1,4 @@ -
+
% if display_name is not UNDEFINED and display_name is not None:
${display_name}
@@ -6,16 +6,21 @@
% if instructions_html is not UNDEFINED and instructions_html is not None: -
- Instructions - Hide Instructions +
+
+ Instructions + Collapse Instructions +
+
+ ${instructions_html} +
-
${instructions_html}
% endif -
+
Guided Discussion Hide Annotations
+
${content_html}