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 {
--base-bottom-pos: 6rem;
--translate-x: 0;
--translate-y: 4.5rem;
position: absolute;
bottom: var(--base-bottom-pos);
right: max(1rem, env(safe-area-inset-right));
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;
z-index: var(--z-scroll-down-button);
pointer-events: none;
@ -28,11 +30,30 @@
}
:global(body.no-page-transitions) & {
transform: none !important;
--translate-y: 0 !important;
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) {
right: 0.5rem;
bottom: 4.5rem;
@ -43,7 +64,7 @@
}
&.revealed {
transform: translateY(0);
--translate-y: 0;
opacity: 1;
.unread {
@ -51,12 +72,12 @@
}
&.no-composer.no-extra-shift {
transform: translateY(4rem);
--translate-y: 4rem;
}
}
&.hide-scroll-down {
transform: translateY(4rem);
--translate-y: 4rem;
.unread {
opacity: 0;

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

@ -15,25 +15,6 @@
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 {