diff --git a/app/components/UI/account/activity_date.html.erb b/app/components/UI/account/activity_date.html.erb index 6efa7e967f5..672c6d77c26 100644 --- a/app/components/UI/account/activity_date.html.erb +++ b/app/components/UI/account/activity_date.html.erb @@ -4,9 +4,12 @@
<%= check_box_tag "#{date}_entries_selection", - class: ["checkbox checkbox--light", "hidden": entries.size == 0], + class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0], id: "selection_entry_#{date}", - data: { action: "bulk-select#toggleGroupSelection" } %> + data: { + action: "bulk-select#toggleGroupSelection", + checkbox_toggle_target: "selectionEntry" + } %>

<%= tag.span I18n.l(date, format: :long) %> diff --git a/app/components/UI/account/activity_feed.html.erb b/app/components/UI/account/activity_feed.html.erb index dd952843054..362e1af0668 100644 --- a/app/components/UI/account/activity_feed.html.erb +++ b/app/components/UI/account/activity_feed.html.erb @@ -1,5 +1,5 @@ <%= turbo_frame_tag dom_id(account, "entries") do %> -

+
<%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %> @@ -46,8 +46,18 @@ "data-auto-submit-form-target": "auto" %>
-
<% end %> + <%= button_tag type: "button", + id: "toggle-checkboxes-button", + aria: { label: t(".toggle_selection_checkboxes") }, + class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover", + data: { + action: "click->checkbox-toggle#toggle", + checkbox_toggle_target: "toggleButton" + } do %> + <%= helpers.icon("list-todo") %> + <% end %> +
<% if activity_dates.empty? %> @@ -66,8 +76,11 @@
<%= check_box_tag "selection_entry", - class: "checkbox checkbox--light", - data: { action: "bulk-select#togglePageSelection" } %> + class: "checkbox checkbox--light hidden lg:block", + data: { + action: "bulk-select#togglePageSelection", + checkbox_toggle_target: "selectionEntry" + } %> <%= tag.p t("accounts.show.activity.date") %>
diff --git a/app/controllers/transaction_categories_controller.rb b/app/controllers/transaction_categories_controller.rb index dac6b5be0d6..6ca3aa70cad 100644 --- a/app/controllers/transaction_categories_controller.rb +++ b/app/controllers/transaction_categories_controller.rb @@ -27,6 +27,11 @@ def update partial: "categories/menu", locals: { transaction: transaction } ), + turbo_stream.replace( + "category_name_mobile_#{transaction.id}", + partial: "categories/category_name_mobile", + locals: { transaction: transaction } + ), *flash_notification_stream_items ] end diff --git a/app/javascript/controllers/checkbox_toggle_controller.js b/app/javascript/controllers/checkbox_toggle_controller.js new file mode 100644 index 00000000000..ba24c9aa83c --- /dev/null +++ b/app/javascript/controllers/checkbox_toggle_controller.js @@ -0,0 +1,39 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static targets = ["selectionEntry", "toggleButton"] + + toggle() { + if (this.selectionEntryTargets.length === 0) return + + const shouldShow = this.selectionEntryTargets[0].classList.contains("hidden") + + this.selectionEntryTargets.forEach((el) => { + if (shouldShow) { + el.classList.remove("hidden") + } else { + el.classList.add("hidden") + } + }) + + if (!shouldShow) { + const bulkSelectElement = + this.element.querySelector("[data-controller~='bulk-select']") || + this.element.closest("[data-controller~='bulk-select']") || + document.querySelector("[data-controller~='bulk-select']") + if (bulkSelectElement) { + const bulkSelectController = this.application.getControllerForElementAndIdentifier( + bulkSelectElement, + "bulk-select" + ) + if (bulkSelectController) { + bulkSelectController.deselectAll() + } + } + } + + if (this.hasToggleButtonTarget) { + this.toggleButtonTarget.classList.toggle("bg-surface", shouldShow) + } + } +} diff --git a/app/views/accounts/show/_activity.html.erb b/app/views/accounts/show/_activity.html.erb index ce9e74cd892..7bd35639b51 100644 --- a/app/views/accounts/show/_activity.html.erb +++ b/app/views/accounts/show/_activity.html.erb @@ -1,7 +1,7 @@ <%# locals: (account:) %> <%= turbo_frame_tag dom_id(account, "entries") do %> -
+
<%= tag.h2 t(".title"), class: "font-medium text-lg" %> <% unless @account.linked? %> @@ -55,7 +55,7 @@ <% else %> <%= tag.div id: dom_id(@account, "entries_bulk_select"), data: { - controller: "bulk-select", + controller: "bulk-select checkbox-toggle", bulk_select_singular_label_value: t(".entry"), bulk_select_plural_label_value: t(".entries") } do %> @@ -66,8 +66,11 @@
<%= check_box_tag "selection_entry", - class: "checkbox checkbox--light", - data: { action: "bulk-select#togglePageSelection" } %> + class: "checkbox checkbox--light hidden lg:block", + data: { + action: "bulk-select#togglePageSelection", + checkbox_toggle_target: "selectionEntry" + } %>

<%= t(".date") %>

<%= tag.p t(".amount"), class: "col-span-2 justify-self-end" %> diff --git a/app/views/categories/_badge_mobile.html.erb b/app/views/categories/_badge_mobile.html.erb new file mode 100644 index 00000000000..4f96f25b4bc --- /dev/null +++ b/app/views/categories/_badge_mobile.html.erb @@ -0,0 +1,14 @@ +<%# locals: (category:) %> +<% category ||= Category.uncategorized %> + +
+ + <% if category.lucide_icon.present? %> + <%= icon category.lucide_icon, size: "sm", color: "current" %> + <% end %> + +
\ No newline at end of file diff --git a/app/views/categories/_category_name_mobile.html.erb b/app/views/categories/_category_name_mobile.html.erb new file mode 100644 index 00000000000..2f9bd07cbba --- /dev/null +++ b/app/views/categories/_category_name_mobile.html.erb @@ -0,0 +1,7 @@ + + <% if transaction.transfer&.categorizable? || transaction.transfer.nil? %> + <%= transaction.category&.name || Category.uncategorized.name %> + <% else %> + <%= transaction.transfer&.payment? ? payment_category.name : transfer_category.name %> + <% end %> + diff --git a/app/views/categories/_menu.html.erb b/app/views/categories/_menu.html.erb index f7c74eaca44..ad7dc4f5c4a 100644 --- a/app/views/categories/_menu.html.erb +++ b/app/views/categories/_menu.html.erb @@ -2,7 +2,12 @@ <%= render DS::Menu.new(variant: "button") do |menu| %> <% menu.with_button do %> - <% render partial: "categories/badge", locals: { category: transaction.category } %> + +
+ <%= render partial: "categories/badge_mobile", locals: { category: transaction.category } %> +
<% end %> <% menu.with_custom_content do %> diff --git a/app/views/category/dropdowns/_row.html.erb b/app/views/category/dropdowns/_row.html.erb index 6e25d478f25..0a4927dcd7f 100644 --- a/app/views/category/dropdowns/_row.html.erb +++ b/app/views/category/dropdowns/_row.html.erb @@ -13,6 +13,7 @@ } ), method: :patch, + data: { turbo_frame: "category_dropdown" }, class: "flex w-full items-center gap-1.5 cursor-pointer focus:outline-none" do %> <%= icon("check") if is_selected %> diff --git a/app/views/entries/_entry_group.html.erb b/app/views/entries/_entry_group.html.erb index 2ee8954c12f..7a0d1447038 100644 --- a/app/views/entries/_entry_group.html.erb +++ b/app/views/entries/_entry_group.html.erb @@ -4,9 +4,12 @@
<%= check_box_tag "#{date}_entries_selection", - class: ["checkbox checkbox--light", "hidden": entries.size == 0], + class: ["checkbox checkbox--light hidden lg:block", "lg:hidden": entries.size == 0], id: "selection_entry_#{date}", - data: { action: "bulk-select#toggleGroupSelection" } %> + data: { + action: "bulk-select#toggleGroupSelection", + checkbox_toggle_target: "selectionEntry" + } %>

<%= tag.span I18n.l(date, format: :long) %> diff --git a/app/views/entries/_selection_bar.html.erb b/app/views/entries/_selection_bar.html.erb index 48648c2a43a..4c7d8d48b7a 100644 --- a/app/views/entries/_selection_bar.html.erb +++ b/app/views/entries/_selection_bar.html.erb @@ -1,4 +1,4 @@ -

+
<%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--light", data: { action: "bulk-select#deselectAll" } %> diff --git a/app/views/shared/_pagination.html.erb b/app/views/shared/_pagination.html.erb index afc047de533..c3c9c292a9e 100644 --- a/app/views/shared/_pagination.html.erb +++ b/app/views/shared/_pagination.html.erb @@ -1,7 +1,7 @@ <%# locals: (pagy:) %>