diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 097b6bc7a..f26cbadb7 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -189,25 +189,54 @@ background-color: var(--color-ink-lightest); display: flex; - padding: 1ch; + /* display: grid; + grid-template-columns: 1fr 2fr 1fr; */ opacity: 0; + padding: 0.5ch; .btn { --btn-background: var(--color-ink-lightest); + --btn-border-radius: 0.5ch; + --btn-padding: 1ch; + + display: flex; + flex-direction: column; + font-size: 12px; + font-weight: normal; + gap: 0.25ch; + inline-size: 100%; + } + + > *:is(:first-child, :last-child) { + inline-size: 128px; } .tray__dialog[open] & { opacity: 1; } - } - .tray__more-notifications { - display: none; - } + .tray__new-notifications { + display: none; + position: relative; - .tray__dialog:has(.tray__item:nth-child(1n + 7)) { - .tray__all-notifications { display: none; } - .tray__more-notifications { display: block; } + /* Red dot */ + &:after { + background-color: oklch(var(--lch-red-medium)); + block-size: 1ch; + border-radius: 50%; + box-shadow: 0 0 0 1px var(--color-ink-lightest); + content: ""; + inline-size: 1ch; + inset: 25% auto auto 50%; + position: absolute; + translate: 25% -75%; + } + } + + .tray__dialog:has(.tray__item:nth-child(1n + 7)) { + .tray__old-notifications { display: none; } + .tray__new-notifications { display: block; } + } } /* Tray cards diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 43dfb42c8..3651fbbad 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -7,23 +7,30 @@ <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph" %>
- <%= button_to read_all_notifications_path, - class: "btn btn--circle borderless", - title: "Mark all notifications as read", - data: { action: "click->dialog#close", turbo_frame: "notifications" } do %> - <%= icon_tag "check" %> - <% end %> - - <%= link_to notifications_path, class: "btn borderless flex-item-grow position-relative overflow-ellipsis", data: { action: "click->dialog#close" } do %> - See more… - See all notifications - <% end %> - <%= link_to settings_notifications_path, - class: "btn btn--circle borderless", + class: "btn borderless", title: "Notification settings", data: { action: "click->dialog#close" } do %> <%= icon_tag "settings" %> + Settings + <% 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" %> + See more new items… + <% 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" %> + See all past items + <% end %> + + <%= button_to read_all_notifications_path, + class: "btn borderless", + title: "Mark all notifications as read", + data: { action: "click->dialog#close", turbo_frame: "notifications" } do %> + <%= icon_tag "check" %> + Clear all <% end %>