Merge branch 'embedded-posts'

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -299,9 +299,17 @@ createWidget('post-contents', {
 
     const repliesBelow = state.repliesBelow;
     if (repliesBelow.length) {
-      result.push(h('section.embedded-posts.bottom', repliesBelow.map(p => {
-        return this.attach('embedded-post', p, { model: this.store.createRecord('post', p) });
-      })));
+      result.push(h('section.embedded-posts.bottom', [ 
+        repliesBelow.map(p => {
+          return this.attach('embedded-post', p, { model: this.store.createRecord('post', p) });
+        }),
+        this.attach('button', {
+          title: 'post.collapse',
+          icon: 'chevron-up',
+          action: 'toggleRepliesBelow',
+          className: 'btn collapse-up'
+        })
+      ]));
     }
 
     return result;
@@ -376,7 +384,15 @@ createWidget('post-article', {
         return this.attach('embedded-post', p, { model: this.store.createRecord('post', p), state: { above: true } });
       });
 
-      rows.push(h('div.row', h('section.embedded-posts.top.topic-body.offset2', replies)));
+      rows.push(h('div.row', h('section.embedded-posts.top.topic-body.offset2', [
+        this.attach('button', {
+          title: 'post.collapse',
+          icon: 'chevron-down',
+          action: 'toggleReplyAbove',
+          className: 'btn collapse-down'
+        }),
+        replies
+      ])));
     }
 
     rows.push(h('div.row', [this.attach('post-avatar', attrs), this.attach('post-body', attrs)]));

app/assets/stylesheets/common/base/topic-post.scss

@@ -433,7 +433,7 @@ blockquote > *:last-child {
   }
 
   .small-action-desc {
-    padding: 1em 1em 1.25em 1em;
+    padding: 1em;
     text-transform: uppercase;
     font-weight: bold;
     font-size: $font-down-1;

app/assets/stylesheets/desktop/topic-post.scss

@@ -207,7 +207,7 @@ nav.post-controls {
 
   .topic-body {
     box-sizing: border-box;
-    width: calc(100% - 60px); // [100% - .topic-avatar width]
+    width: calc(100% - 70px); // [100% - .topic-avatar width]
     // WARNING: overflow hide is required for quoted / embedded images
     // which expect "normal" post width, but expansions are narrower
     overflow: hidden;
@@ -221,10 +221,27 @@ nav.post-controls {
   }
 
   .topic-avatar {
-    padding-left: 15px;
+    padding-left: 25px;
     padding-top: 15px;
   }
 
+  .row {
+    border:  1px solid $primary-low;
+  }
+
+  .collapse-down, .collapse-up {
+    position: absolute;
+    color: $primary-medium;
+    background: $secondary;
+    border:  1px solid $primary-low;
+    padding: 6px 9px 8px;
+    z-index: 99; // Needs to be higher than topic-avatar
+    &:hover {
+      background: $primary-low;
+      color: $primary;
+    }
+  }
+
   // bottom means "reply expansion" below a post
   &.bottom {
     &.hidden {
@@ -233,15 +250,32 @@ nav.post-controls {
     }
   }
   &.bottom {
+    .collapse-up {
+      transform: translate(-50%, -164%);
+    }
     .row {
-      padding-top: 7px;
+      padding-bottom: .5em;
+      border-top: none;
+      border-bottom: none;
+      .topic-avatar, .topic-body {
+        border-top: 1px solid $primary-low;
+      }
     }
   }
 
   // top means "in reply to expansion" above a post
   &.top {
+    .collapse-down {
+      transform: translate(-50%, 55%);
+    }
     margin-left: 56px;
     width: 701px;
+    .row {
+      border-bottom: none;
+      .topic-avatar, .topic-body {
+        border-top: 1px solid $primary-low;
+      }
+    }
   }
   &.top.topic-body {
     padding: 0;
@@ -615,7 +649,7 @@ $topic-avatar-width: 45px;
   position: relative;
   z-index: z("base");
   border-top: 1px solid $primary-low;
-  padding: 12px $topic-body-width-padding 15px $topic-body-width-padding;
+  padding: 12px $topic-body-width-padding 0 $topic-body-width-padding;
 }
 
 .topic-avatar {
@@ -636,6 +670,11 @@ $topic-avatar-width: 45px;
   border-top: none;
 }
 
+.time-gap + .topic-post .embedded-posts.top {
+  border-bottom: 1px solid $primary-low;
+} 
+
+
 .posts-wrapper {
   position: relative;
   -webkit-font-smoothing: subpixel-antialiased;

app/assets/stylesheets/desktop/topic.scss

@@ -10,8 +10,7 @@
 }
 
 .post-menu-area {
-  margin-bottom: 10px;
-  margin-top: 20px;
+  margin: 20px 0;
 }
 
 .edits {margin-right: 5px;}

config/locales/client.en.yml

@@ -1897,6 +1897,7 @@ en:
       deleted_by_author:
         one: "(post withdrawn by author, will be automatically deleted in %{count} hour unless flagged)"
         other: "(post withdrawn by author, will be automatically deleted in %{count} hours unless flagged)"
+      collapse: "collapse"
       expand_collapse: "expand/collapse"
       gap:
         one: "view 1 hidden reply"