Skip to content

Commit

Permalink
[SOL-1944] Keyboard help and reset in line with upcomin CAPA redesign…
Browse files Browse the repository at this point in the history 
… (reimplemented edx-pattern-library classes)
  • Loading branch information
E. Kolpakov committed Aug 1, 2016
1 parent 813e70e commit 560aae0
Show file tree
Hide file tree
Showing 4 changed files with 84 additions and 53 deletions.
51 changes: 34 additions & 17 deletions drag_and_drop_v2/public/css/drag_and_drop.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -440,22 +465,14 @@
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;
margin: 0;
cursor: pointer;
color: #2d74b3;
font-weight: normal;
font-size: 12pt;
background: none;
box-shadow: none;
border: none;
Expand Down
81 changes: 48 additions & 33 deletions drag_and_drop_v2/public/js/drag_and_drop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"))
])
])
])
Expand All @@ -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}},
Expand All @@ -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;
Expand Down Expand Up @@ -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),
])
);
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 2 additions & 2 deletions tests/integration/test_base.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down
1 change: 0 additions & 1 deletion tests/integration/test_render.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down

0 comments on commit 560aae0

Please sign in to comment.