Skip to content

Modal dialogs: smoother animations and QR code dialog improvements #2437

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nqst wants to merge 6 commits into
base: main
Choose a base branch
from
+23 −13
Open

Modal dialogs: smoother animations and QR code dialog improvements #2437

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
85b0d80
Adjust dialog transition styles
nqst Jan 26, 2026
0d4f4c8
Make QR dialogs smaller on desktop
nqst Jan 26, 2026
850762c
Replace `[x]` button with Done button
nqst Jan 26, 2026
09f9b7f
Adjust copy in QR code dialogs
nqst Jan 26, 2026
ea1b683
Adjust animations, use explicit transition properties
nqst Jan 26, 2026
c1ac9d9
Format
nqst Jan 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 11 additions & 6 deletions app/assets/stylesheets/dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,37 @@
:is(.dialog) {
border: 0;
opacity: 0;
transform: scale(0.2);
transform-origin: top center;
transition: var(--dialog-duration) allow-discrete;
transform: scale(0.85);
transform-origin: center;
transition-behavior: allow-discrete;
transition-duration: calc(var(--dialog-duration) / 2); /* Faster closing */
transition-property: display, opacity, overlay, transform;
transition-timing-function: ease-out;

&::backdrop {
background-color: var(--color-black);
opacity: 0;
transform: scale(1);
transition: var(--dialog-duration) allow-discrete;
transition-behavior: allow-discrete;
transition-duration: calc(var(--dialog-duration) / 2);
transition-property: display, opacity, overlay;
transition-timing-function: ease-out;
}

&[open] {
opacity: 1;
transform: scale(1);
transition-duration: var(--dialog-duration); /* Normal opening speed */

&::backdrop {
opacity: 0.5;
transition-duration: var(--dialog-duration);
}
}

@starting-style {
&[open] {
opacity: 0;
transform: scale(0.2);
transform: scale(0.85);
}

&[open]::backdrop {
Expand Down
6 changes: 4 additions & 2 deletions app/views/account/join_codes/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,10 @@
<span>Get QR code</span>
<% end %>

<dialog class="dialog panel shadow" data-dialog-target="dialog">
<p class="margin-none-block-start"><strong>Scan this code with the camera on your mobile device</strong></p>
<dialog class="dialog panel shadow" data-dialog-target="dialog" style="--panel-size: 50ch;">
<p class="margin-none-block-start txt-balance">
<strong>Scan this code to join <%= Current.account.name %>:</strong>
</p>

<%= qr_code_image(url) %>

Expand Down
13 changes: 8 additions & 5 deletions app/views/users/_transfer.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,16 @@
<span class="for-screen-reader">Display auto-login QR code</span>
<% end %>

<dialog class="dialog panel shadow" data-dialog-target="dialog">
<dialog class="dialog panel shadow" data-dialog-target="dialog" style="--panel-size: 50ch;">
<p class="margin-none-block-start txt-balance">
<strong>Scan this code to instantly log in on another device:</strong>
</p>

<%= qr_code_image(url) %>

<form method="dialog" class="margin-block-start flex justify-center">
<button class="btn" data-controller="tooltip">
<%= icon_tag "remove" %>
<span class="for-screen-reader">Close dialog</span>
<button class="btn">
<span>Done</span>
</button>
</form>
</dialog>
Expand All @@ -35,4 +38,4 @@
<span class="for-screen-reader">Copy auto-login link</span>
<% end %>
</div>
</div>
</div>