Merge branch 'MDL-71037-master-8' of git://github.com/ilyatregubov/mo…

…odle

course/format/classes/output/local/content/section.php

@@ -152,6 +152,18 @@ public function export_for_template(\renderer_base $output): stdClass {
             }
         }
 
+        $coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
+        if ($coursedisplay == COURSE_DISPLAY_MULTIPAGE) {
+            $data->iscoursedisplaymultipage = true;
+        }
+
+        if ($course->id == SITEID) {
+            $data->sitehome = true;
+        }
+
+        // For now sections are always expanded. User preferences will be done in MDL-71211.
+        $data->isactive = true;
+
         if ($thissection->section == 0) {
             // Section zero is always visible only as a cmlist.
             $cmlist = new $this->cmlistclass($format, $thissection);

course/format/classes/output/local/content/section/header.php

@@ -94,12 +94,16 @@ public function export_for_template(\renderer_base $output): stdClass {
 
         $coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
 
+        if ($course->id == SITEID) {
+            $data->sitehome = true;
+        }
+
         if (!$format->show_editor() && $coursedisplay == COURSE_DISPLAY_MULTIPAGE && empty($data->issinglesection)) {
             if ($section->uservisible) {
                 $data->url = course_get_url($course, $section->section);
             }
-            $data->name = get_section_name($course, $section);
         }
+        $data->name = get_section_name($course, $section);
 
         return $data;
     }

course/format/templates/local/content/section.mustache

@@ -70,15 +70,17 @@
             "menu": "<a href=\"#\" class=\"d-inline-block dropdown-toggle icon-no-margin\">Edit<b class=\"caret\"></b></a>",
             "hasmenu": true
         },
-        "cmcontrols": "[Add an activity or resource]"
+        "cmcontrols": "[Add an activity or resource]",
+        "iscoursedisplaymultipage": true,
+        "sectionreturnid": 0,
+        "isactive": true,
+        "sitehome": false
     }
 }}
 <li id="section-{{num}}"
     class="section main {{#onlysummary}} section-summary {{/onlysummary}} clearfix
             {{#ishidden}} hidden {{/ishidden}} {{#iscurrent}} current {{/iscurrent}}
             {{#isstealth}} orphaned {{/isstealth}}"
-    role="region"
-    aria-labelledby="sectionid-{{id}}-title"
     data-sectionid="{{num}}"
     data-sectionreturnid="{{sectionreturnid}}"
     data-for="section"
@@ -92,8 +94,11 @@
             {{> core_courseformat/local/content/section/controlmenu }}
     {{/controlmenu}}
     </div>
-    <div class="content">
-        {{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
+    {{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
+    <div id="coursecontentcollapse{{num}}"
+         class="content {{^iscoursedisplaymultipage}}
+             {{^sitehome}}course-content-item-content collapse {{#isactive}}show{{/isactive}}{{/sitehome}}
+         {{/iscoursedisplaymultipage}}">
         {{#availability}}
             {{> core_courseformat/local/content/section/availability }}
         {{/availability}}

course/format/templates/local/content/section/header.mustache

@@ -21,17 +21,57 @@
 
     Example context (json):
     {
+        "id": 123,
         "name": "Section title",
+        "title": "<a href=\"http://moodle/course/view.php?id=5#section-0\">Section title</a>",
         "url": "#",
-        "ishidden": true
+        "iscoursedisplaymultipage": true
     }
 }}
 
-<h3 class="sectionid-{{id}}-title sectionname" data-for="section_title">
-    {{#url}}
-    <a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
-    {{/url}}
-    {{^url}}
-    <span>{{{title}}}</span>
-    {{/url}}
-</h3>
+{{#iscoursedisplaymultipage}}
+    <h3 class="sectionid-{{id}}-title sectionname"
+        data-for="section_title" data-id="{{id}}" data-number="{{num}}">
+        {{#url}}
+            <a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
+        {{/url}}
+        {{^url}}
+            <span>{{{title}}}</span>
+        {{/url}}
+    </h3>
+{{/iscoursedisplaymultipage}}
+{{^iscoursedisplaymultipage}}
+    {{#sitehome}}
+        <h2 class="sectionid-{{id}}-title sectionname"
+            data-for="section_title" data-id="{{id}}" data-number="{{num}}">
+            {{#url}}
+                <a href="{{{url}}}" class="{{#ishidden}} dimmed_text {{/ishidden}}">{{name}}</a>
+            {{/url}}
+            {{^url}}
+                <span>{{{title}}}</span>
+            {{/url}}
+        </h2>
+    {{/sitehome}}
+    {{^sitehome}}
+        <div class="d-flex">
+            <a role="button" data-toggle="collapse"
+               href="#coursecontentcollapse{{num}}"
+               id="collapssesection{{num}}"
+               aria-expanded="{{#isactive}}true{{/isactive}}{{^isactive}}false{{/isactive}}"
+               aria-controls="coursecontentcollapse{{num}}"
+               class="btn btn-icon mr-1 icons-collapse-expand {{^isactive}}collapsed{{/isactive}}"
+               aria-label="{{name}}">
+            <span class="expanded-icon icon-no-margin p-2" data-toggle="tooltip" title="{{#str}} collapse, core {{/str}}">
+                {{#pix}} t/expandedchevron, core {{/pix}}
+            </span>
+                <span class="collapsed-icon icon-no-margin p-2" data-toggle="tooltip" title="{{#str}} expand, core {{/str}}">
+                    {{#pix}} t/collapsedchevron, core {{/pix}}
+                </span>
+            </a>
+            <h3 class="sectionid-{{id}}-title sectionname course-content-item {{^visible}}dimmed{{/visible}}"
+                id="coursecontentsection{{num}}" data-for="section_title" data-id="{{id}}" data-number="{{num}}">
+                {{{title}}}
+            </h3>
+        </div>
+    {{/sitehome}}
+{{/iscoursedisplaymultipage}}

course/tests/behat/course_collapse_sections.feature

@@ -0,0 +1,192 @@
+@core @core_course
+Feature: Collapse course sections
+  In order to quickly access the course structure
+  As a user
+  I need to collapse/extend sections for Topics/Weeks formats.
+
+  Background:
+    Given the following "users" exist:
+      | username | firstname | lastname | email                |
+      | teacher1 | Teacher   | 1        | teacher1@example.com |
+      | student1 | Student   | 1        | student1@example.com |
+    And the following "course" exists:
+      | fullname         | Course 1  |
+      | shortname        | C1        |
+      | category         | 0         |
+      | enablecompletion | 1         |
+      | numsections      | 5         |
+      | startdate        | 957139200 |
+      | enablecompletion | 1         |
+    And the following "activities" exist:
+      | activity | name         | intro                        | course | idnumber | section | completion |
+      | assign   | Assignment 1 | Test assignment description1 | C1     | assign1  | 1       | 1          |
+      | assign   | Assignment 2 | Test assignment description2 | C1     | assign2  | 2       | 1          |
+      | book     | Book 2       | Test book description2       | C1     | book2    | 2       | 1          |
+      | book     | Book 3       | Test book description3       | C1     | book3    | 3       | 1          |
+      | forum    | Forum 4      | Test forum description4      | C1     | forum4   | 4       | 1          |
+      | forum    | Forum 5      | Test forum description5      | C1     | forum5   | 5       | 1          |
+    And the following "course enrolments" exist:
+      | user     | course | role           |
+      | student1 | C1     | student        |
+      | teacher1 | C1     | editingteacher |
+    And I log in as "admin"
+    And I am on "Course 1" course homepage with editing mode on
+    When I edit the section "4"
+    And I expand all fieldsets
+    And I press "Add restriction..."
+    And I click on "Date" "button" in the "Add restriction..." "dialogue"
+    And I set the field "direction" to "until"
+    And I set the field "x[year]" to "2013"
+    And I press "Save changes"
+    And I hide section "5"
+    And I log out
+
+  @javascript
+  Scenario: No chevron on site home
+    Given I log in as "admin"
+    And I am on site homepage
+    And I turn editing mode on
+    And I add a "Forum" to section "1" and I fill the form with:
+      | Forum name  | Test forum post backup name        |
+      | Description | Test forum post backup description |
+    And I click on "Edit summary" "link" in the "region-main" "region"
+    And I click on "Custom" "checkbox"
+    And I set the field "New value for Section name" to "New section name"
+    When I press "Save changes"
+    Then "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+
+  @javascript
+  Scenario: Expand/collapse sections for Topics format.
+    Given I log in as "student1"
+    And I am on "Course 1" course homepage
+    And "[data-toggle=collapse]" "css_element" should exist in the "region-main" "region"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Forum 4"
+    And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I should not see "Forum 5"
+    When I click on "#collapssesection3" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    Then I should not see "Assignment 1" in the "region-main" "region"
+    And I should not see "Assignment 2" in the "region-main" "region"
+    And I should not see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection3" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+
+  @javascript
+  Scenario: Expand/collapse sections for Weeks format.
+    Given I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    When I navigate to "Settings" in current page administration
+    And I expand all fieldsets
+    And I set the following fields to these values:
+      | Format      | Weekly format     |
+    And I press "Save and display"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Forum 4"
+    And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
+    And I should see "Forum 5"
+    When I click on "#collapssesection3" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    Then I should not see "Assignment 1" in the "region-main" "region"
+    And I should not see "Assignment 2" in the "region-main" "region"
+    And I should not see "Book 2" in the "region-main" "region"
+    And I should not see "Book 3" in the "region-main" "region"
+    And I should not see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I click on "#collapssesection1" "css_element"
+    And I click on "#collapssesection2" "css_element"
+    And I click on "#collapssesection3" "css_element"
+    And I click on "#collapssesection4" "css_element"
+    And I click on "#collapssesection5" "css_element"
+    And I should see "Assignment 1" in the "region-main" "region"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And I should see "Book 2" in the "region-main" "region"
+    And I should see "Book 3" in the "region-main" "region"
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Forum 4"
+    And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
+    And I should see "Forum 5"
+
+  @javascript
+  Scenario: Users don't see chevron on one section per page for Topics format
+    Given I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    When I navigate to "Settings" in current page administration
+    And I expand all fieldsets
+    And I set the following fields to these values:
+      | Course layout | Show one section per page |
+    And I press "Save and display"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    And I follow "Topic 2"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    Then "Topic 1" "section" should not exist
+    And "Topic 3" "section" should not exist
+    And I am on "Course 1" course homepage with editing mode on
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "Forum 4"
+    And I should see "Hidden from students" in the "#section-5 .availabilityinfo" "css_element"
+    And I should see "Forum 5"
+
+  @javascript
+  Scenario: Users don't see chevron on one section per page for Weeks format
+    Given I log in as "teacher1"
+    And I am on "Course 1" course homepage
+    When I navigate to "Settings" in current page administration
+    And I expand all fieldsets
+    And I set the following fields to these values:
+      | Format      | Weekly format     |
+      | Course layout | Show one section per page |
+    And I press "Save and display"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    And I follow "8 May - 14 May"
+    And I should see "Assignment 2" in the "region-main" "region"
+    And "[data-toggle=collapse]" "css_element" should not exist in the "region-main" "region"
+    Then "1 May - 7 May" "section" should not exist
+    And "15 May - 21 May" "section" should not exist
+    And I log out
+    And I log in as "student1"
+    And I am on "Course 1" course homepage
+    And I should see "Available until" in the "#section-4 .availabilityinfo" "css_element"
+    And I should see "2013" in the "#section-4 .availabilityinfo" "css_element"
+    And I should not see "Forum 4"
+    And I should see "Not available" in the "#section-5 .availabilityinfo" "css_element"
+    And I should not see "Forum 5"

lib/classes/output/icon_system_fontawesome.php

@@ -366,6 +366,7 @@ public function get_core_icon_map() {
             'core:t/collapsed_rtl' => 'fa-caret-left',
             'core:t/collapsed' => 'fa-caret-right',
             'core:t/collapsedcaret' => 'fa-caret-right',
+            'core:t/collapsedchevron' => 'fa-chevron-right',
             'core:t/contextmenu' => 'fa-cog',
             'core:t/copy' => 'fa-copy',
             'core:t/delete' => 'fa-trash',
@@ -385,6 +386,7 @@ public function get_core_icon_map() {
             'core:t/emptystar' => 'fa-star-o',
             'core:t/enrolusers' => 'fa-user-plus',
             'core:t/expanded' => 'fa-caret-down',
+            'core:t/expandedchevron' => 'fa-chevron-down',
             'core:t/go' => 'fa-play',
             'core:t/grades' => 'fa-table',
             'core:t/groupn' => 'fa-user',
@@ -487,4 +489,3 @@ public function render_pix_icon(renderer_base $output, pix_icon $icon) {
     }
 
 }
-

theme/boost/scss/moodle/icons.scss

@@ -102,8 +102,11 @@ $iconsizes: map-merge((
 }
 
 .icons-collapse-expand {
+    display: flex;
+    align-items: center;
     .expanded-icon {
-        display: block;
+        display: flex;
+        align-items: center;
     }
 
     .collapsed-icon {
@@ -116,7 +119,8 @@ $iconsizes: map-merge((
         }
 
         .collapsed-icon {
-            display: block;
+            display: flex;
+            align-items: center;
         }
     }
 }