Hey guys, I've updated my prototype. What's changed: -- moved the JS and CSS to nav_sidebar.js and nav_sidebar.css respectively -- slight changes in styling -- added ESC key support
I've updated my gist https://gist.github.com/MilovanovM/84ffbbec02391c1ba1771a3a6aee5797 My changes are: nav_sidebar.html: line 4 nav_sidebar.css: line 121 and below nav_sidebar.js: line 40 and below Here is the commit in my repo https://github.com/MilovanovM/django/commit/837701e79c468f72cbce1921b42c130801927e1c I've attached a git patch file as well. Thanks, Maxim пятница, 4 декабря 2020 г. в 12:00:35 UTC+3, Adam Johnson: > I'm not sure that the nav_sidebar.html is the best place for the JS >> snippet. Probably, it should be placed in the main JS. When DOM is ready it >> can be initialized there. > > > Indeed, we can't use inline JS in the admin since that doesn't work with a > strict CSP. > > On Fri, 4 Dec 2020 at 08:42, Maxim Milovanov <[email protected]> wrote: > >> Hey guys, >> >> I'm not sure that the nav_sidebar.html is the best place for the JS >> snippet. Probably, it should be placed in the main JS. When DOM is ready it >> can be initialized there. >> >> About UX. Agree the the "Clear" feature would be useful. It can be an "x" >> icon, or a shortkey (ESC?), or both. >> >> I'll provide a working sample later. >> >> Thanks, >> Maxim >> >> среда, 2 декабря 2020 г. в 20:46:30 UTC+3, Collin Anderson: >> >>> I think this would be really helpful. Looking at the code in the gist, >>> that looks about right. It's not too complicated and the basic >>> toLowerCase()/indexOf() method of search should hopefully be enough (it's >>> what I would do if I were implementing this!). I'd suggest adding some sort >>> of clear or x button for canceling/removing the filter, but otherwise I >>> think this should be ok UX wise. We can always improve it later. >>> >>> On Thursday, November 19, 2020 at 9:38:25 AM UTC-5 [email protected] >>> wrote: >>> >>>> I haven't looked at the gist, but I think in principle it's a good >>>> idea. ctrl+f isn't ideal. >>>> >>>> I think we need to be careful that the UX is good, if we go with this. >>>> >>>> Tom >>>> >>>> On Thu, 19 Nov 2020 at 15:16, Maxim Milovanov <[email protected]> >>>> wrote: >>>> >>>>> Yeah, that's why I came up with that idea. There are two projects, 44 >>>>> models on one, 57 models on another. It's very hard to navigate >>>>> >>>>> четверг, 19 ноября 2020 г. в 16:50:37 UTC+3, [email protected]: >>>>> >>>>>> I found this feature very helpful. I'm maintaining two sites with >>>>>> more than 20 models registered in the admin and some time is annoying >>>>>> when >>>>>> I try to find the one I'm looking for >>>>>> >>>>>> El miércoles, 18 de noviembre de 2020 a la(s) 15:13:02 UTC-5, Maxim >>>>>> Milovanov escribió: >>>>>> >>>>>>> Hey guys, >>>>>>> >>>>>>> I've posted a ticket <https://code.djangoproject.com/ticket/32204> with >>>>>>> a proposal to add a quick filtering feature to the sidebar. >>>>>>> To see it in action just replace the content of nav_sidebar.html by >>>>>>> this >>>>>>> gist >>>>>>> <https://gist.github.com/MilovanovM/84ffbbec02391c1ba1771a3a6aee5797> >>>>>>> >>>>>>> Does it worth adding to the admin features? Hope for any feedback. >>>>>>> >>>>>>> Thanks, >>>>>>> Maxim >>>>>>> >>>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Django developers (Contributions to Django itself)" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>>> To view this discussion on the web visit >>>>> https://groups.google.com/d/msgid/django-developers/8376528d-a2df-43b0-829e-43a49bd44dddn%40googlegroups.com >>>>> >>>>> <https://groups.google.com/d/msgid/django-developers/8376528d-a2df-43b0-829e-43a49bd44dddn%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>> . >>>>> >>>> -- >> You received this message because you are subscribed to the Google Groups >> "Django developers (Contributions to Django itself)" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]. >> > To view this discussion on the web visit >> https://groups.google.com/d/msgid/django-developers/577ba446-7e78-42d8-8a1d-88db169475d4n%40googlegroups.com >> >> <https://groups.google.com/d/msgid/django-developers/577ba446-7e78-42d8-8a1d-88db169475d4n%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> > > > -- > Adam > -- You received this message because you are subscribed to the Google Groups "Django developers (Contributions to Django itself)" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/django-developers/fefe1de6-874c-44d0-a2a6-2574ce257373n%40googlegroups.com.
>From 837701e79c468f72cbce1921b42c130801927e1c Mon Sep 17 00:00:00 2001 From: Maxim Milovanov <[email protected]> Date: Fri, 4 Dec 2020 14:50:11 +0300 Subject: [PATCH] Add "Quick Filter" for sidebar navigation Discussion here https://groups.google.com/g/django-developers/c/Y19iuJAawkU --- .../admin/static/admin/css/nav_sidebar.css | 13 ++++++++++ .../admin/static/admin/js/nav_sidebar.js | 25 +++++++++++++++++++ .../admin/templates/admin/nav_sidebar.html | 1 + 3 files changed, 39 insertions(+) diff --git a/django/contrib/admin/static/admin/css/nav_sidebar.css b/django/contrib/admin/static/admin/css/nav_sidebar.css index 784d087419..9d2c9f08b6 100644 --- a/django/contrib/admin/static/admin/css/nav_sidebar.css +++ b/django/contrib/admin/static/admin/css/nav_sidebar.css @@ -117,3 +117,16 @@ max-width: 100%; } } + +#nav-filter { + width: 100%; + box-sizing: border-box; + padding: 5px 16px; + margin: 5px 0; + border: none; + outline: none; +} + +#nav-sidebar table { + width: 100%; +} diff --git a/django/contrib/admin/static/admin/js/nav_sidebar.js b/django/contrib/admin/static/admin/js/nav_sidebar.js index efaa7214b8..38338b9781 100644 --- a/django/contrib/admin/static/admin/js/nav_sidebar.js +++ b/django/contrib/admin/static/admin/js/nav_sidebar.js @@ -36,4 +36,29 @@ main.classList.toggle('shifted'); }); } + + // init quick filter + (function() { + const options = []; + const navSidebar = document.getElementById('nav-sidebar'); + if (!navSidebar) { return; } + navSidebar.querySelectorAll('th[scope=row] a').forEach((container) => { + options.push({title: container.innerHTML, node: container}); + }); + + function checkValue(e) { + let v = e.target.value; + if (v) { v = v.toLowerCase(); } + if (e.key === 'Escape') { v = ''; e.target.value = ''; } // clear input + for (const o of options) { + // show/hide parent <TR> + o.node.parentNode.parentNode.style.display = + (!v || o.title.toLowerCase().indexOf(v) !== -1) ? '' : 'none'; + } + } + + const nav = document.getElementById('nav-filter'); + nav.addEventListener('change', checkValue, false); + nav.addEventListener('keyup', checkValue, false); + })(); } diff --git a/django/contrib/admin/templates/admin/nav_sidebar.html b/django/contrib/admin/templates/admin/nav_sidebar.html index 32c5b8f839..560d0978c1 100644 --- a/django/contrib/admin/templates/admin/nav_sidebar.html +++ b/django/contrib/admin/templates/admin/nav_sidebar.html @@ -1,5 +1,6 @@ {% load i18n %} <button class="sticky toggle-nav-sidebar" id="toggle-nav-sidebar" aria-label="{% translate 'Toggle navigation' %}"></button> <nav class="sticky" id="nav-sidebar"> + <input type="text" id="nav-filter" placeholder="Start typing a content name..."> {% include 'admin/app_list.html' with app_list=available_apps show_changelinks=False %} </nav> -- 2.27.0
