feat: changelist redesign (#902)

unfoldadmin · Dec 16, 2024 · 82161c5 · 82161c5
1 parent cf81897
commit 82161c5
Show file tree

Hide file tree

Showing 28 changed files with 209 additions and 227 deletions.
diff --git a/src/unfold/contrib/filters/templates/unfold/filters/filters_date_range.html b/src/unfold/contrib/filters/templates/unfold/filters/filters_date_range.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 {% with choices.0 as choice %}
-    <div class="flex flex-col mb-6">
+    <div class="flex flex-col">
         <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         <div class="flex flex-col space-y-4">

diff --git a/src/unfold/contrib/filters/templates/unfold/filters/filters_datetime_range.html b/src/unfold/contrib/filters/templates/unfold/filters/filters_datetime_range.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 {% with choices.0 as choice %}
-    <div class="flex flex-col mb-6">
+    <div class="flex flex-col">
         <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         <div class="flex flex-col space-y-4">

diff --git a/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_range.html b/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_range.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 {% with choices.0 as choice %}
-    <div class="flex flex-col mb-6">
+    <div class="flex flex-col">
         <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         <div class="flex flex-row gap-4">

diff --git a/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_single.html b/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_single.html
@@ -1,7 +1,7 @@
 {% load i18n %}
 
 {% with choices.0 as choice %}
-    <div class="flex flex-col mb-6">
+    <div class="flex flex-col">
         <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">{% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}</h3>
 
         {% for field in choice.form %}

diff --git a/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html b/src/unfold/contrib/filters/templates/unfold/filters/filters_numeric_slider.html
@@ -2,7 +2,7 @@
 {% load l10n %}
 
 {% with choices.0 as choice %}
-    <div class="admin-numeric-filter-wrapper mb-6">
+    <div class="admin-numeric-filter-wrapper">
         <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important-dark">
             {% blocktrans with filter_title=title %}By {{ filter_title }}{% endblocktrans %}
         </h3>

diff --git a/src/unfold/forms.py b/src/unfold/forms.py
@@ -25,7 +25,6 @@
 from .widgets import (
     BASE_INPUT_CLASSES,
     INPUT_CLASSES,
-    SELECT_CLASSES,
     UnfoldAdminPasswordInput,
     UnfoldAdminRadioSelectWidget,
 )
@@ -40,7 +39,17 @@ class ActionForm(forms.Form):
         label="",
         widget=forms.Select(
             {
-                "class": " ".join([*SELECT_CLASSES, "max-w-full", "lg:!w-64"]),
+                "class": " ".join(
+                    [
+                        "appearance-none",
+                        "bg-white/20",
+                        "font-medium",
+                        "min-w-72",
+                        "rounded-md",
+                        "px-3",
+                        "py-2",
+                    ]
+                ),
                 "aria-label": _("Select action to run"),
                 "x-model": "action",
             }

diff --git a/src/unfold/static/unfold/css/styles.css b/src/unfold/static/unfold/css/styles.css
diff --git a/src/unfold/static/unfold/js/alpine.resize.js b/src/unfold/static/unfold/js/alpine.resize.js
diff --git a/src/unfold/static/unfold/js/app.js b/src/unfold/static/unfold/js/app.js
@@ -1,6 +1,4 @@
 window.addEventListener("load", (e) => {
-  submitSearch();
-
   fileInputUpdatePath();
 
   dateTimeShortcutsOverlay();
@@ -164,54 +162,6 @@ const fileInputUpdatePath = () => {
   checkInputChanged();
 };
 
-/*************************************************************
- * Search form on changelist view
- *************************************************************/
-const submitSearch = () => {
-  const searchbar = document.getElementById("searchbar");
-  const searchbarSubmit = document.getElementById("searchbar-submit");
-
-  const getQueryParams = (searchString) => {
-    const queryParams = window.location.search
-      .replace("?", "")
-      .split("&")
-      .map((param) => param.split("="))
-      .reduce((values, [key, value]) => {
-        if (key && key !== "q") {
-          values[key] = value;
-        }
-
-        return values;
-      }, {});
-
-    if (searchString) {
-      queryParams["q"] = encodeURIComponent(searchString);
-    }
-
-    const result = Object.entries(queryParams)
-      .map(([key, value]) => `${key}=${value}`)
-      .join("&");
-
-    return `?${result}`;
-  };
-
-  if (searchbar !== null) {
-    searchbar.addEventListener("keypress", (e) => {
-      if (e.key === "Enter") {
-        window.location = getQueryParams(e.target.value);
-        e.preventDefault();
-      }
-    });
-  }
-
-  if (searchbarSubmit !== null && searchbar !== null) {
-    searchbarSubmit.addEventListener("click", (e) => {
-      e.preventDefault();
-      window.location = getQueryParams(searchbar.value);
-    });
-  }
-};
-
 /*************************************************************
  * Chart
  *************************************************************/

diff --git a/src/unfold/styles.css b/src/unfold/styles.css
@@ -85,6 +85,10 @@ select:not([class*="bg-none"]):not([multiple]) {
   background-size: 1.125rem 1.125rem;
 }
 
+#changelist-actions select:not([class*="bg-none"]):not([multiple]) {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3e%3cpath fill='#ffffff' d='M24 31.4 11.3 18.7l2.85-2.8L24 25.8l9.85-9.85 2.85 2.8Z'/%3e%3c/svg%3e");
+}
+
 select:after {
   content: "";
   display: block;
@@ -101,6 +105,7 @@ table select {
   background-position: right 0.5rem center;
 }
 
+
 table select:focus {
   @apply border-primary-600;
 }

diff --git a/src/unfold/templates/admin/actions.html b/src/unfold/templates/admin/actions.html
@@ -1,6 +1,6 @@
 {% load i18n %}
 
-<div class="actions flex flex-col gap-3 order-last lg:order-none lg:flex-row lg:items-center">
+<div id="changelist-actions" class="actions flex flex-row gap-3 items-center {% if not cl.model_admin.list_fullwidth %}mx-auto{% endif %} text-white lg:flex-row lg:items-center"  x-bind:style="'width: ' + changeListWidth + 'px'">
     {% block actions %}
         <div class="flex flex-col gap-2 lg:flex-row" x-data="{action: ''}">
             {% block actions-form %}
@@ -19,36 +19,38 @@
             {% endblock %}
 
             {% block actions-submit %}
-                <button type="submit" x-show="action" class="bg-primary-600 cursor-pointer flex font-medium items-center justify-center px-3 py-2 rounded-md text-sm text-white whitespace-nowrap" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
+                <button type="submit" x-show="action" class="bg-primary-900 cursor-pointer flex font-medium items-center justify-center px-3 py-2 rounded-md text-sm text-white whitespace-nowrap" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
                     {% trans "Run" %}
                 </button>
             {% endblock %}
         </div>
 
         {% block actions-counter %}
             {% if actions_selection_counter %}
-                <div class="bg-gray-100 flex flex-row gap-2 h-9.5 items-center px-3 rounded-md shadow-sm truncate dark:bg-white/[.04] lg:bg-transparent dark:lg:!bg-transparent lg:px-0 lg:shadow-none">
-                    <span class="action-counter text-sm" data-actions-icnt="{{ cl.result_list|length }}">
+                <div class="flex flex-grow flex-row items-center">
+                    <span class="action-counter" data-actions-icnt="{{ cl.result_list|length }}">
                         {{ selection_note }}
                     </span>
 
                     {% if cl.result_count != cl.result_list|length %}
-                        <span class="all hidden text-gray-500 text-sm">
+                        <span class="all hidden">
                             {{ selection_note_all }}
                         </span>
 
                         {% if not cl.model_admin.list_disable_select_all %}
-                            <span class="question hidden text-primary-600 text-sm dark:text-primary-500">
-                                <a href="#" title="{% translate "Click here to select the objects across all pages" %}">
-                                    {% blocktranslate with cl.result_count as total_count %}Select all {{ total_count }} {{ module_name }}{% endblocktranslate %}
-                                </a>
-                            </span>
-
-                            <span class="clear hidden text-sm text-red-600">
-                                <a href="#">
-                                    {% translate "Clear selection" %}
-                                </a>
-                            </span>
+                            <div class="ml-auto">
+                                <span class="question hidden">
+                                    <a href="#" class="bg-white/20 block border border-transparent font-medium px-3 py-2 rounded-md text-white transition-colors hover:bg-white/30" title="{% translate "Click here to select the objects across all pages" %}">
+                                        {% blocktranslate with cl.result_count as total_count %}Select all {{ total_count }} {{ module_name }}{% endblocktranslate %}
+                                    </a>
+                                </span>
+
+                                <span class="clear hidden">
+                                    <a href="#" class="bg-white/20 block border border-transparent font-medium px-3 py-2 rounded-md text-white transition-colors hover:bg-white/30">
+                                        {% translate "Clear selection" %}
+                                    </a>
+                                </span>
+                            </div>
                         {% endif %}
                     {% endif %}
                 </div>

diff --git a/src/unfold/templates/admin/app_list.html b/src/unfold/templates/admin/app_list.html
@@ -15,19 +15,19 @@ <h2>
                                 </h2>
                             {% endif %}
 
-                            <ol>
+                            <ol class="flex flex-col gap-1">
                                 {% for model in app.models %}
                                     {% if not model.hidden %}
                                         <li class="model-{{ model.object_name|lower }}{% if model.admin_url in request.path|urlencode %} current-model{% endif %}">
                                             {% if model.header %}
-                                                <h3 class="font-medium my-3 text-gray-900 text-sm dark:text-gray-200">
+                                                <h3 class="font-medium my-2 text-gray-900 text-sm dark:text-gray-200">
                                                     {{ model.header }}
                                                 </h3>
                                             {% endif %}
 
                                             {% if model.admin_url %}
                                                 <a href="{{ model.admin_url }}" id="link-{{ app.app_label }}-{{ model.object_name|lower }}"
-                                                   class="block -mx-3 px-3 py-3 rounded-md truncate hover:text-primary-600 dark:hover:text-primary-500 {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500{% endif %}">
+                                                   class="flex items-center h-9.5 -mx-3 px-3 rounded-md truncate hover:text-primary-600 dark:hover:text-primary-500 {% if model.admin_url in request.path|urlencode %}bg-gray-100 font-semibold text-primary-600 dark:bg-white/[.06] dark:text-primary-500{% endif %}">
                                                     {{ model.name }}
                                                 </a>
                                             {% else %}

diff --git a/src/unfold/templates/admin/change_list.html b/src/unfold/templates/admin/change_list.html
@@ -54,16 +54,32 @@
 {% endblock %}
 
 {% block content %}
-    <div id="content-main">
+    <div id="content-main" x-data="{ filterOpen: false }">
         {% if cl.formset and cl.formset.errors %}
             {% include "unfold/helpers/messages/errornote.html" with errors=cl.formset.errors %}
 
             {{ cl.formset.non_form_errors }}
         {% endif %}
 
-        <div class="flex -mx-4 module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
-            <div class="changelist-form-container flex flex-row flex-grow gap-4 min-w-0 px-4" x-data="{ filterOpen: false }">
-                <div class="flex-grow min-w-0">
+        <div class="flex flex-row gap-4 mb-4">
+            {% block search %}
+                {% search_form cl %}
+            {% endblock %}
+
+            {% block filters %}
+                {% if cl.has_filters %}
+                    <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
+                        {% trans "Filters" %}
+
+                        <span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
+                    </a>
+                {% endif %}
+            {% endblock %}
+        </div>
+
+        <div class="flex -mx-4 module{% if cl.has_filters %} filtered{% endif %}" id="changelist" x-data="{ changeListWidth: 0 }">
+            <div class="changelist-form-container flex flex-row flex-grow gap-6 min-w-0 px-4">
+                <div class="flex-grow min-w-0 lg:pb-16" x-resize="changeListWidth = $width">
                     {% block date_hierarchy %}
                         {% if cl.date_hierarchy %}
                             {% date_hierarchy cl %}
@@ -74,37 +90,15 @@
                         {% include cl.model_admin.list_before_template %}
                     {% endif %}
 
-                    <form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
+                    <form id="changelist-form" class="group" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
                         {% csrf_token %}
 
                         {% if cl.formset %}
-                            <div>{{ cl.formset.management_form }}</div>
+                            {{ cl.formset.management_form }}
                         {% endif %}
 
                         {% block result_list %}
-                            {% if actions_on_top %}
-                                {% if cl.search_fields or action_form or cl.has_filters %}
-                                    <div class="bg-gray-50 flex flex-col gap-3 mb-4 p-3 rounded-md lg:flex-row dark:bg-gray-800">
-                                        {% block search %}
-                                            {% search_form cl %}
-                                        {% endblock %}
-
-                                        {% if action_form %}
-                                            {% admin_actions %}
-                                        {% endif %}
-
-                                        {% block filters %}
-                                            {% if cl.has_filters %}
-                                                <a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
-                                                    {% trans "Filters" %}
-
-                                                    <span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
-                                                </a>
-                                            {% endif %}
-                                        {% endblock %}
-                                    </div>
-                                {% endif %}
-                            {% endif %}
+                            {% include "unfold/helpers/change_list_actions.html" %}
 
                             {% unfold_result_list cl %}
 
@@ -120,7 +114,7 @@
                 </div>
 
                 {% if cl.has_filters %}
-                    {% include "unfold/change_list_filter.html" %}
+                    {% include "unfold/helpers/change_list_filter.html" %}
                 {% endif %}
             </div>
         </div>