local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 60 Pull requests 4 Projects 2 Releases Packages 1 Activity Actions

fix: use pointer-events-none instead of disabled for active status button

Browse source 
Replace disabled attribute with pointer-events-none so the active
status button keeps its color (btn-success/warning/error btn-active)
instead of being grayed out by the browser's disabled styling.
This commit is contained in:
Moritz 2026-02-24 11:25:10 +01:00
parent 2b8d898429
commit 29f262e1a1
Signed by: moritz
GPG key ID: 1020A035E5DD0824
1 changed files with 8 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

15
lib/mv_web/live/member_live/show/membership_fees_component.ex
View file

@ -224,7 +224,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
phx-value-status="paid"
phx-target={@myself}
class={cycle_status_btn_class(cycle.status, :paid)}
disabled={cycle.status == :paid}
aria-pressed={cycle.status == :paid}
title={gettext("Mark as paid")}
>
<.icon name="hero-check-circle" class="size-4" />
@ -237,7 +237,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
phx-value-status="suspended"
phx-target={@myself}
class={cycle_status_btn_class(cycle.status, :suspended)}
disabled={cycle.status == :suspended}
aria-pressed={cycle.status == :suspended}
title={gettext("Mark as suspended")}
>
<.icon name="hero-pause-circle" class="size-4" />
@ -250,7 +250,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
phx-value-status="unpaid"
phx-target={@myself}
class={cycle_status_btn_class(cycle.status, :unpaid)}
disabled={cycle.status == :unpaid}
aria-pressed={cycle.status == :unpaid}
title={gettext("Mark as unpaid")}
>
<.icon name="hero-x-circle" class="size-4" />
@ -1222,14 +1222,15 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
defp translate_receipt_type(other), do: other
# Returns CSS classes for a cycle status button.
# Active (current) status is highlighted with color; others are neutral gray.
# Active (current) status is highlighted with color and non-interactive;
# inactive buttons are neutral gray. Matches the filter button pattern.
defp cycle_status_btn_class(current_status, btn_status) do
base = "join-item btn btn-sm"
case {current_status == btn_status, btn_status} do
{true, :paid} -> "#{base} btn-success btn-active"
{true, :suspended} -> "#{base} btn-warning btn-active"
{true, :unpaid} -> "#{base} btn-error btn-active"
{true, :paid} -> "#{base} btn-success btn-active pointer-events-none"
{true, :suspended} -> "#{base} btn-warning btn-active pointer-events-none"
{true, :unpaid} -> "#{base} btn-error btn-active pointer-events-none"
_ -> base
end
end