From 18789c231dd6bc4b18c24642d660ef197c9c4ac0 Mon Sep 17 00:00:00 2001
From: mpeltriaux <michel.peltriaux@sgdnord.rlp.de>
Date: Tue, 10 May 2022 15:07:21 +0200
Subject: [PATCH] Visual enhancement for custom JS tree widget

* adds proper css behaviour for collapsed icon
* adds minor js comments
---
 konova/static/css/konova.css                          | 11 ++++++++++-
 .../konova/widgets/checkbox-tree-select-content.html  |  6 ++++--
 .../konova/widgets/checkbox-tree-select.html          |  3 +++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/konova/static/css/konova.css b/konova/static/css/konova.css
index 7e7f3fd1..ed797046 100644
--- a/konova/static/css/konova.css
+++ b/konova/static/css/konova.css
@@ -262,4 +262,13 @@ Similar to bootstraps 'shadow-lg'
     padding-left: 2em;
 }
 
- */
\ No newline at end of file
+ */
+.collapse-icn > i{
+    transition: all 0.3s ease;
+}
+.collapsed .collapse-icn > i{
+    transform: rotate(-90deg);
+}
+.tree-label.badge{
+    font-size: 90%;
+}
\ No newline at end of file
diff --git a/konova/templates/konova/widgets/checkbox-tree-select-content.html b/konova/templates/konova/widgets/checkbox-tree-select-content.html
index 9bf57253..31599efa 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select-content.html
+++ b/konova/templates/konova/widgets/checkbox-tree-select-content.html
@@ -2,11 +2,13 @@
 
 {% for code in codes %}
 <div class="ml-4 tree-element">
-    <label class="tree-label" role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}">
+    <label class="tree-label collapsed" role="{% if not code.is_leaf%}button{% endif %}" for="input_{{code.pk|unlocalize}}" id="{{code.pk|unlocalize}}" data-toggle="collapse" data-target="#children_{{code.pk|unlocalize}}" aria-expanded="true" aria-controls="children_{{code.pk|unlocalize}}">
         {% if code.is_leaf%}
         <input class="tree-input" id="input_{{code.pk|unlocalize}}" name="{{ widget.name }}" type="checkbox" value="{{code.pk|unlocalize}}" {% if code.pk|unlocalize in widget.value %}checked{% endif %}/>
         {% else %}
-        {% fa5_icon 'angle-right' %}
+        <span class="collapse-icn">
+            {% fa5_icon 'angle-down' %}
+        </span>
         {% endif %}
         {{code.long_name}}
     </label>
diff --git a/konova/templates/konova/widgets/checkbox-tree-select.html b/konova/templates/konova/widgets/checkbox-tree-select.html
index c2b107cc..68e4321a 100644
--- a/konova/templates/konova/widgets/checkbox-tree-select.html
+++ b/konova/templates/konova/widgets/checkbox-tree-select.html
@@ -47,9 +47,12 @@
             }
         );
         if(val.length > 0){
+            // Hide everything
             allTreeElements.hide()
+            // Now show again everything matching the query
             allTreeElementsContain.show()
         }else{
+            // Show everything if no query exists
             allTreeElements.show()
         }
     }