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

Show badges on message avatars where applicable

Browse source
This commit is contained in:
Evan Hahn 2021-11-15 16:53:42 -06:00 • committed by GitHub
parent fbd7292663
commit 7d17158add
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 90 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

15
ts/components/conversation/Message.stories.tsx
View file

@ -31,6 +31,8 @@ import { getDefaultConversation } from '../../test-both/helpers/getDefaultConver
import { WidthBreakpoint } from '../_util';
import { fakeAttachment } from '../../test-both/helpers/fakeAttachment';
import { getFakeBadge } from '../../test-both/helpers/getFakeBadge';
import { ThemeType } from '../../types/Util';
const i18n = setupI18n('en', enMessages);
@ -95,6 +97,7 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
const createProps = (overrideProps: Partial<Props> = {}): Props => ({
attachments: overrideProps.attachments,
author: overrideProps.author || getDefaultConversation(),
authorBadge: overrideProps.authorBadge,
reducedMotion: boolean('reducedMotion', false),
bodyRanges: overrideProps.bodyRanges,
canReply: true,
@ -176,6 +179,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
status: overrideProps.status || 'sent',
text: overrideProps.text || text('text', ''),
textPending: boolean('textPending', overrideProps.textPending || false),
theme: ThemeType.light,
timestamp: number('timestamp', overrideProps.timestamp || Date.now()),
});
@ -538,6 +542,17 @@ story.add('Avatar in Group', () => {
return <Message {...props} />;
});
story.add('Badge in Group', () => {
const props = createProps({
authorBadge: getFakeBadge(),
conversationType: 'group',
status: 'sent',
text: 'Hello it is me, the saxophone.',
});
return <Message {...props} />;
});
story.add('Sticker', () => {
const props = createProps({
attachments: [

9
ts/components/conversation/Message.tsx
View file

@ -62,6 +62,7 @@ import type {
LocalizerType,
ThemeType,
} from '../../types/Util';
import type { BadgeType } from '../../badges/types';
import type {
ContactNameColorType,
ConversationColorType,
@ -145,6 +146,7 @@ export type PropsData = {
ConversationType,
| 'acceptedMessageRequest'
| 'avatarPath'
| 'badges'
| 'color'
| 'id'
| 'isMe'
@ -155,6 +157,7 @@ export type PropsData = {
| 'title'
| 'unblurredAvatarPath'
>;
authorBadge: undefined | BadgeType;
reducedMotion?: boolean;
conversationType: ConversationTypeType;
attachments?: Array<AttachmentType>;
@ -203,7 +206,7 @@ export type PropsHousekeeping = {
containerWidthBreakpoint: WidthBreakpoint;
i18n: LocalizerType;
interactionMode: InteractionModeType;
theme?: ThemeType;
theme: ThemeType;
disableMenu?: boolean;
disableScroll?: boolean;
collapseMetadata?: boolean;
@ -1188,7 +1191,7 @@ export class Message extends React.PureComponent<Props, State> {
}
public renderAvatar(): JSX.Element | undefined {
const { author, i18n, showContactModal } = this.props;
const { author, authorBadge, i18n, showContactModal, theme } = this.props;
if (!this.hasAvatar()) {
return undefined;
@ -1204,6 +1207,7 @@ export class Message extends React.PureComponent<Props, State> {
<Avatar
acceptedMessageRequest={author.acceptedMessageRequest}
avatarPath={author.avatarPath}
badge={authorBadge}
color={author.color}
conversationType="direct"
i18n={i18n}
@ -1219,6 +1223,7 @@ export class Message extends React.PureComponent<Props, State> {
profileName={author.profileName}
sharedGroupNames={author.sharedGroupNames}
size={28}
theme={theme}
title={author.title}
unblurredAvatarPath={author.unblurredAvatarPath}
/>

4
ts/components/conversation/MessageDetail.stories.tsx
View file

@ -15,6 +15,8 @@ import { ReadStatus } from '../../messages/MessageReadStatus';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import { getFakeBadge } from '../../test-both/helpers/getFakeBadge';
import { ThemeType } from '../../types/Util';
const i18n = setupI18n('en', enMessages);
@ -25,6 +27,7 @@ const defaultMessage: MessageDataPropsType = {
id: 'some-id',
title: 'Max',
}),
authorBadge: getFakeBadge(),
canReply: true,
canDeleteForEveryone: true,
canDownload: true,
@ -61,6 +64,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
interactionMode: 'keyboard',
theme: ThemeType.light,
showSafetyNumber: action('showSafetyNumber'),

5
ts/components/conversation/MessageDetail.tsx
View file

@ -14,7 +14,7 @@ import type {
PropsData as MessagePropsDataType,
} from './Message';
import { Message } from './Message';
import type { LocalizerType } from '../../types/Util';
import type { LocalizerType, ThemeType } from '../../types/Util';
import type { ConversationType } from '../../state/ducks/conversations';
import { groupBy } from '../../util/mapUtil';
import type { ContactNameColorType } from '../../types/Colors';
@ -60,6 +60,7 @@ export type PropsData = {
showSafetyNumber: (contactId: string) => void;
i18n: LocalizerType;
theme: ThemeType;
} & Pick<MessagePropsType, 'interactionMode'>;
export type PropsBackboneActions = Pick<
@ -288,6 +289,7 @@ export class MessageDetail extends React.Component<Props> {
showExpiredOutgoingTapToViewToast,
showForwardMessageModal,
showVisualAttachment,
theme,
} = this.props;
return (
@ -350,6 +352,7 @@ export class MessageDetail extends React.Component<Props> {
log.warn('MessageDetail: deleteMessageForEveryone called!');
}}
showVisualAttachment={showVisualAttachment}
theme={theme}
/>
</div>
<table className="module-message-detail__info">

3
ts/components/conversation/Quote.stories.tsx
View file

@ -26,6 +26,7 @@ import { setupI18n } from '../../util/setupI18n';
import enMessages from '../../../_locales/en/messages.json';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
import { WidthBreakpoint } from '../_util';
import { ThemeType } from '../../types/Util';
const i18n = setupI18n('en', enMessages);
@ -36,6 +37,7 @@ const defaultMessageProps: MessagesProps = {
id: 'some-id',
title: 'Person X',
}),
authorBadge: undefined,
canReply: true,
canDeleteForEveryone: true,
canDownload: true,
@ -90,6 +92,7 @@ const defaultMessageProps: MessagesProps = {
showVisualAttachment: action('default--showVisualAttachment'),
status: 'sent',
text: 'This is really interesting.',
theme: ThemeType.light,
timestamp: Date.now(),
};

9
ts/components/conversation/Timeline.stories.tsx
View file

@ -47,6 +47,7 @@ const items: Record<string, TimelineItemType> = {
author: getDefaultConversation({
phoneNumber: '(202) 555-2001',
}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -67,6 +68,7 @@ const items: Record<string, TimelineItemType> = {
type: 'message',
data: {
author: getDefaultConversation({}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -100,6 +102,7 @@ const items: Record<string, TimelineItemType> = {
type: 'message',
data: {
author: getDefaultConversation({}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -189,6 +192,7 @@ const items: Record<string, TimelineItemType> = {
type: 'message',
data: {
author: getDefaultConversation({}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -210,6 +214,7 @@ const items: Record<string, TimelineItemType> = {
type: 'message',
data: {
author: getDefaultConversation({}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -231,6 +236,7 @@ const items: Record<string, TimelineItemType> = {
type: 'message',
data: {
author: getDefaultConversation({}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -252,6 +258,7 @@ const items: Record<string, TimelineItemType> = {
type: 'message',
data: {
author: getDefaultConversation({}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -273,6 +280,7 @@ const items: Record<string, TimelineItemType> = {
type: 'message',
data: {
author: getDefaultConversation({}),
authorBadge: undefined,
canDeleteForEveryone: false,
canDownload: true,
canReply: true,
@ -390,6 +398,7 @@ const renderItem = ({
nextItem={undefined}
i18n={i18n}
interactionMode="keyboard"
theme={ThemeType.light}
containerElementRef={containerElementRef}
containerWidthBreakpoint={containerWidthBreakpoint}
conversationId=""

2
ts/components/conversation/TimelineItem.stories.tsx
View file

@ -16,6 +16,7 @@ import { CallMode } from '../../types/Calling';
import { AvatarColors } from '../../types/Colors';
import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
import { WidthBreakpoint } from '../_util';
import { ThemeType } from '../../types/Util';
const i18n = setupI18n('en', enMessages);
@ -53,6 +54,7 @@ const getDefaultProps = () => ({
id: 'asdf',
isSelected: false,
interactionMode: 'keyboard' as const,
theme: ThemeType.light,
selectMessage: action('selectMessage'),
reactToMessage: action('reactToMessage'),
checkForAccount: action('checkForAccount'),

2
ts/components/conversation/TimelineItem.tsx
View file

@ -148,7 +148,7 @@ type PropsLocalType = {
renderUniversalTimerNotification: () => JSX.Element;
i18n: LocalizerType;
interactionMode: InteractionModeType;
theme?: ThemeType;
theme: ThemeType;
previousItem: undefined | TimelineItemType;
nextItem: undefined | TimelineItemType;
};