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

Update muted icon in conversation list

Browse source
This commit is contained in:
Evan Hahn 2021-10-14 10:48:48 -05:00 • committed by GitHub
parent c74315315b
commit fbb15ed42e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 62 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ts/components/conversationList/BaseConversationListItem.tsx
View file

@ -16,6 +16,8 @@ const BASE_CLASS_NAME =
'module-conversation-list__item--contact-or-conversation';
const CONTENT_CLASS_NAME = `${BASE_CLASS_NAME}__content`;
const HEADER_CLASS_NAME = `${CONTENT_CLASS_NAME}__header`;
export const HEADER_NAME_CLASS_NAME = `${HEADER_CLASS_NAME}__name`;
export const HEADER_CONTACT_NAME_CLASS_NAME = `${HEADER_NAME_CLASS_NAME}__contact-name`;
export const DATE_CLASS_NAME = `${HEADER_CLASS_NAME}__date`;
const TIMESTAMP_CLASS_NAME = `${DATE_CLASS_NAME}__timestamp`;
const MESSAGE_CLASS_NAME = `${CONTENT_CLASS_NAME}__message`;

11
ts/components/conversationList/ContactCheckbox.tsx
View file

@ -3,7 +3,10 @@
import React, { FunctionComponent, ReactNode } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem';
import {
BaseConversationListItem,
HEADER_CONTACT_NAME_CLASS_NAME,
} from './BaseConversationListItem';
import { ConversationType } from '../../state/ducks/conversations';
import { LocalizerType } from '../../types/Util';
import { ContactName } from '../conversation/ContactName';
@ -69,9 +72,11 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
const disabled = Boolean(disabledReason);
const headerName = isMe ? (
i18n('noteToSelf')
<span className={HEADER_CONTACT_NAME_CLASS_NAME}>
{i18n('noteToSelf')}
</span>
) : (
<ContactName title={title} />
<ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} title={title} />
);
let messageText: ReactNode;

11
ts/components/conversationList/ContactListItem.tsx
View file

@ -3,7 +3,10 @@
import React, { FunctionComponent } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem';
import {
BaseConversationListItem,
HEADER_CONTACT_NAME_CLASS_NAME,
} from './BaseConversationListItem';
import { ConversationType } from '../../state/ducks/conversations';
import { LocalizerType } from '../../types/Util';
import { ContactName } from '../conversation/ContactName';
@ -52,9 +55,11 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
unblurredAvatarPath,
}) {
const headerName = isMe ? (
i18n('noteToSelf')
<span className={HEADER_CONTACT_NAME_CLASS_NAME}>
{i18n('noteToSelf')}
</span>
) : (
<ContactName title={title} />
<ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} title={title} />
);
const messageText =

28
ts/components/conversationList/ConversationListItem.tsx
View file

@ -6,6 +6,8 @@ import classNames from 'classnames';
import {
BaseConversationListItem,
HEADER_NAME_CLASS_NAME,
HEADER_CONTACT_NAME_CLASS_NAME,
MESSAGE_TEXT_CLASS_NAME,
} from './BaseConversationListItem';
import { MessageBody } from '../conversation/MessageBody';
@ -88,10 +90,18 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
unblurredAvatarPath,
unreadCount,
}) {
const headerName = isMe ? (
i18n('noteToSelf')
) : (
<ContactName title={title} />
const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt);
const headerName = (
<>
{isMe ? (
<span className={HEADER_CONTACT_NAME_CLASS_NAME}>
{i18n('noteToSelf')}
</span>
) : (
<ContactName module={HEADER_CONTACT_NAME_CLASS_NAME} title={title} />
)}
{isMuted && <div className={`${HEADER_NAME_CLASS_NAME}__mute-icon`} />}
</>
);
let messageText: ReactNode = null;
@ -146,16 +156,6 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
}
}
const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt);
if (isMuted) {
messageText = (
<>
<span className={`${MESSAGE_TEXT_CLASS_NAME}__muted`} />
{messageText}
</>
);
}
const onClickItem = useCallback(() => onClick(id), [onClick, id]);
return (