Merge branch 'MDL-72250-master-3' of https://github.com/bmbrands/moodle

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

@@ -14,7 +14,7 @@ Feature: Apply accessibility to a tour
     And I add steps to the tour:
       | targettype | targetvalue_selector | Title       | Content   |
       | Selector   | .usermenu            | User menu   | Next page |
-      | Selector   | input,button         | Page 2      | Next page |
+      | Selector   | .navbar-brand         | Page 2      | Next page |
     And I add steps to the tour:
       | targettype                  | Title   | Content     |
       | Display in middle of page   | Page 3  | Final page. |
@@ -66,11 +66,11 @@ Feature: Apply accessibility to a tour
     And I am on site homepage
     When I click on "Next" "button"
     And I click on "Next" "button"
-    Then "input[aria-describedby^='tour-step-tool_usertours'],button[aria-describedby^='tour-step-tool_usertours']" "css_element" should exist
+    Then ".navbar-brand[aria-describedby^='tour-step-tool_usertours']" "css_element" should exist
-    And "input[tabindex],button[tabindex]" "css_element" should exist
+    And ".navbar-brand[tabindex]" "css_element" should exist
     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
+    Then ".navbar-brand[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
+    And ".navbar-brand[tabindex]:not([tabindex='-1'])" "css_element" should not 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
+    Then ".navbar-brand[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
+    And ".navbar-brand[tabindex]:not([tabindex='0'])" "css_element" should not exist

lib/classes/navigation/output/primary.php

@@ -57,10 +57,12 @@ class primary implements renderable, templatable {
 
         $menudata = (object) array_merge($this->get_primary_nav(), $this->get_custom_menu($output));
         $moremenu = new \core\navigation\output\more_menu($menudata, 'navbar-nav', false);
+        $mobileprimarynav = array_merge($this->get_primary_nav(), $this->get_custom_menu($output));
 
         $languagemenu = new \core\output\language_menu($this->page);
 
         return [
+            'mobileprimarynav' => $mobileprimarynav,
             'moremenu' => $moremenu->export_for_template($output),
             'lang' => !isloggedin() || isguestuser() ? $languagemenu->export_for_template($output) : [],
             'user' => $this->get_user_menu($output),

lib/tests/navigation/output/primary_test.php

@@ -116,31 +116,31 @@ class primary_test extends \advanced_testcase {
     public function test_primary_export_provider(): array {
         return [
             "Export the menu data when: custom menu exists; multiple langs installed; user is not logged in." => [
-                true, true, '', ['moremenu', 'lang', 'user']
+                true, true, '', ['mobileprimarynav', 'moremenu', 'lang', 'user']
             ],
             "Export the menu data when: custom menu exists; langs not installed; user is not logged in." => [
-                true, false, '', ['moremenu', 'user']
+                true, false, '', ['mobileprimarynav', 'moremenu', 'user']
             ],
             "Export the menu data when: custom menu exists; multiple langs installed; logged in as admin." => [
-                true, true, 'admin', ['moremenu', 'user']
+                true, true, 'admin', ['mobileprimarynav', 'moremenu', 'user']
             ],
             "Export the menu data when: custom menu exists; langs not installed; logged in as admin." => [
-                true, false, 'admin', ['moremenu', 'user']
+                true, false, 'admin', ['mobileprimarynav', 'moremenu', 'user']
             ],
             "Export the menu data when: custom menu exists; multiple langs installed; logged in as guest." => [
-                true, true, 'guest', ['moremenu', 'lang', 'user']
+                true, true, 'guest', ['mobileprimarynav', 'moremenu', 'lang', 'user']
             ],
             "Export the menu data when: custom menu exists; langs not installed; logged in as guest." => [
-                true, false, 'guest', ['moremenu', 'user']
+                true, false, 'guest', ['mobileprimarynav', 'moremenu', 'user']
             ],
             "Export the menu data when: custom menu does not exist; multiple langs installed; logged in as guest." => [
-                false, true, 'guest', ['moremenu', 'lang', 'user']
+                false, true, 'guest', ['mobileprimarynav', 'moremenu', 'lang', 'user']
             ],
             "Export the menu data when: custom menu does not exist; multiple langs installed; logged in as admin." => [
-                false, true, 'admin', ['moremenu', 'user']
+                false, true, 'admin', ['mobileprimarynav', 'moremenu', 'user']
             ],
             "Export the menu data when: custom menu does not exist; langs not installed; user is not logged in." => [
-                false, false, '', ['moremenu', 'user']
+                false, false, '', ['mobileprimarynav', 'moremenu', 'user']
             ],
         ];
     }

theme/boost/amd/src/drawers.js

@@ -397,6 +397,7 @@ export default class Drawers {
 const scroller = () => {
     const body = document.querySelector('body');
     const drawerLayout = document.querySelector('#page.drawers');
+    if (drawerLayout) {
         drawerLayout.addEventListener("scroll", () => {
             if (drawerLayout.scrollTop >= window.innerHeight) {
                 body.classList.add('scrolled');
@@ -404,6 +405,7 @@ const scroller = () => {
                 body.classList.remove('scrolled');
             }
         });
+    }
 };
 
 /**

theme/boost/layout/columns2.php

@@ -69,6 +69,7 @@ $templatecontext = [
     'hasregionmainsettingsmenu' => !empty($regionmainsettingsmenu),
     'primarymoremenu' => $primarymenu['moremenu'],
     'secondarymoremenu' => $secondarynavigation,
+    'mobileprimarynav' => $primarymenu['mobileprimarynav'],
     'usermenu' => $primarymenu['user'],
     'langmenu' => $primarymenu['lang'],
 ];

theme/boost/layout/drawers.php

@@ -107,6 +107,7 @@ $templatecontext = [
     'hasregionmainsettingsmenu' => !empty($regionmainsettingsmenu),
     'primarymoremenu' => $primarymenu['moremenu'],
     'secondarymoremenu' => $secondarynavigation,
+    'mobileprimarynav' => $primarymenu['mobileprimarynav'],
     'usermenu' => $primarymenu['user'],
     'langmenu' => $primarymenu['lang'],
     'forceblockdraweropen' => $forceblockdraweropen,

theme/boost/scss/moodle/primarynavigation.scss

@@ -7,3 +7,26 @@
         }
     }
 }
+
+@include media-breakpoint-down(sm) {
+    .primary-navigation {
+        display: none;
+    }
+    .editmode-switch-form .custom-control-label {
+        font-size: 0;
+        color: transparent;
+    }
+}
+
+.drawer-primary .drawercontent {
+    padding: 0;
+
+    .list-group {
+        border-radius: 0;
+        margin-top: -1px;
+        .list-group-item {
+            border-left: 0;
+            border-right: 0;
+        }
+    }
+}

theme/boost/style/moodle.css

@@ -20996,6 +20996,22 @@ div.editor_atto_toolbar button .icon {
     height: 60px;
     color: #1d2125; }
 
+@media (max-width: 767.98px) {
+  .primary-navigation {
+    display: none; }
+  .editmode-switch-form .custom-control-label {
+    font-size: 0;
+    color: transparent; } }
+
+.drawer-primary .drawercontent {
+  padding: 0; }
+  .drawer-primary .drawercontent .list-group {
+    border-radius: 0;
+    margin-top: -1px; }
+    .drawer-primary .drawercontent .list-group .list-group-item {
+      border-left: 0;
+      border-right: 0; }
+
 .secondary-navigation {
   border-top: 1px solid #dee2e6;
   border-bottom: 1px solid #dee2e6; }

theme/boost/templates/drawer.mustache

@@ -32,7 +32,7 @@
     }} data-preference="{{$drawerpreferencename}}{{/drawerpreferencename}}"{{!
     }} data-state="{{$drawerstate}}{{/drawerstate}}"{{!
     }} data-forceopen="{{$forceopen}}0{{/forceopen}}"{{!
-    }} data-close-on-resize="{{$drawercloseonreize}}0{{/drawercloseonreize}}"{{!
+    }} data-close-on-resize="{{$drawercloseonresize}}0{{/drawercloseonresize}}"{{!
     }}>
     <div class="drawerheader">
         {{$drawerheading}}{{/drawerheading}}

theme/boost/templates/navbar.mustache

@@ -34,7 +34,24 @@
         "config": {
             "wwwroot": "#"
         },
-        "sitename": "Moodle Site"
+        "sitename": "Moodle Site",
+        "mobileprimarynav": [
+            {
+                "text": "Dashboard",
+                "url": "/my",
+                "isactive": true
+            },
+            {
+                "text": "Site home",
+                "url": "/",
+                "isactive": false
+            },
+            {
+                "text": "My courses",
+                "url": "/course",
+                "isactive": false
+            }
+        ]
     }
 }}
 <nav class="navbar fixed-top navbar-light bg-white navbar-expand" aria-label="{{#str}}sitemenubar, admin{{/str}}">
@@ -46,7 +63,12 @@
         </button>
     </div>
 
-    <a href="{{{ config.wwwroot }}}" class="navbar-brand d-flex align-items-center m-0 p-0 aabtn">
+    <button class="navbar-toggler aabtn d-block d-md-none my-1 mr-2" data-toggle="drawers" data-action="toggle" data-target="theme_boost-drawers-primary">
+        <span class="navbar-toggler-icon"></span>
+        <span class="sr-only">{{#str}}sidepanel, core{{/str}}</span>
+    </button>
+
+    <a href="{{{ config.wwwroot }}}" class="navbar-brand d-none d-md-flex align-items-center m-0 p-0 aabtn">
         {{# output.should_display_navbar_logo }}
             <img src="{{output.get_compact_logo_url}}" class="logo mr-1" alt="{{sitename}}">
         {{/ output.should_display_navbar_logo }}
@@ -80,3 +102,5 @@
         {{{ output.edit_switch }}}
     </div>
 </nav>
+
+{{> theme_boost/primary-drawer-mobile }}

theme/boost/templates/primary-drawer-mobile.mustache

@@ -0,0 +1,97 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+
+    @template theme_boost/primary-drawer-mobile
+
+    This template renders the mobile version of the top navbar menu in a drawer.
+
+    Example context (json):
+    {
+        "output": {
+            "should_display_navbar_logo": true,
+            "get_compact_logo_url": "http://placekitten.com/50/50"
+        },
+        "mobileprimarynav": [
+            {
+                "text": "Dashboard",
+                "url": "/my",
+                "isactive": "true"
+            },
+            {
+                "text": "Site home",
+                "url": "/",
+                "isactive": "false"
+            },
+            {
+                "text": "My courses",
+                "url": "/course",
+                "isactive": "false"
+            }
+        ]
+    }
+}}
+
+{{< theme_boost/drawer }}
+    {{$id}}theme_boost-drawers-primary{{/id}}
+    {{$drawerclasses}}drawer drawer-left drawer-primary{{/drawerclasses}}
+    {{$drawercloseonresize}}1{{/drawercloseonresize}}
+    {{$drawerheading}}
+        {{# output.should_display_navbar_logo }}
+            <img src="{{output.get_compact_logo_url}}" class="logo py-1 h-100" alt="{{sitename}}">
+        {{/ output.should_display_navbar_logo }}
+        {{^ output.should_display_navbar_logo }}
+            {{{ sitename }}}
+        {{/ output.should_display_navbar_logo }}
+    {{/drawerheading}}
+    {{$drawercontent}}
+        <div class="list-group">
+            {{#mobileprimarynav}}
+                {{#haschildren}}
+                <a id="drop-down-{{sort}}" href="#" class="list-group-item list-group-item-action icons-collapse-expand collapsed d-flex" data-toggle="collapse" data-target="#drop-down-menu-{{sort}}" aria-expanded="false" aria-controls="drop-down-menu-{{sort}}">
+                    {{{text}}}
+                    <span class="ml-auto expanded-icon icon-no-margin mx-2">
+                        {{#pix}} t/expanded, core {{/pix}}
+                        <span class="sr-only">
+                            {{#str}} collapse, core {{/str}}
+                        </span>
+                    </span>
+                    <span class="ml-auto collapsed-icon icon-no-margin mx-2">
+                        {{#pix}} t/collapsed, core {{/pix}}
+                        <span class="sr-only">
+                            {{#str}} expand, core {{/str}}
+                        </span>
+                    </span>
+                </a>
+                <div class="collapse list-group-item p-0 border-0" role="menu" id="drop-down-menu-{{sort}}" aria-labelledby="drop-down-{{sort}}">
+                    {{#children}}
+                        {{^divider}}
+                             <a href="{{{url}}}" class="pl-5 bg-light list-group-item list-group-item-action">{{{text}}}</a>
+                        {{/divider}}
+                    {{/children}}
+                </div>
+                {{/haschildren}}
+                {{^haschildren}}
+                <a href="{{{url}}}" class="list-group-item list-group-item-action {{#isactive}}active{{/isactive}} {{#classes}}{{.}} {{/classes}}" {{#isactive}}aria-current="true"{{/isactive}}>
+                    {{{text}}}
+                </a>
+                {{/haschildren}}
+            {{/mobileprimarynav}}
+        </div>
+    {{/drawercontent}}
+    {{$drawerstate}}show-drawer-primary{{/drawerstate}}
+{{/ theme_boost/drawer}}

theme/classic/style/moodle.css

@@ -20942,6 +20942,22 @@ div.editor_atto_toolbar button .icon {
     height: 50px;
     color: #1d2125; }
 
+@media (max-width: 767.98px) {
+  .primary-navigation {
+    display: none; }
+  .editmode-switch-form .custom-control-label {
+    font-size: 0;
+    color: transparent; } }
+
+.drawer-primary .drawercontent {
+  padding: 0; }
+  .drawer-primary .drawercontent .list-group {
+    border-radius: 0;
+    margin-top: -1px; }
+    .drawer-primary .drawercontent .list-group .list-group-item {
+      border-left: 0;
+      border-right: 0; }
+
 .secondary-navigation {
   border-top: 1px solid #dee2e6;
   border-bottom: 1px solid #dee2e6; }