fix #525: loaders in busy buttons

misago/emberapp/app/styles/misago/buttons.less

@@ -2,6 +2,55 @@
 // Buttons
 // --------------------------------------------------
 
+
+// Make lone button take all its place on small display
+.btn-block-sm {
+  @media (max-width: @screen-sm-max) {
+    display: block;
+    width: 100%;
+
+    text-align: center;
+  }
+}
+
+
+// Make busy button really look busy
+.btn {
+  &.btn-busy {
+    &, &:visited, &:hover, &:focus, &:active {
+      color: transparent;
+    }
+
+    .loader-compact {
+      margin-top: @line-height-computed * -1;
+      height: 20px;
+    }
+
+    &.btn-default {
+      .loader-compact>div { background-color: @btn-default-color; }
+    }
+
+    &.btn-primary {
+      .loader-compact>div { background-color: @btn-primary-color; }
+    }
+
+    &.btn-success {
+      .loader-compact>div { background-color: @btn-success-color; }
+    }
+
+    &.btn-info {
+      .loader-compact>div { background-color: @btn-info-color; }
+    }
+
+    &.btn-warning {
+      .loader-compact>div { background-color: @btn-warning-color; }
+    }
+
+    &.btn-danger {
+      .loader-compact>div { background-color: @btn-danger-color; }
+    }
+  }
+}
 // Mixin for styles
 .btn-outlined-style(@border, @bg, @color) {
   &, &:visited {
@@ -34,6 +83,19 @@
       color: desaturate(@border, 50%);
     }
   }
+
+  &.btn-busy {
+    &, &:visited, &:hover, &:focus, &:active {
+      background-color: transparent;
+      border-color: @border;
+
+      color: transparent;
+
+      .loader-compact>div {
+        background-color: @border;
+      }
+    }
+  }
 }
 
 
@@ -97,22 +159,24 @@
 
     &:active,
     &.active,
-    .open > .dropdown-toggle& {
+    .open > .dropdown-toggle {
       background-color: @btn-default-active-bg;
       border-color: @btn-default-active-border;
 
       color: @btn-default-active-color;
     }
-  }
-}
 
+    &.btn-busy {
+      &, &:visited, &:hover, &:focus, &:active {
+        background-color: transparent;
+        border-color: @btn-default-border;
 
-// Make lone button take all its place on small display
-.btn-block-sm {
-  @media (max-width: @screen-sm-max) {
-    display: block;
-    width: 100%;
+        color: transparent;
 
-    text-align: center;
+        .loader-compact>div {
+          background-color: @btn-default-border;
+        }
+      }
+    }
   }
 }

misago/emberapp/app/styles/misago/loaders.less

@@ -83,7 +83,7 @@
   text-align: center;
   font-size: 10px;
 
-  & > div {
+  &>div {
     background-color: @loader-compact-color;
     height: 100%;
     width: 6px;

misago/emberapp/app/templates/components/forms/avatar-crop-form.hbs

@@ -8,8 +8,9 @@
   <div class="col-md-6 col-md-offset-3">
 
     {{#if isBusy}}
-      <button type="button" class="btn btn-primary btn-block disabled" disabled="disabled">
-        {{gettext "Cropping..."}}
+      <button type="button" class="btn btn-primary btn-block is-busy" disabled="disabled">
+        &nbsp;
+        {{loader-compact}}
       </button>
     {{else}}
       <button type="button" class="btn btn-primary btn-block" {{action "crop"}}>

misago/emberapp/app/templates/components/forms/avatar-gallery-form.hbs

@@ -19,8 +19,9 @@
 <div class="row">
   <div class="col-md-6 col-md-offset-3">
     {{#if isBusy}}
-      <button type="button" class="btn btn-default btn-outlined btn-block disabled" disabled="disabled">
-        {{gettext "Setting avatar..."}}
+      <button type="button" class="btn btn-primary btn-outlined btn-block btn-busy" disabled="disabled">
+        &nbsp;
+        {{loader-compact}}
       </button>
     {{else}}
       <button type="button" class="btn btn-default btn-outlined btn-block" {{action "cancel"}}>

misago/emberapp/app/templates/components/forms/avatar-upload-form.hbs

@@ -25,8 +25,9 @@
     {{#if allowUpload}}
     <div class="upload-file">
       {{#if isBusy}}
-        <button type="button" class="btn btn-primary btn-block disabled" disabled="disabled">
-          {{gettext "Uploading..."}}
+        <button type="button" class="btn btn-primary btn-block btn-busy" disabled="disabled">
+          &nbsp;
+          {{loader-compact}}
         </button>
       {{else}}
         <button type="button" class="btn btn-primary btn-block" {{if isBusy "disabled"}} {{action "selectFile"}}>

misago/emberapp/app/templates/components/forms/change-username-form.hbs

@@ -23,11 +23,14 @@
         <div class="col-md-8 col-md-offset-4">
 
           {{#if isBusy}}
-          <button type="button" class="btn btn-primary btn-block-sm disabled" disabled="disabled">
-            {{gettext "Changing..."}}
+          <button type="button" class="btn btn-primary btn-block-sm btn-busy" disabled="disabled">
+            {{gettext "Change username"}}
+            {{loader-compact}}
           </button>
           {{else}}
-          <button type="submit" class="btn btn-primary btn-block-sm">{{gettext "Change username"}}</button>
+          <button type="submit" class="btn btn-primary btn-block-sm">
+            {{gettext "Change username"}}
+          </button>
           {{/if}}
 
         </div>

misago/emberapp/app/templates/components/forms/edit-signature-form.hbs

@@ -7,8 +7,9 @@
     {{misago-editor value=signature inputHeight=60 toolbar=false limit=options.limit}}
 
     {{#if isBusy}}
-    <button type="button" class="btn btn-primary btn-block-sm disabled" disabled="disabled">
-      {{gettext "Saving changes..."}}
+    <button type="button" class="btn btn-primary btn-block-sm btn-busy" disabled="disabled">
+      {{gettext "Save changes"}}
+      {{loader-compact}}
     </button>
     {{else}}
     <button type="submit" class="btn btn-primary btn-block-sm">{{gettext "Save changes"}}</button>

misago/emberapp/app/templates/components/forms/forum-options-form.hbs

@@ -77,8 +77,9 @@
       <div class="col-md-7 col-md-offset-5">
 
         {{#if isBusy}}
-        <button type="button" class="btn btn-primary btn-block-sm disabled" disabled="disabled">
-          {{gettext "Saving changes..."}}
+        <button type="button" class="btn btn-primary btn-block-sm btn-busy" disabled="disabled">
+          {{gettext "Save changes"}}
+          {{loader-compact}}
         </button>
         {{else}}
         <button type="submit" class="btn btn-primary btn-block-sm">{{gettext "Save changes"}}</button>

misago/emberapp/app/templates/components/forms/login-form.hbs

@@ -20,11 +20,14 @@
     {{/close-modal-button}}
   {{else}}
     {{#if isBusy}}
-    <button type="button" class="btn btn-block btn-primary disabled" disabled="disabled">
-      {{gettext "Singing in..."}}
+    <button type="button" class="btn btn-primary btn-block btn-busy" disabled="disabled">
+      &nbsp;
+      {{loader-compact}}
     </button>
     {{else}}
-    <button type="submit" class="btn btn-block btn-primary">{{gettext "Sign in"}}</button>
+    <button type="submit" class="btn btn-primary btn-block">
+      {{gettext "Sign in"}}
+    </button>
     {{/if}}
   {{/if}}
 

misago/emberapp/app/templates/components/forms/register-form.hbs

@@ -55,8 +55,9 @@
   <div class="text-center">
 
     {{#if isBusy}}
-    <button type="button" class="btn btn-primary disabled" disabled="disabled">
-      {{gettext "Registering..."}}
+    <button type="button" class="btn btn-primary btn-busy" disabled="disabled">
+      &nbsp;
+      {{loader-compact}}
     </button>
     {{else}}
     <button type="submit" class="btn btn-primary">

misago/emberapp/app/templates/components/forms/request-link-form.hbs

@@ -5,9 +5,12 @@
 </div>
 
 {{#if isBusy}}
-<button type="button" class="btn btn-block btn-primary disabled" disabled="disabled">
-  {{gettext "Sending request..."}}
+<button type="button" class="btn btn-primary btn-block btn-busy" disabled="disabled">
+  &nbsp;
+  {{loader-compact}}
 </button>
 {{else}}
-<button type="submit" class="btn btn-primary btn-block">{{gettext "Send link"}}</button>
+<button type="submit" class="btn btn-primary btn-block">
+  {{gettext "Send link"}}
+</button>
 {{/if}}

misago/emberapp/app/templates/components/forms/set-new-password-form.hbs

@@ -5,9 +5,12 @@
 </div>
 
 {{#if isBusy}}
-<button type="button" class="btn btn-block btn-primary disabled" disabled="disabled">
-  {{gettext "Sending request..."}}
+<button type="button" class="btn btn-primary btn-block btn-busy" disabled="disabled">
+  &nbsp;
+  {{loader-compact}}
 </button>
 {{else}}
-<button type="submit" class="btn btn-primary btn-block">{{gettext "Change password"}}</button>
+<button type="submit" class="btn btn-primary btn-block">
+  {{gettext "Change password"}}
+</button>
 {{/if}}

misago/emberapp/tests/acceptance/change-username-test.js

@@ -56,6 +56,7 @@ test('/options/change-username form can be accessed', function(assert) {
     assert.ok(find('#id_username'));
 
     var listMessage = Ember.$.trim(find('.last-username-changes .list-group-item').text());
+    listMessage = Ember.$.trim(listMessage.replace('info_outline', ''));
     assert.equal(listMessage, 'Your username was never changed.');
   });
 });
@@ -97,6 +98,7 @@ test('/options/change-username form handles backend error', function(assert) {
     assert.equal(errorMessage, 'Nope!');
 
     var listMessage = Ember.$.trim(find('.last-username-changes .list-group-item').text());
+    listMessage = Ember.$.trim(listMessage.replace('info_outline', ''));
     assert.equal(listMessage, 'Your username was never changed.');
   });
 });
@@ -147,6 +149,7 @@ test('/options/change-username disallows username change', function(assert) {
     assert.equal(expiresMessage, 'Next change will be possible in 7 days.');
 
     var listMessage = Ember.$.trim(find('.last-username-changes .list-group-item').text());
+    listMessage = Ember.$.trim(listMessage.replace('info_outline', ''));
     assert.equal(listMessage, 'Your username was never changed.');
   });
 });