Improve composer appearance/usability on mobile

On mobile:
- Move submit button to right side of toolbar
- Move first header item to toolbar
- Size textarea correctly

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

@@ -71,8 +71,7 @@ export default class CommentPost extends Post {
 
   isEditing() {
     return app.composer.component instanceof EditPostComposer &&
-      app.composer.component.props.post === this.props.post &&
-      app.composer.position !== Composer.PositionEnum.MINIMIZED;
+      app.composer.component.props.post === this.props.post;
   }
 
   attrs() {

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

@@ -66,6 +66,7 @@ class Composer extends Component {
 
   view() {
     const classes = {
+      'normal': this.position === Composer.PositionEnum.NORMAL,
       'minimized': this.position === Composer.PositionEnum.MINIMIZED,
       'fullScreen': this.position === Composer.PositionEnum.FULLSCREEN,
       'active': this.active
@@ -225,7 +226,7 @@ class Composer extends Component {
       const paddingBottom = parseInt($flexible.css('padding-bottom'), 10);
       const footerHeight = this.$('.TextEditor-controls').outerHeight(true);
 
-      $flexible.height(height - headerHeight - paddingBottom - footerHeight);
+      $flexible.height(this.$().outerHeight() - headerHeight - paddingBottom - footerHeight);
     }
   }
 

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

@@ -56,7 +56,7 @@ export default class ComposerBody extends Component {
     this.editor.props.disabled = this.loading;
 
     return (
-      <div className="ComposerBody">
+      <div className={'ComposerBody ' + (this.props.className || '')}>
         {avatar(this.props.user, {className: 'ComposerBody-avatar'})}
         <div className="ComposerBody-content">
           <ul className="ComposerBody-header">{listItems(this.headerItems().toArray())}</ul>

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

@@ -31,12 +31,15 @@ export default class DiscussionComposer extends ComposerBody {
     props.submitLabel = props.submitLabel || app.translator.trans('core.forum.composer_discussion.submit_button');
     props.confirmExit = props.confirmExit || extractText(app.translator.trans('core.forum.composer_discussion.discard_confirmation'));
     props.titlePlaceholder = props.titlePlaceholder || extractText(app.translator.trans('core.forum.composer_discussion.title_placeholder'));
+    props.className = 'ComposerBody--discussion';
   }
 
   headerItems() {
     const items = super.headerItems();
 
-    items.add('title', (
+    items.add('title', <h3>{app.translator.trans('core.forum.composer_discussion.title')}</h3>, 100);
+
+    items.add('discussionTitle', (
       <h3>
         <input className="FormControl"
           value={this.title()}

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

@@ -72,6 +72,7 @@ export default class TextEditor extends Component {
         children: this.props.submitLabel,
         icon: 'check',
         className: 'Button Button--primary',
+        itemClassName: 'App-primaryControl',
         onclick: this.onsubmit.bind(this)
       })
     );