Add preview button to composer

js/forum/src/components/Composer.js

@@ -73,6 +73,7 @@ class Composer extends Component {
 
     const showIfMinimized = () => {
       if (this.position === Composer.PositionEnum.MINIMIZED) this.show();
+      m.redraw.strategy('none');
     };
 
     return (

js/forum/src/components/DiscussionPage.js

@@ -123,8 +123,6 @@ export default class DiscussionPage extends mixin(Component, evented) {
   config(isInitialized, context) {
     if (isInitialized) return;
 
-    // context.retain = true;
-
     $('#app').addClass('App--discussion');
     context.onunload = () => $('#app').removeClass('App--discussion');
   }

js/forum/src/components/EditPostComposer.js

@@ -12,6 +12,14 @@ import icon from 'flarum/helpers/icon';
  * - `post`
  */
 export default class EditPostComposer extends ComposerBody {
+  constructor(...args) {
+    super(...args);
+
+    this.editor.props.preview = () => {
+      m.route(app.route.post(this.props.post));
+    };
+  }
+
   static initProps(props) {
     super.initProps(props);
 

js/forum/src/components/IndexPage.js

@@ -51,7 +51,6 @@ export default class IndexPage extends Component {
     // Save the scroll position so we can restore it when we return to the
     // discussion list.
     app.cache.scrollTop = $(window).scrollTop();
-    app.composer.minimize();
   }
 
   view() {

js/forum/src/components/PostStream.js

@@ -44,11 +44,22 @@ class PostStream extends mixin(Component, evented) {
   /**
    * Load and scroll to a post with a certain number.
    *
-   * @param {Integer} number
+   * @param {Integer|String} number The post number to go to. If 'reply', go to
+   *     the last post and scroll the reply preview into view.
    * @param {Boolean} noAnimation
    * @return {Promise}
    */
   goToNumber(number, noAnimation) {
+    // If we want to go to the reply preview, then we will go to the end of the
+    // discussion and scroll to the very bottom of the page.
+    if (number === 'reply') {
+      return this.goToLast().then(() => {
+        $('html,body').stop(true).animate({
+          scrollTop: $(document).height() - $(window).height()
+        }, 'fast');
+      });
+    }
+
     this.paused = true;
 
     const promise = this.loadNearNumber(number);
@@ -475,7 +486,7 @@ class PostStream extends mixin(Component, evented) {
    * @return {Integer}
    */
   getMarginTop() {
-    return this.$() && $('.global-header').outerHeight() + parseInt(this.$().css('margin-top'), 10);
+    return this.$() && $('#header').outerHeight() + parseInt(this.$().css('margin-top'), 10);
   }
 
   /**

js/forum/src/components/ReplyComposer.js

@@ -13,6 +13,14 @@ import icon from 'flarum/helpers/icon';
  * - `discussion`
  */
 export default class ReplyComposer extends ComposerBody {
+  constructor(...args) {
+    super(...args);
+
+    this.editor.props.preview = () => {
+      m.route(app.route.discussion(this.props.discussion, 'reply'));
+    };
+  }
+
   static initProps(props) {
     super.initProps(props);
 
@@ -92,6 +100,7 @@ export default class ReplyComposer extends ComposerBody {
           // transition to their new post when clicked.
           let alert;
           const viewButton = Button.component({
+            className: 'Button Button--link',
             children: app.trans('core.view'),
             onclick: () => {
               m.route(app.route.post(post));

js/forum/src/components/TextEditor.js

@@ -75,6 +75,16 @@ export default class TextEditor extends Component {
       })
     );
 
+    if (this.props.preview) {
+      items.add('preview',
+        Button.component({
+          icon: 'eye',
+          className: 'Button Button--icon',
+          onclick: this.props.preview
+        })
+      );
+    }
+
     return items;
   }
 

less/forum/Composer.less

@@ -318,9 +318,13 @@
 @media @tablet-up {
   .TextEditor-controls {
     margin: 0 -20px 0 -110px;
-    padding: 15px 20px;
+    padding: 10px 20px;
     border-top: 1px solid @control-bg;
 
+    li {
+      margin-right: 5px;
+    }
+
     .fullScreen & {
       margin: 0;
       border-top: 0;

less/lib/Alert.less

@@ -4,7 +4,7 @@
   background: @alert-bg;
   line-height: 1.5;
 
-  &, a, a:hover {
+  &, a, a:hover, button, button:hover {
     color: @alert-color;
   }
 }