Merge pull request #1438 from florianorben/PLT-924

PLT-924: Combine sequential messages from same user to look like one …

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) &&
+                        !prevPostIsComment &&
-                        !Utils.isComment(post) &&
+                        !postIsComment &&
-                        (!post.props || !post.props.from_webhook) &&
+                        !postFromWebhook &&
-                        (!prevPost.props || !prevPost.props.from_webhook)) {
+                        !prevPostFromWebhook) {
                     hideProfilePic = true;
                 }
             }

web/sass-files/sass/partials/_post.scss

@@ -393,6 +393,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 {
@@ -408,13 +417,12 @@ body.ios {
 		.post__content {
 			padding: 0;
 		}
-		.post-body {
+		&.same--user {
-			border-left: 4px solid #EEE;
+			.post__content {
-			width: 570px;
+				padding-left: 46px;
-			margin-left: 30px;
+			}
-			padding-left: 10px;
+			.post-header-post {
-			.post-link {
+				visibility: hidden;
-				display: none;
 			}
 		}
 	}

web/sass-files/sass/partials/_responsive.scss

@@ -9,8 +9,9 @@
                 }
             }
             .post {
+                &.post--comment {
 		            &.same--root {
-                    margin-left: 60px;
+		                margin-left: 104px;
 		                padding-left: 10px;
 		                border-left: 4px solid #EEE;
 		                div.post-profile-img__container {
@@ -20,6 +21,7 @@
 		                }
 		                .post__content {
 		                    width: 825px;
+		                    margin-left: 0;
 		                }
 		                .post-body {
 		                    width: 736px;
@@ -27,7 +29,6 @@
 		                    margin: 3px 0 0;
 		                }
 		            }
-                &.post--comment {
                     &.other--root {
                         .post-comment {
                             margin-left: 0;
@@ -105,24 +106,25 @@
         }
     }
     .post {
-        &.same--root {
+		&.same--root.same--user {
-            margin-left: 60px;
+			.post-header-post {
-            padding-left: 10px;
+				visibility: hidden;
-            border-left: 4px solid #EEE;
+				width: 100%;
-            div.post-profile-img__container {
+				position: relative;
-                .post-profile-img {
+				top: -5px;
+				.post-header-col.post-header__name {
 					display: none;
 				}
 			}
-            .post__content {
-                width: 825px;
-            }
 			.post-body {
-                width: 736px;
+				top: -15px;
-                border: none;
+				margin-bottom: -10px;
-                margin: 3px 0 0;
+			}
+			&:hover .post-header-post {
+				visibility: visible;
 			}
 		}
+
         &.post--comment {
             &.other--root {
                 .post-comment {
@@ -132,6 +134,32 @@
 			&.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 {
@@ -358,9 +386,6 @@
         }
     }
     .post {
-        &.same--root {
-            margin-left: 25px;
-        }
         &:hover {
             background: none;
             .post-header .post-header-col.post-header__reply {
@@ -370,7 +395,11 @@
             }
         }
         &.post--comment {
+            &.same--root {
+                margin-left: 25px;
+            }
             &.other--root {
+               margin-left: 0;
                 &:hover {
                     background: none;
                 }
@@ -381,6 +410,9 @@
                 content: '...';
             }
         }
+		&.same--root.same--user .post__content{
+			padding-left: 0;
+		}
     }
     .signup-team__container {
         padding: 30px 0;