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

Fix missing avatars in groups

Browse source
This commit is contained in:
Evan Hahn 2021-01-27 15:15:43 -06:00 committed by GitHub
parent a8787e7c9e
commit 1da724edf2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 182 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
stylesheets/_modules.scss
View file

@ -103,10 +103,6 @@
margin-left: 32px;
}
.module-message--incoming.module-message--group {
margin-left: 52px;
}
.module-message__buttons {
position: absolute;
top: 0;
@ -298,6 +294,11 @@
right: 8px;
}
.module-message__container-outer {
line-height: 0;
display: flex;
flex-direction: column;
}
.module-message__container {
position: relative;
display: inline-block;
@ -1387,13 +1388,21 @@
}
}
.module-message__author-avatar-container {
align-items: flex-end;
display: flex;
justify-content: center;
margin-right: 8px;
&--with-reactions {
padding-bottom: 12px;
}
}
.module-message__author-avatar {
@include button-reset;
cursor: pointer;
position: absolute;
bottom: 0px;
right: calc(100% + 8px);
&:focus {
outline: none;
@ -1415,11 +1424,21 @@
}
.module-message__reactions {
position: absolute;
bottom: 0px;
position: relative;
z-index: 2;
height: 22px;
display: flex;
&--incoming {
align-self: flex-end;
padding-right: 8px;
margin-left: 8px;
}
&--outgoing {
align-self: flex-start;
padding-left: 8px;
margin-right: 8px;
}
}
.module-message__reactions__reaction {
@ -10764,8 +10783,16 @@ $contact-modal-padding: 18px;
// 2px to allow for 1px border
max-width: 302px;
&--incoming {
align-self: flex-start;
}
&--outgoing {
align-self: flex-end;
}
&--with-reactions {
margin-bottom: 12px;
margin-bottom: -10px;
}
&--deleted-for-everyone {

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

@ -1,4 +1,4 @@
// Copyright 2020 Signal Messenger, LLC
// Copyright 2020-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
@ -201,7 +201,7 @@ story.add('Older', () => {
return renderBothDirections(props);
});
story.add('Reactions', () => {
story.add('Reactions (wider message)', () => {
const props = createProps({
text: 'Hello there from a pal!',
timestamp: Date.now() - 180 * 24 * 60 * 60 * 1000,
@ -293,6 +293,98 @@ story.add('Reactions', () => {
return renderBothDirections(props);
});
story.add('Reactions (short message)', () => {
const props = createProps({
text: 'h',
timestamp: Date.now(),
reactions: [
{
emoji: '👍',
from: {
isMe: true,
id: '+14155552672',
phoneNumber: '+14155552672',
name: 'Me',
title: 'Me',
},
timestamp: Date.now(),
},
{
emoji: '👍',
from: {
id: '+14155552672',
phoneNumber: '+14155552672',
name: 'Amelia Briggs',
title: 'Amelia',
},
timestamp: Date.now(),
},
{
emoji: '👍',
from: {
id: '+14155552673',
phoneNumber: '+14155552673',
name: 'Amelia Briggs',
title: 'Amelia',
},
timestamp: Date.now(),
},
{
emoji: '😂',
from: {
id: '+14155552674',
phoneNumber: '+14155552674',
name: 'Amelia Briggs',
title: 'Amelia',
},
timestamp: Date.now(),
},
{
emoji: '😂',
from: {
id: '+14155552676',
phoneNumber: '+14155552676',
name: 'Amelia Briggs',
title: 'Amelia',
},
timestamp: Date.now(),
},
{
emoji: '😡',
from: {
id: '+14155552677',
phoneNumber: '+14155552677',
name: 'Amelia Briggs',
title: 'Amelia',
},
timestamp: Date.now(),
},
{
emoji: '👎',
from: {
id: '+14155552678',
phoneNumber: '+14155552678',
name: 'Amelia Briggs',
title: 'Amelia',
},
timestamp: Date.now(),
},
{
emoji: '❤️',
from: {
id: '+14155552679',
phoneNumber: '+14155552679',
name: 'Amelia Briggs',
title: 'Amelia',
},
timestamp: Date.now(),
},
],
});
return renderBothDirections(props);
});
story.add('Avatar in Group', () => {
const props = createProps({
authorAvatarPath: pngUrl,

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

@ -1,10 +1,9 @@
// Copyright 2018-2020 Signal Messenger, LLC
// Copyright 2018-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React from 'react';
import ReactDOM, { createPortal } from 'react-dom';
import classNames from 'classnames';
import Measure from 'react-measure';
import { drop, groupBy, orderBy, take } from 'lodash';
import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu';
import { Manager, Popper, Reference } from 'react-popper';
@ -203,7 +202,6 @@ type State = {
isWide: boolean;
containerWidth: number;
canDeleteForEveryone: boolean;
};
@ -252,7 +250,6 @@ export class Message extends React.PureComponent<Props, State> {
isWide: this.wideMl.matches,
containerWidth: 0,
canDeleteForEveryone: props.canDeleteForEveryone,
};
}
@ -286,6 +283,11 @@ export class Message extends React.PureComponent<Props, State> {
return newState;
}
private hasReactions(): boolean {
const { reactions } = this.props;
return Boolean(reactions && reactions.length);
}
public handleWideMlChange = (event: MediaQueryListEvent): void => {
this.setState({ isWide: event.matches });
};
@ -532,7 +534,6 @@ export class Message extends React.PureComponent<Props, State> {
expirationTimestamp,
isSticker,
isTapToViewExpired,
reactions,
status,
text,
textPending,
@ -544,7 +545,6 @@ export class Message extends React.PureComponent<Props, State> {
const isShowingImage = this.isShowingImage();
const withImageNoCaption = Boolean(!isSticker && !text && isShowingImage);
const withReactions = reactions && reactions.length > 0;
const metadataDirection = isSticker ? undefined : direction;
return (
@ -552,7 +552,9 @@ export class Message extends React.PureComponent<Props, State> {
className={classNames(
'module-message__metadata',
`module-message__metadata--${direction}`,
withReactions ? 'module-message__metadata--with-reactions' : null,
this.hasReactions()
? 'module-message__metadata--with-reactions'
: null,
withImageNoCaption
? 'module-message__metadata--with-image-no-caption'
: null
@ -1061,24 +1063,30 @@ export class Message extends React.PureComponent<Props, State> {
}
return (
<button
type="button"
className="module-message__author-avatar"
onClick={() => showContactModal(authorId)}
tabIndex={0}
<div
className={classNames('module-message__author-avatar-container', {
'module-message__author-avatar-container--with-reactions': this.hasReactions(),
})}
>
<Avatar
avatarPath={authorAvatarPath}
color={authorColor}
conversationType="direct"
i18n={i18n}
name={authorName}
phoneNumber={authorPhoneNumber}
profileName={authorProfileName}
title={authorTitle}
size={28}
/>
</button>
<button
type="button"
className="module-message__author-avatar"
onClick={() => showContactModal(authorId)}
tabIndex={0}
>
<Avatar
avatarPath={authorAvatarPath}
color={authorColor}
conversationType="direct"
i18n={i18n}
name={authorName}
phoneNumber={authorPhoneNumber}
profileName={authorProfileName}
title={authorTitle}
size={28}
/>
</button>
</div>
);
}
@ -1718,9 +1726,9 @@ export class Message extends React.PureComponent<Props, State> {
};
public renderReactions(outgoing: boolean): JSX.Element | null {
const { reactions, i18n } = this.props;
const { reactions = [], i18n } = this.props;
if (!reactions || (reactions && reactions.length === 0)) {
if (!this.hasReactions()) {
return null;
}
@ -1763,25 +1771,7 @@ export class Message extends React.PureComponent<Props, State> {
someNotRendered &&
maybeNotRendered.some(res => res.some(re => Boolean(re.from.isMe)));
const { reactionViewerRoot, containerWidth } = this.state;
// Calculate the width of the reactions container
const reactionsWidth = toRender.reduce((sum, res, i, arr) => {
if (someNotRendered && i === arr.length - 1) {
return sum + 28;
}
if (res.count > 1) {
return sum + 40;
}
return sum + 28;
}, 0);
const reactionsXAxisOffset = Math.max(
containerWidth - reactionsWidth - 6,
6
);
const { reactionViewerRoot } = this.state;
const popperPlacement = outgoing ? 'bottom-end' : 'bottom-start';
@ -1800,9 +1790,6 @@ export class Message extends React.PureComponent<Props, State> {
? 'module-message__reactions--outgoing'
: 'module-message__reactions--incoming'
)}
style={{
[outgoing ? 'right' : 'left']: `${reactionsXAxisOffset}px`,
}}
>
{toRender.map((re, i) => {
const isLast = i === toRender.length - 1;
@ -2101,7 +2088,6 @@ export class Message extends React.PureComponent<Props, State> {
isTapToView,
isTapToViewExpired,
isTapToViewError,
reactions,
} = this.props;
const { isSelected } = this.state;
@ -2131,9 +2117,7 @@ export class Message extends React.PureComponent<Props, State> {
isTapToViewError
? 'module-message__container--with-tap-to-view-error'
: null,
reactions && reactions.length > 0
? 'module-message__container--with-reactions'
: null,
this.hasReactions() ? 'module-message__container--with-reactions' : null,
deletedForEveryone
? 'module-message__container--deleted-for-everyone'
: null
@ -2143,24 +2127,13 @@ export class Message extends React.PureComponent<Props, State> {
};
return (
<Measure
bounds
onResize={({ bounds = { width: 0 } }) => {
this.setState({ containerWidth: bounds.width });
}}
>
{({ measureRef }) => (
<div
ref={measureRef}
className={containerClassnames}
style={containerStyles}
>
{this.renderAuthor()}
{this.renderContents()}
{this.renderAvatar()}
</div>
)}
</Measure>
<div className="module-message__container-outer">
<div className={containerClassnames} style={containerStyles}>
{this.renderAuthor()}
{this.renderContents()}
</div>
{this.renderReactions(direction === 'outgoing')}
</div>
);
}
@ -2168,7 +2141,6 @@ export class Message extends React.PureComponent<Props, State> {
const {
authorPhoneNumber,
attachments,
conversationType,
direction,
id,
isSticker,
@ -2194,8 +2166,7 @@ export class Message extends React.PureComponent<Props, State> {
'module-message',
`module-message--${direction}`,
isSelected ? 'module-message--selected' : null,
expiring ? 'module-message--expired' : null,
conversationType === 'group' ? 'module-message--group' : null
expiring ? 'module-message--expired' : null
)}
tabIndex={0}
// We pretend to be a button because we sometimes contain buttons and a button
@ -2208,11 +2179,11 @@ export class Message extends React.PureComponent<Props, State> {
>
{this.renderError(direction === 'incoming')}
{this.renderMenu(direction === 'outgoing', triggerId)}
{this.renderAvatar()}
{this.renderContainer()}
{this.renderError(direction === 'outgoing')}
{this.renderMenu(direction === 'incoming', triggerId)}
{this.renderContextMenu(triggerId)}
{this.renderReactions(direction === 'outgoing')}
</div>
);
}

12
ts/util/lint/exceptions.json
View file

@ -14815,7 +14815,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.js",
"line": " this.audioRef = react_1.default.createRef();",
"lineNumber": 74,
"lineNumber": 73,
"reasonCategory": "usageTrusted",
"updated": "2020-08-28T16:12:19.904Z"
},
@ -14823,7 +14823,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.js",
"line": " this.focusRef = react_1.default.createRef();",
"lineNumber": 75,
"lineNumber": 74,
"reasonCategory": "usageTrusted",
"updated": "2020-09-11T17:24:56.124Z",
"reasonDetail": "Used for managing focus only"
@ -14832,7 +14832,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.js",
"line": " this.reactionsContainerRef = react_1.default.createRef();",
"lineNumber": 76,
"lineNumber": 75,
"reasonCategory": "usageTrusted",
"updated": "2020-08-28T16:12:19.904Z",
"reasonDetail": "Used for detecting clicks outside reaction viewer"
@ -14841,7 +14841,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " public audioRef: React.RefObject<HTMLAudioElement> = React.createRef();",
"lineNumber": 216,
"lineNumber": 214,
"reasonCategory": "usageTrusted",
"updated": "2020-09-08T20:19:01.913Z"
},
@ -14849,7 +14849,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " public focusRef: React.RefObject<HTMLDivElement> = React.createRef();",
"lineNumber": 218,
"lineNumber": 216,
"reasonCategory": "usageTrusted",
"updated": "2020-09-08T20:19:01.913Z"
},
@ -14857,7 +14857,7 @@
"rule": "React-createRef",
"path": "ts/components/conversation/Message.tsx",
"line": " > = React.createRef();",
"lineNumber": 222,
"lineNumber": 220,
"reasonCategory": "usageTrusted",
"updated": "2020-08-28T19:36:40.817Z"
},