From 1d67e239f74e905bbce81c110c3aef49889e5e83 Mon Sep 17 00:00:00 2001
From: Franz Liedke <franz@develophp.org>
Date: Wed, 30 Mar 2016 22:13:08 +0900
Subject: [PATCH] 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.
---
 framework/core/js/forum/dist/app.js           | 45 ++++++++++++++++---
 .../src/components/DiscussionRenamedPost.js   | 40 ++++++++++++++++-
 framework/core/less/forum/Post.less           | 11 +++--
 3 files changed, 85 insertions(+), 11 deletions(-)

diff --git a/framework/core/js/forum/dist/app.js b/framework/core/js/forum/dist/app.js
index 6047d182b..6a816e829 100644
--- a/framework/core/js/forum/dist/app.js
+++ b/framework/core/js/forum/dist/app.js
@@ -21254,10 +21254,12 @@ System.register('flarum/components/DiscussionRenamedNotification', ['flarum/comp
 });;
 'use strict';
 
-System.register('flarum/components/DiscussionRenamedPost', ['flarum/components/EventPost'], function (_export, _context) {
-  var EventPost, DiscussionRenamedPost;
+System.register('flarum/components/DiscussionRenamedPost', ['flarum/components/Button', 'flarum/components/EventPost'], function (_export, _context) {
+  var Button, EventPost, DiscussionRenamedPost;
   return {
-    setters: [function (_flarumComponentsEventPost) {
+    setters: [function (_flarumComponentsButton) {
+      Button = _flarumComponentsButton.default;
+    }, function (_flarumComponentsEventPost) {
       EventPost = _flarumComponentsEventPost.default;
     }],
     execute: function () {
@@ -21270,14 +21272,21 @@ System.register('flarum/components/DiscussionRenamedPost', ['flarum/components/E
         }
 
         babelHelpers.createClass(DiscussionRenamedPost, [{
+          key: 'init',
+          value: function init() {
+            babelHelpers.get(Object.getPrototypeOf(DiscussionRenamedPost.prototype), 'init', this).call(this);
+
+            this.expanded = true;
+          }
+        }, {
           key: 'icon',
           value: function icon() {
             return 'pencil';
           }
         }, {
-          key: 'descriptionKey',
-          value: function descriptionKey() {
-            return 'core.forum.post_stream.discussion_renamed_text';
+          key: 'description',
+          value: function description(data) {
+            return [app.translator.trans('core.forum.post_stream.discussion_renamed_text', data), this.toggleButton(), this.expanded ? this.full(data) : null];
           }
         }, {
           key: 'descriptionData',
@@ -21299,6 +21308,30 @@ System.register('flarum/components/DiscussionRenamedPost', ['flarum/components/E
               )
             };
           }
+        }, {
+          key: 'full',
+          value: function full(data) {
+            return [m('br', null), app.translator.trans('core.forum.post_stream.discussion_renamed_old_text', data), m('br', null), app.translator.trans('core.forum.post_stream.discussion_renamed_new_text', data)];
+          }
+        }, {
+          key: 'collapsed',
+          value: function collapsed() {
+            return this.toggleButton();
+          }
+        }, {
+          key: 'toggle',
+          value: function toggle() {
+            this.expanded = !this.expanded;
+          }
+        }, {
+          key: 'toggleButton',
+          value: function toggleButton() {
+            return Button.component({
+              className: 'Button Button--default Button--more',
+              icon: 'ellipsis-h',
+              onclick: this.toggle.bind(this)
+            });
+          }
         }]);
         return DiscussionRenamedPost;
       }(EventPost);
diff --git a/framework/core/js/forum/src/components/DiscussionRenamedPost.js b/framework/core/js/forum/src/components/DiscussionRenamedPost.js
index ed7524bfa..83731e42d 100644
--- a/framework/core/js/forum/src/components/DiscussionRenamedPost.js
+++ b/framework/core/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)
+    });
+  }
 }
diff --git a/framework/core/less/forum/Post.less b/framework/core/less/forum/Post.less
index 10d43cd6a..edd76588b 100644
--- a/framework/core/less/forum/Post.less
+++ b/framework/core/less/forum/Post.less
@@ -224,9 +224,14 @@
   font-size: 14px;
 }
 
-.DiscussionRenamedPost-old, .DiscussionRenamedPost-new {
-  font-weight: normal;
-  font-style: italic;
+.DiscussionRenamedPost {
+  &-old, &-new {
+    font-weight: normal;
+    font-style: italic;
+  }
+  .Button--more {
+    margin-left: 5px;
+  }
 }
 
 .Post-footer, .Post-actions {