Make DiscussionRenamedPost spread across three lines

This also adds a little button for expanding / collapsing this additional information.
It is expanded by default right now because I could not get the toggling to work yet.

Refs #428.

js/forum/src/components/DiscussionRenamedPost.js

@@ -1,3 +1,4 @@
+import Button from 'flarum/components/Button';
 import EventPost from 'flarum/components/EventPost';
 
 /**
@@ -9,12 +10,22 @@ import EventPost from 'flarum/components/EventPost';
  * - All of the props for EventPost
  */
 export default class DiscussionRenamedPost extends EventPost {
+  init() {
+    super.init();
+
+    this.expanded = true;
+  }
+
   icon() {
     return 'pencil';
   }
 
-  descriptionKey() {
-    return 'core.forum.post_stream.discussion_renamed_text';
+  description(data) {
+    return [
+      app.translator.trans('core.forum.post_stream.discussion_renamed_text', data),
+      this.toggleButton(),
+      this.expanded ? this.full(data) : null
+    ];
   }
 
   descriptionData() {
@@ -27,4 +38,29 @@ export default class DiscussionRenamedPost extends EventPost {
       'new': <strong className="DiscussionRenamedPost-new">{newTitle}</strong>
     };
   }
+
+  full(data) {
+    return [
+      <br />,
+      app.translator.trans('core.forum.post_stream.discussion_renamed_old_text', data),
+      <br />,
+      app.translator.trans('core.forum.post_stream.discussion_renamed_new_text', data)
+    ];
+  }
+
+  collapsed() {
+    return this.toggleButton();
+  }
+
+  toggle() {
+    this.expanded = !this.expanded;
+  }
+
+  toggleButton() {
+    return Button.component({
+      className: 'Button Button--default Button--more',
+      icon: 'ellipsis-h',
+      onclick: this.toggle.bind(this)
+    });
+  }
 }