Fix group typing bubble less x animation

This commit is contained in:
ayumi-signal 2023-10-06 14:30:36 -07:00 committed by GitHub
parent 363142569b
commit 24f17f2cf9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 30 additions and 1 deletions

View file

@ -1379,6 +1379,7 @@ $message-padding-horizontal: 12px;
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-inline-end: 8px; margin-inline-end: 8px;
min-width: 28px;
padding-bottom: 6px; padding-bottom: 6px;
&--with-reactions { &--with-reactions {
@ -1447,6 +1448,10 @@ $message-padding-horizontal: 12px;
} }
} }
.module-message__typing-avatar-spacer {
flex: 0 1 24px;
}
.module-message__unopened-gift-badge { .module-message__unopened-gift-badge {
width: 240px; width: 240px;
height: 132px; height: 132px;

View file

@ -113,6 +113,29 @@ Group.story = {
name: 'Group (1 person typing)', name: 'Group (1 person typing)',
}; };
export function GroupStartsTyping(): JSX.Element {
const props = createProps({
conversationType: 'group',
typingContactIdTimestamps: {},
});
const [afterTimeoutProps, setAfterTimeoutProps] = useState({});
useEffect(() => {
setTimeout(
() =>
setAfterTimeoutProps({
typingContactIdTimestamps: getTypingContactIdTimestamps(1),
}),
500
);
}, []);
return <TypingBubble {...props} {...afterTimeoutProps} />;
}
GroupStartsTyping.story = {
name: 'Group (0 to 1 person starts typing)',
};
export function GroupStoppedTyping(): JSX.Element { export function GroupStoppedTyping(): JSX.Element {
const props = createProps({ const props = createProps({
conversationType: 'group', conversationType: 'group',

View file

@ -60,7 +60,7 @@ const AVATAR_ANIMATION_PROPS: Record<'visible' | 'hidden', object> = {
hidden: { hidden: {
opacity: 0.5, opacity: 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: '12px',
top: '34px', top: '34px',
}, },
}; };
@ -200,6 +200,7 @@ function TypingBubbleGroupAvatars({
// Avatars are rendered Right-to-Left so the leftmost avatars can render on top. // Avatars are rendered Right-to-Left so the leftmost avatars can render on top.
return ( return (
<div className="module-message__author-avatar-container module-message__author-avatar-container--typing"> <div className="module-message__author-avatar-container module-message__author-avatar-container--typing">
<div className="module-message__typing-avatar-spacer" />
{typingContactsOverflowCount > 0 && ( {typingContactsOverflowCount > 0 && (
<div <div
className="module-message__typing-avatar module-message__typing-avatar--overflow-count className="module-message__typing-avatar module-message__typing-avatar--overflow-count