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

Tray placeholders

Browse Source
This commit is contained in:
Jason Zimdars
2025-03-26 15:20:23 -05:00
parent a6c10d3de7
commit f3bc2a2316
4 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/notifications.css
+1 -7
View File
@@ -7,12 +7,6 @@
}
.notification-tray__actions {
.notification-tray:has(.notification) & {
.btn img {
display: none;
}
}
.notification-tray:not(:has(.notification)) & {
.notification-tray__all_action {
--btn-border-radius: 50%;
@@ -34,7 +28,7 @@
}
.notification-tray__read_action {
display: none;
visibility: hidden;
}
}
}
app/assets/stylesheets/trays.css
+15 -4
View File
@@ -3,16 +3,15 @@
}
.tray {
--height: calc(2.57lh + var(--block-space));
--height: calc(2.48lh + var(--block-space));
background-color: transparent;
border: 0;
border-radius: 0.5em;
display: flex;
flex-direction: column;
inline-size: var(--tray-size);
justify-content: end;
padding: var(--block-space-half) var(--inline-space);
padding: var(--block-space-half) var(--inline-space) calc(var(--block-space-half) / 2);
position: fixed;
z-index: 2;
@@ -55,9 +54,15 @@
}
.tray__actions {
display: flex;
--border-style: dashed;
--border-color: color-mix(in srgb, var(--color-always-white) 40%, var(--color-ink));
--hover-size: 0;
align-items: center;
color: var(--color-ink-reversed);
display: flex;
gap: var(--inline-space-half);
justify-content: space-between;
opacity: 0;
scale: calc(1 - 1 / 30);
transform: translateY(100%);
@@ -79,6 +84,12 @@
display: none;
}
}
@media (prefers-color-scheme: dark) {
.btn--reversed {
color: var(--color-ink);
}
}
}
.tray__expander {
app/views/bubbles/pins/_tray.html.erb
+2 -5
View File
@@ -4,11 +4,8 @@
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 "pins", src: bubbles_pins_tray_path %>
<div class="tray__actions">
<%= tag.button type: "button", class: "tray__all_action btn flex-item-justify-start shadow", data: { action: "click->dialog#close"} do %>
<%= image_tag "remove-med.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Close</span>
<% end %>
<div class="tray__actions border border-radius">
<button class="txt-uppercase btn btn--reversed borderless fill-transparent txt-x-small translucent center" data-action="click->dialog#close">Pinned</button>
</div>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack">
app/views/notifications/_tray.html.erb
+9 -7
View File
@@ -16,19 +16,21 @@
</div>
<% end %>
<div class="tray__actions notification-tray__actions">
<div class="tray__actions notification-tray__actions border border-radius">
<%= button_to notifications_mark_all_read_path,
class: "notification-tray__read_action btn flex-item-justify-start shadow",
class: "notification-tray__read_action btn btn--reversed fill-transparent borderless flex-item-justify-start shadow txt-xx-small",
data: { action: "click->dialog#close", turbo_frame: "notifications" } do %>
Mark all read
<%= image_tag "check.svg", aria: { hidden: true }, size: 24 %>
<span class="for-screen-reader">Mark all read</span>
<% end %>
<%= link_to notifications_path,
class: "notification-tray__all_action btn flex-item-justify-end shadow",
data: { action: "click->dialog#close"} do %>
<%= image_tag "bell.svg", aria: { hidden: true }, size: 24 %>
<span>See all</span>
class: "btn btn--reversed borderless fill-transparent translucent shadow center txt-uppercase txt-x-small",
data: { action: "click->dialog#close"} do %>
<span>Notifications</span>
<% end %>
<span class="btn btn--placeholder txt-xx-small borderless"></span>
</div>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand notifications stack">