diff --git a/lms/static/coffee/fixtures/calculator.html b/lms/static/coffee/fixtures/calculator.html index 92e5481d97..cfc87b98a2 100644 --- a/lms/static/coffee/fixtures/calculator.html +++ b/lms/static/coffee/fixtures/calculator.html @@ -1,29 +1,30 @@ - + diff --git a/lms/static/coffee/spec/calculator_spec.coffee b/lms/static/coffee/spec/calculator_spec.coffee index 40e4e646f5..91d69902e1 100644 --- a/lms/static/coffee/spec/calculator_spec.coffee +++ b/lms/static/coffee/spec/calculator_spec.coffee @@ -105,7 +105,7 @@ describe 'Calculator', -> expect(element.focus).toHaveBeenCalled() expect(@calculator.activeHint).toEqual(element) - expect(@calculator.hintPopup).toHaveAttr('aria-activedescendant', element.attr('id')) + expect(@calculator.hintPopup).toHaveAttr('data-calculator-hint', element.attr('id')) it 'select the first hint if argument element is not passed', -> @calculator.selectHint() diff --git a/lms/static/coffee/src/calculator.coffee b/lms/static/coffee/src/calculator.coffee index 3224aeb719..0c5f4795a6 100644 --- a/lms/static/coffee/src/calculator.coffee +++ b/lms/static/coffee/src/calculator.coffee @@ -14,13 +14,15 @@ class @Calculator constructor: -> @hintButton = $('#calculator_hint') + @calcInput = $('#calculator_input') @hintPopup = $('.help') @hintsList = @hintPopup.find('.hint-item') - @selectHint($('#' + @hintPopup.attr('aria-activedescendant'))); + @selectHint($('#' + @hintPopup.attr('data-calculator-hint'))); $('.calc').click @toggle $('form#calculator').submit(@calculate).submit (e) -> e.preventDefault() + @hintButton .click(($.proxy(@handleClickOnHintButton, @))) @@ -34,6 +36,9 @@ class @Calculator .keyup($.proxy(@handleKeyUpOnHint, @)) @handleClickOnDocument = $.proxy(@handleClickOnDocument, @) + + @calcInput + .focus(($.proxy(@inputClickHandler, @))) KEY: TAB : 9 @@ -51,21 +56,19 @@ class @Calculator $calcWrapper = $('#calculator_wrapper') text = gettext('Open Calculator') isExpanded = false - icon = 'fa-calculator' + icon = 'fa-calculator' - $('div.calc-main').toggleClass 'open' + $('.calc-main').toggleClass 'open' if $calc.hasClass('closed') $calcWrapper - .find('input, a') - .attr 'tabindex', -1 + .attr('aria-hidden', 'true') else text = gettext('Close Calculator') icon = 'fa-close' isExpanded = true $calcWrapper - .find('input, a') - .attr 'tabindex', 0 + .attr('aria-hidden', 'false') # 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 # focus on the text field before it transitions onto the page. @@ -84,12 +87,16 @@ class @Calculator .addClass(icon) $calc.toggleClass 'closed' + + inputClickHandler: -> + $('#calculator_output').removeClass('has-result') showHint: -> @hintPopup .addClass('shown') .attr('aria-hidden', false) + $('#calculator_output').removeClass('has-result') $(document).on('click', @handleClickOnDocument) @@ -97,6 +104,8 @@ class @Calculator @hintPopup .removeClass('shown') .attr('aria-hidden', true) + + $('#calculator_output').removeClass('has-result') $(document).off('click', @handleClickOnDocument) @@ -106,7 +115,7 @@ class @Calculator @activeHint = element; @activeHint.focus(); - @hintPopup.attr('aria-activedescendant', element.attr('id')); + @hintPopup.attr('data-calculator-hint', element.attr('id')); prevHint: () -> prev = @activeHint.prev(); # the previous hint @@ -211,4 +220,5 @@ class @Calculator $.getWithPrefix '/calculate', { equation: $('#calculator_input').val() }, (data) -> $('#calculator_output') .val(data.result) + .addClass('has-result') .focus() diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss index 38196f8a9f..6d40743005 100644 --- a/lms/static/sass/course/modules/_calculator.scss +++ b/lms/static/sass/course/modules/_calculator.scss @@ -70,12 +70,12 @@ } #calculator_button { - background: #111; - border: 1px solid $black; + background: $white; + border: 1px solid $white; border-radius: 0; box-shadow: none; @include box-sizing(border-box); - color: $white; + color: $black; float: left; font-size: 30px; font-weight: bold; @@ -87,7 +87,8 @@ width: flex-grid(.5) + flex-gutter(); &:hover, &:focus { - color: $link-color; + background: $blue-d2; + color: $white; } .calc-button-label { @@ -97,11 +98,11 @@ } #calculator_output { - background: #111; - border: 0; + background: $white; + border: 1px solid $white; box-shadow: none; @include box-sizing(border-box); - color: $white; + color: $black; float: left; font-size: 16px; font-weight: bold; @@ -109,6 +110,11 @@ padding: 10px; -webkit-appearance: none; width: flex-grid(4); + + &.has-result { + border: 1px solid $green-d1; + box-shadow: inset 0px 0px ($baseline/3) $green-d1; + } } .input-wrapper { diff --git a/lms/templates/calculator/toggle_calculator.html b/lms/templates/calculator/toggle_calculator.html index 756a5aae39..a3c4bbfd30 100644 --- a/lms/templates/calculator/toggle_calculator.html +++ b/lms/templates/calculator/toggle_calculator.html @@ -1,144 +1,157 @@ +<%page expression_filter="h"/> + <%! from django.utils.translation import ugettext as _ from django.core.urlresolvers import reverse +from openedx.core.djangolib.markup import HTML, Text %>
- + + +
+
+
+ + + +
+ + +
+
-
- -
- - - -
-

${_('Use the arrow keys to navigate the tips or use the tab key to return to the calculator')}

- - - - -
-
- - - - - -
-
+ + + +
+ + +