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

WIP

Browse Source
This commit is contained in:
Andy Smith
2025-05-22 11:01:17 -05:00
parent 0f0f021c89
commit 9a9cb3340b
4 changed files with 27 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/trays.css
+4 -6
View File
@@ -59,6 +59,10 @@
&:nth-child(4) { --tray-item-index: 4; }
&:nth-child(5) { --tray-item-index: 5; }
&:nth-child(6) { --tray-item-index: 6; }
&:nth-child(7) { --tray-item-index: 7; }
&:nth-child(8) { --tray-item-index: 8; }
&:nth-child(9) { --tray-item-index: 9; }
&:nth-child(10) { --tray-item-index: 10; }
.tray[open] & {
--tray-item-y: calc(-100% * var(--tray-item-index) + var(--tray-item-height) - var(--footer-height));
@@ -202,16 +206,11 @@
/* ------------------------------------------------------------------------ */
.tray--pins {
/* inset: auto auto var(--block-space-half) var(--inline-space); */
inset-inline: var(--inline-space) auto;
.tray__item {
--tray-item-z: calc(10 - var(--tray-item-index));
&:nth-child(7) { --tray-item-index: 7; }
&:nth-child(8) { --tray-item-index: 8; }
&:nth-child(9) { --tray-item-index: 9; }
&:nth-child(10) { --tray-item-index: 10; }
&:nth-child(1n + 11) { display: none; }
}
@@ -270,7 +269,6 @@
/* ------------------------------------------------------------------------ */
.tray--notifications {
/* inset: auto var(--inline-space) var(--block-space-half) auto; */
inset-inline: auto var(--inline-space);
.tray__item:nth-child(1n + 7) {
app/views/layouts/application.html.erb
+1 -1
View File
@@ -48,9 +48,9 @@
<% if Current.user && !@hide_footer_frames %>
<div id="footer_frames" data-turbo-permanent="true" >
<%= render "notifications/tray" %>
<%= render "my/pins/tray" %>
<%= render "commands/terminal" %>
<%= render "notifications/tray" %>
</div>
<% end %>
</footer>
app/views/my/pins/_tray.html.erb
+10 -7
View File
@@ -1,13 +1,16 @@
<%= turbo_stream_from Current.user, :pins_tray %>
<%= tag.dialog id: "pin-tray", class: "tray tray--pins",
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: my_pins_path %>
<section class="tray tray--pins">
<%= tag.dialog id: "pin-tray", class: "tray__dialog",
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: my_pins_path %>
<% end %>
<div class="tray__actions">
<button class="txt-uppercase btn btn--reversed borderless fill-transparent txt-x-small translucent center full-width" data-action="click->dialog#close">Pinned</button>
<button class="txt-uppercase btn btn--reversed borderless fill-transparent txt-x-small translucent center full-width" data-action="click->dialog#close">
Pinned
</button>
</div>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack">
</button>
<% end %>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand pins stack"></button>
</section>
app/views/notifications/_tray.html.erb
+12 -10
View File
@@ -1,15 +1,17 @@
<%= turbo_stream_from Current.user, :notifications %>
<dialog class="tray tray--notifications"
data-controller="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" %>
<section class="tray tray--notifications">
<dialog class="tray__dialog"
data-controller="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__item--overflow">
<%= link_to notifications_path, class: "card", data: { action: "click->dialog#close" } do %>
+ More…
<% end %>
</div>
<div class="tray__item tray__item--overflow">
<%= link_to notifications_path, class: "card", data: { action: "click->dialog#close" } do %>
+ More…
<% end %>
</div>
</dialog>
<div class="tray__actions">
<%= button_to read_all_notifications_path,
@@ -26,4 +28,4 @@
</div>
<button class="tray__expander" data-action="dialog#toggle" aria-label="Expand notifications stack"></button>
</dialog>
</section>