Fixed help icons in summary templates

davidherney · Oct 11, 2024 · 892abc2 · 892abc2
1 parent 556a931
commit 892abc2
Show file tree

Hide file tree

Showing 11 changed files with 187 additions and 128 deletions.
diff --git a/amd/build/main.min.js b/amd/build/main.min.js
diff --git a/amd/build/main.min.js.map b/amd/build/main.min.js.map
diff --git a/amd/src/main.js b/amd/src/main.js
@@ -63,11 +63,11 @@ export const init = () => {
 
     loadStrings();
 
-    $('.format-menutopic .menutopic .iconwithhelp').each(function() {
+    $('.format-menutopic .menutopic .iconwithhelp[data-helpwindow]').each(function() {
         var $node = $(this);
         $node.on('click', function(e) {
             e.preventDefault();
-            var $content = $node.find('.iconwithhelp-content');
+            var $content = $('#hw-' + $node.data('helpwindow'));
 
             if ($content.data('modal')) {
                 $content.data('modal').show();
@@ -83,7 +83,7 @@ export const init = () => {
             // Show the content in a modal window.
             ModalFactory.create({
                 'title': title,
-                'body': ''
+                'body': '',
             }).done(function(modal) {
 
                 var contenthtml = $content.html();
@@ -95,6 +95,7 @@ export const init = () => {
                 );
 
                 var $modalBody = modal.getBody();
+                $modalBody.css('min-height', '150px');
                 $modalBody.append(contenthtml);
                 modal.show();
                 $content.data('modal', modal);

diff --git a/classes/output/courseformat/content/section/summary.php b/classes/output/courseformat/content/section/summary.php
@@ -168,7 +168,15 @@ private function replace_resources(section_info $section) {
                 $cmdata->singlename = $instancename;
 
                 // ToDo: implement show course badges, completion, etc, when template is active.
+                $cmdata->hascompletion = isset($cmdata->completion) && $cmdata->completion;
+                $hasavailability = isset($cmdata->modavailability) ? $cmdata->modavailability->hasmodavailability : false;
+
                 $cmdata->showinlinehelp = false;
+                if ($cmdata->hascompletion
+                        || (isset($cmdata->hasdates) && $cmdata->hasdates)
+                        || $hasavailability){
+                    $cmdata->showinlinehelp = true;
+                }
 
                 $url = $mod->url;
                 if (empty($url)) {
@@ -215,6 +223,10 @@ private function replace_resources(section_info $section) {
                     $this->format->tplcmsused[] = $modnumber;
                 }
 
+                if ($cmdata->showinlinehelp) {
+                    $newsummary .= $renderer->render_from_template('format_menutopic/courseformat/content/cm/cmhelpinfo', $cmdata);
+                }
+
                 $summary = $newsummary;
 
             }

diff --git a/styles.css b/styles.css
@@ -219,9 +219,11 @@
     display: none;
 }
 
+.format-menutopic .summarytext img.activityicon,
 .format-menutopic .summary img.activityicon {
     margin-right: 3px;
     vertical-align: text-bottom;
+    border-radius: 0;
 }
 
 #format_menutopic_menu.format-menutopic-menu li.menuitem.menu-withsubitems {
@@ -415,9 +417,9 @@
 
 /* Template styles */
 .format-menutopic .menutopic .cmnameinline .activityiconcontainer {
-    width: auto;
-    height: auto;
-    padding: 0.2rem;
+    padding-left: 0.2rem;
+    padding-right: 0;
+    display: inline-flex;
 }
 
 .format-menutopic .activityinsummarytpl .description .course-description-item {
@@ -439,6 +441,21 @@
     display: block;
 }
 
+.format-menutopic .modal-body .activity-info .completion-dropdown a[role="button"].btn,
+.format-menutopic .modal-body .activity-info .completion-dropdown button.btn {
+    color: #1d2125;
+    background-color: #fff;
+    border-color: #ced4da;
+    min-height: 32px;
+    font-weight: bold;
+    border-radius: 0.5rem;
+}
+.format-menutopic .modal-body .activity-info .completion-dropdown a[role="button"].btn:hover,
+.format-menutopic .modal-body .activity-info .completion-dropdown button.btn:hover {
+    color: #fff;
+    background-color: #6a737b;
+    border-color: #b1bbc4;
+}
 /* End of template styles */
 
 /* Completion */