mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-10 07:55:21 +02:00
Split out notification types, add CTA type
This commit is contained in:
Zach Gollwitzer
parent
150a95996a
commit
e13ea950c2
9 changed files with 106 additions and 70 deletions
|
|
@ -23,18 +23,22 @@ module ApplicationHelper
|
|||
content_for(:header_description) { page_description }
|
||||
end
|
||||
|
||||
def family_notifications_stream
|
||||
turbo_stream_from [ Current.family, :notifications ] if Current.family
|
||||
end
|
||||
|
||||
def family_stream
|
||||
turbo_stream_from Current.family if Current.family
|
||||
end
|
||||
|
||||
def render_flash_notifications
|
||||
notifications = flash.flat_map do |type, message_or_messages|
|
||||
Array(message_or_messages).map do |message|
|
||||
render partial: "shared/notification", locals: { type: type, message: message }
|
||||
notifications = flash.flat_map do |type, data|
|
||||
case type
|
||||
when "alert"
|
||||
render "shared/notifications/alert", message: data
|
||||
when "cta"
|
||||
render "shared/notifications/cta", cta: data
|
||||
when "loading"
|
||||
render "shared/notifications/loading", message: data
|
||||
when "notice"
|
||||
messages = Array(data)
|
||||
messages.map { |message| render "shared/notifications/notice", message: }
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -11,12 +11,11 @@
|
|||
<%= render_flash_notifications %>
|
||||
|
||||
<% if Current.family&.syncing? %>
|
||||
<%= render "shared/syncing_notice" %>
|
||||
<% render "shared/notifications/loading", id: "syncing-notice", message: "Syncing accounts data..." %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= family_notifications_stream %>
|
||||
<%= family_stream %>
|
||||
|
||||
<%= turbo_frame_tag "modal" %>
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<div class="fixed z-50 bottom-6 left-6">
|
||||
<div id="notification-tray" class="space-y-1">
|
||||
<%= render_flash_notifications %>
|
||||
|
||||
<% if Current.family&.syncing? %>
|
||||
<%= render "shared/syncing_notice" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= family_notifications_stream %>
|
||||
<%= family_stream %>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
<%# locals: (message:, type: "notice", **_opts) %>
|
||||
|
||||
<% type = type.to_sym %>
|
||||
<% action = "animationend->element-removal#remove" if type == :notice %>
|
||||
|
||||
<%= tag.div class: "flex gap-3 rounded-lg bg-white p-4 group max-w-80 shadow-border-lg",
|
||||
data: {
|
||||
controller: "element-removal",
|
||||
action: action
|
||||
} do %>
|
||||
|
||||
<div class="h-5 w-5 shrink-0 p-px text-white">
|
||||
<% case type %>
|
||||
<% when :notice %>
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-success">
|
||||
<%= lucide_icon "check", class: "w-3 h-3" %>
|
||||
</div>
|
||||
<% when :alert %>
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-destructive">
|
||||
<%= lucide_icon "x", class: "w-3 h-3" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= tag.p message, class: "text-primary text-sm font-medium" %>
|
||||
|
||||
<div class="ml-auto">
|
||||
<% if type.to_sym == :notice %>
|
||||
<div class="h-5 shrink-0">
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
|
||||
<path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
|
||||
<circle class="origin-center -rotate-90 animate-stroke-fill" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
|
||||
</svg>
|
||||
<div class="absolute -top-2 -right-2">
|
||||
<%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
|
||||
</div>
|
||||
</div>
|
||||
<% elsif type.to_sym == :alert %>
|
||||
<%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-secondary hover:text-gray-600 cursor-pointer" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<%= tag.div id: "syncing-notice", class: "flex gap-3 rounded-lg border bg-white p-4 group w-full shadow-xs border-alpha-black-25" do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-white">
|
||||
<%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
|
||||
</div>
|
||||
|
||||
<%= tag.p t(".syncing"), class: "text-primary text-sm font-medium" %>
|
||||
<% end %>
|
||||
16
app/views/shared/notifications/_alert.html.erb
Normal file
16
app/views/shared/notifications/_alert.html.erb
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<%# locals: (message:) %>
|
||||
|
||||
<%= tag.div class: "flex gap-3 rounded-lg bg-white p-4 group max-w-80 shadow-border-lg",
|
||||
data: { controller: "element-removal" } do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-white">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-destructive">
|
||||
<%= lucide_icon "x", class: "w-3 h-3" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= tag.p message, class: "text-primary text-sm font-medium" %>
|
||||
|
||||
<div class="ml-auto">
|
||||
<%= lucide_icon "x", data: { action: "click->element-removal#remove" }, class: "w-5 h-5 text-secondary hover:text-gray-600 cursor-pointer" %>
|
||||
</div>
|
||||
<% end %>
|
||||
21
app/views/shared/notifications/_cta.html.erb
Normal file
21
app/views/shared/notifications/_cta.html.erb
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<%# locals: (cta:) %>
|
||||
|
||||
<%= tag.div class: "relative flex gap-3 rounded-lg bg-white p-4 group max-w-80 shadow-border-xs", data: { controller: "element-removal" } do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-white">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-success">
|
||||
<%= lucide_icon "check", class: "w-3 h-3" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<%= tag.p cta[:message], class: "text-primary text-sm font-medium" %>
|
||||
<%= tag.p cta[:description], class: "text-secondary text-sm" %>
|
||||
</div>
|
||||
|
||||
<%= tag.div class:"flex gap-2 justify-end" do %>
|
||||
<%= tag.button cta[:decline_label], class: "btn btn--secondary", data: { action: "click->element-removal#remove" } %>
|
||||
<%= tag.a cta[:accept_label], href: cta[:accept_href], class: "btn btn--primary" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
9
app/views/shared/notifications/_loading.html.erb
Normal file
9
app/views/shared/notifications/_loading.html.erb
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<%# locals: (message:, id: nil) %>
|
||||
|
||||
<%= tag.div id: id, class: "flex gap-3 rounded-lg bg-white p-4 group w-full shadow-border-xs" do %>
|
||||
<div class="h-5 w-5 shrink-0 p-px text-white">
|
||||
<%= lucide_icon "loader", class: "w-5 h-5 text-secondary animate-pulse" %>
|
||||
</div>
|
||||
|
||||
<%= tag.p message, class: "text-primary text-sm font-medium" %>
|
||||
<% end %>
|
||||
48
app/views/shared/notifications/_notice.html.erb
Normal file
48
app/views/shared/notifications/_notice.html.erb
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<%# locals: (message:, description: nil, cta: nil) %>
|
||||
|
||||
<%= tag.div class: "relative flex gap-3 rounded-lg bg-white p-4 group max-w-80 shadow-border-xs",
|
||||
data: {
|
||||
controller: "element-removal",
|
||||
action: "animationend->element-removal#remove"
|
||||
} do %>
|
||||
|
||||
<div class="h-5 w-5 shrink-0 p-px text-white">
|
||||
<div class="flex h-full items-center justify-center rounded-full bg-success">
|
||||
<%= lucide_icon "check", class: "w-3 h-3" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-1">
|
||||
<%= tag.p message, class: "text-primary text-sm font-medium" %>
|
||||
|
||||
<% if description %>
|
||||
<%= tag.p description, class: "text-secondary text-sm" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if cta %>
|
||||
<%= tag.div class:"flex gap-2 justify-end" do %>
|
||||
<%= tag.button cta[:decline][:label], class: "btn btn--secondary", data: { action: "click->element-removal#remove" } %>
|
||||
<%= tag.a cta[:accept][:label], href: cta[:accept][:href], class: "btn btn--primary" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto">
|
||||
<div class="h-5 shrink-0">
|
||||
<% unless cta %>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="shrink-0">
|
||||
<path d="M18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10ZM3.6 10C3.6 13.5346 6.46538 16.4 10 16.4C13.5346 16.4 16.4 13.5346 16.4 10C16.4 6.46538 13.5346 3.6 10 3.6C6.46538 3.6 3.6 6.46538 3.6 10Z" fill="#E5E5E5" />
|
||||
<circle class="origin-center -rotate-90 animate-stroke-fill" stroke="#141414" stroke-opacity="0.4" r="7.2" cx="10" cy="10" stroke-dasharray="43.9822971503" stroke-dashoffset="43.9822971503" />
|
||||
</svg>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% unless cta %>
|
||||
<div class="absolute -top-2 -right-2">
|
||||
<%= lucide_icon "x", class: "w-5 h-5 p-0.5 hidden group-hover:inline-block border border-alpha-black-50 border-solid rounded-lg bg-white text-subdued cursor-pointer", data: { action: "click->element-removal#remove" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
Loading…
Add table
Add a link
Reference in a new issue