From 1b8ec78421d90ff01693c5e07fbcd5c33310e244 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mikel=20Mart=C3=ADn?= <mikel@moodle.com>
Date: Thu, 11 Jul 2024 13:54:15 +0200
Subject: [PATCH] MDL-81766 mod_subsection: Display subsection content in
 activity card

- Replace the standard activity card display with the delegated section
  rendering.
- Add and fix related SCSS styles.
---
 .../local/content/cm/activity.mustache        |  2 +-
 mod/subsection/lib.php                        | 36 +++++++++
 theme/boost/scss/moodle/course.scss           | 80 ++++++++++++++++---
 theme/boost/scss/moodle/undo.scss             |  4 +-
 theme/boost/style/moodle.css                  | 63 ++++++++++++---
 theme/classic/style/moodle.css                | 63 ++++++++++++---
 6 files changed, 212 insertions(+), 36 deletions(-)

diff --git a/course/format/templates/local/content/cm/activity.mustache b/course/format/templates/local/content/cm/activity.mustache
index 8bd20c4b92d..8ca5b939706 100644
--- a/course/format/templates/local/content/cm/activity.mustache
+++ b/course/format/templates/local/content/cm/activity.mustache
@@ -139,7 +139,7 @@
 
     {{! Description }}
     {{#altcontent}}
-        <div class="activity-altcontent d-flex text-break {{#hasname}}activity-description{{/hasname}}">
+        <div class="activity-altcontent text-break {{#hasname}}activity-description{{/hasname}}">
             {{{altcontent}}}
         </div>
     {{/altcontent}}
diff --git a/mod/subsection/lib.php b/mod/subsection/lib.php
index 9a8ed89e8df..b45271cea3b 100644
--- a/mod/subsection/lib.php
+++ b/mod/subsection/lib.php
@@ -207,3 +207,39 @@ function subsection_extend_navigation($subsectionnode, $course, $module, $cm) {
  */
 function subsection_extend_settings_navigation($settingsnav, $subsectionnode = null) {
 }
+
+/**
+ * Sets dynamic information about a course module
+ *
+ * This function is called from cm_info when displaying the module
+ * mod_subsection can be displayed inline on course page and therefore have no course link
+ *
+ * @param cm_info $cm
+ */
+function subsection_cm_info_dynamic(cm_info $cm) {
+    $cm->set_no_view_link();
+}
+
+/**
+ * Sets the special subsection display on course page.
+ *
+ * @param cm_info $cm Course-module object
+ */
+function subsection_cm_info_view(cm_info $cm) {
+    global $DB, $PAGE;
+
+    $cm->set_custom_cmlist_item(true);
+    $course = $DB->get_record('course', ['id' => $cm->course], '*', MUST_EXIST);
+
+    // Get the section info.
+    $delegatedsection = manager::create_from_coursemodule($cm)->get_delegated_section_info();
+
+    // Render the delegated section.
+    $format = course_get_format($course);
+    $renderer = $PAGE->get_renderer('format_' . $course->format);
+    $outputclass = $format->get_output_classname('content\\delegatedsection');
+    /** @var \core_courseformat\output\local\content\delegatedsection $delegatedsectionoutput */
+    $delegatedsectionoutput = new $outputclass($format, $delegatedsection);
+
+    $cm->set_content($renderer->render($delegatedsectionoutput), true);
+}
diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 49d15508ac9..9d205e49431 100644
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -1078,6 +1078,7 @@ span.editinstructions {
 
 /* Variables definition*/
 
+$activity-item-padding: 0.75rem !default;
 $activity-border-radius: 1rem !default;
 $activity-border-width: 2px !default;
 $activity-hover-border-color: $primary !default;
@@ -1211,10 +1212,15 @@ $divider-hover-color: $primary !default;
     }
 
     // Override '.btn.btn-icon' styles from buttons.scss to make action menu buttons smaller.
-    .action-menu .btn.btn-icon {
-        height: map-get($iconsizes, 5);
-        width: map-get($iconsizes, 5);
-        @include border-radius();
+    .action-menu {
+        .btn.btn-icon {
+            height: map-get($iconsizes, 5);
+            width: map-get($iconsizes, 5);
+            @include border-radius();
+        }
+        &.section-actions .btn.btn-icon {
+            font-size: $font-size-lg;
+        }
     }
 
     .section-summary-activities {
@@ -1292,8 +1298,9 @@ $divider-hover-color: $primary !default;
     padding-top: map-get($spacers, 1);
     margin-top: map-get($spacers, 1);
     border-top: $border-width solid $border-color;
-    // Custom styles for activity while editing.
-    .editing & {
+    // Custom styles for activity while editing and for the first activity card in the section.
+    .editing &,
+    .section &:first-child {
         // Remove activity top border and spacing, while editing a separator is displayed.
         padding-top: 0;
         margin-top: 0;
@@ -1303,10 +1310,10 @@ $divider-hover-color: $primary !default;
 
 .activity-item {
     position: relative;
-    padding: .75rem;
-    background-color: $white;
+    padding: $activity-item-padding;
+    @include border-radius($activity-border-radius);
     &.activityinline {
-        padding: .75rem 0;
+        padding: $activity-item-padding 0;
     }
     &.hiddenactivity {
         background-color: $gray-100;
@@ -1318,14 +1325,13 @@ $divider-hover-color: $primary !default;
     // Custom styles for activity cards while editing.
     .editing & {
         cursor: move;
-        border: $activity-border-width solid transparent;
-        @include border-radius($activity-border-radius);
         .a {
             cursor: pointer;
         }
-        &:hover,
+        // Add a border on hover to the activity card (avoiding hover effect in inner activities).
+        &:hover:not(:has(.activity:hover)),
         &.selected {
-            border: $activity-border-width solid $activity-hover-border-color;
+            outline: $activity-border-width solid $activity-hover-border-color;
             box-shadow: $box-shadow-sm;
             .activityiconcontainer,
             .badge {
@@ -1715,6 +1721,7 @@ $divider-hover-color: $primary !default;
 }
 
 /* Styles for the Move activity and Move section modals */
+
 .move-activity-tree {
     .collapse-list-item {
         @include border-radius();
@@ -1754,3 +1761,50 @@ $divider-hover-color: $primary !default;
         font-weight: bold;
     }
 }
+
+/* Subsection specific styles */
+
+.activity.subsection {
+    border-top: none;
+    > .activity-item {
+        border: $border-width solid $border-color;
+        padding: 0;
+        .activity-altcontent {
+            margin-top: 0;
+        }
+    }
+    .section {
+        margin-top: 0;
+        .section-item {
+            border: none;
+            padding: $activity-item-padding;
+        }
+        .icons-collapse-expand:has(+ h4) {
+            height: map-get($iconsizes, 4);
+            width: map-get($iconsizes, 4);
+            font-size: $font-size-sm;
+        }
+        h4 {
+            font-size: $h5-font-size;
+        }
+        .section-actions .btn.btn-icon {
+            font-size: inherit;
+        }
+    }
+    + .activity {
+        border-top: none;
+    }
+    // Allow v-parent-focus only for closest acvitity (avoiding subsection).
+    .focus-control:not(:has(.focus-control)) {
+        &:focus-within .v-parent-focus,
+        &:hover .v-parent-focus {
+            opacity: 1 !important; // stylelint-disable-line declaration-no-important
+            visibility: visible !important; // stylelint-disable-line declaration-no-important
+        }
+    }
+    .focus-control:focus-within .focus-control .v-parent-focus,
+    .focus-control:hover .focus-control .v-parent-focus {
+        opacity: 0;
+        visibility: hidden;
+    }
+}
diff --git a/theme/boost/scss/moodle/undo.scss b/theme/boost/scss/moodle/undo.scss
index 0cb23fbb6ba..e384d7804da 100644
--- a/theme/boost/scss/moodle/undo.scss
+++ b/theme/boost/scss/moodle/undo.scss
@@ -11,7 +11,6 @@ li.activity.label,
 .file-picker td.label {
     background: inherit;
     color: inherit;
-    border: inherit;
     text-shadow: none;
     white-space: normal;
     display: block;
@@ -21,6 +20,7 @@ li.activity.label,
 }
 
 .file-picker td.label {
+    border: inherit;
     display: table-cell;
     text-align: right;
     padding: 8px;
@@ -55,7 +55,7 @@ li.activity.label,
  * it to white?
  */
 
-li.section.hidden,
+.section.hidden,
 .block.hidden,
 .block.invisible {
     visibility: visible;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 1c2d0594176..38876ddd124 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -29068,6 +29068,9 @@ span.editinstructions .alert-link {
   width: 32px;
   border-radius: 0.5rem;
 }
+.course-section .action-menu.section-actions .btn.btn-icon {
+  font-size: 1.171875rem;
+}
 .course-section .section-summary-activities .icon {
   width: inherit;
   color: #0f6cbf;
@@ -29126,7 +29129,7 @@ span.editinstructions .alert-link {
   margin-top: 0.25rem;
   border-top: 1px solid #dee2e6;
 }
-.editing .activity {
+.editing .activity, .section .activity:first-child {
   padding-top: 0;
   margin-top: 0;
   border-top: none;
@@ -29135,7 +29138,7 @@ span.editinstructions .alert-link {
 .activity-item {
   position: relative;
   padding: 0.75rem;
-  background-color: #fff;
+  border-radius: 1rem;
 }
 .activity-item.activityinline {
   padding: 0.75rem 0;
@@ -29149,18 +29152,16 @@ span.editinstructions .alert-link {
 }
 .editing .activity-item {
   cursor: move;
-  border: 2px solid transparent;
-  border-radius: 1rem;
 }
 .editing .activity-item .a {
   cursor: pointer;
 }
-.editing .activity-item:hover, .editing .activity-item.selected {
-  border: 2px solid #0f6cbf;
+.editing .activity-item:hover:not(:has(.activity:hover)), .editing .activity-item.selected {
+  outline: 2px solid #0f6cbf;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
-.editing .activity-item:hover .activityiconcontainer,
-.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
+.editing .activity-item:hover:not(:has(.activity:hover)) .activityiconcontainer,
+.editing .activity-item:hover:not(:has(.activity:hover)) .badge, .editing .activity-item.selected .activityiconcontainer,
 .editing .activity-item.selected .badge {
   mix-blend-mode: multiply;
 }
@@ -29919,6 +29920,48 @@ span.editinstructions .alert-link {
   font-weight: bold;
 }
 
+/* Subsection specific styles */
+.activity.subsection {
+  border-top: none;
+}
+.activity.subsection > .activity-item {
+  border: 1px solid #dee2e6;
+  padding: 0;
+}
+.activity.subsection > .activity-item .activity-altcontent {
+  margin-top: 0;
+}
+.activity.subsection .section {
+  margin-top: 0;
+}
+.activity.subsection .section .section-item {
+  border: none;
+  padding: 0.75rem;
+}
+.activity.subsection .section .icons-collapse-expand:has(+ h4) {
+  height: 24px;
+  width: 24px;
+  font-size: 0.8203125rem;
+}
+.activity.subsection .section h4 {
+  font-size: 1.171875rem;
+}
+.activity.subsection .section .section-actions .btn.btn-icon {
+  font-size: inherit;
+}
+.activity.subsection + .activity {
+  border-top: none;
+}
+.activity.subsection .focus-control:not(:has(.focus-control)):focus-within .v-parent-focus, .activity.subsection .focus-control:not(:has(.focus-control)):hover .v-parent-focus {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+.activity.subsection .focus-control:focus-within .focus-control .v-parent-focus,
+.activity.subsection .focus-control:hover .focus-control .v-parent-focus {
+  opacity: 0;
+  visibility: hidden;
+}
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target,
 :focus {
@@ -36119,7 +36162,6 @@ li.activity.label,
 .file-picker td.label {
   background: inherit;
   color: inherit;
-  border: inherit;
   text-shadow: none;
   white-space: normal;
   display: block;
@@ -36129,6 +36171,7 @@ li.activity.label,
 }
 
 .file-picker td.label {
+  border: inherit;
   display: table-cell;
   text-align: right;
   padding: 8px;
@@ -36160,7 +36203,7 @@ li.activity.label,
  * nice effect, though they'd still be active. Maybe reverse
  * it to white?
  */
-li.section.hidden,
+.section.hidden,
 .block.hidden,
 .block.invisible {
   visibility: visible;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 42d4acacb90..051a03f00c2 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -29068,6 +29068,9 @@ span.editinstructions .alert-link {
   width: 32px;
   border-radius: 0.25rem;
 }
+.course-section .action-menu.section-actions .btn.btn-icon {
+  font-size: 1.171875rem;
+}
 .course-section .section-summary-activities .icon {
   width: inherit;
   color: #0f6cbf;
@@ -29126,7 +29129,7 @@ span.editinstructions .alert-link {
   margin-top: 0.25rem;
   border-top: 1px solid #dee2e6;
 }
-.editing .activity {
+.editing .activity, .section .activity:first-child {
   padding-top: 0;
   margin-top: 0;
   border-top: none;
@@ -29135,7 +29138,7 @@ span.editinstructions .alert-link {
 .activity-item {
   position: relative;
   padding: 0.75rem;
-  background-color: #fff;
+  border-radius: 1rem;
 }
 .activity-item.activityinline {
   padding: 0.75rem 0;
@@ -29149,18 +29152,16 @@ span.editinstructions .alert-link {
 }
 .editing .activity-item {
   cursor: move;
-  border: 2px solid transparent;
-  border-radius: 1rem;
 }
 .editing .activity-item .a {
   cursor: pointer;
 }
-.editing .activity-item:hover, .editing .activity-item.selected {
-  border: 2px solid #0f6cbf;
+.editing .activity-item:hover:not(:has(.activity:hover)), .editing .activity-item.selected {
+  outline: 2px solid #0f6cbf;
   box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }
-.editing .activity-item:hover .activityiconcontainer,
-.editing .activity-item:hover .badge, .editing .activity-item.selected .activityiconcontainer,
+.editing .activity-item:hover:not(:has(.activity:hover)) .activityiconcontainer,
+.editing .activity-item:hover:not(:has(.activity:hover)) .badge, .editing .activity-item.selected .activityiconcontainer,
 .editing .activity-item.selected .badge {
   mix-blend-mode: multiply;
 }
@@ -29919,6 +29920,48 @@ span.editinstructions .alert-link {
   font-weight: bold;
 }
 
+/* Subsection specific styles */
+.activity.subsection {
+  border-top: none;
+}
+.activity.subsection > .activity-item {
+  border: 1px solid #dee2e6;
+  padding: 0;
+}
+.activity.subsection > .activity-item .activity-altcontent {
+  margin-top: 0;
+}
+.activity.subsection .section {
+  margin-top: 0;
+}
+.activity.subsection .section .section-item {
+  border: none;
+  padding: 0.75rem;
+}
+.activity.subsection .section .icons-collapse-expand:has(+ h4) {
+  height: 24px;
+  width: 24px;
+  font-size: 0.8203125rem;
+}
+.activity.subsection .section h4 {
+  font-size: 1.171875rem;
+}
+.activity.subsection .section .section-actions .btn.btn-icon {
+  font-size: inherit;
+}
+.activity.subsection + .activity {
+  border-top: none;
+}
+.activity.subsection .focus-control:not(:has(.focus-control)):focus-within .v-parent-focus, .activity.subsection .focus-control:not(:has(.focus-control)):hover .v-parent-focus {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+.activity.subsection .focus-control:focus-within .focus-control .v-parent-focus,
+.activity.subsection .focus-control:hover .focus-control .v-parent-focus {
+  opacity: 0;
+  visibility: hidden;
+}
+
 /* Anchor link offset fix. This makes hash links scroll 60px down to account for the fixed header. */
 :target,
 :focus {
@@ -36119,7 +36162,6 @@ li.activity.label,
 .file-picker td.label {
   background: inherit;
   color: inherit;
-  border: inherit;
   text-shadow: none;
   white-space: normal;
   display: block;
@@ -36129,6 +36171,7 @@ li.activity.label,
 }
 
 .file-picker td.label {
+  border: inherit;
   display: table-cell;
   text-align: right;
   padding: 8px;
@@ -36160,7 +36203,7 @@ li.activity.label,
  * nice effect, though they'd still be active. Maybe reverse
  * it to white?
  */
-li.section.hidden,
+.section.hidden,
 .block.hidden,
 .block.invisible {
   visibility: visible;