MDL-71691 core_course: section styling

course/amd/src/actions.js

@@ -79,7 +79,8 @@ define(
             TOGGLE: '.toggle-display,.dropdown-toggle',
             SECTIONLI: 'li.section',
             SECTIONACTIONMENU: '.section_action_menu',
-            ADDSECTIONS: '.changenumsections [data-add-sections]'
+            ADDSECTIONS: '.changenumsections [data-add-sections]',
+            SECTIONBADGES: '[data-region="sectionbadges"]',
         };
 
         Y.use('moodle-course-coursebase', function() {
@@ -581,9 +582,11 @@ define(
             if (action === 'hide' || action === 'show') {
                 if (action === 'hide') {
                     sectionElement.addClass('hidden');
+                    setSectionBadge(sectionElement[0], 'hiddenfromstudents', true);
                     replaceActionItem(actionItem, 'i/show',
                         'showfromothers', 'format_' + courseformat, 'show');
                 } else {
+                    setSectionBadge(sectionElement[0], 'hiddenfromstudents', false);
                     sectionElement.removeClass('hidden');
                     replaceActionItem(actionItem, 'i/hide',
                         'hidefromothers', 'format_' + courseformat, 'hide');
@@ -613,11 +616,13 @@ define(
                 replaceActionItem(actionItem, 'i/marked',
                     'highlightoff', 'core', 'removemarker');
                 courseeditor.dispatch('legacySectionAction', action, sectionid);
+                setSectionBadge(sectionElement[0], 'highlighted', true);
             } else if (action === 'removemarker') {
                 sectionElement.removeClass('current');
                 replaceActionItem(actionItem, 'i/marker',
                     'highlight', 'core', 'setmarker');
                 courseeditor.dispatch('legacySectionAction', action, sectionid);
+                setSectionBadge(sectionElement[0], 'highlighted', false);
             }
         };
 
@@ -722,6 +727,30 @@ define(
             return true;
         };
 
+        /**
+         * Sets the section badge in the section header.
+         *
+         * @param {JQuery} sectionElement section element we perform action on
+         * @param {String} badgetype the type of badge this is for
+         * @param {bool} add true to add, false to remove
+         */
+        var setSectionBadge = function(sectionElement, badgetype, add) {
+            const sectionbadges = sectionElement.querySelector(SELECTOR.SECTIONBADGES);
+            if (!sectionbadges) {
+                return;
+            }
+            if (add) {
+                templates.render('core_courseformat/local/content/section/badges', {[badgetype]: 1})
+                .then(function(html, js) {
+                    templates.prependNodeContents(sectionbadges, html, js);
+                    return true;
+                }).catch(notification.exception);
+            } else {
+                const badge = sectionbadges.querySelector('[data-type="' + badgetype + '"]');
+                badge.remove();
+            }
+        };
+
         // Register a function to be executed after D&D of an activity.
         Y.use('moodle-course-coursebase', function() {
             M.course.coursebase.register_module({

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

@@ -26,6 +26,7 @@
 
 use core_courseformat\base as course_format;
 use completion_info;
+use context_course;
 use renderable;
 use templatable;
 use section_info;
@@ -119,11 +120,13 @@ public function hide_controls(): void {
      * @return stdClass data context for a mustache template
      */
     public function export_for_template(\renderer_base $output): stdClass {
+        global $USER;
 
         $format = $this->format;
         $course = $format->get_course();
         $thissection = $this->thissection;
         $singlesection = $format->get_section_number();
+        $context = context_course::instance($course->id);
 
         $summary = new $this->summaryclass($format, $thissection);
         $availability = new $this->availabilityclass($format, $thissection);
@@ -135,6 +138,7 @@ public function export_for_template(\renderer_base $output): stdClass {
             'insertafter' => false,
             'summary' => $summary->export_for_template($output),
             'availability' => $availability->export_for_template($output),
+            'restrictionlock' => !empty($thissection->availableinfo),
         ];
 
         // Check if it is a stealth sections (orphaned).
@@ -188,6 +192,15 @@ public function export_for_template(\renderer_base $output): stdClass {
         // When a section is displayed alone the title goes over the section, not inside it.
         $header = new $this->headerclass($format, $thissection);
 
+        if (!$thissection->visible) {
+            $data->ishidden = true;
+            $data->notavailable = true;
+            if (has_capability('moodle/course:viewhiddensections', $context, $USER)) {
+                $data->hiddenfromstudents = true;
+                $data->notavailable = false;
+            }
+        }
+
         if ($thissection->section == $singlesection) {
             if (empty($this->hidetitle)) {
                 $data->singleheader = $header->export_for_template($output);
@@ -216,11 +229,13 @@ public function export_for_template(\renderer_base $output): stdClass {
             $data->cmlist = $cmlist->export_for_template($output);
         }
 
-        if (!$thissection->visible) {
-            $data->ishidden = true;
+        $data->hasavailability = false;
+        if (isset($data->availability->hasavailability)) {
+            $data->hasavailability = $data->availability->hasavailability;
         }
+
         if ($format->is_section_current($thissection)) {
-            $data->iscurrent = true;
+            $data->highlighted = true;
             $data->currentlink = get_accesshide(
                 get_string('currentsection', 'format_'.$format->get_format())
             );
@@ -229,4 +244,3 @@ public function export_for_template(\renderer_base $output): stdClass {
         return $data;
     }
 }
-

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

@@ -103,13 +103,7 @@ protected function get_info(\renderer_base $output): array {
 
         $info = [];
         if (!$section->visible) {
-            if ($canviewhidden) {
-                $info[] = $this->availability_info(get_string('hiddenfromstudents'), 'ishidden');
-            } else {
-                // We are here because of the setting "Hidden sections are shown as not available".
-                // Student can not see the section contents but can see its name.
-                $info[] = $this->availability_info(get_string('notavailable'), 'ishidden');
-            }
+            $info = [];
         } else if (!$section->uservisible) {
             if ($section->availableinfo) {
                 // Note: We only get to this function if availableinfo is non-empty,

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

@@ -79,7 +79,8 @@ public function export_for_template(\renderer_base $output): stdClass {
 
         // Convert control array into an action_menu.
         $menu = new action_menu();
-        $menu->set_menu_trigger(get_string('edit'));
+        $icon = $output->pix_icon('i/menu', get_string('edit'));
+        $menu->set_menu_trigger($icon, 'btn btn-icon d-flex align-items-center justify-content-center');
         $menu->attributes['class'] .= ' section-actions';
         foreach ($controls as $value) {
             $url = empty($value['url']) ? '' : $value['url'];

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

@@ -73,31 +73,30 @@ public function export_for_template(\renderer_base $output): stdClass {
             'id' => $section->id,
         ];
 
+        $data->title = $output->section_title_without_link($section, $course);
+
+        $coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
+        $data->headerdisplaymultipage = false;
+        if ($coursedisplay == COURSE_DISPLAY_MULTIPAGE) {
+            $data->headerdisplaymultipage = true;
+            $data->title = $output->section_title($section, $course);
+        }
+
         if ($section->section > $format->get_last_section_number()) {
             // Stealth sections (orphaned) has special title.
             $data->title = get_string('orphanedactivitiesinsectionno', '', $section->section);
-        } else if ($section->section && ($section->section == $format->get_section_number())) {
-            // Regular section title.
-            $data->title = $output->section_title_without_link($section, $course);
-            $data->issinglesection = true;
-        } else if ($section->uservisible) {
-            // Regular section title.
-            $data->title = $output->section_title($section, $course);
-        } else {
-            // Regular section title without link.
-            $data->title = $output->section_title_without_link($section, $course);
         }
 
         if (!$section->visible) {
             $data->ishidden = true;
         }
 
-        $coursedisplay = $course->coursedisplay ?? COURSE_DISPLAY_SINGLEPAGE;
-
         if ($course->id == SITEID) {
             $data->sitehome = true;
         }
 
+        $data->editing = $format->show_editor();
+
         if (!$format->show_editor() && $coursedisplay == COURSE_DISPLAY_MULTIPAGE && empty($data->issinglesection)) {
             if ($section->uservisible) {
                 $data->url = course_get_url($course, $section->section);

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

@@ -80,7 +80,7 @@
     }
 }}
 <li id="section-{{num}}"
-    class="section main {{#onlysummary}} section-summary {{/onlysummary}} clearfix
+    class="section course-section main {{#onlysummary}} section-summary {{/onlysummary}} clearfix
             {{#ishidden}} hidden {{/ishidden}} {{#iscurrent}} current {{/iscurrent}}
             {{#isstealth}} orphaned {{/isstealth}}"
     data-sectionid="{{num}}"
@@ -89,39 +89,51 @@
     data-id="{{id}}"
     data-number="{{num}}"
 >
-    {{#singleheader}} {{> core_courseformat/local/content/section/header }} {{/singleheader}}
-    <div class="left side">{{#iscurrent}} {{{currentlink}}} {{/iscurrent}}</div>
-    <div class="right side">
-    {{#collapsemenu}}
+    <div class="course-section-header d-flex"
+        data-for="section_title"
+        data-id="{{id}}"
+        data-number="{{num}}"
+    >
+        {{#singleheader}} {{> core_courseformat/local/content/section/header }} {{/singleheader}}
+        {{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
+        {{#restrictionlock}}
+            <div class="align-self-center ml-2">
+                {{#pix}}t/unlock, core{{/pix}}
+            </div>
+        {{/restrictionlock}}
+        <div data-region="sectionbadges" class="sectionbadges d-flex align-items-center">
+            {{> core_courseformat/local/content/section/badges }}
+        </div>
+        {{#collapsemenu}}
         <div class="flex-fill d-flex justify-content-end mr-2 align-self-center">
             <a
                 id="collapsesections"
                 class="section-collapsemenu"
                 href="#"
                 aria-expanded="true"
+                role="button"
                 data-toggle="toggleall"
             >
                 <span class="collapseall">{{#str}}collapseall{{/str}}</span>
                 <span class="expandall">{{#str}}expandall{{/str}}</span>
             </a>
-        </div>
-    {{/collapsemenu}}
-    {{#controlmenu}}
+            </div>
+        {{/collapsemenu}}
+        {{#controlmenu}}
             {{> core_courseformat/local/content/section/controlmenu }}
-    {{/controlmenu}}
+        {{/controlmenu}}
     </div>
-    {{#header}} {{> core_courseformat/local/content/section/header }} {{/header}}
     <div id="coursecontentcollapse{{num}}"
          class="content {{^iscoursedisplaymultipage}}
              {{^sitehome}}course-content-item-content collapse {{#contentexpanded}}show{{/contentexpanded}}{{/sitehome}}
          {{/iscoursedisplaymultipage}}">
-        {{#availability}}
-            {{> core_courseformat/local/content/section/availability }}
-        {{/availability}}
-        <div class="summary">
-        {{#summary}}
-            {{> core_courseformat/local/content/section/summary }}
-        {{/summary}}
+         <div class="{{#hasavailability}}description small{{/hasavailability}} my-3">
+            {{#summary}}
+                {{> core_courseformat/local/content/section/summary }}
+            {{/summary}}
+            {{#availability}}
+                {{> core_courseformat/local/content/section/availability }}
+            {{/availability}}
         </div>
         {{#cmsummary}} {{> core_courseformat/local/content/section/cmsummary }} {{/cmsummary}}
         {{#cmlist}} {{> core_courseformat/local/content/section/cmlist }} {{/cmlist}}

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

@@ -25,26 +25,23 @@
     {
         "info": [
             {
-                "classes": "",
                 "text": "Not available unless: <ul><li>It is on or after <strong>8 June 2012</strong></li></ul>",
-                "ishidden": 0,
-                "isstealth": 0,
                 "isrestricted": 1,
                 "isfullinfo": 1
             }
         ],
         "hasavailability": true
     }
 }}
-<div class="section_availability">
+<div class="section_availability course-description-item">
 {{#hasavailability}}
     {{#info}}
         <div class="availabilityinfo {{classes}}">
         {{^isrestricted}}
-            <span class="badge badge-info">{{{text}}}</span>
+            <span class="badge badge-pill badge-warning">{{{text}}}</span>
         {{/isrestricted}}
         {{#isrestricted}}
-            <span class="badge badge-info">{{#str}}restricted, core{{/str}}</span> {{{text}}}
+            {{#pix}}t/unlock, core{{/pix}}</span> {{{text}}}
         {{/isrestricted}}
         </div>
     {{/info}}

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

@@ -0,0 +1,39 @@
+{{!
+    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 core_courseformat/local/content/section/badges
+
+    Convenience mustache to displays if an activity is in hidden or stealth mode.
+
+    Format plugins are free to implement an alternative inplace editable for activities.
+
+    Example context (json):
+    {
+        "highlighted" : "1",
+        "hiddenfromstudents" : "1",
+        "notavailable" : "0"
+    }
+}}
+{{#highlighted}}
+    <span class="badge badge-pill badge-primary order-1" data-type="highlighted">{{#str}}highlighted{{/str}}</span>
+{{/highlighted}}
+{{#hiddenfromstudents}}
+    <span class="badge badge-pill badge-warning order-2" data-type="hiddenfromstudents">{{#str}}hiddenfromstudents{{/str}}</span>
+{{/hiddenfromstudents}}
+{{#notavailable}}
+    <span class="badge badge-pill badge-secondary order-3">{{#str}}notavailable{{/str}}</span>
+{{/notavailable}}

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

@@ -26,7 +26,7 @@
     }
 }}
 {{#hasmenu}}
-<div class="section_action_menu" data-sectionid="{{id}}">
+<div class="section_action_menu ml-auto" data-sectionid="{{id}}">
     {{{menu}}}
 </div>
 {{/hasmenu}}