From f00abdd089b898723552e17da45413c1acacc45a Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Jul 2025 15:11:28 -0500 Subject: [PATCH 01/11] Add another actions sections inside the tray --- app/assets/stylesheets/trays.css | 33 +++++++++++++------------- app/views/notifications/_tray.html.erb | 22 ++++++++++++++--- 2 files changed, 36 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 8ea7aea54..3322af5f9 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -222,32 +222,33 @@ } .tray__item--overflow { - --tray-item-index: 7 !important; - --tray-item-z: 1; + --tray-item-height: 56px; + --tray-item-scale: 1; - display: none; + background-color: var(--color-ink-lightest); + display: flex; + gap: 1ch; + padding: 1ch; opacity: 0; - .card { - align-items: center; - background-color: var(--color-canvas); - font-size: var(--text-small); - font-weight: bold; - justify-content: center; - } - - /* Only show when there are 7+ items */ - .tray__dialog:has(.tray__item:nth-child(7)) & { - display: flex; + .btn { + --btn-background: var(--color-ink-lightest); } .tray__dialog[open] & { - --tray-item-scale: 1; - opacity: 1; } } + .tray__more-notifications { + display: none; + } + + .tray__dialog:has(.tray__item:nth-child(1n + var(--tray-max-items))) { + .tray__all-notifications { display: none; } + .tray__more-notifications { display: block; } + } + /* Tray cards /* ------------------------------------------------------------------------ */ diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 671da7f72..a55961599 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -6,11 +6,27 @@ data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside"> <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph" %> -
- <%= link_to notifications_path, class: "card", data: { action: "click->dialog#close" } do %> - + More… +
+ <%= 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", data: { action: "click->dialog#close" } do %> + See more… + See all notifications + <% end %> + + <%= link_to settings_notifications_path, + class: "btn btn--circle borderless", + title: "Notification settings", + data: { action: "click->dialog#close" } do %> + <%= icon_tag "settings" %> <% end %>
+
From 9e02af489d2f11a684fa63118e4d957b8969b807 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Jul 2025 15:18:24 -0500 Subject: [PATCH 02/11] Rename expander button --- app/assets/stylesheets/trays.css | 17 ++++++++++------- app/views/my/pins/_tray.html.erb | 2 +- app/views/notifications/_tray.html.erb | 2 +- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 3322af5f9..7334aff5d 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -5,6 +5,7 @@ .tray { --tray-duration: 350ms; --tray-margin: 0.5rem; + --tray-max-items: 7; --tray-radius: 0.25rem; --tray-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1); @@ -62,7 +63,7 @@ /* Expander /* ------------------------------------------------------------------------ */ - .tray__expander { + .tray__toggle { align-self: stretch; background: transparent; border: 0; @@ -298,12 +299,14 @@ /* ------------------------------------------------------------------------ */ .tray--pins { + --tray-max-items: 11; + inset-inline: var(--tray-margin) auto; .tray__item { --tray-item-z: calc(10 - var(--tray-item-index)); - &:nth-child(1n + 11) { display: none; } + &:nth-child(1n + var(--tray-max-items)) { display: none; } } .avatar, @@ -370,13 +373,13 @@ /* On mobile… */ @media (max-width: 799px) { /* …add a border */ - .tray__expander { + .tray__toggle { border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); translate: calc(-1 * var(--tray-margin)) 0; } /* …and disable the expander if there aren't items to show */ - .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ .tray__expander { + .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ .tray__toggle { pointer-events: none; .icon { @@ -390,7 +393,7 @@ .tray__dialog:has(.tray__item:only-child) { pointer-events: unset; - ~ .tray__expander { + ~ .tray__toggle { display: none; } } @@ -403,7 +406,7 @@ .tray--notifications { inset-inline: auto var(--tray-margin); - .tray__item:nth-child(1n + 7) { + .tray__item:nth-child(1n + var(--tray-max-items)) { display: none; } @@ -421,7 +424,7 @@ /* On mobile… */ @media (max-width: 799px) { /* …add a border */ - .tray__expander { + .tray__toggle { border-inline-start: 1px dashed oklch(var(--lch-white) / 50%); translate: var(--tray-margin) 0; } diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb index bafafc01c..1d6ca4a18 100644 --- a/app/views/my/pins/_tray.html.erb +++ b/app/views/my/pins/_tray.html.erb @@ -12,7 +12,7 @@
- diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index a55961599..0e1da369d 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -50,7 +50,7 @@ <% end %>
- From a27987bd8e50cbb6a0f58223ec0f8dd5d0f8a3f7 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Jul 2025 15:29:00 -0500 Subject: [PATCH 03/11] Add a button to remove pins from tray --- app/assets/stylesheets/trays.css | 32 +++++++++++++++++++++----------- app/views/my/pins/_pin.html.erb | 3 +++ 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 7334aff5d..2d53bacd9 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -306,9 +306,30 @@ .tray__item { --tray-item-z: calc(10 - var(--tray-item-index)); + position: relative; + &:nth-child(1n + var(--tray-max-items)) { display: none; } } + .tray__remove-pin-btn { + --btn-icon-size: 1.25em; + --btn-size: 2em; + + background-color: var(--card-bg-color); + inset: 0 0 auto auto; + opacity: 0; + position: absolute; + z-index: 1; + + .tray__dialog[open] & { + opacity: 0.66; + + &:hover { + opacity: 1; + } + } + } + .avatar, .card__tags, .card__meta .btn, @@ -387,17 +408,6 @@ } } } - - /* On desktop, don't expand if there's only one pin */ - @media (min-width: 800px) { - .tray__dialog:has(.tray__item:only-child) { - pointer-events: unset; - - ~ .tray__toggle { - display: none; - } - } - } } /* Notification-specific styles diff --git a/app/views/my/pins/_pin.html.erb b/app/views/my/pins/_pin.html.erb index 935687995..5d80b4bbe 100644 --- a/app/views/my/pins/_pin.html.erb +++ b/app/views/my/pins/_pin.html.erb @@ -1,3 +1,6 @@
<%= render "cards/display/preview", card: pin.card %> + <%= button_to card_pin_path(pin.card), method: :delete, class: "tray__remove-pin-btn btn btn--circle borderless" do %> + <%= icon_tag "remove-med" %> Un-pin this card + <% end %>
From 524feedbfd08bd8a89e63b52c2990aa9f372587c Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Jul 2025 16:06:31 -0500 Subject: [PATCH 04/11] WIP --- app/assets/stylesheets/trays.css | 66 +++++++++++++++++++------------- app/views/my/pins/_tray.html.erb | 13 +++---- 2 files changed, 44 insertions(+), 35 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 2d53bacd9..bb6c7f493 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -65,11 +65,11 @@ .tray__toggle { align-self: stretch; - background: transparent; + background: none; + background: oklch(var(--lch-yellow-medium) / 50%); border: 0; - display: grid; - margin-block: calc(var(--block-space) * -1) var(--block-space-half); - place-content: center; + display: block; + padding: 0; z-index: calc(var(--z-tray) + 1); .icon { @@ -77,21 +77,26 @@ display: none; } - .tray__dialog[open] ~ & { - display: none; - } - - /* On mobile, add an icon to the expander button */ @media (max-width: 799px) { - inline-size: var(--footer-height); - margin: 0; + /* When collapsed on mobile, make it small */ + .tray__dialog:not([open]) ~ & { + inline-size: var(--footer-height); - .icon { - display: block; + .tray__toggle-btn { + border: 0; + } + + .icon { + display: block; + } + + .tray__toggle-text { + display: none; + } } /* Show a red dot if there are items to show */ - .tray__dialog:has(.tray__item:not(.tray__item--overflow)) ~ &:after { + .tray__dialog:not([open]):has(.tray__item:not(.tray__item--overflow)) ~ &:after { background: oklch(var(--lch-red-medium)); block-size: 1ch; border-radius: 50%; @@ -101,11 +106,28 @@ position: absolute; } } + } - /* On desktop, hide if there aren't any items to show */ + .tray__toggle-btn { + --btn-background: transparent; + + border-style: dashed; + border-radius: 1ch; + inline-size: 100%; + + /* On desktop… */ @media (min-width: 800px) { - .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & { - display: none + /* Hide the UI when collapsed, but only if there are Pins */ + .tray__dialog:has(.tray__item:not(.tray__item--overflow)) { + opacity: 0; + } + } + + .tray__dialog[open] ~ .tray__toggle & { + opacity: 0.66; + + &:hover { + opacity: 1; } } } @@ -125,16 +147,6 @@ transition: translate var(--tray-duration) var(--tray-timing-function); translate: 0 var(--footer-height); - /* Get the circle buttons to be full-height without magic numbers */ - form { - aspect-ratio: 1; - - .btn { - block-size: 100%; - inline-size: 100%; - } - } - .btn { opacity: 0.66; diff --git a/app/views/my/pins/_tray.html.erb b/app/views/my/pins/_tray.html.erb index 1d6ca4a18..51c103963 100644 --- a/app/views/my/pins/_tray.html.erb +++ b/app/views/my/pins/_tray.html.erb @@ -6,13 +6,10 @@ <%= turbo_frame_tag "pins", src: my_pins_path %> <% end %> -
- -
- - From 4f77ca0f2790663bcd0c595c841379bff59e9d47 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Jul 2025 16:40:22 -0500 Subject: [PATCH 05/11] Get Pins working on mobile and desktop --- app/assets/stylesheets/trays.css | 43 ++++++++++++++++---------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index bb6c7f493..287c3ce03 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -65,11 +65,11 @@ .tray__toggle { align-self: stretch; - background: none; background: oklch(var(--lch-yellow-medium) / 50%); border: 0; display: block; padding: 0; + transition: opacity 100ms ease-out; z-index: calc(var(--z-tray) + 1); .icon { @@ -106,8 +106,17 @@ position: absolute; } } + + /* On desktop… */ + @media (min-width: 800px) { + /* Hide the UI when collapsed, but only if there are items */ + .tray__dialog:not([open]):has(.tray__item:not(.tray__item--overflow)) ~ & { + opacity: 0; + } + } } + .tray__toggle-btn { --btn-background: transparent; @@ -115,21 +124,13 @@ border-radius: 1ch; inline-size: 100%; - /* On desktop… */ - @media (min-width: 800px) { - /* Hide the UI when collapsed, but only if there are Pins */ - .tray__dialog:has(.tray__item:not(.tray__item--overflow)) { - opacity: 0; - } - } - - .tray__dialog[open] ~ .tray__toggle & { + /* .tray__dialog[open] ~ .tray__toggle & { opacity: 0.66; &:hover { opacity: 1; } - } + } */ } /* Actions @@ -403,22 +404,22 @@ display: none; } - /* On mobile… */ + /* Disable the expander if there aren't items to show */ + .tray__dialog:not(:has(.tray__item)) ~ .tray__toggle { + opacity: 0.5; + + &, .tray__toggle-btn { + pointer-events: none; + } + } + + /* Add a border on mobile */ @media (max-width: 799px) { - /* …add a border */ .tray__toggle { border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); translate: calc(-1 * var(--tray-margin)) 0; } - /* …and disable the expander if there aren't items to show */ - .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ .tray__toggle { - pointer-events: none; - - .icon { - opacity: 0.5; - } - } } } From ef2e9cf42858bc08002e20912547e1376bcc1299 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Jul 2025 16:41:47 -0500 Subject: [PATCH 06/11] Remove actions markup and CSS --- app/assets/stylesheets/trays.css | 44 -------------------------- app/views/notifications/_tray.html.erb | 29 +++-------------- 2 files changed, 5 insertions(+), 68 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 287c3ce03..3ad50f712 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -133,50 +133,6 @@ } */ } - /* Actions - /* ------------------------------------------------------------------------ */ - - .tray__actions { - align-self: center; - align-items: stretch; - border: 1px dashed oklch(var(--lch-white) / 50%); - border-radius: 0.5em; - color: var(--color-ink-inverted); - display: flex; - gap: var(--inline-space-half); - opacity: 0; - transition: translate var(--tray-duration) var(--tray-timing-function); - translate: 0 var(--footer-height); - - .btn { - opacity: 0.66; - - &:hover, - &:focus-visible { - opacity: 1; - } - } - - .tray__dialog[open] ~ & { - opacity: 1; - translate: 0 0; - } - - /* On desktop, show actions when there aren't items */ - @media (min-width: 800px) { - .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) ~ & { - opacity: 1; - translate: 0 0; - } - } - - @media (prefers-color-scheme: dark) { - .btn--reversed { - color: var(--color-ink); - } - } - } - /* Item /* ------------------------------------------------------------------------ */ diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 0e1da369d..591c10785 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -26,31 +26,12 @@ <%= icon_tag "settings" %> <% end %> - -
- <%= button_to read_all_notifications_path, - class: "tray__notification-read-action btn btn--reversed fill-transparent borderless flex-item-justify-start txt-xx-small", - title: "Mark all notifications as read", - data: { action: "click->dialog#close", turbo_frame: "notifications" } do %> - <%= icon_tag "check" %> - <% end %> - - <%= link_to tag.span("Notifications"), notifications_path, - class: "btn btn--reversed borderless fill-transparent center txt-uppercase txt-x-small full-width", - title: "See all notifications", - data: { action: "click->dialog#close" } %> - - <%= link_to settings_notifications_path, - class: "tray__notification-settings-action btn btn--reversed fill-transparent borderless flex-item-justify-start txt-xx-small", - title: "Notification settings", - data: { action: "click->dialog#close" } do %> - <%= icon_tag "settings" %> - <% end %> -
- - From c338132b6fb1d2d1494c9798a19d21920062cdf6 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Mon, 7 Jul 2025 16:57:35 -0500 Subject: [PATCH 07/11] Clean odds and ends --- app/assets/stylesheets/trays.css | 25 +++++++------------------ app/views/notifications/_tray.html.erb | 2 +- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 3ad50f712..097b6bc7a 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -5,7 +5,6 @@ .tray { --tray-duration: 350ms; --tray-margin: 0.5rem; - --tray-max-items: 7; --tray-radius: 0.25rem; --tray-timing-function: cubic-bezier(0.25, 1.25, 0.5, 1); @@ -65,7 +64,7 @@ .tray__toggle { align-self: stretch; - background: oklch(var(--lch-yellow-medium) / 50%); + background: none; border: 0; display: block; padding: 0; @@ -123,14 +122,7 @@ border-style: dashed; border-radius: 1ch; inline-size: 100%; - - /* .tray__dialog[open] ~ .tray__toggle & { - opacity: 0.66; - - &:hover { - opacity: 1; - } - } */ + opacity: 0.66; } /* Item @@ -197,7 +189,6 @@ background-color: var(--color-ink-lightest); display: flex; - gap: 1ch; padding: 1ch; opacity: 0; @@ -214,7 +205,7 @@ display: none; } - .tray__dialog:has(.tray__item:nth-child(1n + var(--tray-max-items))) { + .tray__dialog:has(.tray__item:nth-child(1n + 7)) { .tray__all-notifications { display: none; } .tray__more-notifications { display: block; } } @@ -268,8 +259,6 @@ /* ------------------------------------------------------------------------ */ .tray--pins { - --tray-max-items: 11; - inset-inline: var(--tray-margin) auto; .tray__item { @@ -277,7 +266,7 @@ position: relative; - &:nth-child(1n + var(--tray-max-items)) { display: none; } + &:nth-child(1n + 11) { display: none; } } .tray__remove-pin-btn { @@ -371,7 +360,7 @@ /* Add a border on mobile */ @media (max-width: 799px) { - .tray__toggle { + .tray__dialog:not([open]) ~ .tray__toggle { border-inline-end: 1px dashed oklch(var(--lch-white) / 50%); translate: calc(-1 * var(--tray-margin)) 0; } @@ -385,7 +374,7 @@ .tray--notifications { inset-inline: auto var(--tray-margin); - .tray__item:nth-child(1n + var(--tray-max-items)) { + .tray__item:nth-child(1n + 7) { display: none; } @@ -403,7 +392,7 @@ /* On mobile… */ @media (max-width: 799px) { /* …add a border */ - .tray__toggle { + .tray__dialog:not([open]) ~ .tray__toggle { border-inline-start: 1px dashed oklch(var(--lch-white) / 50%); translate: var(--tray-margin) 0; } diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 591c10785..43dfb42c8 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -14,7 +14,7 @@ <%= icon_tag "check" %> <% end %> - <%= link_to notifications_path, class: "btn borderless flex-item-grow position-relative", data: { action: "click->dialog#close" } do %> + <%= 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 %> From dcfa8357de340d2c060d08d37447724849bb2e64 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 8 Jul 2025 14:49:12 -0500 Subject: [PATCH 08/11] Clarify notification actions --- app/assets/stylesheets/trays.css | 45 +++++++++++++++++++++----- app/views/notifications/_tray.html.erb | 33 +++++++++++-------- 2 files changed, 57 insertions(+), 21 deletions(-) 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 %>
From 0491cd0818ab48de6359c9cb294c12b1cc3221f4 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Tue, 8 Jul 2025 15:00:06 -0500 Subject: [PATCH 09/11] More subtle styles --- app/assets/stylesheets/trays.css | 4 ++-- app/views/notifications/_tray.html.erb | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index f26cbadb7..3dabdb7af 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -233,9 +233,9 @@ } } - .tray__dialog:has(.tray__item:nth-child(1n + 7)) { + .tray__dialog:has(.tray__item:nth-child(1n + 7)) & { .tray__old-notifications { display: none; } - .tray__new-notifications { display: block; } + .tray__new-notifications { display: flex; } } } diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index 3651fbbad..cfedd8686 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -12,17 +12,17 @@ title: "Notification settings", data: { action: "click->dialog#close" } do %> <%= icon_tag "settings" %> - 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… + 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 + See older items <% end %> <%= button_to read_all_notifications_path, @@ -30,7 +30,7 @@ title: "Mark all notifications as read", data: { action: "click->dialog#close", turbo_frame: "notifications" } do %> <%= icon_tag "check" %> - Clear all + Clear all <% end %> From 5162677c44480453aa28b55e752f63b4f3dc3ef6 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Jul 2025 11:20:37 -0500 Subject: [PATCH 10/11] Align dialog, shrink hat, canvas background --- app/assets/stylesheets/trays.css | 44 ++++++++++++++++++-------- app/views/notifications/_tray.html.erb | 6 ++-- 2 files changed, 33 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index 3dabdb7af..e234c493f 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -50,7 +50,7 @@ box-shadow: 0 0 0 1px var(--color-ink-lighter), 0 0 16px oklch(var(--lch-black) / 33%); - inset-block-end: var(--footer-height); + inset-block-end: calc(var(--footer-height) - 0.75ch); } &:not([open]) { @@ -95,7 +95,7 @@ } /* Show a red dot if there are items to show */ - .tray__dialog:not([open]):has(.tray__item:not(.tray__item--overflow)) ~ &:after { + .tray__dialog:not([open]):has(.tray__item:not(.tray__hat)) ~ &:after { background: oklch(var(--lch-red-medium)); block-size: 1ch; border-radius: 50%; @@ -109,7 +109,7 @@ /* On desktop… */ @media (min-width: 800px) { /* Hide the UI when collapsed, but only if there are items */ - .tray__dialog:not([open]):has(.tray__item:not(.tray__item--overflow)) ~ & { + .tray__dialog:not([open]):has(.tray__item:not(.tray__hat)) ~ & { opacity: 0; } } @@ -147,6 +147,10 @@ transition-property: margin, scale; z-index: var(--tray-item-z); + &:has(*:focus-visible) { + z-index: calc(var(--tray-item-z) + 1); + } + &:first-child { --tray-item-margin: var(--tray-margin); } @@ -183,34 +187,46 @@ } } - .tray__item--overflow { - --tray-item-height: 56px; + .tray__hat { + --tray-hat-bg: var(--color-canvas); --tray-item-scale: 1; - background-color: var(--color-ink-lightest); + background-color: var(--tray-hat-bg); + border-block-end: 1px solid var(--color-ink-lighter); + border-radius: var(--tray-radius) var(--tray-radius) 0 0; display: flex; - /* 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; + --btn-background: var(--tray-hat-bg); + --btn-border-radius: 0; + --btn-padding: 1.25ch 0.5ch 1ch; + block-size: 100%; display: flex; flex-direction: column; font-size: 12px; font-weight: normal; gap: 0.25ch; inline-size: 100%; + + &:focus-visible { + z-index: 1; + } } > *:is(:first-child, :last-child) { inline-size: 128px; } + .tray__notification-settings { + --btn-border-radius: var(--tray-radius) 0 0 0; + } + + .tray__clear-notifications { + --btn-border-radius: 0 var(--tray-radius) 0 0; + } + .tray__dialog[open] & { opacity: 1; } @@ -224,7 +240,7 @@ background-color: oklch(var(--lch-red-medium)); block-size: 1ch; border-radius: 50%; - box-shadow: 0 0 0 1px var(--color-ink-lightest); + box-shadow: 0 0 0 1px var(--tray-hat-bg); content: ""; inline-size: 1ch; inset: 25% auto auto 50%; @@ -427,7 +443,7 @@ } /* …and hide the dialog if there aren't items to show */ - .tray__dialog:not(:has(.tray__item:not(.tray__item--overflow))) { + .tray__dialog:not(:has(.tray__item:not(.tray__hat))) { display: none; } } diff --git a/app/views/notifications/_tray.html.erb b/app/views/notifications/_tray.html.erb index cfedd8686..f87ac6f23 100644 --- a/app/views/notifications/_tray.html.erb +++ b/app/views/notifications/_tray.html.erb @@ -6,9 +6,9 @@ data-action="keydown.esc->dialog#close:stop click@document->dialog#closeOnClickOutside"> <%= turbo_frame_tag "notifications", src: tray_notifications_path, refresh: "morph" %> -
+
<%= link_to settings_notifications_path, - class: "btn borderless", + class: "btn borderless tray__notification-settings", title: "Notification settings", data: { action: "click->dialog#close" } do %> <%= icon_tag "settings" %> @@ -26,7 +26,7 @@ <% end %> <%= button_to read_all_notifications_path, - class: "btn borderless", + class: "btn borderless tray__clear-notifications", title: "Mark all notifications as read", data: { action: "click->dialog#close", turbo_frame: "notifications" } do %> <%= icon_tag "check" %> From 073dfd2ae1f328f26f0e60400419bcef6e368b72 Mon Sep 17 00:00:00 2001 From: Andy Smith Date: Thu, 10 Jul 2025 11:34:08 -0500 Subject: [PATCH 11/11] Tweak the hat padding --- app/assets/stylesheets/trays.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/trays.css b/app/assets/stylesheets/trays.css index e234c493f..abd9b6d78 100644 --- a/app/assets/stylesheets/trays.css +++ b/app/assets/stylesheets/trays.css @@ -194,12 +194,14 @@ background-color: var(--tray-hat-bg); border-block-end: 1px solid var(--color-ink-lighter); border-radius: var(--tray-radius) var(--tray-radius) 0 0; + block-size: var(--tray-item-height); display: flex; opacity: 0; + padding: 0.5ch; .btn { --btn-background: var(--tray-hat-bg); - --btn-border-radius: 0; + --btn-border-radius: 0.5ch; --btn-padding: 1.25ch 0.5ch 1ch; block-size: 100%; @@ -219,14 +221,6 @@ inline-size: 128px; } - .tray__notification-settings { - --btn-border-radius: var(--tray-radius) 0 0 0; - } - - .tray__clear-notifications { - --btn-border-radius: 0 var(--tray-radius) 0 0; - } - .tray__dialog[open] & { opacity: 1; }