style: consitent flash messages
This commit is contained in:
parent
b7c93f19cb
commit
ff9f98f8e7
22 changed files with 117 additions and 103 deletions
|
|
@ -286,11 +286,11 @@ Notes:
|
|||
- warning: 6–8s
|
||||
- error: 8–12s (or manual dismiss for critical errors)
|
||||
- **MUST:** Keep a dismiss button for accessibility and user control.
|
||||
- **Status:** Not yet implemented. See [feature-roadmap](docs/feature-roadmap.md) → Flash: Auto-dismiss and consistency.
|
||||
|
||||
### 9.3 Variants + special “email copied”
|
||||
### 9.3 Variants (unified)
|
||||
- Supported semantic variants: `info`, `success`, `warning`, `error`.
|
||||
- **Special case:** clipboard “Email copied” uses a **soft/light blue** tone distinct from normal info.
|
||||
- **MUST:** Model this as `tone="soft"` (or similar prop) on the flash component, not hard-coded colors in views.
|
||||
- **MUST:** Use the same variants for all flash types, : e.g. `success` for copy success, no separate tone or styling. This keeps flash UX consistent across the app.
|
||||
|
||||
### 9.4 Accessibility
|
||||
- Flash must work with screen readers (live region behavior belongs in the flash component implementation).
|
||||
|
|
|
|||
|
|
@ -191,6 +191,11 @@
|
|||
- ❌ Mobile navigation
|
||||
- ❌ Context-sensitive help
|
||||
- ❌ Onboarding tooltips
|
||||
- ❌ **Flash: Auto-dismiss and consistency** (Design Guidelines §9)
|
||||
- Auto-dismiss: info/success 4–6s, warning 6–8s, error 8–12s; dismiss button kept for accessibility.
|
||||
- Implement via JS hook (e.g. `FlashAutoDismiss`) + `data-dismiss-ms` (or `data-kind`) on flash component; on timeout push `lv:clear-flash` and hide element.
|
||||
- LiveView: add shared `handle_event("lv:clear-flash", %{"key" => key}, socket)` (e.g. in `MvWeb` live_view quote) calling `clear_flash(socket, key)`.
|
||||
- All flashes (including “Email copied”) use the same variants (info, success, warning, error); no special tone. See `DESIGN_DUIDELINES.md` §9.
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ defmodule MvWeb.CoreComponents do
|
|||
id={@id}
|
||||
phx-click={JS.push("lv:clear-flash", value: %{key: @kind}) |> hide("##{@id}")}
|
||||
role="alert"
|
||||
class="z-50 toast toast-bottom toast-end"
|
||||
class="pointer-events-auto"
|
||||
{@rest}
|
||||
>
|
||||
<div class={[
|
||||
|
|
|
|||
|
|
@ -115,7 +115,11 @@ defmodule MvWeb.Layouts do
|
|||
|
||||
def flash_group(assigns) do
|
||||
~H"""
|
||||
<div id={@id} aria-live="polite" class="z-50 flex flex-col gap-2 toast toast-bottom toast-end">
|
||||
<div
|
||||
id={@id}
|
||||
aria-live="polite"
|
||||
class="z-50 toast toast-bottom toast-end flex flex-col gap-2 pointer-events-none"
|
||||
>
|
||||
<.flash kind={:success} flash={@flash} />
|
||||
<.flash kind={:warning} flash={@flash} />
|
||||
<.flash kind={:info} flash={@flash} />
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ defmodule MvWeb.AuthController do
|
|||
|> store_in_session(user)
|
||||
# If your resource has a different name, update the assign name here (i.e :current_admin)
|
||||
|> assign(:current_user, user)
|
||||
|> put_flash(:info, message)
|
||||
|> put_flash(:success, message)
|
||||
|> redirect(to: return_to)
|
||||
end
|
||||
|
||||
|
|
@ -322,7 +322,7 @@ defmodule MvWeb.AuthController do
|
|||
|
||||
conn
|
||||
|> clear_session(:mv)
|
||||
|> put_flash(:info, gettext("You are now signed out"))
|
||||
|> put_flash(:success, gettext("You are now signed out"))
|
||||
|> redirect(to: return_to)
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ defmodule MvWeb.LinkOidcAccountLive do
|
|||
|
||||
socket
|
||||
|> put_flash(
|
||||
:info,
|
||||
:success,
|
||||
dgettext("auth", "Account activated! Redirecting to complete sign-in...")
|
||||
)
|
||||
|> Phoenix.LiveView.redirect(to: ~p"/auth/user/oidc")
|
||||
|
|
@ -217,7 +217,7 @@ defmodule MvWeb.LinkOidcAccountLive do
|
|||
{:noreply,
|
||||
socket
|
||||
|> put_flash(
|
||||
:info,
|
||||
:success,
|
||||
dgettext(
|
||||
"auth",
|
||||
"Your OIDC account has been successfully linked! Redirecting to complete sign-in..."
|
||||
|
|
|
|||
|
|
@ -64,12 +64,12 @@ defmodule MvWeb.DatafieldsLive do
|
|||
{:noreply,
|
||||
socket
|
||||
|> assign(:active_editing_section, nil)
|
||||
|> put_flash(:info, gettext("Data field %{action} successfully", action: action))}
|
||||
|> put_flash(:success, gettext("Data field %{action} successfully", action: action))}
|
||||
end
|
||||
|
||||
@impl true
|
||||
def handle_info({:custom_field_deleted, _custom_field}, socket) do
|
||||
{:noreply, put_flash(socket, :info, gettext("Data field deleted successfully"))}
|
||||
{:noreply, put_flash(socket, :success, gettext("Data field deleted successfully"))}
|
||||
end
|
||||
|
||||
@impl true
|
||||
|
|
@ -115,7 +115,7 @@ defmodule MvWeb.DatafieldsLive do
|
|||
socket
|
||||
|> assign(:settings, updated_settings)
|
||||
|> assign(:active_editing_section, nil)
|
||||
|> put_flash(:info, gettext("Member field %{action} successfully", action: action))}
|
||||
|> put_flash(:success, gettext("Member field %{action} successfully", action: action))}
|
||||
end
|
||||
|
||||
@impl true
|
||||
|
|
|
|||
|
|
@ -357,20 +357,21 @@ defmodule MvWeb.GlobalSettingsLive do
|
|||
errors_with_names = enrich_sync_errors(errors)
|
||||
result = %{synced: synced, errors: errors_with_names}
|
||||
|
||||
socket =
|
||||
socket
|
||||
|> assign(:last_vereinfacht_sync_result, result)
|
||||
|> put_flash(
|
||||
:info,
|
||||
{flash_kind, flash_message} =
|
||||
if(errors_with_names == [],
|
||||
do: gettext("Synced %{count} member(s) to Vereinfacht.", count: synced),
|
||||
do: {:success, gettext("Synced %{count} member(s) to Vereinfacht.", count: synced)},
|
||||
else:
|
||||
{:warning,
|
||||
gettext("Synced %{count} member(s). %{error_count} failed.",
|
||||
count: synced,
|
||||
error_count: length(errors_with_names)
|
||||
)}
|
||||
)
|
||||
)
|
||||
)
|
||||
|
||||
socket =
|
||||
socket
|
||||
|> assign(:last_vereinfacht_sync_result, result)
|
||||
|> put_flash(flash_kind, flash_message)
|
||||
|
||||
{:noreply, socket}
|
||||
|
||||
|
|
@ -409,7 +410,7 @@ defmodule MvWeb.GlobalSettingsLive do
|
|||
|> assign(:oidc_client_secret_set, present?(fresh_settings.oidc_client_secret))
|
||||
|> assign(:oidc_configured, Mv.Config.oidc_configured?())
|
||||
|> assign(:vereinfacht_test_result, test_result)
|
||||
|> put_flash(:info, gettext("Settings updated successfully"))
|
||||
|> put_flash(:success, gettext("Settings updated successfully"))
|
||||
|> assign_form()
|
||||
|
||||
{:noreply, socket}
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ defmodule MvWeb.GroupLive.Form do
|
|||
|
||||
socket =
|
||||
socket
|
||||
|> put_flash(:info, gettext("Group saved successfully."))
|
||||
|> put_flash(:success, gettext("Group saved successfully."))
|
||||
|> push_navigate(to: redirect_path)
|
||||
|
||||
{:noreply, socket}
|
||||
|
|
|
|||
|
|
@ -909,7 +909,7 @@ defmodule MvWeb.GroupLive.Show do
|
|||
:ok ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_flash(:info, gettext("Group deleted successfully."))
|
||||
|> put_flash(:success, gettext("Group deleted successfully."))
|
||||
|> redirect(to: ~p"/groups")}
|
||||
|
||||
{:error, error} ->
|
||||
|
|
|
|||
|
|
@ -390,7 +390,7 @@ defmodule MvWeb.MemberLive.Form do
|
|||
|
||||
socket =
|
||||
socket
|
||||
|> put_flash(:info, flash_message)
|
||||
|> put_flash(:success, flash_message)
|
||||
|> maybe_put_vereinfacht_sync_flash(member.id)
|
||||
|> push_navigate(to: return_path(socket.assigns.return_to, member))
|
||||
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ defmodule MvWeb.MemberLive.Index do
|
|||
{:noreply,
|
||||
socket
|
||||
|> assign(:members, updated_members)
|
||||
|> put_flash(:info, gettext("Member deleted successfully"))}
|
||||
|> put_flash(:success, gettext("Member deleted successfully"))}
|
||||
|
||||
{:error, %Ash.Error.Forbidden{}} ->
|
||||
{:noreply,
|
||||
|
|
|
|||
|
|
@ -562,7 +562,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
get_available_fee_types(updated_member, actor)
|
||||
)
|
||||
|> assign(:interval_warning, nil)
|
||||
|> put_flash(:info, gettext("Membership fee type removed"))}
|
||||
|> put_flash(:success, gettext("Membership fee type removed"))}
|
||||
|
||||
{:error, error} ->
|
||||
{:noreply, put_flash(socket, :error, format_error(error))}
|
||||
|
|
@ -621,7 +621,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
get_available_fee_types(updated_member, actor)
|
||||
)
|
||||
|> assign(:interval_warning, nil)
|
||||
|> put_flash(:info, gettext("Membership fee type updated. Cycles regenerated."))}
|
||||
|> put_flash(:success, gettext("Membership fee type updated. Cycles regenerated."))}
|
||||
|
||||
{:error, error} ->
|
||||
{:noreply, put_flash(socket, :error, format_error(error))}
|
||||
|
|
@ -649,7 +649,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
{:noreply,
|
||||
socket
|
||||
|> assign(:cycles, updated_cycles)
|
||||
|> put_flash(:info, gettext("Cycle status updated"))}
|
||||
|> put_flash(:success, gettext("Cycle status updated"))}
|
||||
|
||||
{:error, %Ash.Error.Invalid{} = error} ->
|
||||
error_msg =
|
||||
|
|
@ -705,7 +705,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
|> assign(:member, updated_member)
|
||||
|> assign(:cycles, cycles)
|
||||
|> assign(:regenerating, false)
|
||||
|> put_flash(:info, gettext("Cycles regenerated successfully"))}
|
||||
|> put_flash(:success, gettext("Cycles regenerated successfully"))}
|
||||
|
||||
{:error, error} ->
|
||||
{:noreply,
|
||||
|
|
@ -755,7 +755,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
socket
|
||||
|> assign(:cycles, updated_cycles)
|
||||
|> assign(:editing_cycle, nil)
|
||||
|> put_flash(:info, gettext("Cycle amount updated"))}
|
||||
|> put_flash(:success, gettext("Cycle amount updated"))}
|
||||
|
||||
{:error, error} ->
|
||||
{:noreply,
|
||||
|
|
@ -794,7 +794,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
socket
|
||||
|> assign(:cycles, updated_cycles)
|
||||
|> assign(:deleting_cycle, nil)
|
||||
|> put_flash(:info, gettext("Cycle deleted"))}
|
||||
|> put_flash(:success, gettext("Cycle deleted"))}
|
||||
|
||||
{:ok, _destroyed} ->
|
||||
# Handle case where return_destroyed? is true
|
||||
|
|
@ -804,7 +804,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
socket
|
||||
|> assign(:cycles, updated_cycles)
|
||||
|> assign(:deleting_cycle, nil)
|
||||
|> put_flash(:info, gettext("Cycle deleted"))}
|
||||
|> put_flash(:success, gettext("Cycle deleted"))}
|
||||
|
||||
{:error, error} ->
|
||||
{:noreply,
|
||||
|
|
@ -950,7 +950,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
|> assign(:creating_cycle, false)
|
||||
|> assign(:create_cycle_date, nil)
|
||||
|> assign(:create_cycle_error, nil)
|
||||
|> put_flash(:info, gettext("Cycle created successfully"))}
|
||||
|> put_flash(:success, gettext("Cycle created successfully"))}
|
||||
|
||||
{:error, error} ->
|
||||
{:noreply,
|
||||
|
|
@ -1013,7 +1013,7 @@ defmodule MvWeb.MemberLive.Show.MembershipFeesComponent do
|
|||
|> assign(:member, updated_member)
|
||||
|> assign(:cycles, updated_cycles)
|
||||
|> reset_modal.()
|
||||
|> put_flash(:info, gettext("All cycles deleted"))}
|
||||
|> put_flash(:success, gettext("All cycles deleted"))}
|
||||
|
||||
{:ok, _} ->
|
||||
{:noreply,
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ defmodule MvWeb.MembershipFeeSettingsLive do
|
|||
{:noreply,
|
||||
socket
|
||||
|> assign(:settings, updated_settings)
|
||||
|> put_flash(:info, gettext("Settings saved successfully."))
|
||||
|> put_flash(:success, gettext("Settings saved successfully."))
|
||||
|> assign_form()}
|
||||
|
||||
{:error, form} ->
|
||||
|
|
@ -105,7 +105,7 @@ defmodule MvWeb.MembershipFeeSettingsLive do
|
|||
socket
|
||||
|> assign(:membership_fee_types, updated_types)
|
||||
|> assign(:member_counts, updated_counts)
|
||||
|> put_flash(:info, gettext("Membership fee type deleted"))}
|
||||
|> put_flash(:success, gettext("Membership fee type deleted"))}
|
||||
|
||||
{:error, %Ash.Error.Forbidden{}} ->
|
||||
{:noreply,
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Form do
|
|||
|
||||
socket =
|
||||
socket
|
||||
|> put_flash(:info, gettext("Membership fee type saved successfully"))
|
||||
|> put_flash(:success, gettext("Membership fee type saved successfully"))
|
||||
|> push_navigate(to: return_path(socket.assigns.return_to, membership_fee_type))
|
||||
|
||||
{:noreply, socket}
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@ defmodule MvWeb.MembershipFeeTypeLive.Index do
|
|||
socket
|
||||
|> assign(:membership_fee_types, updated_types)
|
||||
|> assign(:member_counts, updated_counts)
|
||||
|> put_flash(:info, gettext("Membership fee type deleted"))}
|
||||
|> put_flash(:success, gettext("Membership fee type deleted"))}
|
||||
|
||||
{:error, %Ash.Error.Forbidden{}} ->
|
||||
{:noreply,
|
||||
|
|
|
|||
|
|
@ -177,7 +177,7 @@ defmodule MvWeb.RoleLive.Form do
|
|||
|
||||
socket =
|
||||
socket
|
||||
|> put_flash(:info, gettext("Role saved successfully."))
|
||||
|> put_flash(:success, gettext("Role saved successfully."))
|
||||
|> push_navigate(to: redirect_path)
|
||||
|
||||
{:noreply, socket}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ defmodule MvWeb.RoleLive.Index do
|
|||
socket
|
||||
|> assign(:roles, updated_roles)
|
||||
|> assign(:user_counts, updated_counts)
|
||||
|> put_flash(:info, gettext("Role deleted successfully."))}
|
||||
|> put_flash(:success, gettext("Role deleted successfully."))}
|
||||
|
||||
{:error, error} ->
|
||||
error_message = format_error(error)
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ defmodule MvWeb.RoleLive.Show do
|
|||
:ok ->
|
||||
{:noreply,
|
||||
socket
|
||||
|> put_flash(:info, gettext("Role deleted successfully."))
|
||||
|> put_flash(:success, gettext("Role deleted successfully."))
|
||||
|> push_navigate(to: ~p"/admin/roles")}
|
||||
|
||||
{:error, error} ->
|
||||
|
|
@ -165,7 +165,11 @@ defmodule MvWeb.RoleLive.Show do
|
|||
<:subtitle>{gettext("Role details and permissions.")}</:subtitle>
|
||||
|
||||
<:actions>
|
||||
<.button navigate={~p"/admin/roles"} variant="neutral" aria-label={gettext("Back to roles list")}>
|
||||
<.button
|
||||
navigate={~p"/admin/roles"}
|
||||
variant="neutral"
|
||||
aria-label={gettext("Back to roles list")}
|
||||
>
|
||||
<.icon name="hero-arrow-left" class="size-4" />
|
||||
{gettext("Back")}
|
||||
</.button>
|
||||
|
|
|
|||
|
|
@ -556,7 +556,7 @@ defmodule MvWeb.UserLive.Form do
|
|||
|
||||
socket =
|
||||
socket
|
||||
|> put_flash(:info, gettext("User %{action} successfully", action: action))
|
||||
|> put_flash(:success, gettext("User %{action} successfully", action: action))
|
||||
|> push_navigate(to: return_path(socket.assigns.return_to, updated_user))
|
||||
|
||||
{:noreply, socket}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ defmodule MvWeb.UserLive.Index do
|
|||
{:noreply,
|
||||
socket
|
||||
|> assign(:users, updated_users)
|
||||
|> put_flash(:info, gettext("User deleted successfully"))}
|
||||
|> put_flash(:success, gettext("User deleted successfully"))}
|
||||
|
||||
{:error, %Ash.Error.Forbidden{}} ->
|
||||
{:noreply,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue