starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-09-13 05:12:03 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

Merge pull request #598

Browse Source 
feat(ui:filter): add quick clear button to filter button
This commit is contained in:
Herculino Trotta
2026-09-12 12:07:28 -03:00
committed by GitHub
parent e892bfd3da 0ab2a41ccc
commit b2d29071f0
4 changed files with 34 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/monthly_overview/pages/overview.html
+4 -2
View File
@@ -103,6 +103,7 @@
{# Main control bar with filter, search, and ordering #}
<div class="join w-full">
<div class="relative join-item z-10">
<button class="btn btn-secondary join-item relative z-1" type="button"
@click="filterOpen = !filterOpen"
:aria-expanded="filterOpen" id="filter-button"
@@ -208,8 +209,9 @@
add .hidden to #filter-active-indicator
end">
<i class="fa-solid fa-filter fa-fw"></i>
<span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"></span>
</button>
{% include "transactions/fragments/filter_active_indicator.html" %}
</div>
{# Search box #}
<label for="quick-search" class="hidden">
@@ -277,7 +279,7 @@
{% include "transactions/fragments/filter_form.html" %}
<div class="text-right">
<a class="btn btn-outline btn-error btn-sm w-fit"
<a id="filter-clear" class="btn btn-outline btn-error btn-sm w-fit"
href="{{ request.path }}"
hx-get="{% url 'transaction_filter_clear' %}"
hx-target="#filter"
app/templates/transactions/fragments/filter_active_indicator.html
+11
View File
@@ -0,0 +1,11 @@
{% load i18n %}
<button id="filter-active-indicator"
type="button"
class="group absolute -top-1 -right-1 z-10 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-error text-error-content transition-transform duration-150 motion-reduce:transition-none hover:scale-125 focus-visible:scale-125 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-error {% if not filter_is_active %}hidden{% endif %}"
aria-label="{% translate 'Clear filters' %}"
title="{% translate 'Clear filters' %}"
{% if swap_filter_indicator %}hx-swap-oob="outerHTML"{% endif %}
_="on click halt the event then trigger click on #filter-clear">
<i class="fa-solid fa-xmark hidden text-[0.625rem] leading-none group-hover:inline-block group-focus-visible:inline-block" aria-hidden="true"></i>
</button>
app/templates/transactions/fragments/filter_form.html
+1 -3
View File
@@ -12,7 +12,5 @@
{% crispy filter.form %}
</form>
{% if swap_filter_indicator %}
<span id="filter-active-indicator"
class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"
hx-swap-oob="outerHTML"></span>
{% include "transactions/fragments/filter_active_indicator.html" %}
{% endif %}
app/templates/transactions/pages/transactions.html
+4 -2
View File
@@ -52,6 +52,7 @@
{# Main control bar with filter, search, and ordering #}
<div class="join w-full">
<div class="relative join-item z-10">
<button class="btn btn-secondary join-item relative z-1" type="button"
@click="filterOpen = !filterOpen"
:aria-expanded="filterOpen" id="filter-button"
@@ -157,8 +158,9 @@
add .hidden to #filter-active-indicator
end">
<i class="fa-solid fa-filter fa-fw"></i>
<span id="filter-active-indicator" class="absolute -top-1 -right-1 w-3 h-3 bg-error rounded-full {% if not filter_is_active %}hidden {% endif %}z-10"></span>
</button>
{% include "transactions/fragments/filter_active_indicator.html" %}
</div>
{# Search box #}
<label for="quick-search" class="hidden">
@@ -226,7 +228,7 @@
{% include "transactions/fragments/filter_form.html" %}
<div class="text-right">
<a class="btn btn-outline btn-error btn-sm w-fit"
<a id="filter-clear" class="btn btn-outline btn-error btn-sm w-fit"
href="{{ request.path }}"
hx-get="{% url 'transaction_filter_clear' %}"
hx-target="#filter"