diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 16e3f7a789..e0b6b4d76a 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -5,6 +5,9 @@ These are notable changes in edx-platform. This is a rolling list of changes, in roughly chronological order, most recent first. Add your entries at or near the top. Include a label indicating the component affected. +Blades: Put 2nd "Hide output" button at top of test box & increase text size for +code response questions. BLD-126. + Blades: Update the calculator hints tooltip with full information. BLD-400. Blades: Fix transcripts 500 error in studio (BLD-530) diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index bcab8dc4fa..ddf57e846d 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -726,21 +726,24 @@ section.problem { } a.full { - @include position(absolute, 0 0 1px 0); + @include position(absolute, 0 0px 1px 0px); @include box-sizing(border-box); display: block; padding: 4px; - width: 100%; background: #f3f3f3; text-align: right; - font-size: .8em; + font-size: 1em; + + &.full-top{ + @include position(absolute, 1px 0px auto 0px); + } } } } .external-grader-message { section { - padding-top: $baseline/2; + padding-top: ($baseline*1.5); padding-left: $baseline; background-color: #fafafa; color: #2c2c2c; diff --git a/common/lib/xmodule/xmodule/js/spec/collapsible.coffee b/common/lib/xmodule/xmodule/js/spec/collapsible.coffee new file mode 100644 index 0000000000..181d6b46c1 --- /dev/null +++ b/common/lib/xmodule/xmodule/js/spec/collapsible.coffee @@ -0,0 +1,115 @@ +describe 'Collapsible', -> + html = custom_labels = html_custom = el = undefined + + initialize = (template) => + setFixtures(template) + el = $('.collapsible') + Collapsible.setCollapsibles(el) + + disableFx = () => + $.fx.off = true + + enableFx = () => + $.fx.off = false + + beforeEach -> + html = ''' +
+
+ shortform message +
+
+

longform is visible

+
+
+ ''' + html_custom = ''' +
+
+ shortform message +
+
+

longform is visible

+
+
+ ''' + + describe 'setCollapsibles', -> + + it 'Default container initialized correctly', -> + initialize(html) + + expect(el.find('.shortform')).toContain '.full-top' + expect(el.find('.shortform')).toContain '.full-bottom' + expect(el.find('.longform')).toBeHidden() + expect(el.find('.full')).toHandle('click') + + it 'Custom container initialized correctly', -> + initialize(html_custom) + + expect(el.find('.shortform-custom')).toContain '.full-custom' + expect(el.find('.full-custom')).toHaveText "Show shortform-custom" + expect(el.find('.longform')).toBeHidden() + expect(el.find('.full-custom')).toHandle('click') + + describe 'toggleFull', -> + + beforeEach -> + disableFx() + + afterEach -> + enableFx() + + it 'Default container', -> + initialize(html) + + event = jQuery.Event('click', { + target: el.find('.full').get(0) + }) + + assertChanges = (state='closed') => + anchors = el.find('.full') + + if state is 'closed' + expect(el.find('.longform')).toBeHidden() + expect(el).not.toHaveClass('open') + text = "See full output" + else + expect(el.find('.longform')).toBeVisible() + expect(el).toHaveClass('open') + text = "Hide output" + + $.each anchors, (index, el) => + expect(el).toHaveText text + + Collapsible.toggleFull(event, "See full output", "Hide output") + assertChanges('opened') + Collapsible.toggleFull(event, "See full output", "Hide output") + assertChanges('closed') + + it 'Custom container', -> + initialize(html_custom) + + event = jQuery.Event('click', { + target: el.find('.full-custom').get(0) + }) + + assertChanges = (state='closed') => + anchors = el.find('.full-custom') + + if state is 'closed' + expect(el.find('.longform')).toBeHidden() + expect(el).not.toHaveClass('open') + text = "Show shortform-custom" + else + expect(el.find('.longform')).toBeVisible() + expect(el).toHaveClass('open') + text = "Hide shortform-custom" + + $.each anchors, (index, el) => + expect(el).toHaveText text + + Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom") + assertChanges('opened') + Collapsible.toggleFull(event, "Show shortform-custom", "Hide shortform-custom") + assertChanges('closed') diff --git a/common/lib/xmodule/xmodule/js/src/collapsible.coffee b/common/lib/xmodule/xmodule/js/src/collapsible.coffee index 2f6b2c9781..837231c482 100644 --- a/common/lib/xmodule/xmodule/js/src/collapsible.coffee +++ b/common/lib/xmodule/xmodule/js/src/collapsible.coffee @@ -1,7 +1,7 @@ class @Collapsible # Set of library functions that provide a simple way to add collapsible - # functionality to elements. + # functionality to elements. # setCollapsibles: # Scan element's content for generic collapsible containers @@ -9,12 +9,15 @@ class @Collapsible ### el: container ### + linkTop = 'See full output' + linkBottom = 'See full output' + # standard longform + shortfom pattern el.find('.longform').hide() - el.find('.shortform').append('See full output') + el.find('.shortform').append(linkTop, linkBottom) # custom longform + shortform text pattern - short_custom = el.find('.shortform-custom') + short_custom = el.find('.shortform-custom') # set up each one individually short_custom.each (index, elt) => open_text = $(elt).data('open-text') @@ -31,13 +34,18 @@ class @Collapsible @toggleFull: (event, open_text, close_text) => event.preventDefault() - $(event.target).parent().siblings().slideToggle() - $(event.target).parent().parent().toggleClass('open') + parent = $(event.target).parent() + parent.siblings().slideToggle() + parent.parent().toggleClass('open') if $(event.target).text() == open_text new_text = close_text else new_text = open_text - $(event.target).text(new_text) + if $(event.target).hasClass('full') + el = parent.find('.full') + else + el = $(event.target) + el.text(new_text) @toggleHint: (event) => event.preventDefault()