Reuse CommentPost component for PostsUserPage

framework/core/js/forum/src/components/PostedActivity.js

@@ -1,56 +0,0 @@
-import Activity from 'flarum/components/Activity';
-import listItems from 'flarum/helpers/listItems';
-import ItemList from 'flarum/utils/ItemList';
-import { truncate } from 'flarum/utils/string';
-
-/**
- * The `PostedActivity` component displays an activity feed item for when a user
- * started or posted in a discussion.
- *
- * ### Props
- *
- * - All of the props for Activity
- */
-export default class PostedActivity extends Activity {
-  user() {
-    return this.props.post.user();
-  }
-
-  time() {
-    return this.props.post.time();
-  }
-
-  description() {
-    return app.trans(this.props.post.number() === 1 ? 'core.started_a_discussion' : 'core.posted_a_reply');
-  }
-
-  content() {
-    const post = this.props.post;
-
-    return (
-      <a className="Activity-content PostedActivity-preview"
-        href={app.route.post(post)}
-        config={m.route}>
-        <ul className="PostedActivity-header">
-          {listItems(this.headerItems().toArray())}
-        </ul>
-        <div className="PostedActivity-body">
-          {m.trust(truncate(post.contentPlain(), 200))}
-        </div>
-      </a>
-    );
-  }
-
-  /**
-   * Build an item list for the header of the post preview.
-   *
-   * @return {[type]}
-   */
-  headerItems() {
-    const items = new ItemList();
-
-    items.add('title', <h3>{this.props.post.discussion().title()}</h3>);
-
-    return items;
-  }
-}

framework/core/js/forum/src/components/PostsUserPage.js

@@ -1,7 +1,7 @@
 import UserPage from 'flarum/components/UserPage';
 import LoadingIndicator from 'flarum/components/LoadingIndicator';
 import Button from 'flarum/components/Button';
-import PostedActivity from 'flarum/components/PostedActivity';
+import CommentPost from 'flarum/components/CommentPost';
 
 /**
  * The `PostsUserPage` component shows a user's activity feed inside of their
@@ -61,10 +61,15 @@ export default class PostsUserPage extends UserPage {
 
     return (
       <div className="PostsUserPage">
-        <ul className="PostsUserPage-list ActivityList">
-          {this.posts.map(post => {
-            return <li>{PostedActivity.component({post})}</li>;
-          })}
+        <ul className="PostsUserPage-list">
+          {this.posts.map(post => (
+            <li>
+              <div className="PostsUserPage-discussion">
+                In <a href={app.route.post(post)} config={m.route}>{post.discussion().title()}</a>
+              </div>
+              {CommentPost.component({post, showDiscussionTitle: true})}
+            </li>
+          ))}
         </ul>
         {footer}
       </div>

framework/core/less/forum/ActivityPage.less

@@ -5,76 +5,26 @@
     height: 46px;
   }
 }
-.ActivityList {
-  border-left: 3px solid @control-bg;
-  list-style: none;
-  margin: 0 0 0 16px;
-  padding: 0;
-
-  > li {
-    margin-bottom: 30px;
-    padding-left: 32px;
-
-    @media @phone {
-      padding-left: 24px;
-    }
-  }
-}
-.Activity-avatar {
-  .Avatar--size(32px);
-  float: left;
-  margin-left: -50px;
-  .box-shadow(0 0 0 3px @body-bg);
-  margin-top: -5px;
-
-  @media @phone {
-    margin-left: -42px;
-  }
-}
-.Activity-header {
-  color: @muted-color;
-  margin-bottom: 10px;
-}
-.Activity-description {
-  margin-right: 5px;
-}
-.Activity-content {
-  display: block;
-  padding: 15px;
-  background: @control-bg;
-  border-radius: @border-radius;
-  color: @muted-color;
-
-  &, &:hover {
-    text-decoration: none;
-  }
-}
-.PostedActivity-header {
-  margin: 0 0 5px;
+.PostsUserPage-list {
+  margin: 0;
   padding: 0;
   list-style: none;
 
   > li {
-    display: inline-block;
-    margin-right: 5px;
-  }
-  h3 {
-    font-size: 14px;
-    font-weight: bold;
-    margin: 0;
-
-    &, & a {
-      color: @heading-color;
-    }
-    .Activity-content:hover & {
-      text-decoration: underline;
-    }
+    border-bottom: 1px solid @control-bg;
   }
 }
-.PostedActivity-body {
-  color: @muted-color;
+.PostsUserPage-discussion {
+  font-weight: bold;
+  margin-top: 15px;
+  margin-bottom: -15px;
+  position: relative;
+  z-index: 1;
 
-  & :last-child {
-    margin-bottom: 0;
+  &, a {
+    color: @muted-color;
+  }
+  a {
+    font-style: italic;
   }
 }