Merge branch 'MDL-73336-master-v02' of https://github.com/ferranrecio/moodle

This commit is contained in:
Andrew Nicols
2022-01-12 11:25:29 +08:00
13 changed files with 113 additions and 49 deletions
@@ -99,11 +99,11 @@
}
}}
<nav id="{{uniqid}}-course-index" class="courseindex {{#editmode}} editing {{/editmode}}" role="tree">
<div id="{{uniqid}}-course-index" class="courseindex {{#editmode}} editing {{/editmode}}" role="tree">
{{#sections}}
{{> core_courseformat/local/courseindex/section }}
{{/sections}}
</nav>
</div>
{{#js}}
require(['core_courseformat/local/courseindex/courseindex'], function(component) {
component.init('{{uniqid}}-course-index');
@@ -31,19 +31,19 @@ Feature: Course index depending on role
Given the "multilang" filter is "on"
And the "multilang" filter applies to "content and headings"
When I am on the "C1" "Course" page logged in as "teacher1"
Then I should see "Open course index drawer"
Then I should see "Open course index"
And I am on the "Activity sample 1" "assign activity editing" page
And I set the field "Assignment name" in the "General" "fieldset" to "<span lang=\"en\" class=\"multilang\">Activity</span><span lang=\"de\" class=\"multilang\">Aktivität</span> sample 1"
And I press "Save and display"
And I should see "Open course index drawer"
And I click on "Open course index drawer" "button"
And I should see "Open course index"
And I click on "Open course index" "button"
And I should see "Activity sample 1" in the "courseindex-content" "region"
@javascript
Scenario: Course index as a teacher
Given I log in as "teacher1"
And I am on "Course 1" course homepage
When I click on "Open course index drawer" "button"
When I click on "Open course index" "button"
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Topic 2" in the "courseindex-content" "region"
And I should see "Topic 3" in the "courseindex-content" "region"
@@ -61,7 +61,7 @@ Feature: Course index depending on role
And I log out
And I log in as "teacher1"
And I am on "Course 1" course homepage
When I click on "Open course index drawer" "button"
When I click on "Open course index" "button"
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Topic 2" in the "courseindex-content" "region"
And I should see "Topic 3" in the "courseindex-content" "region"
@@ -79,7 +79,7 @@ Feature: Course index depending on role
And I log out
And I log in as "student1"
And I am on "Course 1" course homepage
When I click on "Open course index drawer" "button"
When I click on "Open course index" "button"
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should not see "Topic 2" in the "courseindex-content" "region"
And I should see "Topic 3" in the "courseindex-content" "region"
@@ -92,7 +92,7 @@ Feature: Course index depending on role
Given I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
When I delete "Activity sample 2" activity
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
Then I should not see "Activity sample 2" in the "courseindex-content" "region"
@javascript
@@ -100,7 +100,7 @@ Feature: Course index depending on role
Given I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I turn section "2" highlighting on
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
# Current section is only marked visually in the course index.
And the "class" attribute of "#courseindex-content [data-for='section'][data-number='2']" "css_element" should contain "current"
And I should not see "Highlighted" in the "#courseindex-content [data-for='section'][data-number='1']" "css_element"
@@ -118,7 +118,7 @@ Feature: Course index depending on role
| book | Second activity in section 1 | Test book description | C1 | sample4 | 1 |
And I log in as "teacher1"
And I am on "Course 1" course homepage
When I click on "Open course index drawer" "button"
When I click on "Open course index" "button"
# Sections should be opened by default.
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Activity sample 1" in the "courseindex-content" "region"
@@ -167,7 +167,7 @@ Feature: Course index depending on role
@javascript
Scenario: Course index section preferences
Given I am on the "C1" "Course" page logged in as "teacher1"
When I click on "Open course index drawer" "button"
When I click on "Open course index" "button"
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Activity sample 1" in the "courseindex-content" "region"
And I should see "Topic 2" in the "courseindex-content" "region"
@@ -197,7 +197,7 @@ Feature: Course index depending on role
And I delete section "1"
And I click on "Delete" "button" in the ".modal" "css_element"
And I reload the page
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
And I should not see "Activity sample 1" in the "courseindex-content" "region"
And I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Activity sample 2" in the "courseindex-content" "region"
@@ -208,7 +208,7 @@ Feature: Course index depending on role
Scenario: Adding section should alter the course index
Given I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
When I click on "Add topic" "link" in the "Topic 4" "section"
Then I should see "Topic 5" in the "courseindex-content" "region"
@@ -216,7 +216,7 @@ Feature: Course index depending on role
Scenario: Remove a section should alter the course index
Given I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
When I delete section "4"
Then I should not see "Topic 4" in the "courseindex-content" "region"
@@ -224,7 +224,7 @@ Feature: Course index depending on role
Scenario: Delete a previous section should alter the course index unnamed sections
Given I log in as "teacher1"
And I am on "Course 1" course homepage with editing mode on
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
When I delete section "1"
And I click on "Delete" "button" in the ".modal" "css_element"
Then I should not see "Topic 4" in the "courseindex-content" "region"
@@ -255,7 +255,7 @@ Feature: Course index depending on role
# Check course index link goes to the specific section.
When I log in as "student1"
And I am on "Course 1" course homepage
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
And I click on "Topic 1" "link" in the "region-main" "region"
And I should not see "Activity sample 3" in the "region-main" "region"
And I click on "Activity sample 3" "link" in the "courseindex-content" "region"
@@ -26,7 +26,7 @@ Feature: Course index completion icons
@javascript
Scenario: Teacher does not see completion icons.
Given I am on the "C1" "Course" page logged in as "teacher1"
When I click on "Open course index drawer" "button"
When I click on "Open course index" "button"
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Activity sample 1" in the "courseindex-content" "region"
And "To do" "icon" should not exist in the "courseindex-content" "region"
@@ -34,7 +34,7 @@ Feature: Course index completion icons
@javascript
Scenario: User should see the completion icons
Given I am on the "C1" "Course" page logged in as "student1"
When I click on "Open course index drawer" "button"
When I click on "Open course index" "button"
Then I should see "Topic 1" in the "courseindex-content" "region"
And I should see "Activity sample 1" in the "courseindex-content" "region"
And "To do" "icon" should exist in the "courseindex-content" "region"
@@ -42,7 +42,7 @@ Feature: Course index completion icons
@javascript
Scenario: Manual completion shoudl update the course index completion
Given I am on the "C1" "Course" page logged in as "student1"
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
And "To do" "icon" should exist in the "courseindex-content" "region"
When I press "Mark as done"
And I wait until "Done" "button" exists
@@ -54,7 +54,7 @@ Feature: Course index completion icons
@javascript
Scenario: Refresh the page should keep the completion consistent
Given I am on the "C1" "Course" page logged in as "student1"
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
And "To do" "icon" should exist in the "courseindex-content" "region"
When I press "Mark as done"
And I wait until "Done" "button" exists
@@ -68,7 +68,7 @@ Feature: Course index completion icons
| assign | Activity sample 2 | Test assignment description | C1 | sample2 | 1 | 1 | 1 |
When I am on the "sample2" "Activity" page logged in as "student1"
And I am on the "C1" "Course" page
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
Then "Done" "icon" should exist in the "courseindex-content" "region"
@javascript
@@ -89,7 +89,7 @@ Feature: Course index completion icons
| slot | response |
| 1 | False |
When I am on the "C1" "Course" page logged in as "student1"
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
And "Failed" "icon" should exist in the "courseindex-content" "region"
@javascript
@@ -110,5 +110,5 @@ Feature: Course index completion icons
| slot | response |
| 1 | True |
When I am on the "C1" "Course" page logged in as "student1"
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
And "Done" "icon" should exist in the "courseindex-content" "region"
@@ -17,7 +17,7 @@ Feature: Verify that courseindex is usable with the keyboard
| book | Activity sample 2 | Test book description | C1 | sample2 | 2 |
| choice | Activity sample 3 | Test choice description | C1 | sample3 | 3 |
Given I am on the "C1" "Course" page logged in as "admin"
And I click on "Open course index drawer" "button"
And I click on "Open course index" "button"
And I should see "Topic 1" in the "courseindex-content" "region"
And the focused element is "[data-preference='drawer-open-index'] .drawertoggle" "css_element"
And I press the tab key
@@ -30,6 +30,14 @@ Feature: Verify that courseindex is usable with the keyboard
And I press enter
Then I should not see "Topic 1" in the "courseindex-content" "region"
@javascript @accessibility
Scenario: Course index should be accessible.
When I press the shift tab key
And I press enter
Then the page should meet accessibility standards with "wcag143" extra tests
And I press enter
And the page should meet accessibility standards with "wcag143" extra tests
@javascript
Scenario: Opening and closing sections.
When I press the down key
+3 -1
View File
@@ -259,6 +259,8 @@ $string['clickhelpiconformoreinfo'] = '... continues ... Click on the help icon
$string['clickhere'] = 'Click here ...';
$string['clicktohideshow'] = 'Click to expand or collapse';
$string['clicktochangeinbrackets'] = '{$a} (Click to change)';
$string['closeblockdrawer'] = 'Close block drawer';
$string['closecourseindex'] = 'Close course index';
$string['closedrawer'] = 'Close drawer';
$string['closewindow'] = 'Close this window';
$string['closebuttontitle'] = 'Close';
@@ -1556,7 +1558,7 @@ $string['ok'] = 'OK';
$string['oldpassword'] = 'Current password';
$string['olduserdirectory'] = 'This is the OLD users directory, and is no longer needed. You may safely delete it. The files it contains have been copied to the NEW user directory.';
$string['opendrawerblocks'] = 'Open block drawer';
$string['opendrawerindex'] = 'Open course index drawer';
$string['opendrawerindex'] = 'Open course index';
$string['opensinnewwindow'] = 'Opens in new window';
$string['optional'] = 'optional';
$string['options'] = 'options';
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+57 -16
View File
@@ -143,16 +143,31 @@ const disableDrawerTooltips = (drawerNode) => {
if (!button) {
return;
}
if (button.hasAttribute('data-original-title')) {
// The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
jQuery(button).tooltip('disable');
} else {
button.dataset.disabledToggle = button.dataset.toggle;
button.removeAttribute('data-toggle');
}
disableButtonTooltip(button);
});
};
/**
* Disable the button tooltips.
*
* @param {HTMLElement} button the button element
* @param {boolean} enableOnBlur if the tooltip must be re-enabled on blur.
* @private
*/
const disableButtonTooltip = (button, enableOnBlur) => {
if (button.hasAttribute('data-original-title')) {
// The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
jQuery(button).tooltip('disable');
button.setAttribute('title', button.dataset.originalTitle);
} else {
button.dataset.disabledToggle = button.dataset.toggle;
button.removeAttribute('data-toggle');
}
if (enableOnBlur) {
button.dataset.restoreTooltipOnBlur = true;
}
};
/**
* Enable drawer tooltips.
*
@@ -168,16 +183,27 @@ const enableDrawerTooltips = (drawerNode) => {
if (!button) {
return;
}
// The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
if (button.hasAttribute('data-original-title')) {
jQuery(button).tooltip('enable');
} else if (button.dataset.disabledToggle) {
button.dataset.toggle = button.dataset.disabledToggle;
jQuery(button).tooltip();
}
enableButtonTooltip(button);
});
};
/**
* Enable the button tooltips.
*
* @param {HTMLElement} button the button element
* @private
*/
const enableButtonTooltip = (button) => {
// The jQuery is still used in Boostrap 4. It can we removed when MDL-71979 is integrated.
if (button.hasAttribute('data-original-title')) {
jQuery(button).tooltip('enable');
} else if (button.dataset.disabledToggle) {
button.dataset.toggle = button.dataset.disabledToggle;
jQuery(button).tooltip();
}
delete button.dataset.restoreTooltipOnBlur;
};
/**
* Add scroll listeners to a drawer element.
*
@@ -429,8 +455,11 @@ export default class Drawers {
}
// Show close button once the drawer is fully opened.
const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
if (focusOnCloseButton && closeButton) {
disableButtonTooltip(closeButton, true);
}
setTimeout(() => {
const closeButton = this.drawerNode.querySelector(SELECTORS.CLOSEBTN);
closeButton.classList.toggle('hidden', false);
if (focusOnCloseButton) {
closeButton.focus();
@@ -488,8 +517,11 @@ export default class Drawers {
.catch();
// Move focus to the open drawer (or toggler) button once the drawer is hidden.
let openButton = getDrawerOpenButton(this.drawerNode.id);
if (openButton) {
disableButtonTooltip(openButton, true);
}
setTimeout(() => {
let openButton = getDrawerOpenButton(this.drawerNode.id);
if (openButton) {
openButton.focus();
}
@@ -627,6 +659,15 @@ const registerListeners = () => {
Drawers.closeOtherDrawers(e.detail.drawerInstance);
});
// Tooglers and openers blur listeners.
const btnSelector = `${SELECTORS.TOGGLEBTN}, ${SELECTORS.OPENBTN}, ${SELECTORS.CLOSEBTN}`;
document.addEventListener('focusout', (e) => {
const button = e.target.closest(btnSelector);
if (button?.dataset.restoreTooltipOnBlur !== undefined) {
enableButtonTooltip(button);
}
});
const closeOnResizeListener = () => {
if (isSmall()) {
let anyOpen = false;
+4
View File
@@ -96,10 +96,14 @@
border-radius: 200px;
padding: 16px;
background-color: $gray-300;
box-shadow: $box-shadow-sm;
.icon {
width: auto;
height: auto;
}
&:focus {
box-shadow: $input-btn-focus-box-shadow;
}
transition: padding 200ms;
}
}
+3
View File
@@ -20304,10 +20304,13 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
border-radius: 200px;
padding: 16px;
background-color: #dee2e6;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
transition: padding 200ms; }
.drawer-toggles .drawer-toggler .btn .icon {
width: auto;
height: auto; }
.drawer-toggles .drawer-toggler .btn:focus {
box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75); }
.drawer-toggles .drawer-left-toggle {
left: 0; }
+4 -3
View File
@@ -22,7 +22,8 @@
"drawerclasses": "drawer drawer-right",
"drawertrigger": "toggleblocks",
"tooltipplacement": "right",
"drawerconent": "Content for the blocks region"
"drawerconent": "Content for the blocks region",
"closebuttontext": "Close drawer"
}
}}
<div {{!
@@ -42,9 +43,9 @@
data-target="{{$id}}{{/id}}"
data-toggle="tooltip"
data-placement="{{$tooltipplacement}}right{{/tooltipplacement}}"
title="{{#str}}closedrawer, core{{/str}}"
title="{{$closebuttontext}}{{#str}}closedrawer, core{{/str}}{{/closebuttontext}}"
>
{{#pix}}e/cancel, core, {{#str}}closedrawer, core{{/str}}{{/pix}}
{{#pix}} e/cancel, core {{/pix}}
</button>
</div>
<div class="drawercontent" data-usertour="scroller">
+4 -2
View File
@@ -68,6 +68,7 @@
{{$drawerpreferencename}}drawer-open-index{{/drawerpreferencename}}
{{$drawerstate}}show-drawer-left{{/drawerstate}}
{{$tooltipplacement}}right{{/tooltipplacement}}
{{$closebuttontext}}{{#str}}closecourseindex, core{{/str}}{{/closebuttontext}}
{{/ theme_boost/drawer}}
{{/courseindex}}
{{#hasblocks}}
@@ -85,6 +86,7 @@
{{$drawerstate}}show-drawer-right{{/drawerstate}}
{{$tooltipplacement}}left{{/tooltipplacement}}
{{$drawercloseonresize}}1{{/drawercloseonresize}}
{{$closebuttontext}}{{#str}}closeblockdrawer, core{{/str}}{{/closebuttontext}}
{{/ theme_boost/drawer}}
{{/hasblocks}}
<div id="page" data-region="mainpage" data-usertour="scroller" class="drawers {{#courseindexopen}}show-drawer-left{{/courseindexopen}} {{#blockdraweropen}}show-drawer-right{{/blockdraweropen}}">
@@ -93,7 +95,7 @@
{{#courseindex}}
<div class="drawer-toggler drawer-left-toggle open-nav">
<button
class="shadow-sm btn icon-no-margin"
class="btn icon-no-margin"
data-toggler="drawers"
data-action="toggle"
data-target="theme_boost-drawers-courseindex"
@@ -109,7 +111,7 @@
{{#hasblocks}}
<div class="drawer-toggler drawer-right-toggle ml-auto">
<button
class="shadow-sm btn icon-no-margin"
class="btn icon-no-margin"
data-toggler="drawers"
data-action="toggle"
data-target="theme_boost-drawers-blocks"
+3
View File
@@ -20250,10 +20250,13 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
border-radius: 200px;
padding: 16px;
background-color: #dee2e6;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
transition: padding 200ms; }
.drawer-toggles .drawer-toggler .btn .icon {
width: auto;
height: auto; }
.drawer-toggles .drawer-toggler .btn:focus {
box-shadow: 0 0 0 0.2rem rgba(15, 108, 191, 0.75); }
.drawer-toggles .drawer-left-toggle {
left: 0; }