PLT-924: Combine sequential messages from same user to look like one message (still edits as separate messages)

3 files changed, 101 insertions, 56 deletions

diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx
index 087ca1df2..ec8223203 100644
--- a/web/react/components/posts_view.jsx
+++ b/web/react/components/posts_view.jsx
@@ -83,9 +83,14 @@ export default class PostsView extends React.Component {
             let hideProfilePic = false;
 
             if (prevPost) {
-                sameUser = prevPost.user_id === post.user_id && post.create_at - prevPost.create_at <= 1000 * 60 * 5;
+                const postIsComment = Utils.isComment(post);
+                const prevPostIsComment = Utils.isComment(prevPost);
+                const postFromWebhook = Boolean(post.props && post.props.from_webhook);
+                const prevPostFromWebhook = Boolean(prevPost.props && prevPost.props.from_webhook);
 
-                sameRoot = Utils.isComment(post) && (prevPost.id === post.root_id || prevPost.root_id === post.root_id);
+                sameUser = prevPost.user_id === post.user_id && postFromWebhook === prevPostFromWebhook &&
+                    post.create_at - prevPost.create_at <= 1000 * 60 * 5;
+                sameRoot = (postIsComment && (prevPost.id === post.root_id || prevPost.root_id === post.root_id)) || (!postIsComment && !prevPostIsComment && sameUser);
 
                 // hide the profile pic if:
                 //     the previous post was made by the same user as the current post,
@@ -94,10 +99,10 @@ export default class PostsView extends React.Component {
                 //     the current post is not from a webhook
                 //     and the previous post is not from a webhook
                 if ((prevPost.user_id === post.user_id) &&
-                        !Utils.isComment(prevPost) &&
-                        !Utils.isComment(post) &&
-                        (!post.props || !post.props.from_webhook) &&
-                        (!prevPost.props || !prevPost.props.from_webhook)) {
+                        !prevPostIsComment &&
+                        !postIsComment &&
+                        !postFromWebhook &&
+                        !prevPostFromWebhook) {
                     hideProfilePic = true;
                 }
             }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index 45b7b7f23..7b26581e9 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -392,6 +392,15 @@ body.ios {
 			.post-body {
 				@include border-radius(0 4px 4px 0);
 			}
+			.post-body {
+				border-left: 4px solid #EEE;
+				width: 570px;
+				margin-left: 30px;
+				padding-left: 10px;
+				.post-link {
+					display: none;
+				}
+			}
 		}
 	}
 	&.same--root {
@@ -407,13 +416,12 @@ body.ios {
 		.post__content {
 			padding: 0;
 		}
-		.post-body {
-			border-left: 4px solid #EEE;
-			width: 570px;
-			margin-left: 30px;
-			padding-left: 10px;
-			.post-link {
-				display: none;
+		&.same--user {
+			.post__content {
+				padding-left: 46px;
+			}
+			.post-header-post {
+				visibility: hidden;
 			}
 		}
 	}
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index cb140dce6..3877bfaf0 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -9,25 +9,26 @@
                 }
             }
             .post {
-                &.same--root {
-                    margin-left: 60px;
-                    padding-left: 10px;
-                    border-left: 4px solid #EEE;
-                    div.post-profile-img__container {
-                        .post-profile-img {
-                            display: none;
-                        }
-                    }
-                    .post__content {
-                        width: 825px;
-                    }
-                    .post-body {
-                        width: 736px;
-                        border: none;
-                        margin: 3px 0 0;
-                    }
-                }
                 &.post--comment {
+		            &.same--root {
+		                margin-left: 104px;
+		                padding-left: 10px;
+		                border-left: 4px solid #EEE;
+		                div.post-profile-img__container {
+		                    .post-profile-img {
+		                        display: none;
+		                    }
+		                }
+		                .post__content {
+		                    width: 825px;
+		                    margin-left: 0;
+		                }
+		                .post-body {
+		                    width: 736px;
+		                    border: none;
+		                    margin: 3px 0 0;
+		                }
+		            }
                     &.other--root {
                         .post-comment {
                             margin-left: 0;
@@ -105,34 +106,61 @@
         }
     }
     .post {
-        &.same--root {
-            margin-left: 60px;
-            padding-left: 10px;
-            border-left: 4px solid #EEE;
-            div.post-profile-img__container {
-                .post-profile-img {
-                    display: none;
-                }
-            }
-            .post__content {
-                width: 825px;
-            }
-            .post-body {
-                width: 736px;
-                border: none;
-                margin: 3px 0 0;
-            }
-        }
+		&.same--root.same--user {
+			.post-header-post {
+				visibility: hidden;
+				width: 100%;
+				position: relative;
+				top: -5px;
+				.post-header-col.post-header__name {
+					display: none;
+				}
+			}
+			.post-body {
+				top: -15px;
+				margin-bottom: -10px;
+			}
+			&:hover .post-header-post {
+				visibility: visible;
+			}
+		}
+
         &.post--comment {
             &.other--root {
                 .post-comment {
                     margin-left: 0;
                 }
             }
-            &.same--root {
-                margin-top: 5px;
-                margin-bottom: 5px;
-            }
+			&.same--root {
+				margin-top: 5px;
+				margin-bottom: 5px;
+				margin-left: 104px;
+				padding-left: 10px;
+				border-left: 4px solid #EEE;
+				div.post-profile-img__container {
+					.post-profile-img {
+						display: none;
+					}
+				}
+				.post-body {
+					margin-left: 0;
+					border-left: 0;
+				}
+				&.same--user {
+					.post__content {
+						margin-left: 0;
+						padding-left: 0;
+					}
+				}
+			}
+			.post__content {
+				width: 810px;
+			}
+			.post-body {
+				width: 736px;
+				border: none;
+				margin: 3px 0 0;
+			}
         }
         .post__content {
             width: 880px;
@@ -353,9 +381,6 @@
         }
     }
     .post {
-        &.same--root {
-            margin-left: 25px;
-        }
         &:hover {
             background: none;
             .post-header .post-header-col.post-header__reply {
@@ -365,7 +390,11 @@
             }
         }
         &.post--comment {
+            &.same--root {
+                margin-left: 25px;
+            }
             &.other--root {
+               margin-left: 0;
                 &:hover {
                     background: none;
                 }
@@ -376,6 +405,9 @@
                 content: '...';
             }
         }
+		&.same--root.same--user .post__content{
+			padding-left: 0;
+		}
     }
     .signup-team__container {
         padding: 30px 0;