diff --git a/feincms3/admin.py b/feincms3/admin.py index b50e357..0b94d1e 100644 --- a/feincms3/admin.py +++ b/feincms3/admin.py @@ -14,6 +14,7 @@ from django.utils.text import capfirst from django.utils.translation import gettext_lazy as _ from django.views.decorators.csrf import csrf_protect +from js_asset.js import JS from tree_queries.forms import TreeNodeChoiceField @@ -67,10 +68,22 @@ class NodeAdmin(TreeAdmin): """ list_display = ("indented_title", "move_column") - - class Media: - css = {"all": ["feincms3/box-drawing.css"]} - js = ["feincms3/box-drawing.js"] + initially_collapse_depth = 1 + + @property + def media(self): + return forms.Media( + css={"all": ["feincms3/box-drawing.css"]}, + js=[ + JS( + "feincms3/box-drawing.js", + { + "id": "feincms3-context", + "data-initially-collapse-depth": self.initially_collapse_depth, + }, + ) + ], + ) def get_queryset(self, request): return self.model._default_manager.with_tree_fields() diff --git a/feincms3/static/feincms3/box-drawing.css b/feincms3/static/feincms3/box-drawing.css index 4a166f6..c8e85db 100644 --- a/feincms3/static/feincms3/box-drawing.css +++ b/feincms3/static/feincms3/box-drawing.css @@ -41,6 +41,8 @@ .field-collapse_column { position: relative; + width: 1rem; + padding: 0 !important; } .collapse-toggle { @@ -52,18 +54,19 @@ display: inline-block; transition: 0.1s transform; - transform: rotate(0deg) translateY(4px); + transform: rotate(0deg) translateY(6px); transform-origin: 50% 50%; cursor: pointer; } .collapse-toggle.collapsed { - transform: rotate(-45deg) translateY(-2px); + transform: rotate(-45deg) translateY(2px); } .collapse-toggle::after { content: "\25E2"; + font-size: 1rem; } .collapse-hide { diff --git a/feincms3/static/feincms3/box-drawing.js b/feincms3/static/feincms3/box-drawing.js index ee0ddaa..038ce23 100644 --- a/feincms3/static/feincms3/box-drawing.js +++ b/feincms3/static/feincms3/box-drawing.js @@ -19,8 +19,12 @@ document.addEventListener("DOMContentLoaded", () => { nodes[pk] = [pk, treeDepth, [], node, toggle]) if (treeDepth > 0) { - parents[treeDepth - 1][CHILDREN].push(rec) - parents[treeDepth - 1][TOGGLE].classList.remove("collapse-hide") + // parent may be on the previous page if the changelist is paginated. + let parent = parents[treeDepth - 1] + if (parent) { + parent[CHILDREN].push(rec) + parent[TOGGLE].classList.remove("collapse-hide") + } } } @@ -51,5 +55,6 @@ document.addEventListener("DOMContentLoaded", () => { } }) - initiallyCollapse(1) + const context = document.querySelector("#feincms3-context") + initiallyCollapse(+context.getAttribute("data-initially-collapse-depth")) })