starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-07-13 16:22:42 +02:00
Code Issues 14 Packages Projects Releases 10 Wiki Activity

feat: replace action row with a FAB

Browse Source
This commit is contained in:
Herculino Trotta
2025-06-15 15:44:33 -03:00
parent e4d07c94d4
commit f9056c3a45
8 changed files with 294 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/cotton/components/fab.html
+33
View File
@@ -0,0 +1,33 @@
<div class="tw-min-h-16">
<div
id="fab-wrapper"
class="tw-fixed tw-bottom-5 tw-right-5 tw-ml-auto tw-w-max tw-flex tw-flex-col tw-items-end mt-5">
<div
id="menu"
class="tw-flex tw-flex-col tw-items-end tw-space-y-6 tw-transition-all tw-duration-300 tw-ease-in-out tw-opacity-0 tw-invisible tw-hidden tw-mb-2">
{{ slot }}
</div>
<button
class="btn btn-primary rounded-circle p-0 tw-w-12 tw-h-12 tw-flex tw-items-center tw-justify-center tw-shadow-lg hover:tw-shadow-xl focus:tw-shadow-xl tw-transition-all tw-duration-300 tw-ease-in-out"
_="
on click or focusout
if #menu matches .tw-invisible and event.type === 'click'
add .tw-rotate-45 to #fab-icon
remove .tw-invisible from #menu
remove .tw-hidden from #menu
remove .tw-opacity-0 from #menu
else
wait 0.2s
remove .tw-rotate-45 from #fab-icon
add .tw-invisible to #menu
add .tw-hidden to #menu
add .tw-opacity-0 to #menu
end
"
>
<i id="fab-icon" class="fa-solid fa-plus tw-text-3xl tw-transition-transform tw-duration-300 tw-ease-in-out"></i>
</button>
</div>
</div>
app/templates/cotton/components/fab_menu_button.html
+11
View File
@@ -0,0 +1,11 @@
{% load i18n %}
<div class="tw-relative fab-item">
<button class="btn btn-sm btn-{{ color }}"
hx-get="{{ url }}"
hx-trigger="{{ hx_trigger }}"
hx-target="{{ hx_target }}"
hx-vals='{{ hx_vals }}'>
<i class="{{ icon }} me-2"></i>
{{ title }}
</button>
</div>
app/templates/cotton/ui/transactions_fab.html
+53
View File
@@ -0,0 +1,53 @@
{% load i18n %}
<c-components.fab>
<c-components.fab_menu_button
color="success"
hx_target="#generic-offcanvas"
hx_trigger="click, add_income from:window"
hx_vals='{"year": {{ year }}, {% if month %}"month": {{ month }},{% endif %} "type": "IN"}'
url="{% url 'transaction_add' %}"
icon="fa-solid fa-arrow-right-to-bracket"
title="{% translate "Income" %}"></c-components.fab_menu_button>
<c-components.fab_menu_button
color="danger"
hx_target="#generic-offcanvas"
hx_trigger="click, add_income from:window"
hx_vals='{"year": {{ year }}, {% if month %}"month": {{ month }},{% endif %} "type": "EX"}'
url="{% url 'transaction_add' %}"
icon="fa-solid fa-arrow-right-from-bracket"
title="{% translate "Expense" %}"></c-components.fab_menu_button>
<c-components.fab_menu_button
color="warning"
hx_target="#generic-offcanvas"
hx_trigger="click, installment from:window"
url="{% url 'installment_plan_add' %}"
icon="fa-solid fa-divide"
title="{% translate "Installment" %}"></c-components.fab_menu_button>
<c-components.fab_menu_button
color="warning"
hx_target="#generic-offcanvas"
hx_trigger="click, recurring from:window"
url="{% url 'recurring_transaction_add' %}"
icon="fa-solid fa-repeat"
title="{% translate "Recurring" %}"></c-components.fab_menu_button>
<c-components.fab_menu_button
color="info"
hx_target="#generic-offcanvas"
hx_trigger="click, transfer from:window"
hx_vals='{"year": {{ year }} {% if month %}, "month": {{ month }}{% endif %}}'
url="{% url 'transactions_transfer' %}"
icon="fa-solid fa-money-bill-transfer"
title="{% translate "Transfer" %}"></c-components.fab_menu_button>
<c-components.fab_menu_button
color="info"
hx_target="#generic-offcanvas"
hx_trigger="click, balance from:window"
url="{% url 'account_reconciliation' %}"
icon="fa-solid fa-scale-balanced"
title="{% translate "Balance" %}"></c-components.fab_menu_button>
</c-components.fab>