Skip to content

fix: visual changelist improvements #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukasvinclav merged 1 commit into from
May 6, 2024
Merged

fix: visual changelist improvements #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/unfold/forms.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,12 @@
class ActionForm(forms.Form):
action = forms.ChoiceField(
label="",
widget=forms.Select({"class": " ".join([*SELECT_CLASSES, "w-72"])}),
widget=forms.Select(
{
"class": " ".join([*SELECT_CLASSES, "max-w-full", "lg:!w-64"]),
"x-model": "action",
}
),
)

select_across = forms.BooleanField(
Expand Down
2 changes: 1 addition & 1 deletion src/unfold/static/unfold/css/styles.css
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions src/unfold/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,8 +101,9 @@ table select:focus {
@apply border-primary-600;
}

table tr.selected {
@apply bg-yellow-50 dark:bg-white/[.06];
table tr.selected td,
table tr.selected th {
@apply bg-yellow-200/[.10] dark:bg-white/[.03];
}

/*******************************************************
Expand Down
18 changes: 9 additions & 9 deletions src/unfold/templates/admin/actions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{% load i18n %}

<div class="actions flex flex-col md:flex-row md:items-center">
<div class="actions flex flex-col gap-3 order-last lg:order-none lg:flex-row lg:items-center">
{% block actions %}
<div class="flex">
<div class="flex flex-col gap-2 lg:flex-row" x-data="{action: ''}">
{% block actions-form %}
{% for field in action_form %}
{% if field.label %}
Expand All @@ -19,31 +19,31 @@
{% endblock %}

{% block actions-submit %}
<button type="submit" class="bg-white border flex items-center h-9.5 ml-3 px-2 rounded shadow-sm text-gray-400 w-9.5 hover:text-gray-700 focus:outline-none dark:bg-gray-900 dark:border-gray-700 dark:text-gray-500 dark:hover:text-gray-200" title="{% translate "Run the selected action" %}" name="index" value="{{ action_index|default:0 }}">
<span class="material-symbols-outlined md-18">chevron_right</span>
<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 }}">
{% trans "Run" %}
</button>
{% endblock %}
</div>

{% block actions-counter %}
{% if actions_selection_counter %}
<div class="hidden truncate md:block">
<span class="action-counter ml-4 text-sm text-gray-500 dark:text-gray-400" data-actions-icnt="{{ cl.result_list|length }}">
<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 text-gray-500 dark:text-gray-400" data-actions-icnt="{{ cl.result_list|length }}">
{{ selection_note }}
</span>

{% if cl.result_count != cl.result_list|length %}
<span class="all hidden ml-4 text-gray-500 text-sm">
<span class="all hidden text-gray-500 text-sm">
{{ selection_note_all }}
</span>

<span class="question hidden ml-4 text-primary-600 text-sm underline">
<span class="question hidden text-primary-600 text-sm underline">
<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 ml-4 text-sm text-red-600 underline">
<span class="clear hidden text-sm text-red-600 underline">
<a href="#">
{% translate "Clear selection" %}
</a>
Expand Down
4 changes: 1 addition & 3 deletions src/unfold/templates/admin/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,7 @@
{% if cl %}
{% tab_list cl.opts %}
{% elif opts %}
<div class="mb-8">
{% tab_list opts %}
</div>
{% tab_list opts %}
{% endif %}

{% block content %}
Expand Down
4 changes: 2 additions & 2 deletions src/unfold/templates/admin/change_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
{% 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 md:flex-row dark:bg-gray-800">
<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 %}
Expand All @@ -95,7 +95,7 @@

{% block filters %}
{% if cl.has_filters %}
<a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white text-gray-500 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:hover:text-gray-200 dark:text-gray-400{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm md:ml-auto md:mt-0" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
<a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white text-gray-500 hover:text-gray-700 dark:bg-gray-900 dark:border-gray-700 dark:hover:text-gray-200 dark:text-gray-400{% 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" 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-700 dark:group-hover:text-gray-200 dark:text-gray-500{% endif %}">filter_list</span>
Expand Down
18 changes: 15 additions & 3 deletions src/unfold/templates/admin/change_list_results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,30 @@

{% if results %}
<table id="result_list" class="block border-gray-200 border-spacing-none border-separate text-gray-700 w-full dark:text-gray-400 lg:border lg:rounded-md lg:shadow-sm lg:table lg:dark:border-gray-800">
<thead class="hidden lg:table-header-group">
<thead>
<tr>
{% for header in result_headers %}
<th class="align-middle font-medium px-3 py-2 text-left text-gray-400 text-sm {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}w-10{% endif %}" scope="col">
<th class="align-middle font-medium py-2 text-left text-gray-400 text-sm {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
<div class="flex items-center">
<div class="text">
{% if header.sortable %}
<a href="{{ header.url_primary }}">
{{ header.text|capfirst }}
</a>
{% else %}
<span>{{ header.text|capfirst }}</span>
{% if "action-toggle" in header.text and forloop.counter == 1 %}
<label class="flex flex-row items-center gap-2">
{{ header.text|capfirst }}

<span class="block font-normal text-gray-500 dark:text-gray-400 lg:hidden">
{% trans "Select all rows"%}
</span>
</label>
{% else %}
<span>
{{ header.text|capfirst }}
</span>
{% endif %}
{% endif %}
</div>

Expand Down
22 changes: 10 additions & 12 deletions src/unfold/templates/admin/search_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
{% load i18n static %}

{% if cl.search_fields %}
<div id="toolbar" class="lg:w-72">
<div>
<div class="bg-white border flex rounded-md overflow-hidden shadow-sm focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
<input class="font-medium h-9 px-3 text-gray-500 text-sm w-40 lg:w-60 focus:outline-none dark:bg-gray-900 dark:text-gray-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans 'Type to search' %}" />
<div id="toolbar">
<div class="bg-white border flex rounded-md overflow-hidden shadow-sm lg:w-64 focus-within:ring focus-within:ring-primary-300 focus-within:border-primary-600 dark:bg-gray-900 dark:border-gray-700 dark:focus-within:border-primary-600 dark:focus-within:ring-primary-700 dark:focus-within:ring-opacity-50">
<input class="font-medium grow min-w-0 h-9 px-3 text-gray-500 text-sm focus:outline-none dark:bg-gray-900 dark:text-gray-400" type="text" name="{{ search_var }}" value="{{ cl.query }}" id="searchbar" placeholder="{% trans 'Type to search' %}" />

<button type="submit" class="flex items-center ml-auto px-2 focus:outline-none" id="searchbar-submit">
<span class="material-symbols-outlined md-18 text-gray-400 dark:text-gray-500">search</span>
</button>
</div>

{% for pair in cl.params.items %}
{% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">{% endif %}
{% endfor %}
<button type="submit" class="flex items-center px-2 focus:outline-none" id="searchbar-submit">
<span class="material-symbols-outlined md-18 text-gray-400 dark:text-gray-500">search</span>
</button>
</div>

{% for pair in cl.params.items %}
{% if pair.0 != search_var %}<input type="hidden" name="{{ pair.0 }}" value="{{ pair.1 }}">{% endif %}
{% endfor %}
</div>
{% endif %}
2 changes: 1 addition & 1 deletion src/unfold/templates/unfold/helpers/tab_list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% if not is_popup %}
{% if tab_list or actions_list or actions_items or nav_global %}
<div class="flex items-start flex-col mb-2 text-gray-500 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end dark:text-gray-400">
<div class="flex items-start flex-col mb-4 text-gray-500 text-sm w-full md:border-b dark:md:border-gray-800 md:border-l-0 md:flex-row md:items-center md:justify-end dark:text-gray-400">
{% if tab_list %}
<ul class="border rounded-md flex flex-col w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-gray-800">
{% for item in tab_list %}
Expand Down
8 changes: 5 additions & 3 deletions src/unfold/templatetags/unfold_list.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@
register = Library()

LINK_CLASSES = [
"text-gray-700",
"text-gray-600",
"truncate",
"dark:text-gray-200",
"dark:text-gray-300",
]

ROW_CLASSES = [
Expand All @@ -54,6 +54,7 @@
"px-3",
"py-2",
"text-left",
"text-gray-500",
"text-sm",
"before:flex",
"before:capitalize",
Expand All @@ -63,6 +64,7 @@
"before:text-gray-500",
"first:border-t-0",
"dark:before:text-gray-400",
"dark:text-gray-400",
"lg:before:hidden",
"lg:first:border-t",
"lg:py-3",
Expand Down Expand Up @@ -186,7 +188,7 @@ def make_qs_param(t, n):
"url_primary": cl.get_query_string({ORDER_VAR: ".".join(o_list_primary)}),
"url_remove": cl.get_query_string({ORDER_VAR: ".".join(o_list_remove)}),
"url_toggle": cl.get_query_string({ORDER_VAR: ".".join(o_list_toggle)}),
"class_attrib": format_html(' class="{}"', " ".join(th_classes))
"class_attrib": format_html("{}", " ".join(th_classes))
if th_classes
else "",
}
Expand Down