mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-01-19 06:18:28 +01:00
Code Issues Projects Releases Wiki Activity

MDL-72385 tool_usertours: Improve and simplify design of user tours

Browse Source
This commit is contained in:
Huong Nguyen 2021-10-04 11:09:02 +07:00
parent e5894c0455
commit b3df2aba62
10 changed files with 52 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/tool/usertours/amd/build/tour.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
admin/tool/usertours/amd/build/tour.min.js.map
View File

File diff suppressed because one or more lines are too long

35
admin/tool/usertours/amd/src/tour.js
View File

@ -83,7 +83,8 @@ const Tour = class {
}
prefetchStrings('tool_usertours', [
'nextstep_sequence'
'nextstep_sequence',
'skip_tour'
]);
return this;
@ -321,19 +322,6 @@ const Tour = class {
return nextStepNumber === null;
}
/**
* Is the step the first step number?
*
* @method isFirstStep
* @param {Number} stepNumber Step number to test
* @return {Boolean} Whether the step is the first step
*/
isFirstStep(stepNumber) {
let previousStepNumber = this.getPreviousStepNumber(stepNumber);
return previousStepNumber === null;
}
/**
* Is this step potentially visible?
*
@ -603,13 +591,10 @@ const Tour = class {
*/
processStepListeners(stepConfig) {
this.listeners.push(
// Next/Previous buttons.
// Next button.
{
node: this.currentStepNode,
args: ['click', '[data-role="next"]', $.proxy(this.next, this)]
}, {
node: this.currentStepNode,
args: ['click', '[data-role="previous"]', $.proxy(this.previous, this)]
},
// Close and end tour buttons.
@ -695,25 +680,21 @@ const Tour = class {
// Buttons.
const nextBtn = template.find('[data-role="next"]');
const previousBtn = template.find('[data-role="previous"]');
const endBtn = template.find('[data-role="end"]');
// Is this the first step?
if (this.isFirstStep(stepConfig.stepNumber)) {
previousBtn.hide();
} else {
previousBtn.prop('disabled', false);
}
// Is this the final step?
if (this.isLastStep(stepConfig.stepNumber)) {
nextBtn.hide();
endBtn.removeClass("btn-secondary").addClass("btn-primary");
} else {
nextBtn.prop('disabled', false);
// Use Skip tour label for the End tour button.
getString('skip_tour', 'tool_usertours').then(value => {
endBtn.html(value);
return;
}).catch();
}
previousBtn.attr('role', 'button');
nextBtn.attr('role', 'button');
endBtn.attr('role', 'button');

1
admin/tool/usertours/lang/en/deprecated.txt Normal file
View File

@ -0,0 +1 @@
previousstep,tool_usertours

5
admin/tool/usertours/lang/en/tool_usertours.php
View File

@ -108,7 +108,6 @@ If you wish to display a tour on the Site Home page, you can use the value: "FRO
';
$string['placement'] = 'Placement';
$string['pluginname'] = 'User tours';
$string['previousstep'] = 'Previous';
$string['resettouronpage'] = 'Reset user tour on this page';
$string['right'] = 'Right';
$string['select_block'] = 'Select a block';
@ -120,6 +119,7 @@ $string['targettype_help'] = 'Each step is associated with a part of the page -
$string['selector_defaulttitle'] = 'Enter a descriptive title';
$string['selectordisplayname'] = 'A CSS selector matching \'{$a}\'';
$string['skip'] = 'Skip';
$string['skip_tour'] = 'Skip tour';
$string['target'] = 'Target';
$string['target_heading'] = 'Step target';
$string['target_block'] = 'Block';
@ -256,3 +256,6 @@ $string['tour_activityinfo_course_teacher_content'] = 'New course settings \'Sho
$string['tour_final_step_title'] = 'End of tour';
$string['tour_final_step_content'] = 'This is the end of your user tour. It won\'t show again unless you reset it using the link in the footer.';
// Deprecated since Moodle 4.0.
$string['previousstep'] = 'Previous';

13
admin/tool/usertours/styles.css
View File

@ -6,6 +6,19 @@ div[data-flexitour="backdrop"] {
left: 0;
}
span[data-flexitour="container"] .modal-dialog {
max-width: 400px;
}
span[data-flexitour="container"] .modal-dialog .modal-content .modal-header {
border-bottom: 0;
}
span[data-flexitour="container"] .modal-dialog .modal-content .modal-footer {
justify-content: flex-start;
border-top: 0;
}
span[data-flexitour="container"].orphan {
position: absolute;
}

5
admin/tool/usertours/templates/tourstep.mustache
View File

@ -58,15 +58,10 @@
<div class="tooltip-arrow" data-role="arrow"></div>
<div class="modal-header">
<h5 class="modal-title" data-placeholder="title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-role="end">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" data-placeholder="body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-role="previous">{{# str }} previousstep, tool_usertours {{/ str }}</button>
<button type="button" class="btn btn-primary" data-role="next">{{# str }} nextstep, tool_usertours {{/ str }}</button>
<button class="btn btn-secondary" data-role="end"> {{endtourlabel}} </button>
</div>

21
admin/tool/usertours/tests/behat/create_tour.feature
View File

@ -33,10 +33,7 @@ Feature: Add a new user tour
And I click on "Next" "button" in the "[data-role='flexitour-step']" "css_element"
And I should see "This is the Calendar. All of your assignments and due dates can be found here"
And I should not see "This area shows you what's happening in some of your courses"
And I click on "Prev" "button" in the "[data-role='flexitour-step']" "css_element"
And I should not see "This is the Calendar. All of your assignments and due dates can be found here"
And I should see "This area shows you what's happening in some of your courses"
And I click on "End tour" "button" in the "[data-role='flexitour-step']" "css_element"
And I click on "Skip tour" "button" in the "[data-role='flexitour-step']" "css_element"
And I should not see "This area shows you what's happening in some of your courses"
And I am on homepage
And I should not see "Welcome to your personal learning space. We'd like to give you a quick tour to show you some of the areas you may find helpful"
@ -87,11 +84,12 @@ Feature: Add a new user tour
| student1 | Student | 1 | student1@example.com |
And I log in as "admin"
And I add a new user tour with:
| Name | Steps tour |
| Description | My steps tour |
| Apply to URL match | /my/% |
| Tour is enabled | 1 |
| Display step numbers | 1 |
| Name | Steps tour |
| Description | My steps tour |
| Apply to URL match | /my/% |
| Tour is enabled | 1 |
| Display step numbers | 1 |
| End tour button's label | Sample end label |
And I add steps to the "Steps tour" tour:
| targettype | Title | Content |
| Display in middle of page | Welcome | First step of the Tour |
@ -102,12 +100,17 @@ Feature: Add a new user tour
When I am on homepage
Then I should see "First step of the Tour"
And I should see "Next (1/3)"
And I should not see "End tour"
And I should not see "Sample end label"
And "Skip tour" "button" should exist in the "[data-role='flexitour-step']" "css_element"
And I click on "Next (1/3)" "button" in the "[data-role='flexitour-step']" "css_element"
And I should see "Second step of the Tour"
And I should see "Next (2/3)"
And I click on "Next (2/3)" "button" in the "[data-role='flexitour-step']" "css_element"
And I should see "Third step of the Tour"
And I should not see "Next (3/3)"
And I should not see "Skip tour"
And "Sample end label" "button" should exist in the "[data-role='flexitour-step']" "css_element"
@javascript
Scenario: Display step numbers was disabled

23
admin/tool/usertours/tests/behat/tour_accessibility.feature
View File

@ -24,22 +24,20 @@ Feature: Apply accessibility to a tour
Given I am on site homepage
And I wait "1" seconds
And I should see "Welcome"
# First dialogue of the tour, "Welcome". It has Close, Next and End buttons.
# First dialogue of the tour, "Welcome". It has Next and End buttons.
# Nothing highlighted on the page. Initially whole dialogue focused.
When I press tab
Then the focused element is ".close" "css_element" in the "Welcome" "dialogue"
When I press tab
Then the focused element is "Next" "button" in the "Welcome" "dialogue"
When I press tab
Then the focused element is "End tour" "button" in the "Welcome" "dialogue"
Then the focused element is "Skip tour" "button" in the "Welcome" "dialogue"
When I press tab
# Here the focus loops round to the whole dialogue again.
And I press tab
Then the focused element is ".close" "css_element" in the "Welcome" "dialogue"
Then the focused element is "Next" "button" in the "Welcome" "dialogue"
# Check looping works properly going backwards too.
When I press shift tab
And I press shift tab
Then the focused element is "End tour" "button" in the "Welcome" "dialogue"
Then the focused element is "Skip tour" "button" in the "Welcome" "dialogue"
When I press "Next"
# Now we are on the "User menu" step, so Previous is also enabled.
@ -47,21 +45,17 @@ Feature: Apply accessibility to a tour
# section contain a hyperlink so the focus have to go though and back to the dialogue.
And I wait "1" seconds
And I press tab
Then the focused element is ".close" "css_element" in the "User menu" "dialogue"
When I press tab
Then the focused element is "Previous" "button" in the "User menu" "dialogue"
When I press tab
Then the focused element is "Next" "button" in the "User menu" "dialogue"
When I press tab
Then the focused element is "End tour" "button" in the "User menu" "dialogue"
# We tab 3 times from "End Tour" button to header container, drop down then go to "Dashboard" link.
Then the focused element is "Skip tour" "button" in the "User menu" "dialogue"
# We tab 3 times from "Skip Tour" button to header container, drop down then go to "Dashboard" link.
When I press tab
Then the focused element is ".usermenu" "css_element"
When I press tab
Then the focused element is "User menu" "button" in the ".usermenu" "css_element"
When I press tab
And I press tab
Then the focused element is ".close" "css_element" in the "User menu" "dialogue"
Then the focused element is "Next" "button" in the "User menu" "dialogue"
# Press shift-tab twice should lead us back to the user menu button.
When I press shift tab
And I press shift tab
@ -77,9 +71,6 @@ Feature: Apply accessibility to a tour
When I click on "Next" "button"
Then "input[aria-describedby^='tour-step-tool_usertours'],button[aria-describedby^='tour-step-tool_usertours']" "css_element" should not exist
And "input[tabindex]:not([tabindex='-1']),button[tabindex]:not([tabindex='-1'])" "css_element" should not exist
When I click on "Previous" "button"
Then "input[aria-describedby^='tour-step-tool_usertours'],button[aria-describedby^='tour-step-tool_usertours']" "css_element" should exist
And "input[tabindex],button[tabindex]" "css_element" should exist
When I click on "End tour" "button"
Then "input[aria-describedby^='tour-step-tool_usertours'],button[aria-describedby^='tour-step-tool_usertours']" "css_element" should not exist
And "input[tabindex]:not([tabindex='0']),button[tabindex]:not([tabindex='0'])" "css_element" should not exist

8
admin/tool/usertours/tests/behat/tour_navigation.feature
View File

@ -56,9 +56,11 @@ Feature: Steps can be navigated within a tour
| Block | Course overview | Course overview | This area shows you what's happening in some of your courses |
| Block | Calendar | Calendar | This is the Calendar. All of your assignments and due dates can be found here |
When I am on homepage
Then I should see "End tour"
And I should see "Next"
And I click on "Next" "button"
Then I should see "Skip tour"
And I should see "Next (1/3)"
And I click on "Next (1/3)" "button" in the "Welcome" "dialogue"
And I should see "Skip tour"
And I click on "Next (2/3)" "button" in the "Course overview" "dialogue"
And I should see "End tour"
@javascript