feat: replace action row with a FAB

app/templates/calendar_view/pages/calendar.html

@@ -13,45 +13,47 @@
 {% endblock %}
 
 {% block content %}
-<div class="container px-md-3 py-3 column-gap-5">
-  <div class="row mb-3 gx-xl-4 gy-3 mb-4">
-{#    Date picker#}
-    <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">
-        <a role="button"
-           class="pe-4 py-2"
-           hx-boost="true"
-           hx-trigger="click, previous_month from:window"
-           href="{% url 'calendar' month=previous_month year=previous_year %}"><i
-            class="fa-solid fa-chevron-left"></i></a>
+  <div class="container px-md-3 py-3 column-gap-5">
+    <div class="row mb-3 gx-xl-4 gy-3 mb-4">
+      {#    Date picker#}
+      <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">
+          <a role="button"
+             class="pe-4 py-2"
+             hx-boost="true"
+             hx-trigger="click, previous_month from:window"
+             href="{% url 'calendar' month=previous_month year=previous_year %}"><i
+              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 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>
+      {#    Action buttons#}
+      <div class="col-12 col-xl-8">
+        {#      <c-ui.quick-transactions-buttons#}
+        {#        :year="year"#}
+        {#        :month="month"#}
+        {#      ></c-ui.quick-transactions-buttons>#}
       </div>
     </div>
-{#    Action buttons#}
-    <div class="col-12 col-xl-8">
-      <c-ui.quick-transactions-buttons
-        :year="year"
-        :month="month"
-      ></c-ui.quick-transactions-buttons>
+    <div class="row">
+      <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>
-  <div class="row">
-    <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>
+  <c-ui.transactions_fab></c-ui.transactions_fab>
 {% endblock %}

app/templates/cotton/components/fab.html

@@ -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

@@ -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

@@ -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>

app/templates/includes/toasts.html

@@ -1,6 +1,5 @@
 <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>
-

app/templates/monthly_overview/pages/overview.html

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

app/templates/yearly_overview/pages/overview_by_account.html

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

app/templates/yearly_overview/pages/overview_by_currency.html

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