Drastically improve how the composer looks and behaves

- New, cleaner, more prominent look
- Make it statically positioned down the bottom on mobile, so you can
still scroll up to look at posts
- Fix some bugs with animation, jumping between views

js/forum/src/components/composer-body.js

@@ -21,8 +21,8 @@ export default class ComposerBody extends Component {
     });
   }
 
-  view() {
-    return m('div', {config: this.element}, [
+  view(className) {
+    return m('div', {className, config: this.element}, [
       avatar(this.props.user, {className: 'composer-avatar'}),
       m('div.composer-body', [
         m('ul.composer-header', listItems(this.headerItems().toArray())),

js/forum/src/components/composer-discussion.js

@@ -10,6 +10,7 @@ import ActionButton from 'flarum/components/action-button';
  */
 export default class ComposerDiscussion extends ComposerBody {
   constructor(props) {
+    props.placeholder = props.placeholder || 'Write a post...';
     props.submitLabel = props.submitLabel || 'Post Discussion';
     props.confirmExit = props.confirmExit || 'You have not posted your discussion. Do you wish to discard it?';
     props.titlePlaceholder = props.titlePlaceholder || 'Discussion Title';
@@ -26,7 +27,7 @@ export default class ComposerDiscussion extends ComposerBody {
     items.add('title', m('h3', m('input', {
       className: 'form-control',
       value: this.title(),
-      onchange: m.withAttr('value', this.title),
+      oninput: m.withAttr('value', this.title),
       placeholder: this.props.titlePlaceholder,
       disabled: !!this.props.disabled,
       config: function(element, isInitialized) {

js/forum/src/components/composer-edit.js

@@ -22,7 +22,11 @@ export default class ComposerEdit extends ComposerBody {
     var items = new ItemList();
     var post = this.props.post;
 
-    items.add('title', m('h3', ['Editing Post #'+post.number()+' in ', m('em', post.discussion().title())]));
+    items.add('title', m('h3', [
+      'Editing ',
+      m('a', {href: app.route.discussion(post.discussion(), post.number()), config: m.route}, 'Post #'+post.number()),
+      ' in ', post.discussion().title()
+    ]));
 
     return items;
   }

js/forum/src/components/composer-reply.js

@@ -2,19 +2,33 @@ import ItemList from 'flarum/utils/item-list';
 import ComposerBody from 'flarum/components/composer-body';
 import Alert from 'flarum/components/alert';
 import ActionButton from 'flarum/components/action-button';
+import Composer from 'flarum/components/composer';
 
 export default class ComposerReply extends ComposerBody {
   constructor(props) {
+    props.placeholder = props.placeholder || 'Write your reply...';
     props.submitLabel = props.submitLabel || 'Post Reply';
     props.confirmExit = props.confirmExit || 'You have not posted your reply. Do you wish to discard it?';
 
     super(props);
   }
 
+  view() {
+    return super.view('composer-reply');
+  }
+
   headerItems() {
     var items = new ItemList();
 
-    items.add('title', m('h3', ['Replying to ', m('em', this.props.discussion.title())]));
+    if (app.composer.position() === Composer.PositionEnum.MINIMIZED ||
+      // https://github.com/babel/babel/issues/1150
+      !app.current.discussion ||
+      app.current.discussion() !== this.props.discussion) {
+      items.add('title', m('h3', [
+        'Replying to ',
+        m('a', {href: app.route.discussion(this.props.discussion), config: m.route}, this.props.discussion.title())
+      ]));
+    }
 
     return items;
   }

js/forum/src/components/composer.js

@@ -133,19 +133,16 @@ class Composer extends Component {
   }
 
   render(anchorToBottom) {
-    // @todo this function's logic could probably use some reworking. The
-    //     following line is bad because it prevents focusing on the composer
-    //     input when the composer is shown when it's already being shown
     if (this.position() === this.oldPosition) { return; }
 
-    var $composer = this.$();
+    var $composer = this.$().stop(true);
     var oldHeight = $composer.is(':visible') ? $composer.outerHeight() : 0;
 
     if (this.position() !== Composer.PositionEnum.HIDDEN) {
       m.redraw(true);
     }
 
-    this.updateHeight();
+    this.$().height(this.computedHeight());
     var newHeight = $composer.outerHeight();
 
     switch (this.position()) {
@@ -178,7 +175,10 @@ class Composer extends Component {
     }
     $('body').toggleClass('composer-open', this.position() !== Composer.PositionEnum.HIDDEN);
     this.oldPosition = this.position();
-    this.setContentHeight(this.computedHeight());
+
+    if (this.position() !== Composer.PositionEnum.HIDDEN) {
+      this.setContentHeight(this.computedHeight());
+    }
   }
 
   // Update the amount of padding-bottom on the body so that the page's
@@ -203,12 +203,12 @@ class Composer extends Component {
   // to fill up the height of the composer, minus the space taken up by the
   // composer's header/footer/etc.
   setContentHeight(height) {
-    var content = this.$('.composer-content');
-    this.$('.flexible-height').height(height -
-      parseInt(content.css('padding-top')) -
-      parseInt(content.css('padding-bottom')) -
-      this.$('.composer-header').outerHeight(true) -
-      this.$('.text-editor-controls').outerHeight(true));
+    var flexible = this.$('.flexible-height');
+    if (flexible.length) {
+      flexible.height(height -
+        (flexible.offset().top - this.$().offset().top) -
+        this.$('.text-editor-controls').outerHeight(true));
+    }
   }
 
   load(component) {
@@ -225,8 +225,7 @@ class Composer extends Component {
     if ([Composer.PositionEnum.MINIMIZED, Composer.PositionEnum.HIDDEN].indexOf(this.position()) !== -1) {
       this.position(Composer.PositionEnum.NORMAL);
     }
-    // work around https://github.com/lhorie/mithril.js/issues/603
-    setTimeout(() => this.render(anchorToBottom));
+    this.render(anchorToBottom);
   }
 
   hide() {
@@ -276,7 +275,7 @@ class Composer extends Component {
         items.add('minimize', this.control({ icon: 'minus minimize', title: 'Minimize', onclick: this.minimize.bind(this) }));
         items.add('fullScreen', this.control({ icon: 'expand', title: 'Full Screen', onclick: this.fullScreen.bind(this) }));
       }
-      items.add('close', this.control({ icon: 'times', title: 'Close', wrapperClass: 'back-control', onclick: this.close.bind(this) }));
+      items.add('close', this.control({ icon: 'times', title: 'Close', onclick: this.close.bind(this) }));
     }
 
     return items;

js/lib/components/text-editor.js

@@ -25,7 +25,7 @@ export default class TextEditor extends Component {
         disabled: !!this.props.disabled,
         value: this.value()
       }),
-      m('ul.text-editor-controls.fade', listItems(this.controlItems().toArray()))
+      m('ul.text-editor-controls', listItems(this.controlItems().toArray()))
     ]);
   }
 
@@ -43,7 +43,6 @@ export default class TextEditor extends Component {
         label: this.props.submitLabel,
         icon: 'check',
         className: 'btn btn-primary',
-        wrapperClass: 'primary-control',
         onclick: this.onsubmit.bind(this)
       })
     );
@@ -76,7 +75,6 @@ export default class TextEditor extends Component {
   oninput(value) {
     this.value(value);
     this.props.onchange(this.value());
-    this.$('.text-editor-controls').toggleClass('in', !!value);
 
     m.redraw.strategy('none');
   }