From 27a30f393f13accf4f64bd36db08c5be35a7869f Mon Sep 17 00:00:00 2001 From: mrval Date: Wed, 22 Feb 2023 13:42:32 +0100 Subject: [PATCH 1/2] add sender avatar to messenger --- .../chat-view-container.tsx | 2 + .../chat-view-container/chat-view.tsx | 7 +++- src/components/message/index.tsx | 10 +++++ src/components/messenger/chat/index.tsx | 1 + src/platform-apps/channels/styles.scss | 39 ++++++++++++++++--- 5 files changed, 52 insertions(+), 7 deletions(-) diff --git a/src/components/chat-view-container/chat-view-container.tsx b/src/components/chat-view-container/chat-view-container.tsx index 685020908..15c37e519 100644 --- a/src/components/chat-view-container/chat-view-container.tsx +++ b/src/components/chat-view-container/chat-view-container.tsx @@ -59,6 +59,7 @@ interface PublicProperties { channelId: string; className?: string; isDirectMessage?: boolean; + showSenderAvatar?: boolean; } export interface State { countNewMessages: number; @@ -285,6 +286,7 @@ export class Container extends React.Component { resetCountNewMessage={this.resetCountNewMessage} onMessageInputRendered={this.onMessageInputRendered} isDirectMessage={this.props.isDirectMessage} + showSenderAvatar={this.props.showSenderAvatar} reply={this.state.reply} onReply={this.onReply} onRemove={this.removeReply} diff --git a/src/components/chat-view-container/chat-view.tsx b/src/components/chat-view-container/chat-view.tsx index 69a71b292..e2b0e1e79 100644 --- a/src/components/chat-view-container/chat-view.tsx +++ b/src/components/chat-view-container/chat-view.tsx @@ -42,6 +42,7 @@ export interface Properties { reply?: null | ParentMessage; onMessageInputRendered: (ref: RefObject) => void; isDirectMessage: boolean; + showSenderAvatar?: boolean; } export interface State { @@ -127,14 +128,15 @@ export class ChatView extends React.Component {
{this.formatDayHeader(day)}
- {allMessages.map((message) => { + {allMessages.map((message, index) => { + const isFirstFromUser = index === 0 || message.sender.userId !== allMessages[index - 1].sender.userId; const isUserOwnerOfTheMessage = // eslint-disable-next-line eqeqeq this.props.user && message.sender && this.props.user.id == message.sender.userId; return ( { onReply={this.props.onReply} parentMessageText={message.parentMessageText} getUsersForMentions={this.searchMentionableUsers} + showSenderAvatar={this.props.showSenderAvatar} {...message} /> ); diff --git a/src/components/message/index.tsx b/src/components/message/index.tsx index 11f1f86e8..1b91bb8c1 100644 --- a/src/components/message/index.tsx +++ b/src/components/message/index.tsx @@ -28,6 +28,7 @@ interface Properties extends MessageModel { updatedAt: number; parentMessageText?: string; getUsersForMentions: (search: string) => Promise; + showSenderAvatar?: boolean; } export interface State { @@ -215,8 +216,17 @@ export class Message extends React.Component { className={classNames('message', this.props.className, { 'message--owner': isOwner, 'message--media': Boolean(media), + 'message--sender-avatar': this.props.showSenderAvatar, })} > + {this.props.showSenderAvatar && ( +
+
+
+ )}
{(message || media || preview) && ( <> diff --git a/src/components/messenger/chat/index.tsx b/src/components/messenger/chat/index.tsx index e8663bc83..8a2bb0cf9 100644 --- a/src/components/messenger/chat/index.tsx +++ b/src/components/messenger/chat/index.tsx @@ -179,6 +179,7 @@ export class Container extends React.Component { channelId={this.props.activeMessengerId} className='direct-message-chat__channel' isDirectMessage + showSenderAvatar={!this.isOneOnOne()} />
diff --git a/src/platform-apps/channels/styles.scss b/src/platform-apps/channels/styles.scss index 6ac8700f0..2f2440c00 100644 --- a/src/platform-apps/channels/styles.scss +++ b/src/platform-apps/channels/styles.scss @@ -243,14 +243,9 @@ $scrollbar-width: 5px; .message { margin: 8px 16px; - background-color: theme.$color-primary-3; - border-radius: 8px 8px 8px 0px; overflow: hidden; &--owner { - background-color: theme.$color-secondary-3; - border-radius: 8px 8px 0px 8px; - .message__block-body { transition: background-color 0.3s ease-out; position: relative; @@ -274,6 +269,8 @@ $scrollbar-width: 5px; } .message__block { + background-color: theme.$color-secondary-3; + border-radius: 8px 8px 0px 8px; .message__author-name { display: none; } @@ -286,7 +283,17 @@ $scrollbar-width: 5px; } } + &--sender-avatar { + display: flex; + + .message__block { + flex: 1 0 auto; + } + } + &__block { + background-color: theme.$color-primary-3; + border-radius: 8px 8px 8px 0px; position: relative; padding: 8px; color: theme.$card-text-color; @@ -414,6 +421,22 @@ $scrollbar-width: 5px; } } + &__left { + margin-right: 8px; + width: 16px; + } + + &__author-avatar { + display: none; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + width: 16px; + height: 16px; + overflow: hidden; + border-radius: 50%; + } + &__author-name { font-weight: 500; font-size: 12px; @@ -421,6 +444,12 @@ $scrollbar-width: 5px; color: theme.$color-greyscale-12; } + &.messages__message--first-in-group { + .message__author-avatar { + display: block; + } + } + .emoji-mart-emoji { height: 19px; } From acf4503b09e29b0ed6f838f0c7ff76cac596aad4 Mon Sep 17 00:00:00 2001 From: mrval Date: Wed, 22 Feb 2023 13:51:02 +0100 Subject: [PATCH 2/2] add ut --- src/components/chat-view-container/chat-view.test.tsx | 6 +++--- src/components/chat-view-container/chat-view.tsx | 4 +++- src/components/message/index.test.tsx | 11 +++++++++++ 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/chat-view-container/chat-view.test.tsx b/src/components/chat-view-container/chat-view.test.tsx index 345549bcb..df14c86c4 100644 --- a/src/components/chat-view-container/chat-view.test.tsx +++ b/src/components/chat-view-container/chat-view.test.tsx @@ -102,13 +102,13 @@ describe('ChatView', () => { }); it('passes className prop to Message', () => { - const wrapper = subject({ messages: MESSAGES_TEST }); + const wrapper = subject({ messages: MESSAGES_TEST, showSenderAvatar: true }); const classNames = wrapper.find(Message).map((m) => m.prop('className')); expect(classNames).toIncludeAllMembers([ - 'messages__message', - 'messages__message', + 'messages__message messages__message--first-in-group', + 'messages__message messages__message--first-in-group', 'messages__message', 'messages__message', ]); diff --git a/src/components/chat-view-container/chat-view.tsx b/src/components/chat-view-container/chat-view.tsx index e2b0e1e79..7e721dc3e 100644 --- a/src/components/chat-view-container/chat-view.tsx +++ b/src/components/chat-view-container/chat-view.tsx @@ -136,7 +136,9 @@ export class ChatView extends React.Component { return ( { expect(mentions).toHaveLength(1); }); + it('renders author avatar', () => { + const wrapper = subject({ + message: 'text', + showSenderAvatar: true, + }); + + const authorAvatarElement = wrapper.find('.message__author-avatar'); + + expect(authorAvatarElement.prop('style').backgroundImage).toEqual(`url(${sender.profileImage})`); + }); + it('renders with a tag', () => { const wrapper = subject({ message: 'http://zos.io',