Merge branch 'MDL-72385-master' of git://github.com/HuongNV13/moodle

admin/tool/usertours/amd/src/tour.js

@@ -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');
 

admin/tool/usertours/lang/en/deprecated.txt

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

admin/tool/usertours/lang/en/tool_usertours.php

@@ -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';

admin/tool/usertours/styles.css

@@ -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;
 }

admin/tool/usertours/templates/tourstep.mustache

@@ -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>

admin/tool/usertours/tests/behat/create_tour.feature

@@ -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 click on "Skip tour" "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 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    |
+      | Name                    | Steps tour       |
-      | Description          | My steps tour |
+      | Description             | My steps tour    |
-      | Apply to URL match   | /my/%         |
+      | Apply to URL match      | /my/%            |
-      | Tour is enabled      | 1             |
+      | Tour is enabled         | 1                |
-      | Display step numbers | 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

admin/tool/usertours/tests/behat/tour_accessibility.feature

@@ -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"
+    Then the focused element is "Skip 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.
+    # 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

admin/tool/usertours/tests/behat/tour_navigation.feature

@@ -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"
+    Then I should see "Skip tour"
-    And I should see "Next"
+    And I should see "Next (1/3)"
-    And I click on "Next" "button"
+    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