From 560aae0373b56d8fdb07a6496b8db37663c8765e Mon Sep 17 00:00:00 2001 From: "E. Kolpakov" Date: Thu, 28 Jul 2016 14:45:32 +0300 Subject: [PATCH] [SOL-1944] Keyboard help and reset in line with upcomin CAPA redesign (reimplemented edx-pattern-library classes) --- drag_and_drop_v2/public/css/drag_and_drop.css | 51 ++++++++---- drag_and_drop_v2/public/js/drag_and_drop.js | 81 +++++++++++-------- tests/integration/test_base.py | 4 +- tests/integration/test_render.py | 1 - 4 files changed, 84 insertions(+), 53 deletions(-) diff --git a/drag_and_drop_v2/public/css/drag_and_drop.css b/drag_and_drop_v2/public/css/drag_and_drop.css index 749675bbf..c011e5aec 100644 --- a/drag_and_drop_v2/public/css/drag_and_drop.css +++ b/drag_and_drop_v2/public/css/drag_and_drop.css @@ -367,30 +367,55 @@ color: #6b6969; } -/*** SUBMIT AND ATTEMPTS INFO ***/ - -.xblock--drag-and-drop .submit-answer { - margin-bottom: 4px; +.xblock--drag-and-drop .btn-small { + padding: 0.625rem 0.625rem; + font-size: 0.875rem; } -.xblock--drag-and-drop .submit-answer-button { - margin-right: 5px; +/*** ACTIONS TOOLBAR ***/ + +.xblock--drag-and-drop .actions-toolbar { + margin: 5px 0; } .xblock--drag-and-drop .attempts-used { + margin-left: 5px; font-size: 0.875rem; color: #666; } -/*** SIDEBAR BUTTONS ***/ +.xblock--drag-and-drop .sidebar-buttons { + float: right; + display: flex; +} -/*** KEYBOARD HELP ***/ +.xblock--drag-and-drop .sidebar-buttons .btn-brand { + display: inline-block; + padding: 3px 5px; + border-left: 1px solid #999; + border-collapse: collapse; +} + +.xblock--drag-and-drop .sidebar-buttons .btn-brand:first-child { + border-left: none; +} .xblock--drag-and-drop .keyboard-help { margin-top: 3px; margin-bottom: 6px; } +.xblock--drag-and-drop .btn-icon { + display: block; +} + +.xblock--drag-and-drop .reset-button { + margin-top: 3px; +} + +/*** ACTIONS TOOLBAR END ***/ + +/*** KEYBOARD HELP ***/ .xblock--drag-and-drop .keyboard-help-dialog { position: fixed; left: 50%; @@ -440,14 +465,7 @@ margin-left: 2%; } -/*** RESET ***/ - -.xblock--drag-and-drop .reset-button { - float: right; - margin-top: 3px; -} - -/*** SIDEBAR BUTTONS END **/ +/*** KEYBOARD HELP END ***/ .xblock--drag-and-drop .link-button { padding: 0; @@ -455,7 +473,6 @@ cursor: pointer; color: #2d74b3; font-weight: normal; - font-size: 12pt; background: none; box-shadow: none; border: none; diff --git a/drag_and_drop_v2/public/js/drag_and_drop.js b/drag_and_drop_v2/public/js/drag_and_drop.js index 7ebec3d49..4827dbf09 100644 --- a/drag_and_drop_v2/public/js/drag_and_drop.js +++ b/drag_and_drop_v2/public/js/drag_and_drop.js @@ -196,36 +196,25 @@ function DragAndDropTemplates(configuration) { ); }; - var keyboardHelpAndResetTemplate = function(ctx) { - var reset_button_display = ctx.display_reset_button ? 'block' : 'none'; - var dialog_attributes = { role: 'dialog', 'aria-labelledby': 'modal-window-title' }; - var dialog_style = {}; + var keyboardHelpPopupTemplate = function(ctx) { return ( - h('section.keyboard-help', [ - h('button.keyboard-help-button.unbutton.link-button', { attributes: { tabindex: 0 } }, gettext('Keyboard Help')), - h( - 'button.reset-button.unbutton.link-button', - { style: { display: reset_button_display }, attributes: { tabindex: 0 }, 'aria-live': 'off'}, - gettext('Reset problem') - ), - h('div.keyboard-help-dialog', [ - h('div.modal-window-overlay'), - h('div.modal-window', { attributes: dialog_attributes, style: dialog_style }, [ - h('div.modal-header', [ - h('h2.modal-window-title', gettext('Keyboard Help')) - ]), - h('div.modal-content', [ - h('p', gettext('You can complete this problem using only your keyboard.')), - h('ul', [ - h('li', gettext('Use "Tab" and "Shift-Tab" to navigate between items and zones.')), - h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" on an item to select it for dropping, then navigate to the zone you want to drop it on.')), - h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" to drop the item on the current zone.')), - h('li', gettext('Press "Esc" if you want to cancel the drop operation (for example, to select a different item).')), - ]) - ]), - h('div.modal-actions', [ - h('button.modal-dismiss-button', gettext("OK")) + h('div.keyboard-help-dialog', [ + h('div.modal-window-overlay'), + h('div.modal-window', { attributes: { role: 'dialog', 'aria-labelledby': 'modal-window-title' }, style: {} }, [ + h('div.modal-header', [ + h('h2.modal-window-title', gettext('Keyboard Help')) + ]), + h('div.modal-content', [ + h('p', gettext('You can complete this problem using only your keyboard.')), + h('ul', [ + h('li', gettext('Use "Tab" and "Shift-Tab" to navigate between items and zones.')), + h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" on an item to select it for dropping, then navigate to the zone you want to drop it on.')), + h('li', gettext('Press "Enter", "Space", "Ctrl-m", or "⌘-m" to drop the item on the current zone.')), + h('li', gettext('Press "Esc" if you want to cancel the drop operation (for example, to select a different item).')), ]) + ]), + h('div.modal-actions', [ + h('button.modal-dismiss-button', gettext("OK")) ]) ]) ]) @@ -238,7 +227,7 @@ function DragAndDropTemplates(configuration) { (ctx.max_attempts == 0 || ctx.max_attempts > ctx.num_attempts); return ( - h("div.submit-answer", {}, [ + h("section.submit-answer", {}, [ h("button.btn-brand.submit-answer-button", { disabled: !button_enabled}, gettext("Submit")), h( "span.attempts-used", {'style': {'display': attemptsUsedDisplay}}, @@ -247,7 +236,29 @@ function DragAndDropTemplates(configuration) { ) ]) ); - } + }; + + var sidebarTemplate = function(ctx) { + return( + h("section.sidebar-buttons", {}, [ + h( + 'button.unbutton.btn-brand.btn-small.keyboard-help-button.link-button', { attributes: { tabindex: 0 } }, + [ + h("i.btn-icon.fa.fa-question"), + gettext('Keyboard Help') + ] + ), + h( + 'button.unbutton.btn-brand..btn-small.reset-button.link-button', + { disabled: ctx.disable_reset_button, attributes: { tabindex: 0 }, 'aria-live': 'off'}, + [ + h("i.btn-icon.fa.fa-refresh"), + gettext('Reset') + ] + ) + ]) + ) + }; var mainTemplate = function(ctx) { var problemTitle = ctx.show_title ? h('h2.problem-title', {innerHTML: ctx.title_html}) : null; @@ -302,8 +313,12 @@ function DragAndDropTemplates(configuration) { renderCollection(itemTemplate, items_placed_unaligned, ctx) ]), ]), - keyboardHelpAndResetTemplate(ctx), - (ctx.show_submit_answer ? submitAnswerTemplate(ctx) : null), + h("section.actions-toolbar", {}, [ + sidebarTemplate(ctx), // sidebar has float:right, so putting it before the content to float + (ctx.show_submit_answer ? submitAnswerTemplate(ctx) : null) + ]), + h("div", {style: {clear: 'both'}}), // div to clear floating + keyboardHelpPopupTemplate(ctx), feedbackTemplate(ctx), ]) ); @@ -897,7 +912,7 @@ function DragAndDropBlock(runtime, element, configuration) { last_action_correct: state.last_action_correct, popup_html: state.feedback || '', feedback_html: $.trim(state.overall_feedback), - display_reset_button: Object.keys(state.items).length > 0, + disable_reset_button: Object.keys(state.items).length == 0, }; return renderView(context); diff --git a/tests/integration/test_base.py b/tests/integration/test_base.py index 71f27def7..ab71d1e8c 100644 --- a/tests/integration/test_base.py +++ b/tests/integration/test_base.py @@ -74,10 +74,10 @@ def _get_keyboard_help(self): return self._page.find_element_by_css_selector(".keyboard-help") def _get_keyboard_help_button(self): - return self._page.find_element_by_css_selector(".keyboard-help .keyboard-help-button") + return self._page.find_element_by_css_selector(".keyboard-help-button") def _get_keyboard_help_dialog(self): - return self._page.find_element_by_css_selector(".keyboard-help .keyboard-help-dialog") + return self._page.find_element_by_css_selector(".keyboard-help-dialog") def _get_reset_button(self): return self._page.find_element_by_css_selector('.reset-button') diff --git a/tests/integration/test_render.py b/tests/integration/test_render.py index 9d4460a90..b50276ceb 100644 --- a/tests/integration/test_render.py +++ b/tests/integration/test_render.py @@ -206,7 +206,6 @@ def test_popup(self): def test_keyboard_help(self): self.load_scenario() - self._get_keyboard_help() keyboard_help_button = self._get_keyboard_help_button() keyboard_help_dialog = self._get_keyboard_help_dialog() dialog_modal_overlay = keyboard_help_dialog.find_element_by_css_selector('.modal-window-overlay')