Improve layout of various message bubbles

This commit is contained in:
Scott Nonnenberg 2022-04-07 09:58:15 -07:00 committed by GitHub
parent 933c07c9ce
commit b50c96c0b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 166 additions and 25 deletions

View file

@ -91,6 +91,8 @@ export const MessageMetadata = ({
className={classNames({
'module-message__metadata__date': true,
'module-message__metadata__date--with-sticker': isSticker,
'module-message__metadata__date--deleted-for-everyone':
deletedForEveryone,
[`module-message__metadata__date--${direction}`]: !isSticker,
'module-message__metadata__date--with-image-no-caption':
withImageNoCaption,
@ -105,6 +107,7 @@ export const MessageMetadata = ({
i18n={i18n}
timestamp={timestamp}
direction={metadataDirection}
deletedForEveryone={deletedForEveryone}
withImageNoCaption={withImageNoCaption}
withSticker={isSticker}
withTapToViewExpired={isTapToViewExpired}
@ -117,14 +120,16 @@ export const MessageMetadata = ({
const className = classNames(
'module-message__metadata',
isInline && 'module-message__metadata--inline',
withImageNoCaption && 'module-message__metadata--with-image-no-caption'
withImageNoCaption && 'module-message__metadata--with-image-no-caption',
deletedForEveryone && 'module-message__metadata--deleted-for-everyone'
);
const children = (
<>
{timestampNode}
{expirationLength && expirationTimestamp ? (
{expirationLength && (expirationTimestamp || direction === 'outgoing') ? (
<ExpireTimer
direction={metadataDirection}
deletedForEveryone={deletedForEveryone}
expirationLength={expirationLength}
expirationTimestamp={expirationTimestamp}
withImageNoCaption={withImageNoCaption}
@ -152,6 +157,9 @@ export const MessageMetadata = ({
withImageNoCaption
? 'module-message__metadata__status-icon--with-image-no-caption'
: null,
deletedForEveryone
? 'module-message__metadata__status-icon--deleted-for-everyone'
: null,
isTapToViewExpired
? 'module-message__metadata__status-icon--with-tap-to-view-expired'
: null