Collapse message bubbles when applicable
This commit is contained in:
Evan Hahn
GitHub
parent
16cd115530
commit
c527de0a8d
19 changed files with 707 additions and 383 deletions
12
ts/components/AvatarSpacer.tsx
Normal file
12
ts/components/AvatarSpacer.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { ReactElement } from 'react';
|
||||
import React from 'react';
|
||||
import type { AvatarSize } from './Avatar';
|
||||
|
||||
export const AvatarSpacer = ({
|
||||
size,
|
||||
}: Readonly<{ size: AvatarSize }>): ReactElement => (
|
||||
<div style={{ minWidth: size, height: size, width: size }} />
|
||||
);
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// Copyright 2020-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import * as React from 'react';
|
||||
|
|
@ -383,17 +383,11 @@ book.add('GroupNotification', () =>
|
|||
stories.map(([title, propsArray]) => (
|
||||
<>
|
||||
<h3>{title}</h3>
|
||||
{propsArray.map((props, i) => {
|
||||
return (
|
||||
<>
|
||||
<div key={i} className="module-message-container">
|
||||
<div className="module-inline-notification-wrapper">
|
||||
<GroupNotification {...props} />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
})}
|
||||
{propsArray.map((props, i) => (
|
||||
<div key={i} className="module-inline-notification-wrapper">
|
||||
<GroupNotification {...props} />
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
))
|
||||
);
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ import enMessages from '../../../_locales/en/messages.json';
|
|||
import { pngUrl } from '../../storybook/Fixtures';
|
||||
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
|
||||
import { WidthBreakpoint } from '../_util';
|
||||
import { MINUTE } from '../../util/durations';
|
||||
|
||||
import { fakeAttachment } from '../../test-both/helpers/fakeAttachment';
|
||||
import { getFakeBadge } from '../../test-both/helpers/getFakeBadge';
|
||||
|
|
@ -108,7 +109,6 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
canRetryDeleteForEveryone: overrideProps.canRetryDeleteForEveryone || false,
|
||||
checkForAccount: action('checkForAccount'),
|
||||
clearSelectedMessage: action('clearSelectedMessage'),
|
||||
collapseMetadata: overrideProps.collapseMetadata,
|
||||
containerElementRef: React.createRef<HTMLElement>(),
|
||||
containerWidthBreakpoint: WidthBreakpoint.Wide,
|
||||
conversationColor:
|
||||
|
|
@ -188,13 +188,33 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
|
|||
timestamp: number('timestamp', overrideProps.timestamp || Date.now()),
|
||||
});
|
||||
|
||||
const renderBothDirections = (props: Props) => (
|
||||
<>
|
||||
<Message {...props} />
|
||||
<br />
|
||||
<Message {...props} direction="outgoing" />
|
||||
</>
|
||||
);
|
||||
const createTimelineItem = (data: undefined | Props) =>
|
||||
data && {
|
||||
type: 'message' as const,
|
||||
data,
|
||||
timestamp: data.timestamp,
|
||||
};
|
||||
|
||||
const renderMany = (propsArray: ReadonlyArray<Props>) =>
|
||||
propsArray.map((message, index) => (
|
||||
<Message
|
||||
key={message.text}
|
||||
{...message}
|
||||
previousItem={createTimelineItem(propsArray[index - 1])}
|
||||
item={createTimelineItem(message)}
|
||||
nextItem={createTimelineItem(propsArray[index + 1])}
|
||||
/>
|
||||
));
|
||||
|
||||
const renderBothDirections = (props: Props) =>
|
||||
renderMany([
|
||||
props,
|
||||
{
|
||||
...props,
|
||||
author: { ...props.author, id: getDefaultConversation().id },
|
||||
direction: 'outgoing',
|
||||
},
|
||||
]);
|
||||
|
||||
story.add('Plain Message', () => {
|
||||
const props = createProps({
|
||||
|
|
@ -350,17 +370,6 @@ story.add('Pending', () => {
|
|||
return renderBothDirections(props);
|
||||
});
|
||||
|
||||
story.add('Collapsed Metadata', () => {
|
||||
const props = createProps({
|
||||
author: getDefaultConversation({ title: 'Fred Willard' }),
|
||||
collapseMetadata: true,
|
||||
conversationType: 'group',
|
||||
text: 'Hello there from a pal!',
|
||||
});
|
||||
|
||||
return renderBothDirections(props);
|
||||
});
|
||||
|
||||
story.add('Recent', () => {
|
||||
const props = createProps({
|
||||
text: 'Hello there from a pal!',
|
||||
|
|
@ -1392,3 +1401,67 @@ story.add('Custom Color', () => (
|
|||
/>
|
||||
</>
|
||||
));
|
||||
|
||||
story.add('Collapsing text-only DMs', () => {
|
||||
const them = getDefaultConversation();
|
||||
const me = getDefaultConversation({ isMe: true });
|
||||
|
||||
return renderMany([
|
||||
createProps({
|
||||
author: them,
|
||||
text: 'One',
|
||||
timestamp: Date.now() - 5 * MINUTE,
|
||||
}),
|
||||
createProps({
|
||||
author: them,
|
||||
text: 'Two',
|
||||
timestamp: Date.now() - 4 * MINUTE,
|
||||
}),
|
||||
createProps({
|
||||
author: them,
|
||||
text: 'Three',
|
||||
timestamp: Date.now() - 3 * MINUTE,
|
||||
}),
|
||||
createProps({
|
||||
author: me,
|
||||
direction: 'outgoing',
|
||||
text: 'Four',
|
||||
timestamp: Date.now() - 2 * MINUTE,
|
||||
}),
|
||||
createProps({
|
||||
text: 'Five',
|
||||
author: me,
|
||||
timestamp: Date.now() - MINUTE,
|
||||
direction: 'outgoing',
|
||||
}),
|
||||
createProps({
|
||||
author: me,
|
||||
direction: 'outgoing',
|
||||
text: 'Six',
|
||||
}),
|
||||
]);
|
||||
});
|
||||
|
||||
story.add('Collapsing text-only group messages', () => {
|
||||
const author = getDefaultConversation();
|
||||
|
||||
return renderMany([
|
||||
createProps({
|
||||
author,
|
||||
conversationType: 'group',
|
||||
text: 'One',
|
||||
timestamp: Date.now() - 2 * MINUTE,
|
||||
}),
|
||||
createProps({
|
||||
author,
|
||||
conversationType: 'group',
|
||||
text: 'Two',
|
||||
timestamp: Date.now() - MINUTE,
|
||||
}),
|
||||
createProps({
|
||||
author,
|
||||
conversationType: 'group',
|
||||
text: 'Three',
|
||||
}),
|
||||
]);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -15,14 +15,17 @@ import type {
|
|||
ConversationTypeType,
|
||||
InteractionModeType,
|
||||
} from '../../state/ducks/conversations';
|
||||
import type { TimelineItemType } from './TimelineItem';
|
||||
import { ReadStatus } from '../../messages/MessageReadStatus';
|
||||
import { Avatar } from '../Avatar';
|
||||
import { Avatar, AvatarSize } from '../Avatar';
|
||||
import { AvatarSpacer } from '../AvatarSpacer';
|
||||
import { Spinner } from '../Spinner';
|
||||
import {
|
||||
doesMessageBodyOverflow,
|
||||
MessageBodyReadMore,
|
||||
} from './MessageBodyReadMore';
|
||||
import { MessageMetadata } from './MessageMetadata';
|
||||
import { MessageTextMetadataSpacer } from './MessageTextMetadataSpacer';
|
||||
import { ImageGrid } from './ImageGrid';
|
||||
import { GIF } from './GIF';
|
||||
import { Image } from './Image';
|
||||
|
|
@ -80,15 +83,36 @@ import { getCustomColorStyle } from '../../util/getCustomColorStyle';
|
|||
import { offsetDistanceModifier } from '../../util/popperUtil';
|
||||
import * as KeyboardLayout from '../../services/keyboardLayout';
|
||||
import { StopPropagation } from '../StopPropagation';
|
||||
import {
|
||||
areMessagesInSameGroup,
|
||||
UnreadIndicatorPlacement,
|
||||
} from '../../util/timelineUtil';
|
||||
|
||||
type Trigger = {
|
||||
handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
|
||||
};
|
||||
|
||||
const DEFAULT_METADATA_WIDTH = 20;
|
||||
const EXPIRATION_CHECK_MINIMUM = 2000;
|
||||
const EXPIRED_DELAY = 600;
|
||||
const GROUP_AVATAR_SIZE = AvatarSize.TWENTY_EIGHT;
|
||||
const STICKER_SIZE = 200;
|
||||
const GIF_SIZE = 300;
|
||||
const SELECTED_TIMEOUT = 1000;
|
||||
const THREE_HOURS = 3 * 60 * 60 * 1000;
|
||||
const SENT_STATUSES = new Set<MessageStatusType>([
|
||||
'delivered',
|
||||
'read',
|
||||
'sent',
|
||||
'viewed',
|
||||
]);
|
||||
|
||||
enum MetadataPlacement {
|
||||
NotRendered,
|
||||
RenderedByMessageAudioComponent,
|
||||
InlineWithText,
|
||||
Bottom,
|
||||
}
|
||||
|
||||
export const MessageStatuses = [
|
||||
'delivered',
|
||||
|
|
@ -111,6 +135,7 @@ export type AudioAttachmentProps = {
|
|||
buttonRef: React.RefObject<HTMLButtonElement>;
|
||||
theme: ThemeType | undefined;
|
||||
attachment: AttachmentType;
|
||||
collapseMetadata: boolean;
|
||||
withContentAbove: boolean;
|
||||
withContentBelow: boolean;
|
||||
|
||||
|
|
@ -211,18 +236,21 @@ export type PropsData = {
|
|||
export type PropsHousekeeping = {
|
||||
containerElementRef: RefObject<HTMLElement>;
|
||||
containerWidthBreakpoint: WidthBreakpoint;
|
||||
disableMenu?: boolean;
|
||||
disableScroll?: boolean;
|
||||
getPreferredBadge: PreferredBadgeSelectorType;
|
||||
i18n: LocalizerType;
|
||||
now: number;
|
||||
interactionMode: InteractionModeType;
|
||||
theme: ThemeType;
|
||||
disableMenu?: boolean;
|
||||
disableScroll?: boolean;
|
||||
collapseMetadata?: boolean;
|
||||
item?: TimelineItemType;
|
||||
nextItem?: TimelineItemType;
|
||||
previousItem?: TimelineItemType;
|
||||
renderAudioAttachment: (props: AudioAttachmentProps) => JSX.Element;
|
||||
renderReactionPicker: (
|
||||
props: React.ComponentProps<typeof SmartReactionPicker>
|
||||
) => JSX.Element;
|
||||
theme: ThemeType;
|
||||
unreadIndicatorPlacement?: undefined | UnreadIndicatorPlacement;
|
||||
};
|
||||
|
||||
export type PropsActions = {
|
||||
|
|
@ -287,6 +315,8 @@ export type Props = PropsData &
|
|||
Pick<ReactionPickerProps, 'renderEmojiPicker'>;
|
||||
|
||||
type State = {
|
||||
metadataWidth: number;
|
||||
|
||||
expiring: boolean;
|
||||
expired: boolean;
|
||||
imageBroken: boolean;
|
||||
|
|
@ -300,9 +330,6 @@ type State = {
|
|||
hasDeleteForEveryoneTimerExpired: boolean;
|
||||
};
|
||||
|
||||
const EXPIRATION_CHECK_MINIMUM = 2000;
|
||||
const EXPIRED_DELAY = 600;
|
||||
|
||||
export class Message extends React.PureComponent<Props, State> {
|
||||
public menuTriggerRef: Trigger | undefined;
|
||||
|
||||
|
|
@ -327,6 +354,8 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
metadataWidth: DEFAULT_METADATA_WIDTH,
|
||||
|
||||
expiring: false,
|
||||
expired: false,
|
||||
imageBroken: false,
|
||||
|
|
@ -464,7 +493,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
this.toggleReactionPicker(true);
|
||||
}
|
||||
|
||||
public override componentDidUpdate(prevProps: Props): void {
|
||||
public override componentDidUpdate(prevProps: Readonly<Props>): void {
|
||||
const { isSelected, status, timestamp } = this.props;
|
||||
|
||||
this.startSelectedTimer();
|
||||
|
|
@ -494,6 +523,37 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
}
|
||||
}
|
||||
|
||||
private getMetadataPlacement(
|
||||
{
|
||||
attachments,
|
||||
expirationLength,
|
||||
expirationTimestamp,
|
||||
status,
|
||||
text,
|
||||
}: Readonly<Props> = this.props
|
||||
): MetadataPlacement {
|
||||
if (
|
||||
!expirationLength &&
|
||||
!expirationTimestamp &&
|
||||
(!status || SENT_STATUSES.has(status)) &&
|
||||
this.isCollapsedBelow()
|
||||
) {
|
||||
return MetadataPlacement.NotRendered;
|
||||
}
|
||||
|
||||
if (!text) {
|
||||
return isAudio(attachments)
|
||||
? MetadataPlacement.RenderedByMessageAudioComponent
|
||||
: MetadataPlacement.Bottom;
|
||||
}
|
||||
|
||||
if (this.canRenderStickerLikeEmoji()) {
|
||||
return MetadataPlacement.Bottom;
|
||||
}
|
||||
|
||||
return MetadataPlacement.InlineWithText;
|
||||
}
|
||||
|
||||
public startSelectedTimer(): void {
|
||||
const { clearSelectedMessage, interactionMode } = this.props;
|
||||
const { isSelected } = this.state;
|
||||
|
|
@ -569,6 +629,37 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
return isMessageRequestAccepted && !isBlocked;
|
||||
}
|
||||
|
||||
private isCollapsedAbove(
|
||||
{ item, previousItem, unreadIndicatorPlacement }: Readonly<Props> = this
|
||||
.props
|
||||
): boolean {
|
||||
return areMessagesInSameGroup(
|
||||
previousItem,
|
||||
unreadIndicatorPlacement === UnreadIndicatorPlacement.JustAbove,
|
||||
item
|
||||
);
|
||||
}
|
||||
|
||||
private isCollapsedBelow(
|
||||
{ item, nextItem, unreadIndicatorPlacement }: Readonly<Props> = this.props
|
||||
): boolean {
|
||||
return areMessagesInSameGroup(
|
||||
item,
|
||||
unreadIndicatorPlacement === UnreadIndicatorPlacement.JustBelow,
|
||||
nextItem
|
||||
);
|
||||
}
|
||||
|
||||
private shouldRenderAuthor(): boolean {
|
||||
const { author, conversationType, direction } = this.props;
|
||||
return Boolean(
|
||||
direction === 'incoming' &&
|
||||
conversationType === 'group' &&
|
||||
author.title &&
|
||||
!this.isCollapsedAbove()
|
||||
);
|
||||
}
|
||||
|
||||
private canRenderStickerLikeEmoji(): boolean {
|
||||
const { text, quote, attachments, previews } = this.props;
|
||||
|
||||
|
|
@ -582,10 +673,34 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
public renderMetadata(): JSX.Element | null {
|
||||
private updateMetadataWidth = (newMetadataWidth: number): void => {
|
||||
this.setState(({ metadataWidth }) => ({
|
||||
// We don't want text to jump around if the metadata shrinks, but we want to make
|
||||
// sure we have enough room.
|
||||
metadataWidth: Math.max(metadataWidth, newMetadataWidth),
|
||||
}));
|
||||
};
|
||||
|
||||
private renderMetadata(): ReactNode {
|
||||
let isInline: boolean;
|
||||
const metadataPlacement = this.getMetadataPlacement();
|
||||
switch (metadataPlacement) {
|
||||
case MetadataPlacement.NotRendered:
|
||||
case MetadataPlacement.RenderedByMessageAudioComponent:
|
||||
return null;
|
||||
case MetadataPlacement.InlineWithText:
|
||||
isInline = true;
|
||||
break;
|
||||
case MetadataPlacement.Bottom:
|
||||
isInline = false;
|
||||
break;
|
||||
default:
|
||||
log.error(missingCaseError(metadataPlacement));
|
||||
isInline = false;
|
||||
break;
|
||||
}
|
||||
|
||||
const {
|
||||
attachments,
|
||||
collapseMetadata,
|
||||
deletedForEveryone,
|
||||
direction,
|
||||
expirationLength,
|
||||
|
|
@ -602,16 +717,6 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
showMessageDetail,
|
||||
} = this.props;
|
||||
|
||||
if (collapseMetadata) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// The message audio component renders its own metadata because it positions the
|
||||
// metadata in line with some of its own.
|
||||
if (isAudio(attachments) && !text) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const isStickerLike = isSticker || this.canRenderStickerLikeEmoji();
|
||||
|
||||
return (
|
||||
|
|
@ -623,10 +728,12 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
hasText={Boolean(text)}
|
||||
i18n={i18n}
|
||||
id={id}
|
||||
isInline={isInline}
|
||||
isShowingImage={this.isShowingImage()}
|
||||
isSticker={isStickerLike}
|
||||
isTapToViewExpired={isTapToViewExpired}
|
||||
now={now}
|
||||
onWidthMeasured={isInline ? this.updateMetadataWidth : undefined}
|
||||
showMessageDetail={showMessageDetail}
|
||||
status={status}
|
||||
textPending={textPending}
|
||||
|
|
@ -635,27 +742,16 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
public renderAuthor(): JSX.Element | null {
|
||||
private renderAuthor(): ReactNode {
|
||||
const {
|
||||
author,
|
||||
collapseMetadata,
|
||||
contactNameColor,
|
||||
conversationType,
|
||||
direction,
|
||||
isSticker,
|
||||
isTapToView,
|
||||
isTapToViewExpired,
|
||||
} = this.props;
|
||||
|
||||
if (collapseMetadata) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (
|
||||
direction !== 'incoming' ||
|
||||
conversationType !== 'group' ||
|
||||
!author.title
|
||||
) {
|
||||
if (!this.shouldRenderAuthor()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -681,8 +777,6 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
public renderAttachment(): JSX.Element | null {
|
||||
const {
|
||||
attachments,
|
||||
collapseMetadata,
|
||||
conversationType,
|
||||
direction,
|
||||
expirationLength,
|
||||
expirationTimestamp,
|
||||
|
|
@ -709,6 +803,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
|
||||
const { imageBroken } = this.state;
|
||||
|
||||
const collapseMetadata =
|
||||
this.getMetadataPlacement() === MetadataPlacement.NotRendered;
|
||||
|
||||
if (!attachments || !attachments[0]) {
|
||||
return null;
|
||||
}
|
||||
|
|
@ -716,9 +813,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
|
||||
// For attachments which aren't full-frame
|
||||
const withContentBelow = Boolean(text);
|
||||
const withContentAbove =
|
||||
Boolean(quote) ||
|
||||
(conversationType === 'group' && direction === 'incoming');
|
||||
const withContentAbove = Boolean(quote) || this.shouldRenderAuthor();
|
||||
const displayImage = canDisplayImage(attachments);
|
||||
|
||||
if (displayImage && !imageBroken) {
|
||||
|
|
@ -773,8 +868,12 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
<div className={containerClassName}>
|
||||
<ImageGrid
|
||||
attachments={attachments}
|
||||
withContentAbove={isSticker || withContentAbove}
|
||||
withContentBelow={isSticker || withContentBelow}
|
||||
withContentAbove={
|
||||
isSticker || withContentAbove || this.isCollapsedAbove()
|
||||
}
|
||||
withContentBelow={
|
||||
isSticker || withContentBelow || this.isCollapsedBelow()
|
||||
}
|
||||
isSticker={isSticker}
|
||||
stickerSize={STICKER_SIZE}
|
||||
bottomOverlay={bottomOverlay}
|
||||
|
|
@ -815,6 +914,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
renderingContext,
|
||||
theme,
|
||||
attachment: firstAttachment,
|
||||
collapseMetadata,
|
||||
withContentAbove,
|
||||
withContentBelow,
|
||||
|
||||
|
|
@ -1085,17 +1185,34 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
});
|
||||
};
|
||||
|
||||
const isIncoming = direction === 'incoming';
|
||||
|
||||
let curveTopLeft: boolean;
|
||||
let curveTopRight: boolean;
|
||||
if (this.shouldRenderAuthor()) {
|
||||
curveTopLeft = false;
|
||||
curveTopRight = false;
|
||||
} else if (isIncoming) {
|
||||
curveTopLeft = !this.isCollapsedAbove();
|
||||
curveTopRight = true;
|
||||
} else {
|
||||
curveTopLeft = true;
|
||||
curveTopRight = !this.isCollapsedAbove();
|
||||
}
|
||||
|
||||
return (
|
||||
<Quote
|
||||
i18n={i18n}
|
||||
onClick={clickHandler}
|
||||
text={quote.text}
|
||||
rawAttachment={quote.rawAttachment}
|
||||
isIncoming={direction === 'incoming'}
|
||||
isIncoming={isIncoming}
|
||||
authorTitle={quote.authorTitle}
|
||||
bodyRanges={quote.bodyRanges}
|
||||
conversationColor={conversationColor}
|
||||
customColor={customColor}
|
||||
curveTopLeft={curveTopLeft}
|
||||
curveTopRight={curveTopRight}
|
||||
isViewOnce={isViewOnce}
|
||||
referencedMessageNotFound={referencedMessageNotFound}
|
||||
isFromMe={quote.isFromMe}
|
||||
|
|
@ -1108,7 +1225,6 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
|
||||
public renderEmbeddedContact(): JSX.Element | null {
|
||||
const {
|
||||
collapseMetadata,
|
||||
contact,
|
||||
conversationType,
|
||||
direction,
|
||||
|
|
@ -1123,7 +1239,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
const withCaption = Boolean(text);
|
||||
const withContentAbove =
|
||||
conversationType === 'group' && direction === 'incoming';
|
||||
const withContentBelow = withCaption || !collapseMetadata;
|
||||
const withContentBelow =
|
||||
withCaption ||
|
||||
this.getMetadataPlacement() !== MetadataPlacement.NotRendered;
|
||||
|
||||
const otherContent =
|
||||
(contact && contact.firstNumber && contact.isNumberOnSignal) ||
|
||||
|
|
@ -1166,22 +1284,19 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
);
|
||||
}
|
||||
|
||||
public hasAvatar(): boolean {
|
||||
const { collapseMetadata, conversationType, direction } = this.props;
|
||||
private renderAvatar(): ReactNode {
|
||||
const {
|
||||
author,
|
||||
getPreferredBadge,
|
||||
i18n,
|
||||
showContactModal,
|
||||
theme,
|
||||
conversationType,
|
||||
direction,
|
||||
} = this.props;
|
||||
|
||||
return Boolean(
|
||||
!collapseMetadata &&
|
||||
conversationType === 'group' &&
|
||||
direction !== 'outgoing'
|
||||
);
|
||||
}
|
||||
|
||||
public renderAvatar(): JSX.Element | undefined {
|
||||
const { author, getPreferredBadge, i18n, showContactModal, theme } =
|
||||
this.props;
|
||||
|
||||
if (!this.hasAvatar()) {
|
||||
return undefined;
|
||||
if (conversationType !== 'group' || direction !== 'incoming') {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -1191,29 +1306,33 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
this.hasReactions(),
|
||||
})}
|
||||
>
|
||||
<Avatar
|
||||
acceptedMessageRequest={author.acceptedMessageRequest}
|
||||
avatarPath={author.avatarPath}
|
||||
badge={getPreferredBadge(author.badges)}
|
||||
color={author.color}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
isMe={author.isMe}
|
||||
name={author.name}
|
||||
onClick={event => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
{this.isCollapsedBelow() ? (
|
||||
<AvatarSpacer size={GROUP_AVATAR_SIZE} />
|
||||
) : (
|
||||
<Avatar
|
||||
acceptedMessageRequest={author.acceptedMessageRequest}
|
||||
avatarPath={author.avatarPath}
|
||||
badge={getPreferredBadge(author.badges)}
|
||||
color={author.color}
|
||||
conversationType="direct"
|
||||
i18n={i18n}
|
||||
isMe={author.isMe}
|
||||
name={author.name}
|
||||
onClick={event => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
showContactModal(author.id);
|
||||
}}
|
||||
phoneNumber={author.phoneNumber}
|
||||
profileName={author.profileName}
|
||||
sharedGroupNames={author.sharedGroupNames}
|
||||
size={28}
|
||||
theme={theme}
|
||||
title={author.title}
|
||||
unblurredAvatarPath={author.unblurredAvatarPath}
|
||||
/>
|
||||
showContactModal(author.id);
|
||||
}}
|
||||
phoneNumber={author.phoneNumber}
|
||||
profileName={author.profileName}
|
||||
sharedGroupNames={author.sharedGroupNames}
|
||||
size={GROUP_AVATAR_SIZE}
|
||||
theme={theme}
|
||||
title={author.title}
|
||||
unblurredAvatarPath={author.unblurredAvatarPath}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1232,6 +1351,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
text,
|
||||
textPending,
|
||||
} = this.props;
|
||||
const { metadataWidth } = this.state;
|
||||
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
const contents = deletedForEveryone
|
||||
|
|
@ -1267,6 +1387,9 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
text={contents || ''}
|
||||
textPending={textPending}
|
||||
/>
|
||||
{this.getMetadataPlacement() === MetadataPlacement.InlineWithText && (
|
||||
<MessageTextMetadataSpacer metadataWidth={metadataWidth} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1680,14 +1803,13 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
}
|
||||
|
||||
if (isSticker) {
|
||||
// Padding is 8px, on both sides, plus two for 1px border
|
||||
return STICKER_SIZE + 8 * 2 + 2;
|
||||
// Padding is 8px, on both sides
|
||||
return STICKER_SIZE + 8 * 2;
|
||||
}
|
||||
|
||||
const dimensions = getGridDimensions(attachments);
|
||||
if (dimensions) {
|
||||
// Add two for 1px border
|
||||
return dimensions.width + 2;
|
||||
return dimensions.width;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1699,8 +1821,7 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
) {
|
||||
const dimensions = getImageDimensions(firstLinkPreview.image);
|
||||
if (dimensions) {
|
||||
// Add two for 1px border
|
||||
return dimensions.width + 2;
|
||||
return dimensions.width;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1797,13 +1918,14 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
|
||||
public renderTapToView(): JSX.Element {
|
||||
const {
|
||||
collapseMetadata,
|
||||
conversationType,
|
||||
direction,
|
||||
isTapToViewExpired,
|
||||
isTapToViewError,
|
||||
} = this.props;
|
||||
|
||||
const collapseMetadata =
|
||||
this.getMetadataPlacement() === MetadataPlacement.NotRendered;
|
||||
const withContentBelow = !collapseMetadata;
|
||||
const withContentAbove =
|
||||
!collapseMetadata &&
|
||||
|
|
@ -2372,7 +2494,6 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
isSelected && !isStickerLike
|
||||
? 'module-message__container--selected'
|
||||
: null,
|
||||
isStickerLike ? 'module-message__container--with-sticker' : null,
|
||||
!isStickerLike ? `module-message__container--${direction}` : null,
|
||||
isEmojiOnly ? 'module-message__container--emoji' : null,
|
||||
isTapToView ? 'module-message__container--with-tap-to-view' : null,
|
||||
|
|
@ -2440,9 +2561,10 @@ export class Message extends React.PureComponent<Props, State> {
|
|||
className={classNames(
|
||||
'module-message',
|
||||
`module-message--${direction}`,
|
||||
this.isCollapsedAbove() && 'module-message--collapsed-above',
|
||||
this.isCollapsedBelow() && 'module-message--collapsed-below',
|
||||
isSelected ? 'module-message--selected' : null,
|
||||
expiring ? 'module-message--expired' : null,
|
||||
this.hasAvatar() ? 'module-message--with-avatar' : null
|
||||
expiring ? 'module-message--expired' : null
|
||||
)}
|
||||
tabIndex={0}
|
||||
// We pretend to be a button because we sometimes contain buttons and a button
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ export type Props = {
|
|||
renderingContext: string;
|
||||
i18n: LocalizerType;
|
||||
attachment: AttachmentType;
|
||||
collapseMetadata: boolean;
|
||||
withContentAbove: boolean;
|
||||
withContentBelow: boolean;
|
||||
|
||||
|
|
@ -151,6 +152,7 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
|
|||
i18n,
|
||||
renderingContext,
|
||||
attachment,
|
||||
collapseMetadata,
|
||||
withContentAbove,
|
||||
withContentBelow,
|
||||
|
||||
|
|
@ -530,7 +532,7 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
|
|||
|
||||
const metadata = (
|
||||
<div className={`${CSS_BASE}__metadata`}>
|
||||
{!withContentBelow && (
|
||||
{!withContentBelow && !collapseMetadata && (
|
||||
<MessageMetadata
|
||||
direction={direction}
|
||||
expirationLength={expirationLength}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
// Copyright 2018-2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { FunctionComponent, ReactChild } from 'react';
|
||||
import type { ReactChild, ReactElement } from 'react';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import Measure from 'react-measure';
|
||||
|
||||
import type { LocalizerType } from '../../types/Util';
|
||||
import type { DirectionType, MessageStatusType } from './Message';
|
||||
|
|
@ -19,35 +20,37 @@ type PropsType = {
|
|||
hasText: boolean;
|
||||
i18n: LocalizerType;
|
||||
id: string;
|
||||
isInline?: boolean;
|
||||
isShowingImage: boolean;
|
||||
isSticker?: boolean;
|
||||
isTapToViewExpired?: boolean;
|
||||
now: number;
|
||||
onWidthMeasured?: (width: number) => unknown;
|
||||
showMessageDetail: (id: string) => void;
|
||||
status?: MessageStatusType;
|
||||
textPending?: boolean;
|
||||
timestamp: number;
|
||||
};
|
||||
|
||||
export const MessageMetadata: FunctionComponent<PropsType> = props => {
|
||||
const {
|
||||
deletedForEveryone,
|
||||
direction,
|
||||
expirationLength,
|
||||
expirationTimestamp,
|
||||
hasText,
|
||||
i18n,
|
||||
id,
|
||||
isShowingImage,
|
||||
isSticker,
|
||||
isTapToViewExpired,
|
||||
now,
|
||||
showMessageDetail,
|
||||
status,
|
||||
textPending,
|
||||
timestamp,
|
||||
} = props;
|
||||
|
||||
export const MessageMetadata = ({
|
||||
deletedForEveryone,
|
||||
direction,
|
||||
expirationLength,
|
||||
expirationTimestamp,
|
||||
hasText,
|
||||
i18n,
|
||||
id,
|
||||
isInline,
|
||||
isShowingImage,
|
||||
isSticker,
|
||||
isTapToViewExpired,
|
||||
now,
|
||||
onWidthMeasured,
|
||||
showMessageDetail,
|
||||
status,
|
||||
textPending,
|
||||
timestamp,
|
||||
}: Readonly<PropsType>): ReactElement => {
|
||||
const withImageNoCaption = Boolean(!isSticker && !hasText && isShowingImage);
|
||||
const metadataDirection = isSticker ? undefined : direction;
|
||||
|
||||
|
|
@ -114,16 +117,13 @@ export const MessageMetadata: FunctionComponent<PropsType> = props => {
|
|||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'module-message__metadata',
|
||||
`module-message__metadata--${direction}`,
|
||||
withImageNoCaption
|
||||
? 'module-message__metadata--with-image-no-caption'
|
||||
: null
|
||||
)}
|
||||
>
|
||||
const className = classNames(
|
||||
'module-message__metadata',
|
||||
isInline && 'module-message__metadata--inline',
|
||||
withImageNoCaption && 'module-message__metadata--with-image-no-caption'
|
||||
);
|
||||
const children = (
|
||||
<>
|
||||
{timestampNode}
|
||||
{expirationLength && expirationTimestamp ? (
|
||||
<ExpireTimer
|
||||
|
|
@ -161,6 +161,25 @@ export const MessageMetadata: FunctionComponent<PropsType> = props => {
|
|||
)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
if (onWidthMeasured) {
|
||||
return (
|
||||
<Measure
|
||||
bounds
|
||||
onResize={({ bounds }) => {
|
||||
onWidthMeasured(bounds?.width || 0);
|
||||
}}
|
||||
>
|
||||
{({ measureRef }) => (
|
||||
<div className={className} ref={measureRef}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</Measure>
|
||||
);
|
||||
}
|
||||
|
||||
return <div className={className}>{children}</div>;
|
||||
};
|
||||
|
|
|
|||
13
ts/components/conversation/MessageTextMetadataSpacer.tsx
Normal file
13
ts/components/conversation/MessageTextMetadataSpacer.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
// Copyright 2022 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import type { ReactElement } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
const SPACING = 10;
|
||||
|
||||
export const MessageTextMetadataSpacer = ({
|
||||
metadataWidth,
|
||||
}: Readonly<{ metadataWidth: number }>): ReactElement => (
|
||||
<span style={{ display: 'inline-block', width: metadataWidth + SPACING }} />
|
||||
);
|
||||
|
|
@ -23,6 +23,8 @@ import { getCustomColorStyle } from '../../util/getCustomColorStyle';
|
|||
export type Props = {
|
||||
authorTitle: string;
|
||||
conversationColor: ConversationColorType;
|
||||
curveTopLeft?: boolean;
|
||||
curveTopRight?: boolean;
|
||||
customColor?: CustomColorType;
|
||||
bodyRanges?: BodyRangesType;
|
||||
i18n: LocalizerType;
|
||||
|
|
@ -422,6 +424,8 @@ export class Quote extends React.Component<Props, State> {
|
|||
public override render(): JSX.Element | null {
|
||||
const {
|
||||
conversationColor,
|
||||
curveTopLeft,
|
||||
curveTopRight,
|
||||
customColor,
|
||||
isIncoming,
|
||||
onClick,
|
||||
|
|
@ -444,10 +448,10 @@ export class Quote extends React.Component<Props, State> {
|
|||
isIncoming
|
||||
? `module-quote--incoming-${conversationColor}`
|
||||
: `module-quote--outgoing-${conversationColor}`,
|
||||
!onClick ? 'module-quote--no-click' : null,
|
||||
referencedMessageNotFound
|
||||
? 'module-quote--with-reference-warning'
|
||||
: null
|
||||
!onClick && 'module-quote--no-click',
|
||||
referencedMessageNotFound && 'module-quote--with-reference-warning',
|
||||
curveTopLeft && 'module-quote--curve-top-left',
|
||||
curveTopRight && 'module-quote--curve-top-right'
|
||||
)}
|
||||
style={{ ...getCustomColorStyle(customColor, true) }}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,10 @@ import { ContactSpoofingReviewDialog } from './ContactSpoofingReviewDialog';
|
|||
import type { GroupNameCollisionsWithIdsByTitle } from '../../util/groupMemberNameCollisions';
|
||||
import { hasUnacknowledgedCollisions } from '../../util/groupMemberNameCollisions';
|
||||
import { TimelineFloatingHeader } from './TimelineFloatingHeader';
|
||||
import { getWidthBreakpoint } from '../../util/timelineUtil';
|
||||
import {
|
||||
getWidthBreakpoint,
|
||||
UnreadIndicatorPlacement,
|
||||
} from '../../util/timelineUtil';
|
||||
import {
|
||||
getScrollBottom,
|
||||
scrollToBottom,
|
||||
|
|
@ -117,6 +120,7 @@ type PropsHousekeepingType = {
|
|||
nextMessageId: undefined | string;
|
||||
now: number;
|
||||
previousMessageId: undefined | string;
|
||||
unreadIndicatorPlacement: undefined | UnreadIndicatorPlacement;
|
||||
}) => JSX.Element;
|
||||
renderLastSeenIndicator: (id: string) => JSX.Element;
|
||||
renderHeroRow: (
|
||||
|
|
@ -839,8 +843,11 @@ export class Timeline extends React.Component<
|
|||
|
||||
const messageNodes: Array<ReactChild> = [];
|
||||
for (let itemIndex = 0; itemIndex < items.length; itemIndex += 1) {
|
||||
const previousMessageId: undefined | string = items[itemIndex - 1];
|
||||
const nextMessageId: undefined | string = items[itemIndex + 1];
|
||||
const previousItemIndex = itemIndex - 1;
|
||||
const nextItemIndex = itemIndex + 1;
|
||||
|
||||
const previousMessageId: undefined | string = items[previousItemIndex];
|
||||
const nextMessageId: undefined | string = items[nextItemIndex];
|
||||
const messageId = items[itemIndex];
|
||||
|
||||
if (!messageId) {
|
||||
|
|
@ -851,10 +858,14 @@ export class Timeline extends React.Component<
|
|||
continue;
|
||||
}
|
||||
|
||||
let unreadIndicatorPlacement: undefined | UnreadIndicatorPlacement;
|
||||
if (oldestUnreadIndex === itemIndex) {
|
||||
unreadIndicatorPlacement = UnreadIndicatorPlacement.JustAbove;
|
||||
messageNodes.push(
|
||||
<Fragment key="unread">{renderLastSeenIndicator(id)}</Fragment>
|
||||
);
|
||||
} else if (oldestUnreadIndex === nextItemIndex) {
|
||||
unreadIndicatorPlacement = UnreadIndicatorPlacement.JustBelow;
|
||||
}
|
||||
|
||||
messageNodes.push(
|
||||
|
|
@ -874,6 +885,7 @@ export class Timeline extends React.Component<
|
|||
nextMessageId,
|
||||
now: nowThatUpdatesEveryMinute,
|
||||
previousMessageId,
|
||||
unreadIndicatorPlacement,
|
||||
})}
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
|
||||
import type { ReactChild, RefObject } from 'react';
|
||||
import React from 'react';
|
||||
import { omit } from 'lodash';
|
||||
|
||||
import type { LocalizerType, ThemeType } from '../../types/Util';
|
||||
import { isSameDay } from '../../util/timestamp';
|
||||
|
|
@ -54,6 +53,7 @@ import type { SmartContactRendererType } from '../../groupChange';
|
|||
import { ResetSessionNotification } from './ResetSessionNotification';
|
||||
import type { PropsType as ProfileChangeNotificationPropsType } from './ProfileChangeNotification';
|
||||
import { ProfileChangeNotification } from './ProfileChangeNotification';
|
||||
import type { UnreadIndicatorPlacement } from '../../util/timelineUtil';
|
||||
import type { FullJSXType } from '../Intl';
|
||||
|
||||
type CallHistoryType = {
|
||||
|
|
@ -156,6 +156,7 @@ type PropsLocalType = {
|
|||
previousItem: undefined | TimelineItemType;
|
||||
nextItem: undefined | TimelineItemType;
|
||||
now: number;
|
||||
unreadIndicatorPlacement?: undefined | UnreadIndicatorPlacement;
|
||||
};
|
||||
|
||||
type PropsActionsType = MessageActionsType &
|
||||
|
|
@ -196,6 +197,7 @@ export class TimelineItem extends React.PureComponent<PropsType> {
|
|||
returnToActiveCall,
|
||||
selectMessage,
|
||||
startCallingLobby,
|
||||
unreadIndicatorPlacement,
|
||||
} = this.props;
|
||||
|
||||
if (!item) {
|
||||
|
|
@ -212,13 +214,14 @@ export class TimelineItem extends React.PureComponent<PropsType> {
|
|||
if (item.type === 'message') {
|
||||
itemContents = (
|
||||
<Message
|
||||
{...omit(this.props, ['item'])}
|
||||
{...this.props}
|
||||
{...item.data}
|
||||
containerElementRef={containerElementRef}
|
||||
getPreferredBadge={getPreferredBadge}
|
||||
i18n={i18n}
|
||||
theme={theme}
|
||||
renderingContext="conversation/TimelineItem"
|
||||
unreadIndicatorPlacement={unreadIndicatorPlacement}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue