From bb399571b1ce78ba4d1c36cd2573627710af9750 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() } }