cheveguerra/whaticket-community
1
0
Fork 0
mirror of https://github.com/cheveguerra/whaticket-community.git synced 2026-04-18 03:39:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

improvement: better space between msgs

Browse Source
This commit is contained in:
canove
2020-08-04 16:09:24 -03:00
parent 87dc0c0625
commit 41f8fff611
1 changed files with 18 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/MessagesList/index.js
View File

@@ -130,6 +130,7 @@ const useStyles = makeStyles(theme => ({
position: "relative",
backgroundColor: "#ffffff",
color: "#303030",
alignSelf: "flex-start",
borderTopLeftRadius: 0,
borderTopRightRadius: 8,
@@ -152,6 +153,7 @@ const useStyles = makeStyles(theme => ({
position: "relative",
backgroundColor: "#dcf8c6",
color: "#303030",
alignSelf: "flex-end",
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
@@ -453,7 +455,7 @@ const MessagesList = () => {
);
}
}
if (index + 1 === messagesList.length) {
if (index === messagesList.length - 1) {
return (
<div
key={`ref-${message.createdAt}`}
@@ -464,6 +466,19 @@ const MessagesList = () => {
}
};
const renderMessageDivider = (message, index) => {
if (index < messagesList.length && index > 0) {
let messageUser = messagesList[index].fromMe;
let previousMessageUser = messagesList[index - 1].fromMe;
if (messageUser !== previousMessageUser) {
return (
<span style={{ marginTop: 16 }} key={`divider-${message.id}`}></span>
);
}
}
};
const renderMessages = () => {
if (messagesList.length > 0) {
const viewMessagesList = messagesList.map((message, index) => {
@@ -471,6 +486,7 @@ const MessagesList = () => {
return (
<LinkifyWithTargetBlank key={message.id}>
{renderDailyTimestamps(message, index)}
{renderMessageDivider(message, index)}
<div className={classes.messageLeft}>
{message.mediaUrl && checkMessaageMedia(message)}
<div className={classes.textContentItem}>
@@ -486,6 +502,7 @@ const MessagesList = () => {
return (
<LinkifyWithTargetBlank key={message.id}>
{renderDailyTimestamps(message, index)}
{renderMessageDivider(message, index)}
<div className={classes.messageRight}>
{message.mediaUrl && checkMessaageMedia(message)}
<div className={classes.textContentItem}>