starred/WYGIWYH
1
0
Fork 0
mirror of https://github.com/eitchtee/WYGIWYH.git synced 2026-04-25 01:58:54 +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

74
app/templates/calendar_view/pages/calendar.html
View File

@@ -13,45 +13,47 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="container px-md-3 py-3 column-gap-5"> <div class="container px-md-3 py-3 column-gap-5">
<div class="row mb-3 gx-xl-4 gy-3 mb-4"> <div class="row mb-3 gx-xl-4 gy-3 mb-4">
{# Date picker#} {# Date picker#}
<div class="col-12 col-xl-4 flex-row align-items-center d-flex"> <div class="col-12 col-xl-4 flex-row align-items-center d-flex">
<div class="tw-text-base h-100 align-items-center d-flex"> <div class="tw-text-base h-100 align-items-center d-flex">
<a role="button" <a role="button"
class="pe-4 py-2" class="pe-4 py-2"
hx-boost="true" hx-boost="true"
hx-trigger="click, previous_month from:window" hx-trigger="click, previous_month from:window"
href="{% url 'calendar' month=previous_month year=previous_year %}"><i href="{% url 'calendar' month=previous_month year=previous_year %}"><i
class="fa-solid fa-chevron-left"></i></a> class="fa-solid fa-chevron-left"></i></a>
</div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"
hx-get="{% url 'month_year_picker' %}"
hx-target="#generic-offcanvas-left"
hx-trigger="click, date_picker from:window"
hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "calendar", "field": "date"}' role="button">
{{ month|month_name }} {{ year }}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"
hx-trigger="click, next_month from:window"
href="{% url 'calendar' month=next_month year=next_year %}">
<i class="fa-solid fa-chevron-right"></i>
</a>
</div>
</div> </div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center" {# Action buttons#}
hx-get="{% url 'month_year_picker' %}" <div class="col-12 col-xl-8">
hx-target="#generic-offcanvas-left" {# <c-ui.quick-transactions-buttons#}
hx-trigger="click, date_picker from:window" {# :year="year"#}
hx-vals='{"month": {{ month }}, "year": {{ year }}, "for": "calendar", "field": "date"}' role="button"> {# :month="month"#}
{{ month|month_name }} {{ year }} {# ></c-ui.quick-transactions-buttons>#}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"
hx-trigger="click, next_month from:window"
href="{% url 'calendar' month=next_month year=next_year %}">
<i class="fa-solid fa-chevron-right"></i>
</a>
</div> </div>
</div> </div>
{# Action buttons#} <div class="row">
<div class="col-12 col-xl-8"> <div class="show-loading" hx-get="{% url 'calendar_list' month=month year=year %}"
<c-ui.quick-transactions-buttons hx-trigger="load, updated from:window, selective_update from:window"></div>
:year="year"
:month="month"
></c-ui.quick-transactions-buttons>
</div> </div>
</div> </div>
<div class="row"> <c-ui.transactions_fab></c-ui.transactions_fab>
<div class="show-loading" hx-get="{% url 'calendar_list' month=month year=year %}" hx-trigger="load, updated from:window, selective_update from:window"></div>
</div>
</div>
{% endblock %} {% endblock %}

33
app/templates/cotton/components/fab.html Normal file
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>

11
app/templates/cotton/components/fab_menu_button.html Normal file
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>

53
app/templates/cotton/ui/transactions_fab.html Normal file
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>

3
app/templates/includes/toasts.html
View File

@@ -1,6 +1,5 @@
<div id="toasts"> <div id="toasts">
<div class="toast-container position-fixed bottom-0 end-0 p-3" hx-trigger="load, updated from:window, toasts from:window" hx-get="{% url 'toasts' %}" hx-swap="beforeend"> <div class="toast-container position-fixed bottom-0 start-50 translate-middle-x p-3" hx-trigger="load, updated from:window, toasts from:window" hx-get="{% url 'toasts' %}" hx-swap="beforeend">
</div> </div>
</div> </div>

20
app/templates/monthly_overview/pages/overview.html
View File

@@ -44,12 +44,12 @@
</div> </div>
</div> </div>
{# Action buttons#} {# Action buttons#}
<div class="col-12 col-xl-8"> {# <div class="col-12 col-xl-8">#}
<c-ui.quick-transactions-buttons {# <c-ui.quick-transactions-buttons#}
:year="year" {# :year="year"#}
:month="month" {# :month="month"#}
></c-ui.quick-transactions-buttons> {# ></c-ui.quick-transactions-buttons>#}
</div> {# </div>#}
</div> </div>
{# Monthly summary#} {# Monthly summary#}
<div class="row gx-xl-4 gy-3"> <div class="row gx-xl-4 gy-3">
@@ -174,8 +174,9 @@
</div> </div>
<div id="search" class="my-3"> <div id="search" class="my-3">
<label class="w-100"> <label class="w-100">
<input type="search" class="form-control" placeholder="{% translate 'Search' %}" hx-preserve id="quick-search" <input type="search" class="form-control" placeholder="{% translate 'Search' %}" hx-preserve
_="on input or search or htmx:afterSwap from window id="quick-search"
_="on input or search or htmx:afterSwap from window
if my value is empty if my value is empty
trigger toggle on <.transactions-divider-collapse/> trigger toggle on <.transactions-divider-collapse/>
else else
@@ -195,4 +196,7 @@
</div> </div>
</div> </div>
</div> </div>
<c-ui.transactions_fab></c-ui.transactions_fab>
{% endblock %} {% endblock %}

143
app/templates/yearly_overview/pages/overview_by_account.html
View File

@@ -12,55 +12,56 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="container px-md-3 py-3 column-gap-5"> <div class="container px-md-3 py-3 column-gap-5">
<div class="row mb-3 gx-xl-4 gy-3 mb-4"> <div class="row mb-3 gx-xl-4 gy-3 mb-4">
{# Date picker#} {# Date picker#}
<div class="col-12 col-xl-2 flex-row align-items-center d-flex"> <div class="col-12 col-xl-2 flex-row align-items-center d-flex">
<div class="tw-text-base h-100 align-items-center d-flex"> <div class="tw-text-base h-100 align-items-center d-flex">
<a role="button" <a role="button"
class="pe-4 py-2" class="pe-4 py-2"
hx-boost="true" hx-boost="true"
hx-trigger="click, previous_year from:window" hx-trigger="click, previous_year from:window"
href="{% url 'yearly_overview_account' year=previous_year %}"> href="{% url 'yearly_overview_account' year=previous_year %}">
<i class="fa-solid fa-chevron-left"></i></a> <i class="fa-solid fa-chevron-left"></i></a>
</div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center">
{{ year }}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"
hx-trigger="click, next_year from:window"
href="{% url 'yearly_overview_account' year=next_year %}">
<i class="fa-solid fa-chevron-right"></i>
</a>
</div>
</div> </div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"> {# Action buttons#}
{{ year }} <div class="col-12 col-xl-10">
</div> {# <c-ui.quick-transactions-buttons#}
<div class="tw-text-base mx-2 h-100 align-items-center d-flex"> {# :year="year"#}
<a role="button" {# :month="month"#}
class="ps-3 py-2" {# ></c-ui.quick-transactions-buttons>#}
hx-boost="true"
hx-trigger="click, next_year from:window"
href="{% url 'yearly_overview_account' year=next_year %}">
<i class="fa-solid fa-chevron-right"></i>
</a>
</div> </div>
</div> </div>
{# Action buttons#} <div class="row">
<div class="col-12 col-xl-10"> <div class="col-lg-2">
<c-ui.quick-transactions-buttons <div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical"
:year="year" hx-indicator="#data-content">
:month="month" <input type="hidden" name="month" value="">
></c-ui.quick-transactions-buttons> <button class="nav-link active"
</div> role="tab"
</div> data-bs-toggle="pill"
<div class="row"> hx-get="{% url 'yearly_overview_account_data' year=year %}"
<div class="col-lg-2"> hx-target="#data-content"
<div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical" hx-indicator="#data-content"> hx-trigger="click"
<input type="hidden" name="month" value=""> hx-include="[name='account'], [name='month']"
<button class="nav-link active" hx-swap="innerHTML"
role="tab" onclick="document.querySelector('[name=month]').value = ''">
data-bs-toggle="pill" {% translate 'Year' %}
hx-get="{% url 'yearly_overview_account_data' year=year %}" </button>
hx-target="#data-content" {% for month in months %}
hx-trigger="click"
hx-include="[name='account'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = ''">
{% translate 'Year' %}
</button>
{% for month in months %}
<button class="nav-link" <button class="nav-link"
role="tab" role="tab"
data-bs-toggle="pill" data-bs-toggle="pill"
@@ -70,28 +71,29 @@
hx-include="[name='account'], [name='month']" hx-include="[name='account'], [name='month']"
hx-swap="innerHTML" hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = '{{ month }}'"> onclick="document.querySelector('[name=month]').value = '{{ month }}'">
{{ month|month_name }} {{ month|month_name }}
</button> </button>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<hr class="my-4 d-block d-lg-none"> <hr class="my-4 d-block d-lg-none">
<div class="col-lg-3"> <div class="col-lg-3">
<div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical" hx-indicator="#data-content"> <div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical"
<input type="hidden" name="account" value=""> hx-indicator="#data-content">
<button class="nav-link active" <input type="hidden" name="account" value="">
role="tab" <button class="nav-link active"
data-bs-toggle="pill" role="tab"
hx-get="{% url 'yearly_overview_account_data' year=year %}" data-bs-toggle="pill"
hx-target="#data-content" hx-get="{% url 'yearly_overview_account_data' year=year %}"
hx-trigger="click" hx-target="#data-content"
hx-include="[name='account'], [name='month']" hx-trigger="click"
hx-swap="innerHTML" hx-include="[name='account'], [name='month']"
onclick="document.querySelector('[name=account]').value = ''"> hx-swap="innerHTML"
{% translate 'All' %} onclick="document.querySelector('[name=account]').value = ''">
</button> {% translate 'All' %}
{% for account in accounts %} </button>
{% for account in accounts %}
<button class="nav-link" <button class="nav-link"
role="tab" role="tab"
data-bs-toggle="pill" data-bs-toggle="pill"
@@ -101,13 +103,13 @@
hx-include="[name='account'], [name='month']" hx-include="[name='account'], [name='month']"
hx-swap="innerHTML" hx-swap="innerHTML"
onclick="document.querySelector('[name=account]').value = '{{ account.id }}'"> onclick="document.querySelector('[name=account]').value = '{{ account.id }}'">
<span class="badge text-bg-primary me-2">{{ account.group.name }}</span>{{ account.name }} <span class="badge text-bg-primary me-2">{{ account.group.name }}</span>{{ account.name }}
</button> </button>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div class="col-lg-7"> <div class="col-lg-7">
<div id="data-content" <div id="data-content"
class="show-loading" class="show-loading"
hx-get="{% url 'yearly_overview_account_data' year=year %}" hx-get="{% url 'yearly_overview_account_data' year=year %}"
@@ -115,7 +117,8 @@
hx-include="[name='account'], [name='month']" hx-include="[name='account'], [name='month']"
hx-swap="innerHTML"> hx-swap="innerHTML">
</div> </div>
</div>
</div> </div>
</div> </div>
</div> <c-ui.transactions_fab></c-ui.transactions_fab>
{% endblock %} {% endblock %}

143
app/templates/yearly_overview/pages/overview_by_currency.html
View File

@@ -14,55 +14,56 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="container px-md-3 py-3 column-gap-5"> <div class="container px-md-3 py-3 column-gap-5">
<div class="row mb-3 gx-xl-4 gy-3 mb-4"> <div class="row mb-3 gx-xl-4 gy-3 mb-4">
{# Date picker#} {# Date picker#}
<div class="col-12 col-xl-2 flex-row align-items-center d-flex"> <div class="col-12 col-xl-2 flex-row align-items-center d-flex">
<div class="tw-text-base h-100 align-items-center d-flex"> <div class="tw-text-base h-100 align-items-center d-flex">
<a role="button" <a role="button"
class="pe-4 py-2" class="pe-4 py-2"
hx-boost="true" hx-boost="true"
hx-trigger="click, previous_year from:window" hx-trigger="click, previous_year from:window"
href="{% url 'yearly_overview_currency' year=previous_year %}"> href="{% url 'yearly_overview_currency' year=previous_year %}">
<i class="fa-solid fa-chevron-left"></i></a> <i class="fa-solid fa-chevron-left"></i></a>
</div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center">
{{ year }}
</div>
<div class="tw-text-base mx-2 h-100 align-items-center d-flex">
<a role="button"
class="ps-3 py-2"
hx-boost="true"
hx-trigger="click, next_year from:window"
href="{% url 'yearly_overview_currency' year=next_year %}">
<i class="fa-solid fa-chevron-right"></i>
</a>
</div>
</div> </div>
<div class="tw-text-3xl fw-bold font-monospace tw-w-full text-center"> {# Action buttons#}
{{ year }} <div class="col-12 col-xl-10">
</div> {# <c-ui.quick-transactions-buttons#}
<div class="tw-text-base mx-2 h-100 align-items-center d-flex"> {# :year="year"#}
<a role="button" {# :month="month"#}
class="ps-3 py-2" {# ></c-ui.quick-transactions-buttons>#}
hx-boost="true"
hx-trigger="click, next_year from:window"
href="{% url 'yearly_overview_currency' year=next_year %}">
<i class="fa-solid fa-chevron-right"></i>
</a>
</div> </div>
</div> </div>
{# Action buttons#} <div class="row">
<div class="col-12 col-xl-10"> <div class="col-lg-2">
<c-ui.quick-transactions-buttons <div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical"
:year="year" hx-indicator="#data-content">
:month="month" <input type="hidden" name="month" value="">
></c-ui.quick-transactions-buttons> <button class="nav-link active"
</div> role="tab"
</div> data-bs-toggle="pill"
<div class="row"> hx-get="{% url 'yearly_overview_currency_data' year=year %}"
<div class="col-lg-2"> hx-target="#data-content"
<div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical" hx-indicator="#data-content"> hx-trigger="click"
<input type="hidden" name="month" value=""> hx-include="[name='currency'], [name='month']"
<button class="nav-link active" hx-swap="innerHTML"
role="tab" onclick="document.querySelector('[name=month]').value = ''">
data-bs-toggle="pill" {% translate 'Year' %}
hx-get="{% url 'yearly_overview_currency_data' year=year %}" </button>
hx-target="#data-content" {% for month in months %}
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = ''">
{% translate 'Year' %}
</button>
{% for month in months %}
<button class="nav-link" <button class="nav-link"
role="tab" role="tab"
data-bs-toggle="pill" data-bs-toggle="pill"
@@ -72,28 +73,29 @@
hx-include="[name='currency'], [name='month']" hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML" hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = '{{ month }}'"> onclick="document.querySelector('[name=month]').value = '{{ month }}'">
{{ month|month_name }} {{ month|month_name }}
</button> </button>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<hr class="my-4 d-block d-lg-none"> <hr class="my-4 d-block d-lg-none">
<div class="col-lg-3"> <div class="col-lg-3">
<div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical" hx-indicator="#data-content"> <div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical"
<input type="hidden" name="currency" value=""> hx-indicator="#data-content">
<button class="nav-link active" <input type="hidden" name="currency" value="">
role="tab" <button class="nav-link active"
data-bs-toggle="pill" role="tab"
hx-get="{% url 'yearly_overview_currency_data' year=year %}" data-bs-toggle="pill"
hx-target="#data-content" hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-trigger="click" hx-target="#data-content"
hx-include="[name='currency'], [name='month']" hx-trigger="click"
hx-swap="innerHTML" hx-include="[name='currency'], [name='month']"
onclick="document.querySelector('[name=currency]').value = ''"> hx-swap="innerHTML"
{% translate 'All' %} onclick="document.querySelector('[name=currency]').value = ''">
</button> {% translate 'All' %}
{% for currency in currencies %} </button>
{% for currency in currencies %}
<button class="nav-link" <button class="nav-link"
role="tab" role="tab"
data-bs-toggle="pill" data-bs-toggle="pill"
@@ -103,13 +105,13 @@
hx-include="[name='currency'], [name='month']" hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML" hx-swap="innerHTML"
onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'"> onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'">
{{ currency.name }} {{ currency.name }}
</button> </button>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
<div class="col-lg-7"> <div class="col-lg-7">
<div id="data-content" <div id="data-content"
class="show-loading" class="show-loading"
hx-get="{% url 'yearly_overview_currency_data' year=year %}" hx-get="{% url 'yearly_overview_currency_data' year=year %}"
@@ -117,7 +119,8 @@
hx-include="[name='currency'], [name='month']" hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"> hx-swap="innerHTML">
</div> </div>
</div>
</div> </div>
</div> </div>
</div> <c-ui.transactions_fab></c-ui.transactions_fab>
{% endblock %} {% endblock %}