bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set state for when there are no new notifications

Browse Source
This commit is contained in:
Jason Zimdars
2025-01-20 17:58:56 -06:00
parent 69e235b082
commit 02573b6dc8
3 changed files with 46 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/notifications.css
+38 -1
View File
@@ -55,6 +55,42 @@
scale: 1;
transform: translateY(0);
}
.notification-tray:has(.notification) & {
.btn img {
display: none;
}
}
.notification-tray:not(:has(.notification)) & {
opacity: 1;
scale: 1;
transform: none;
transition: none;
.notification-tray__all_action {
--btn-border-radius: 50%;
--btn-padding: 0;
aspect-ratio: 1;
block-size: var(--btn-size);
display: grid;
inline-size: var(--btn-size);
place-items: center;
> * {
grid-area: 1/1;
}
span {
display: none;
}
}
.notification-tray__read_action {
display: none;
}
}
}
.notification__content {
@@ -75,7 +111,8 @@
position: absolute;
z-index: 6;
.notification-tray[open] & {
.notification-tray[open] &,
.notification-tray:not(:has(.notification)) & {
display: none;
}
}
app/javascript/controllers/dialog_controller.js
+1
View File
@@ -26,6 +26,7 @@ export default class extends Controller {
close() {
this.dialogTarget.close()
this.dialogTarget.blur()
}
closeOnClickOutside({ target }) {
app/views/notifications/_tray.html.erb
+7 -8
View File
@@ -1,20 +1,19 @@
<%= turbo_stream_from Current.user, :notifications %>
<%= tag.dialog id: "notification-tray", class: "notification-tray flex flex-column gap unpad borderless justify-end",
data: { controller: "dialog", turbo_permanent: true, dialog_modal_value: false, dialog_target: "dialog", action: "keydown.esc@document->dialog#close click@document->dialog#closeOnClickOutside" } do %>
<%= turbo_frame_tag("notifications", src: notifications_tray_path) %>
<div class="notification-tray__actions flex align-center gap-half justify-space-between">
<button class="btn">
<%= tag.dialog id: "notification-tray", class: "notification-tray flex flex-column gap unpad borderless justify-end fill-transparent",
data: { controller: "dialog", turbo_permanent: true, dialog_modal_value: false, dialog_target: "dialog", action: "keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside" } do %>
<%= turbo_frame_tag("notifications", src: notifications_tray_path) -%>
<div class="notification-tray__actions flex align-center gap-half">
<button class="notification-tray__read_action btn flex-item-justify-start">
Mark all as read
</button>
<%= link_to notifications_path, class: "btn" do %>
<%= link_to notifications_path, class: "notification-tray__all_action btn flex-item-justify-end" do %>
<%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
<span>See all notifications</span>
<% end %>
</div>
<button class="notification-tray__expander borderless unpad fill-transparent" data-action="dialog#toggle">
<button class="notification-tray__expander borderless unpad fill-transparent" data-action="dialog#toggle" aria-label="Expand notifications stack">
</button>
<% end %>