From 8e4c3d7e16f2e4de25b970125dde9a4217672d47 Mon Sep 17 00:00:00 2001
From: Andreas Schenkel <Andreas.Schenkel@web.de>
Date: Wed, 24 Jan 2024 21:52:00 +0100
Subject: [PATCH] add icon that indicates when courselist is collapsed and add
 hover effect to show where to show or hide courselist

---
 CHANGELOG.md                                |  4 ++--
 styles.css                                  | 20 +++++++++++++++++++-
 templates/overviewmyrolesincourses.mustache | 21 +++++++++++++++++----
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 116956d..e542a90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,8 @@ Reviewed version of pull request with some adaptions.
 5. add calender icon in front of duration
 6. add langstring (category hidden) to the plugin instead of using core lang string 
 7. add indicator for roles that are not core roles and add some css for backgroundcolor for non core roles
-7. add backgroundcolor in css for all core roles and also for all non core roles 
-
+8. add backgroundcolor in css for all core roles and also for all non core roles
+9. add icon that indicates when courselist is collapsed and add hover effect to show where to show or hide courselist
 
 [[v1.5.0]] 20240120
 add pullrequest from eLearning-TUDarmstadt
diff --git a/styles.css b/styles.css
index 364d988..63fd0fe 100644
--- a/styles.css
+++ b/styles.css
@@ -70,10 +70,28 @@
     padding-right: 5px;
 }
 
-.overviewmyrolesincourses-foldonstart {
+.overviewmyrolesincourses-content-fold {
     display: none;
 }
 
+.overviewmyrolesincourses-unfold {
+    cursor: zoom-in;
+}
+.overviewmyrolesincourses-unfold:before {
+    font-family: "FontAwesome";
+    font-weight: 900;
+    content: "\f0da";
+}
+
+.overviewmyrolesincourses-fold {
+    cursor: zoom-out;
+}
+.overviewmyrolesincourses-fold:before {
+    font-family: "FontAwesome";
+    font-weight: 900;
+    content: "\f0d7";
+}
+
 .overviewmyrolesincourses .row.duration {
     margin-left: 0;
 }
diff --git a/templates/overviewmyrolesincourses.mustache b/templates/overviewmyrolesincourses.mustache
index f4235be..51c5543 100644
--- a/templates/overviewmyrolesincourses.mustache
+++ b/templates/overviewmyrolesincourses.mustache
@@ -86,18 +86,31 @@
 <div class="overviewmyrolesincourses">
     <script>
         function myFunction{{roleshortname}}() {
-            var element = document.getElementById("overviewmyrolesincourses-visibility-{{roleshortname}}");
-            element.classList.toggle("overviewmyrolesincourses-foldonstart");
+            // toggle table header
+            var header = document.getElementById("overviewmyrolesincourses-bg-{{roleshortname}}");
+            header.classList.toggle("overviewmyrolesincourses-unfold");
+            header.classList.toggle("overviewmyrolesincourses-fold");
+
+            // toggle table content
+            var content = document.getElementById("overviewmyrolesincourses-visibility-{{roleshortname}}");
+            content.classList.toggle("overviewmyrolesincourses-content-fold");
         }
     </script>
-    <div class="border p-2 overviewmyrolesincourses-bg-{{roleshortname}} {{#iscorerole}}iscorerole{{/iscorerole}} {{^iscorerole}}isnotcorerole{{/iscorerole}}" onclick="myFunction{{roleshortname}}()">
+    <div id="overviewmyrolesincourses-bg-{{roleshortname}}"
+            class="border p-2 overviewmyrolesincourses-bg-{{roleshortname}}
+                {{#foldonstart}}overviewmyrolesincourses-unfold{{/foldonstart}}
+                {{^foldonstart}}overviewmyrolesincourses-fold{{/foldonstart}}
+                {{#iscorerole}}iscorerole{{/iscorerole}}
+                {{^iscorerole}}isnotcorerole{{/iscorerole}}"
+                onclick="myFunction{{roleshortname}}()">
+        <span class="foldstatus"></span>
         <span class="overviewmyrolesincourses-rolelocalname">{{rolelocalname}}</span>
         <span class="overviewmyrolesincourses-separator">:</span>
         <span class="overviewmyrolesincourses-counter">{{counter}}</span>
         <span class="overviewmyrolesincourses-courses">{{courses}}</span>
     </div>
     <div id="overviewmyrolesincourses-visibility-{{roleshortname}}"
-            class="{{#foldonstart}}overviewmyrolesincourses-foldonstart{{/foldonstart}}">
+            class="{{#foldonstart}}overviewmyrolesincourses-content-fold{{/foldonstart}}">
         {{#mylist}}
         <div class="border">
             <div class="{{cssselectordurationstatusofcourse}} {{dimmed}}">