ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Floating Button: Fix transform for reactions (#5508)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-01-21 18:22:06 +01:00
parent b8ec2f69d4
commit 64f7ff1dab
2 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/middle/FloatingActionButtons.module.scss
View File

@ -1,11 +1,13 @@
.root { .root {
--base-bottom-pos: 6rem; --base-bottom-pos: 6rem;
--translate-x: 0;
--translate-y: 4.5rem;
position: absolute; position: absolute;
bottom: var(--base-bottom-pos); bottom: var(--base-bottom-pos);
right: max(1rem, env(safe-area-inset-right)); right: max(1rem, env(safe-area-inset-right));
opacity: 0; opacity: 0;
transform: translateY(4.5rem); transform: translate(var(--translate-x), var(--translate-y));
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
z-index: var(--z-scroll-down-button); z-index: var(--z-scroll-down-button);
pointer-events: none; pointer-events: none;
@ -28,11 +30,30 @@
} }
:global(body.no-page-transitions) & { :global(body.no-page-transitions) & {
transform: none !important; --translate-y: 0 !important;
transition: opacity 0.15s; transition: opacity 0.15s;
} }
@media (min-width: 1276px) {
--translate-x: 0;
transition: transform var(--layer-transition), opacity 0.2s ease;
:global(body.no-page-transitions) &,
:global(body.no-right-column-animations) & {
transition: none !important;
}
:global(body:not(.no-right-column-animations) #Main.right-column-open) & {
transition: transform var(--layer-transition), opacity 0.2s ease;
}
:global(#Main.right-column-open) & {
--translate-x: calc(-1 * var(--right-column-width));
}
}
@media (max-width: 600px) { @media (max-width: 600px) {
right: 0.5rem; right: 0.5rem;
bottom: 4.5rem; bottom: 4.5rem;
@ -43,7 +64,7 @@
} }
&.revealed { &.revealed {
transform: translateY(0); --translate-y: 0;
opacity: 1; opacity: 1;
.unread { .unread {
@ -51,12 +72,12 @@
} }
&.no-composer.no-extra-shift { &.no-composer.no-extra-shift {
transform: translateY(4rem); --translate-y: 4rem;
} }
} }
&.hide-scroll-down { &.hide-scroll-down {
transform: translateY(4rem); --translate-y: 4rem;
.unread { .unread {
opacity: 0; opacity: 0;

19
src/components/middle/ScrollDownButton.module.scss
View File

@ -15,25 +15,6 @@
margin-top: 1rem; margin-top: 1rem;
} }
} }
@media (min-width: 1276px) {
transform: translateX(0);
transition: transform var(--layer-transition), opacity 0.2s ease;
:global(body.no-page-transitions) &,
:global(body.no-right-column-animations) & {
transition: none !important;
}
:global(body:not(.no-right-column-animations) #Main.right-column-open) & {
transition: transform var(--layer-transition), opacity 0.2s ease;
}
:global(#Main.right-column-open) & {
transform: translateX(calc(-1 * var(--right-column-width)));
}
}
} }
.button { .button {