From 52f7ab3a06cd2719407c65c2fc75e54f903dc61e Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Wed, 16 Sep 2015 15:15:07 -0400
Subject: [PATCH] Revert "UX: replace cancel uploading link with icon + fix
 color"

This reverts commit 1689f436d9e80f478747e96597861f2bf6a25f7f.
---
 .../discourse/templates/composer.hbs          | 25 ++----
 .../stylesheets/common/base/compose.scss      | 16 ----
 .../stylesheets/common/base/discourse.scss    | 84 ++++++++++---------
 app/assets/stylesheets/desktop/compose.scss   |  1 +
 app/assets/stylesheets/mobile/compose.scss    | 22 ++++-
 5 files changed, 71 insertions(+), 77 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/composer.hbs b/app/assets/javascripts/discourse/templates/composer.hbs
index 2856970e894..4e75418d926 100644
--- a/app/assets/javascripts/discourse/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/templates/composer.hbs
@@ -85,26 +85,19 @@
             {{popup-input-tip validation=view.replyValidation shownAt=view.showReplyTip}}
           </div>
           <!-- keep the classes here in sync with post.hbs -->
-          {{#unless site.mobileView}}
-            <div class='preview-wrapper regular'>
-              <div class="wmd-preview cooked {{if model.hidePreview 'hidden'}}"></div>
-            </div>
-          {{/unless}}
+          <div class='preview-wrapper regular'>
+            <div class="wmd-preview cooked {{if model.hidePreview 'hidden'}}"></div>
+          </div>
           <div class="composer-bottom-right">
+            <a href {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
+            <div id="file-uploading" {{bind-attr class="view.isUploading::hidden"}}>
+              {{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{i18n 'cancel'}}</a>
+            </div>
             {{#if site.mobileView}}
+              <a {{bind-attr class=":mobile-file-upload view.isUploading:hidden"}}>{{i18n 'upload'}}</a>
               <input type="file" id="mobile-uploader" />
-              {{#unless view.isUploading}}
-                <a class="mobile-file-upload">{{i18n 'upload'}}</a>
-              {{/unless}}
-            {{else}}
-              <a href {{action "togglePreview"}} class='toggle-preview'>{{{model.toggleText}}}</a>
             {{/if}}
-            {{#if view.isUploading}}
-              <div id="file-uploading">
-                {{loading-spinner size="small"}} {{i18n 'upload_selector.uploading'}} {{view.uploadProgress}}% <a id="cancel-file-upload">{{fa-icon "times"}}</a>
-              </div>
-            {{/if}}
-            <div id='draft-status' class="{{if view.isUploading 'hidden'}}">
+            <div id='draft-status' {{bind-attr class="view.isUploading:hidden"}}>
               {{model.draftStatus}}
             </div>
           </div>
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 2838b2d8902..c128d32ccec 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@@ -148,20 +148,6 @@ div.ac-wrap {
   }
 }
 
-#cancel-file-upload {
-  font-size: 1.6em;
-}
-
-#draft-status, #file-uploading {
-  color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 50%));
-}
-
-.composer-bottom-right {
-  .spinner.small {
-    width: 6px;
-    height: 6px;
-  }
-}
 
 // this removes the topmost margin from the first element in the topic post
 // if we don't do this, all posts would have extra space at the top
@@ -171,5 +157,3 @@ div.ac-wrap {
 .cooked > *:first-child {
   margin-top: 0;
 }
-
-
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index 7a39495197a..d8b47398043 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -106,7 +106,7 @@ body {
     margin: 0 10px 0 10px;
   }
 
-  .message {
+.message {
     @include border-radius-all(8px);
     background-color: $secondary;
     padding: 14px;
@@ -118,8 +118,7 @@ body {
       font-size: 1.429em;
     }
   }
-
-  #footer {
+    #footer {
     .container {
       height: 50px;
       .contents {
@@ -135,51 +134,54 @@ body {
     transition:none !important;
   }
 
-  .tip {
-    display: inline-block;
-    &.good {
-      color: $success;
-    }
-    &.bad {
-      color: $danger;
+.tip {
+  display: inline-block;
+  &.good {
+    color: $success;
+  }
+  &.bad {
+    color: $danger;
+  }
+}
+
+input[type].invalid {
+  background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
+}
+
+.wmd-input {
+  resize: none;
+}
+
+.pagedown-editor {
+  width: 540px;
+  background-color: $secondary;
+  padding: 0 10px 13px 10px;
+  border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+  .preview {
+    margin-top: 8px;
+    border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
+    padding: 8px 8px 0 8px;
+    p {
+      margin: 0 0 10px 0;
     }
   }
-
-  input[type].invalid {
-    background-color: dark-light-choose(scale-color($danger, $lightness: 80%), scale-color($danger, $lightness: -60%));
+  .preview.hidden {
+    display: none;
   }
+}
 
-  .wmd-input {
-    resize: none;
-  }
 
-  .pagedown-editor {
-    width: 540px;
-    background-color: $secondary;
-    padding: 0 10px 13px 10px;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-    .preview {
-      margin-top: 8px;
-      border: 1px dashed dark-light-diff($primary, $secondary, 90%, -60%);
-      padding: 8px 8px 0 8px;
-      p {
-        margin: 0 0 10px 0;
-      }
-    }
-    .preview.hidden {
-      display: none;
-    }
-  }
+.avatar-wrapper {
+  background-color: $secondary;
+  display: inline-block;
+  border-radius: 50%;
+}
+
+.profiler-results.profiler-left {
+  top: 60px !important;
+}
 
-  .avatar-wrapper {
-    background-color: $secondary;
-    display: inline-block;
-    border-radius: 50%;
-  }
 
-  .profiler-results.profiler-left {
-    top: 60px !important;
-  }
 }
 
 .unread-private-messages {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 55c0d45af11..5fc774c7ac4 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -110,6 +110,7 @@
   }
   #draft-status, #file-uploading {
     right: 51%;
+    color: $primary;
   }
   #file-uploading {
     font-size: 0.857em;
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 592fa4b27d4..987a34cab0f 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/app/assets/stylesheets/mobile/compose.scss
@@ -22,12 +22,26 @@ input {
 #reply-control {
   // used for upload link
   .composer-bottom-right {
-    float: right;
-    line-height: 3em;
+    position: absolute;
+    bottom: -32px;
+    right: -5px;
   }
+  .toggle-preview { display:none; }
+  .preview-wrapper { display:none; }
   #mobile-uploader { display: none; }
-  #draft-status, #file-uploading, .mobile-file-upload { display: inline-block; }
-  transition: height .4s ease;
+  #draft-status, #file-uploading, .mobile-file-upload {
+    float: right;
+    margin-right: 8px;
+  }
+  #file-uploading {
+    left: 51%;
+    font-size: 0.857em;
+    color: scale-color($secondary, $lightness: 50%);
+  }
+  #draft-status {
+    color: dark-light-choose(scale-color($primary, $lightness: 75%), scale-color($secondary, $lightness: 25%));
+  }
+  transition: height 0.4s ease;
   width: 100%;
   z-index: 1039;
   height: 0;