UX: Move preview button to bottom right of mobile composer

app/assets/javascripts/discourse/components/composer-editor.js.es6

@@ -971,16 +971,6 @@ export default Ember.Component.extend({
         sendAction: this.onExpandPopupMenuOptions.bind(this),
         popupMenu: true
       });
-
-      if (this.site.mobileView) {
-        toolbar.addButton({
-          id: "preview",
-          group: "mobileExtras",
-          icon: "television",
-          title: "composer.show_preview",
-          sendAction: this.showPreview.bind(this)
-        });
-      }
     },
 
     previewUpdated($preview) {

app/assets/javascripts/discourse/components/d-editor.js.es6

@@ -142,10 +142,6 @@ class Toolbar {
       });
     }
 
-    if (site.mobileView) {
-      this.groups.push({ group: "mobileExtras", buttons: [] });
-    }
-
     this.groups[this.groups.length - 1].lastGroup = true;
   }
 

app/assets/javascripts/discourse/templates/composer.hbs

@@ -159,13 +159,19 @@
                 </div>
               {{/if}}
               <div id='draft-status' class="{{if isUploading 'hidden'}}">
-                {{#if model.draftConflictUser}}
-                  {{avatar model.draftConflictUser imageSize="small"}}
-                {{/if}}
                 {{#if model.draftSaving}}<div class="spinner small"></div>{{/if}}
                 {{#if model.draftSaved}}{{d-icon 'check' class='save-animation'}}{{/if}}
                 {{#if model.draftStatus}}
-                  <span title="{{model.draftStatus}}">{{d-icon 'user-edit'}}</span>
+                  <span title="{{model.draftStatus}}">
+                    {{#if model.draftConflictUser}}
+                      {{avatar model.draftConflictUser imageSize="small"}} {{d-icon 'user-edit'}}
+                    {{else}}
+                      {{d-icon 'sync-alt'}}
+                    {{/if}}
+                    {{#unless site.mobileView}}
+                      {{model.draftStatus}}
+                    {{/unless}}
+                  </span>
                 {{/if}}
               </div>
             </div>
@@ -178,6 +184,10 @@
                   </a>
                 {{/if}}
 
+                <a class="btn btn-default no-text mobile-preview" title="{{i18n 'composer.show_preview'}}" {{action "togglePreview"}}>
+                  {{d-icon "desktop"}}
+                </a>
+
                 {{#if showPreview}}
                   {{d-button action=(action "togglePreview") class="hide-preview" label="composer.hide_preview"}}
                 {{/if}}

app/assets/stylesheets/mobile/compose.scss

@@ -84,6 +84,18 @@
       margin-left: auto;
       flex: 1 1 auto;
     }
+
+    .mobile-file-upload {
+      order: 2;
+      &.hidden + .mobile-preview {
+        // Hide preview button while file is uploading to make room for upload progress
+        display: none;
+      }
+    }
+
+    .mobile-preview {
+      margin-left: 0.25em;
+    }
   }
 
   .d-editor-textarea-wrapper {