Skip to content

[UK-973] Design change for message menu and status #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Oct 14, 2021
Merged

[UK-973] Design change for message menu and status #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9a0b231
Add class names of MessageItemMenu
HoonBaek Oct 5, 2021
fec8d46
Change the message status design to row
HoonBaek Oct 12, 2021
0d316a9
Apply that replyTypeFilter is changed to replyType in core sdk
HoonBaek Oct 12, 2021
0bc092b
Add onLoad and onError props in ImageRenderer component
HoonBaek Oct 12, 2021
ef8d229
Change opacity and icon display of QuoteMessage
HoonBaek Oct 12, 2021
de14161
Move QuoteMessage into the MessageContent
HoonBaek Oct 13, 2021
30d95cd
Fix the center align of IconButton
HoonBaek Oct 13, 2021
f921f93
Update core min.js file
HoonBaek Oct 13, 2021
8eaee50
Update snapshot
HoonBaek Oct 13, 2021
f49696e
Update class name of menu items
HoonBaek Oct 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23,666 changes: 2 additions & 23,664 deletions src/sendbird.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/smart-components/App/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export default function App(props) {
profileUrl,
config = {},
useReaction,
replyType,
// replyType,
useMessageGrouping,
colorSet,
stringSet,
Expand Down
14 changes: 1 addition & 13 deletions src/smart-components/Conversation/components/MessageHOC.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,13 @@ import React, {
} from 'react';
import PropTypes from 'prop-types';
import format from 'date-fns/format';
import './message-hoc.scss';

import MessageContent from '../../../ui/MessageContent';
import DateSeparator from '../../../ui/DateSeparator';
import Label, { LabelTypography, LabelColors } from '../../../ui/Label';
import MessageInput from '../../../ui/MessageInput';
import FileViewer from '../../../ui/FileViewer';
import RemoveMessageModal from './RemoveMessage';
import QuoteMessage from '../../../ui/QuoteMessage';
import { getClassName } from '../../../utils';

export default function MessageHoc({
message,
Expand Down Expand Up @@ -132,18 +129,9 @@ export default function MessageHoc({
</DateSeparator>
)
}
{/* Quote Message */}
{(replyType === 'QUOTE_REPLY' && message?.parentMessageId) ? (
<div className={getClassName(['sendbird-message-hoc__quote-message', isByMe ? 'outgoing' : 'incoming'])}>
<QuoteMessage message={message} isByMe={isByMe} />
</div>
) : null}
{/* Message */}
<MessageContent
className={[
'sendbird-message-hoc__message-content',
replyType === 'QUOTE_REPLY' ? 'use-quote' : '',
]}
className="sendbird-message-hoc__message-content"
userId={userId}
scrollToMessage={scrollToMessage}
channel={currentGroupChannel}
Expand Down
16 changes: 0 additions & 16 deletions src/smart-components/Conversation/components/message-hoc.scss
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion src/smart-components/Conversation/hooks/useInitialMessagesFetch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function useInitialMessagesFetch({
messageListParams.includeReaction = true;
if (replyType && replyType === 'QUOTE_REPLY') {
messageListParams.includeParentMessageInfo = true;
messageListParams.replyTypeFilter = 'all';
messageListParams.replyType = 'all';
}
if (userFilledMessageListQuery) {
Object.keys(userFilledMessageListQuery).forEach((key) => {
Expand Down
1 change: 1 addition & 0 deletions src/ui/IconButton/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
border-radius: 4px;
outline: 0px;
.sendbird-iconbutton__inner {
height: 100%;
svg {
@include themed() {
fill: t(on-bg-1);
Expand Down
16 changes: 14 additions & 2 deletions src/ui/ImageRenderer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export default function ImageRenderer({
defaultComponent,
circle,
placeHolder, // a function returing JSX / (style) => Element
onLoad,
onError,
}) {
const [showDefaultComponent, setShowDefaultComponent] = useState(false);
const [showPlaceHolder, setShowPlaceHolder] = useState(true);
Expand Down Expand Up @@ -59,8 +61,14 @@ export default function ImageRenderer({
className="sendbird-image-renderer__hidden-image-loader"
src={url}
alt={alt}
onLoad={() => setShowPlaceHolder(false)}
onError={() => setShowDefaultComponent(true)}
onLoad={() => {
setShowPlaceHolder(false);
onLoad();
}}
onError={() => {
setShowDefaultComponent(true);
onError();
}}
/>
);
}, [url]);
Expand Down Expand Up @@ -127,6 +135,8 @@ ImageRenderer.propTypes = {
]),
placeHolder: PropTypes.func,
circle: PropTypes.bool,
onLoad: PropTypes.func,
onError: PropTypes.func,
};
ImageRenderer.defaultProps = {
className: '',
Expand All @@ -137,4 +147,6 @@ ImageRenderer.defaultProps = {
height: null,
fixedSize: false,
circle: false,
onLoad: () => { },
onError: () => { },
};
6 changes: 3 additions & 3 deletions src/ui/MessageContent/__tests__/__snapshots__/MessageContent.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
onMouseOver={[Function]}
>
<div
className="sendbird-message-content__left incoming"
className="sendbird-message-content__left incoming "
>
<div
className="sendbird-context-menu"
Expand Down Expand Up @@ -78,7 +78,7 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
Mathew
</span>
<div
className=" sendbird-text-message-item-body incoming "
className="sendbird-message-content__middle__message-item-body sendbird-text-message-item-body incoming "
>
<span
className="sendbird-text-message-item-body__message sendbird-label sendbird-label--body-1 sendbird-label--color-onbackground-1"
Expand All @@ -88,7 +88,7 @@ exports[`MessageContent should do a snapshot test of the MessageContent DOM 1`]
</div>
</div>
<div
className="sendbird-message-content__right "
className="sendbird-message-content__right "
>
<span
className="sendbird-message-content__right__created-at sendbird-label sendbird-label--caption-3 sendbird-label--color-onbackground-2"
Expand Down
33 changes: 31 additions & 2 deletions src/ui/MessageContent/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@
height: 100%;
&.incoming { justify-content: flex-start; }
&.outgoing { justify-content: flex-end; }
.sendbird-message-content__middle {
.sendbird-message-content__middle__message-item-body.use-quote {
top: -8px;
width: fit-content;
}
}
}

// incoming
Expand All @@ -29,12 +35,18 @@
display: inline-flex;
flex-direction: column;
max-width: 400px;

align-items: flex-start;
.sendbird-message-content__middle__sender-name {
position: relative;
margin-left: 12px;
margin-bottom: 4px;
}
.sendbird-message-content__middle__quote-message {
width: 100%;
display: inline-flex;
&.outgoing { justify-content: flex-end }
&.incoming { justify-content: flex-start }
}
}

.sendbird-message-content__right {
Expand All @@ -44,7 +56,12 @@
&.use-reactions { width: 70px; }
margin-left: 4px;
padding-top: 18px;
&.chain-top { padding-top: 2px; }
&.chain-top {
padding-top: 2px;
&.use-quote {
padding-top: 18px;
}
}

.sendbird-message-content__right__created-at {
position: absolute;
Expand Down Expand Up @@ -88,6 +105,11 @@
justify-content: flex-end;
width: 50px;
&.use-reactions { width: 70px }
&.use-quote {
.sendbird-message-content-menu {
top: 18px;
}
}

.sendbird-message-content__left__created-at {
position: absolute;
Expand Down Expand Up @@ -120,6 +142,13 @@
display: inline-flex;
flex-direction: column;
max-width: 400px;
align-items: flex-end;
.sendbird-message-content__middle__quote-message {
width: 100%;
display: inline-flex;
&.outgoing { justify-content: flex-end }
&.incoming { justify-content: flex-start }
}
}

.sendbird-message-content__right {
Expand Down
51 changes: 43 additions & 8 deletions src/ui/MessageContent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import FileMessageItemBody from '../FileMessageItemBody';
import ThumbnailMessageItemBody from '../ThumbnailMessageItemBody';
import OGMessageItemBody from '../OGMessageItemBody';
import UnknownMessageItemBody from '../UnknownMessageItemBody';
import QuoteMessage from '../QuoteMessage';

import {
getClassName,
Expand Down Expand Up @@ -86,6 +87,8 @@ export default function MessageContent({
const chainTopClassName = chainTop ? 'chain-top' : '';
const useReactionClassName = useReaction ? 'use-reactions' : '';
const supposedHoverClassName = supposedHover ? 'supposed-hover' : '';
const useReplying: boolean = replyType === 'QUOTE_REPLY' && message?.parentMessageId;
const useReplyingClassName = useReplying ? 'use-quote' : '';

if (message?.isAdminMessage?.() || message?.messageType === 'admin') {
return (<ClientAdminMessage message={message} />);
Expand All @@ -97,7 +100,7 @@ export default function MessageContent({
onMouseLeave={() => setMouseHover(false)}
>
{/* left */}
<div className={getClassName(['sendbird-message-content__left', useReactionClassName, isByMeClassName])}>
<div className={getClassName(['sendbird-message-content__left', useReactionClassName, isByMeClassName, useReplyingClassName])}>
{(!isByMe && !chainBottom) && (
/** user profile */
<ContextMenu
Expand Down Expand Up @@ -170,7 +173,7 @@ export default function MessageContent({
</div>
{/* middle */}
<div className="sendbird-message-content__middle">
{(!isByMe && !chainTop) && (
{(!isByMe && !chainTop && !useReplying) && (
<Label
className="sendbird-message-content__middle__sender-name"
type={LabelTypography.CAPTION_2}
Expand All @@ -179,21 +182,53 @@ export default function MessageContent({
{getSenderName(message)}
</Label>
)}
{/* quote message */}
{(useReplying) ? (
<div className={getClassName(['sendbird-message-content__middle__quote-message', isByMe ? 'outgoing' : 'incoming'])}>
<QuoteMessage message={message} isByMe={isByMe} />
</div>
): null}
{/* message item body components */}
{isTextMessage(message as UserMessage) && (
<TextMessageItemBody message={message as UserMessage} isByMe={isByMe} mouseHover={mouseHover} />
<TextMessageItemBody
className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
message={message as UserMessage}
isByMe={isByMe}
mouseHover={mouseHover}
/>
)}
{(isOGMessage(message as UserMessage)) && (
<OGMessageItemBody message={message as UserMessage} isByMe={isByMe} mouseHover={mouseHover} />
<OGMessageItemBody
className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
message={message as UserMessage}
isByMe={isByMe}
mouseHover={mouseHover}
/>
)}
{(getUIKitMessageType((message as FileMessage)) === messageTypes.FILE) && (
<FileMessageItemBody message={message as FileMessage} isByMe={isByMe} mouseHover={mouseHover} />
<FileMessageItemBody
className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
message={message as FileMessage}
isByMe={isByMe}
mouseHover={mouseHover}
/>
)}
{(isThumbnailMessage(message as FileMessage)) && (
<ThumbnailMessageItemBody message={message as FileMessage} isByMe={isByMe} mouseHover={mouseHover} showFileViewer={showFileViewer} />
<ThumbnailMessageItemBody
className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
message={message as FileMessage}
isByMe={isByMe}
mouseHover={mouseHover}
showFileViewer={showFileViewer}
/>
)}
{(getUIKitMessageType((message as FileMessage)) === messageTypes.UNKNOWN) && (
<UnknownMessageItemBody message={message} isByMe={isByMe} mouseHover={mouseHover} />
<UnknownMessageItemBody
className={['sendbird-message-content__middle__message-item-body', useReplyingClassName]}
message={message}
isByMe={isByMe}
mouseHover={mouseHover}
/>
)}
{/* reactions */}
{(useReaction && message?.reactions?.length > 0) && (
Expand All @@ -214,7 +249,7 @@ export default function MessageContent({
)}
</div>
{/* right */}
<div className={getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName])}>
<div className={getClassName(['sendbird-message-content__right', chainTopClassName, useReactionClassName, useReplyingClassName])}>
{(!isByMe && !chainBottom) && (
<Label
className={getClassName(['sendbird-message-content__right__created-at', supposedHoverClassName])}
Expand Down
10 changes: 6 additions & 4 deletions src/ui/MessageItemMenu/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,16 @@

.sendbird-message-item-menu {
.sendbird-message-item-menu__trigger {
.sendbird-message-item-menu__trigger__icon {

}
.sendbird-message-item-menu__trigger__icon {}
}
}

.sendbird-message-item-menu__list {
.sendbird-message-item-menu__list__menu-item {

&.menu-item-copy {}
&.menu-item-reply {}
&.menu-item-edit {}
&.menu-item-resend {}
&.menu-item-delete {}
}
Copy link
Contributor

@sravan-s sravan-s Oct 14, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets remove it when we merge to main

}
10 changes: 5 additions & 5 deletions src/ui/MessageItemMenu/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ export default function MessageItemMenu({
>
{showMenuItemCopy && (
<MenuItem
className="sendbird-message-item-menu__list__menu-item"
className="sendbird-message-item-menu__list__menu-item menu-item-copy"
onClick={() => {
copyToClipboard((message as UserMessage)?.message);
closeDropdown();
Expand All @@ -111,7 +111,7 @@ export default function MessageItemMenu({
)}
{showMenuItemReply && (
<MenuItem
className="sendbird-message-item-menu__list__menu-item"
className="sendbird-message-item-menu__list__menu-item menu-item-reply"
onClick={() => {
setQuoteMessage(message);
closeDropdown();
Expand All @@ -123,7 +123,7 @@ export default function MessageItemMenu({
)}
{showMenuItemEdit && (
<MenuItem
className="sendbird-message-item-menu__list__menu-item"
className="sendbird-message-item-menu__list__menu-item menu-item-edit"
onClick={() => {
if (!disabled) {
showEdit(true);
Expand All @@ -136,7 +136,7 @@ export default function MessageItemMenu({
)}
{showMenuItemResend && (
<MenuItem
className="sendbird-message-item-menu__list__menu-item"
className="sendbird-message-item-menu__list__menu-item menu-item-resend"
onClick={() => {
if (!disabled) {
resendMessage(message);
Expand All @@ -149,7 +149,7 @@ export default function MessageItemMenu({
)}
{showMenuItemDelete && (
<MenuItem
className="sendbird-message-item-menu__list__menu-item"
className="sendbird-message-item-menu__list__menu-item menu-item-delete"
onClick={() => {
if (!disabled) {
showRemove(true);
Expand Down
Loading