From fbb15ed42edfc78d43f69f79af17d2530a9f8c31 Mon Sep 17 00:00:00 2001 From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com> Date: Thu, 14 Oct 2021 10:48:48 -0500 Subject: [PATCH] Update muted icon in conversation list --- images/icons/v2/sound-off-outline-24.svg | 1 - stylesheets/_modules.scss | 51 +++++++++++-------- .../BaseConversationListItem.tsx | 2 + .../conversationList/ContactCheckbox.tsx | 11 ++-- .../conversationList/ContactListItem.tsx | 11 ++-- .../conversationList/ConversationListItem.tsx | 28 +++++----- 6 files changed, 62 insertions(+), 42 deletions(-) delete mode 100644 images/icons/v2/sound-off-outline-24.svg diff --git a/images/icons/v2/sound-off-outline-24.svg b/images/icons/v2/sound-off-outline-24.svg deleted file mode 100644 index 43aefe49c..000000000 --- a/images/icons/v2/sound-off-outline-24.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss index 023b314cd..a6047b7d0 100644 --- a/stylesheets/_modules.scss +++ b/stylesheets/_modules.scss @@ -5848,6 +5848,8 @@ button.module-image__border-overlay:focus { } &__name { + align-items: center; + display: flex; flex-grow: 1; flex-shrink: 1; @@ -5863,6 +5865,34 @@ button.module-image__border-overlay:focus { @include dark-theme { color: $color-gray-05; } + + &__contact-name { + overflow: hidden; + text-overflow: ellipsis; + } + + &__mute-icon { + $size: 14px; + + height: $size; + margin-inline-start: 8px; + min-width: $size; + width: $size; + + @include light-theme { + @include color-svg( + '../images/icons/v2/bell-disabled-outline-24.svg', + $color-gray-45 + ); + } + + @include dark-theme { + @include color-svg( + '../images/icons/v2/bell-disabled-solid-24.svg', + $color-gray-25 + ); + } + } } &__date { @@ -5926,27 +5956,6 @@ button.module-image__border-overlay:focus { height: 36px; // two lines } - &__muted { - display: inline-block; - height: 14px; - margin-right: 4px; - vertical-align: middle; - width: 14px; - - @include light-theme { - @include color-svg( - '../images/icons/v2/sound-off-outline-24.svg', - $color-gray-60 - ); - } - @include dark-theme { - @include color-svg( - '../images/icons/v2/sound-off-outline-24.svg', - $color-gray-25 - ); - } - } - &__message-request { @include font-body-2-bold; diff --git a/ts/components/conversationList/BaseConversationListItem.tsx b/ts/components/conversationList/BaseConversationListItem.tsx index 99bf89b6c..1b6d2e1b2 100644 --- a/ts/components/conversationList/BaseConversationListItem.tsx +++ b/ts/components/conversationList/BaseConversationListItem.tsx @@ -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`; diff --git a/ts/components/conversationList/ContactCheckbox.tsx b/ts/components/conversationList/ContactCheckbox.tsx index 138d9e6aa..5f88ae993 100644 --- a/ts/components/conversationList/ContactCheckbox.tsx +++ b/ts/components/conversationList/ContactCheckbox.tsx @@ -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 = React.memo( const disabled = Boolean(disabledReason); const headerName = isMe ? ( - i18n('noteToSelf') + + {i18n('noteToSelf')} + ) : ( - + ); let messageText: ReactNode; diff --git a/ts/components/conversationList/ContactListItem.tsx b/ts/components/conversationList/ContactListItem.tsx index 6c0614ee2..93d70cb0f 100644 --- a/ts/components/conversationList/ContactListItem.tsx +++ b/ts/components/conversationList/ContactListItem.tsx @@ -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 = React.memo( unblurredAvatarPath, }) { const headerName = isMe ? ( - i18n('noteToSelf') + + {i18n('noteToSelf')} + ) : ( - + ); const messageText = diff --git a/ts/components/conversationList/ConversationListItem.tsx b/ts/components/conversationList/ConversationListItem.tsx index 09beb9370..9c32abb7d 100644 --- a/ts/components/conversationList/ConversationListItem.tsx +++ b/ts/components/conversationList/ConversationListItem.tsx @@ -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 = React.memo( unblurredAvatarPath, unreadCount, }) { - const headerName = isMe ? ( - i18n('noteToSelf') - ) : ( - + const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt); + const headerName = ( + <> + {isMe ? ( + + {i18n('noteToSelf')} + + ) : ( + + )} + {isMuted &&
} + ); let messageText: ReactNode = null; @@ -146,16 +156,6 @@ export const ConversationListItem: FunctionComponent = React.memo( } } - const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt); - if (isMuted) { - messageText = ( - <> - - {messageText} - - ); - } - const onClickItem = useCallback(() => onClick(id), [onClick, id]); return (