mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Fix typing bubble timeline scroll jumping

Browse source
This commit is contained in:
ayumi-signal 2023-09-28 12:54:56 -04:00 • committed by GitHub
parent eb7942dd1e
commit da113c1fa1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

7
stylesheets/_modules.scss
View file

@ -1386,8 +1386,8 @@ $message-padding-horizontal: 12px;
} }
} }
.module-message--typing-bubble { .module-message__container-outer--typing-bubble {
height: 44px; overflow-y: clip;
} }
.module-message__typing-avatar-container { .module-message__typing-avatar-container {
@ -1396,6 +1396,7 @@ $message-padding-horizontal: 12px;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: center; justify-content: center;
margin-inline-end: 8px; margin-inline-end: 8px;
overflow-y: clip;
&--with-reactions { &--with-reactions {
padding-bottom: 15px; padding-bottom: 15px;
@ -1405,6 +1406,7 @@ $message-padding-horizontal: 12px;
.module-message__typing-avatar { .module-message__typing-avatar {
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative;
z-index: $z-index-base; z-index: $z-index-base;
&:not(:last-child) { &:not(:last-child) {
@ -1735,6 +1737,7 @@ $message-padding-horizontal: 12px;
.module-message__typing-animation-container { .module-message__typing-animation-container {
height: 16px; height: 16px;
overflow-y: clip;
display: flex; display: flex;
flex-direction: row; flex-direction: row;

15
ts/components/conversation/TypingBubble.tsx
View file

@ -56,14 +56,14 @@ const AVATAR_ANIMATION_PROPS: Record<'visible' | 'hidden', object> = {
scale: 1, scale: 1,
width: '28px', width: '28px',
x: '0px', x: '0px',
y: '0px', top: '0px',
}, },
hidden: { hidden: {
opacity: 0.5, opacity: 0.5,
scale: 0.5, scale: 0.5,
width: '4px', // Match value of module-message__typing-avatar margin-inline-start width: '4px', // Match value of module-message__typing-avatar margin-inline-start
x: '14px', x: '14px',
y: '30px', top: '30px',
}, },
}; };
@ -242,12 +242,12 @@ const BUBBLE_ANIMATION_PROPS: Record<'visible' | 'hidden', object> = {
visible: { visible: {
opacity: 1, opacity: 1,
scale: 1, scale: 1,
y: '0px', top: '0px',
}, },
hidden: { hidden: {
opacity: 0.5, opacity: 0.5,
scale: 0.5, scale: 0.5,
y: '30px', top: '30px',
}, },
}; };
@ -347,13 +347,14 @@ export function TypingBubble({
className="module-timeline__typing-bubble-container" className="module-timeline__typing-bubble-container"
style={outerDivStyle} style={outerDivStyle}
> >
<div <animated.div
className={classNames( className={classNames(
'module-message', 'module-message',
'module-message--incoming', 'module-message--incoming',
'module-message--typing-bubble', 'module-message--typing-bubble',
isGroup ? 'module-message--group' : null isGroup ? 'module-message--group' : null
)} )}
style={outerDivStyle}
> >
{isGroup && ( {isGroup && (
<TypingBubbleGroupAvatars <TypingBubbleGroupAvatars
@ -366,7 +367,7 @@ export function TypingBubble({
theme={theme} theme={theme}
/> />
)} )}
<div className="module-message__container-outer"> <div className="module-message__container-outer module-message__container-outer--typing-bubble">
<animated.div <animated.div
className={classNames( className={classNames(
'module-message__container', 'module-message__container',
@ -379,7 +380,7 @@ export function TypingBubble({
</div> </div>
</animated.div> </animated.div>
</div> </div>
</div> </animated.div>
</animated.div> </animated.div>
); );
} }