diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 4c0c4bc5a5..16e3f7a789 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -5,6 +5,8 @@ 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: Update the calculator hints tooltip with full information. BLD-400. + Blades: Fix transcripts 500 error in studio (BLD-530) Blades: Allow multiple strings as the correct answer to a string response question. BLD-474. diff --git a/lms/static/coffee/fixtures/calculator.html b/lms/static/coffee/fixtures/calculator.html index d0f7d3f652..17d163eb67 100644 --- a/lms/static/coffee/fixtures/calculator.html +++ b/lms/static/coffee/fixtures/calculator.html @@ -7,7 +7,7 @@
-
+
diff --git a/lms/static/coffee/spec/calculator_spec.coffee b/lms/static/coffee/spec/calculator_spec.coffee index 868e3f605d..8e41ebcb3b 100644 --- a/lms/static/coffee/spec/calculator_spec.coffee +++ b/lms/static/coffee/spec/calculator_spec.coffee @@ -55,11 +55,26 @@ describe 'Calculator', -> it 'show the help overlay', -> @calculator.helpShow() expect($('.help')).toHaveClass('shown') + expect($('.help')).toHaveAttr('aria-hidden', 'false') describe 'helpHide', -> it 'show the help overlay', -> @calculator.helpHide() expect($('.help')).not.toHaveClass('shown') + expect($('.help')).toHaveAttr('aria-hidden', 'true') + + describe 'handleKeyDown', -> + it 'on pressing Esc the hint becomes hidden', -> + @calculator.helpShow() + e = jQuery.Event('keydown', { which: 27 } ); + $(document).trigger(e); + expect($('.help')).not.toHaveClass 'shown' + + it 'On pressing other buttons the hint continue to show', -> + @calculator.helpShow() + e = jQuery.Event('keydown', { which: 32 } ); + $(document).trigger(e); + expect($('.help')).toHaveClass 'shown' describe 'calculate', -> beforeEach -> diff --git a/lms/static/coffee/src/calculator.coffee b/lms/static/coffee/src/calculator.coffee index e8cfea63f3..c54a235581 100644 --- a/lms/static/coffee/src/calculator.coffee +++ b/lms/static/coffee/src/calculator.coffee @@ -10,6 +10,9 @@ class @Calculator ) .click (e) -> e.preventDefault() + + $(document).keydown $.proxy(@handleKeyDown, @) + $('div.help-wrapper') .focusin($.proxy @helpOnFocus, @) .focusout($.proxy @helpOnBlur, @) @@ -24,14 +27,14 @@ class @Calculator $('div.calc-main').toggleClass 'open' if $calc.hasClass('closed') $calcWrapper - .find('input, a, dt, dd') + .find('input, a') .attr 'tabindex', -1 else text = gettext('Close Calculator') isExpanded = true $calcWrapper - .find('input, a, dt, dd') + .find('input, a,') .attr 'tabindex', 0 # TODO: Investigate why doing this without the timeout causes it to jump # down to the bottom of the page. I suspect it's because it's putting the @@ -57,13 +60,21 @@ class @Calculator @helpHide() helpShow: -> - $('.help').addClass 'shown' - $('#calculator_hint').attr 'aria-expanded', true + $('.help') + .addClass('shown') + .attr('aria-hidden', false) helpHide: -> if not @isFocusedHelp - $('.help').removeClass 'shown' - $('#calculator_hint').attr 'aria-expanded', false + $('.help') + .removeClass('shown') + .attr('aria-hidden', true) + + handleKeyDown: (e) -> + ESC = 27 + if e.which is ESC and $('.help').hasClass 'shown' + @isFocusedHelp = false + @helpHide() calculate: -> $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) -> diff --git a/lms/static/sass/course/layout/_calculator.scss b/lms/static/sass/course/layout/_calculator.scss index 02e32ffd4f..274d8a00c6 100644 --- a/lms/static/sass/course/layout/_calculator.scss +++ b/lms/static/sass/course/layout/_calculator.scss @@ -120,39 +120,48 @@ div.calc-main { display: block; } - dl { + .help { background: #fff; border-radius: 3px; box-shadow: 0 0 3px #999; color: #333; - opacity: 0; padding: 10px; position: absolute; right: -40px; - top: -122px; + bottom: 57px; @include transition(none); width: 600px; - height: 0; overflow: hidden; pointer-events: none; + display: none; &.shown { - height: auto; - opacity: 1; - overflow: visible; + display: block; pointer-events: auto; } - dt { - clear: both; - float: left; + .bold { font-weight: bold; - padding-right: 12px; } - dd { - float: left; - margin-left: 0; + p, p+p { + margin: 0; + } + + table { + margin: 10px 0; + + td, th { + padding: 2px 5px; + } + } + + .calc-postfixes { + margin: 10px auto; + + td, th { + padding: 2px 15px; + } } } } diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html index 9e3b19076b..80b52b9d36 100644 --- a/lms/templates/courseware/courseware.html +++ b/lms/templates/courseware/courseware.html @@ -218,24 +218,113 @@ ${fragment.foot_html()}
- -
-
${_("Suffixes:")}
-
%kMGTcmunp
-
${_("Operations:")}
-
^ * / + - ()
-
${_("Functions:")}
-
sin, cos, tan, sqrt, log10, log2, ln, arccos, arcsin, arctan, abs
-
${_("Constants")}
-
e, pi
- - -
+ ${_("Hints")} +
- +