Andy Smith
45 lines
2.0 KiB
Plaintext
45 lines
2.0 KiB
Plaintext
<%= turbo_stream_from Current.user, :notifications %>
|
|
|
|
<section class="tray tray--notifications" data-controller="dialog">
|
|
<dialog class="tray__dialog"
|
|
data-dialog-modal-value="false" data-dialog-target="dialog"
|
|
data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside">
|
|
<%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph" %>
|
|
|
|
<div class="tray__item tray__hat txt-x-small">
|
|
<%= link_to settings_notifications_path,
|
|
class: "btn borderless tray__notification-settings",
|
|
title: "Notification settings",
|
|
data: { action: "click->dialog#close" } do %>
|
|
<%= icon_tag "settings" %>
|
|
<span class="translucent">Settings</span>
|
|
<% end %>
|
|
|
|
<%= link_to notifications_path, class: "tray__new-notifications btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %>
|
|
<%= icon_tag "bell" %>
|
|
<span class="translucent">See more new items</span>
|
|
<% end %>
|
|
|
|
<%= link_to notifications_path, class: "tray__old-notifications btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %>
|
|
<%= icon_tag "bell" %>
|
|
<span class="translucent">See older items</span>
|
|
<% end %>
|
|
|
|
<%= button_to read_all_notifications_path,
|
|
class: "btn borderless tray__clear-notifications",
|
|
title: "Mark all notifications as read",
|
|
data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
|
|
<%= icon_tag "check" %>
|
|
<span class="translucent">Clear all</span>
|
|
<% end %>
|
|
</div>
|
|
</dialog>
|
|
|
|
<button class="tray__toggle" data-action="dialog#toggle" aria-label="Toggle notifications stack" aria-haspopup="true">
|
|
<div class="tray__toggle-btn txt-uppercase btn btn--reversed txt-x-small center full-width">
|
|
<%= icon_tag "bell" %>
|
|
<span class="tray__toggle-text">Notifications</span>
|
|
</div>
|
|
</button>
|
|
</section>
|