From c57ab12238b85211b4750595b3325d98311102be Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Tue, 28 May 2019 14:19:02 -0400
Subject: [PATCH] UX: Move preview button to bottom right of mobile composer

---
 .../components/composer-editor.js.es6          | 10 ----------
 .../discourse/components/d-editor.js.es6       |  4 ----
 .../discourse/templates/composer.hbs           | 18 ++++++++++++++----
 app/assets/stylesheets/mobile/compose.scss     | 12 ++++++++++++
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/composer-editor.js.es6 b/app/assets/javascripts/discourse/components/composer-editor.js.es6
index b637219cd06..3a39a14fd24 100644
--- a/app/assets/javascripts/discourse/components/composer-editor.js.es6
+++ b/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) {
diff --git a/app/assets/javascripts/discourse/components/d-editor.js.es6 b/app/assets/javascripts/discourse/components/d-editor.js.es6
index 2e30539f3ef..6ca01d18310 100644
--- a/app/assets/javascripts/discourse/components/d-editor.js.es6
+++ b/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;
   }
 
diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 62a50dbc0b6..99e723803a1 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/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}}
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 0625646954b..2138c44cdcd 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/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 {