mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
images/icons/v2/sound-off-outline-24.svg
View file

@ -1 +0,0 @@
<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m20.061 12 2.469 2.47-1.06 1.06-2.47-2.469-2.47 2.469-1.06-1.06 2.469-2.47-2.469-2.47 1.06-1.06 2.47 2.469 2.47-2.469 1.06 1.06zm-6.561-9.364a.494.494 0 0 0 -.335.132l-5.165 4.732h-4a2 2 0 0 0 -2 2v5a2 2 0 0 0 2 2h4l5.162 4.732a.494.494 0 0 0 .335.132.5.5 0 0 0 .5-.5v-17.727a.5.5 0 0 0 -.497-.501zm-.75 16.614-1.41-1.723-2.757-2.527h-4.583a.5.5 0 0 1 -.5-.5v-5a.5.5 0 0 1 .5-.5h4.583l2.757-2.527 1.41-1.723-.25 2.75v9z"/></svg>
Side by side

Before

Width:  |  Height:  |  Size: 520 B

51
stylesheets/_modules.scss
View file

@ -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;

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 =

26
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')
const isMuted = Boolean(muteExpiresAt && Date.now() < muteExpiresAt);
const headerName = (
<>
{isMe ? (
<span className={HEADER_CONTACT_NAME_CLASS_NAME}>
{i18n('noteToSelf')}
</span>
) : (
<ContactName title={title} />
<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 (