🎨 animated retry icon

refs https://github.com/TryGhost/Ghost/issues/7515
- add a `retry` icon that better matches button text dimensions
- add a spin animation for the retry icon
- use the new retry icon in the default `gh-task-button` template
- add a "restart animation" method to `gh-task-button` so that repeated clicks on a button appear to register the action when local validation means that there's no transition from failed->running->failed

ghost/admin/app/components/gh-task-button.js

@@ -3,6 +3,7 @@ import observer from 'ember-metal/observer';
 import computed, {reads} from 'ember-computed';
 import {isBlank} from 'ember-utils';
 import {invokeAction} from 'ember-invoke-action';
+import {task, timeout} from 'ember-concurrency';
 
 /**
  * Task Button works exactly like Spin button, but with one major difference:
@@ -87,6 +88,8 @@ const GhTaskButton = Component.extend({
         invokeAction(this, 'action');
         task.perform();
 
+        this.get('_restartAnimation').perform();
+
         // prevent the click from bubbling and triggering form actions
         return false;
     },
@@ -100,6 +103,18 @@ const GhTaskButton = Component.extend({
             // this.$().width('');
             // this.$().height('');
         }
+    }),
+
+    // when local validation fails there's no transition from failed->running
+    // so we want to restart the retry spinner animation to show something
+    // has happened when the button is clicked
+    _restartAnimation: task(function* () {
+        if (this.$('.retry-animated').length) {
+            let elem = this.$('.retry-animated')[0];
+            elem.classList.remove('retry-animated');
+            yield timeout(10);
+            elem.classList.add('retry-animated');
+        }
     })
 });
 

ghost/admin/app/styles/patterns/buttons.css

@@ -292,7 +292,6 @@ fieldset[disabled] .gh-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-
 }
 
 .gh-btn-icon svg,
@@ -308,15 +307,14 @@ fieldset[disabled] .gh-btn {
     margin-right: 0;
 }
 
-.gh-btn-block svg {
-    margin-right: 0;
-}
-
-
 .gh-btn-icon svg path {
     stroke: #fff;
 }
 
+.gh-btn svg.no-margin {
+    margin: 0;
+}
+
 /*
 /* Animated button icons
 /* ---------------------------------------------------------- */

ghost/admin/app/styles/patterns/icons.css

@@ -1,3 +1,5 @@
+/* Animated checkmark ------------------------------------------------------- */
+
 path.animated-check-circle {
     stroke: white;
     stroke-dashoffset: 300;
@@ -14,6 +16,18 @@ path.animated-check-circle {
     }
 }
 
+/* Animated retry cross ----------------------------------------------------- */
+
+svg.retry-animated {
+    animation: rotate-360 0.5s ease-in-out forwards;
+}
+
+@keyframes rotate-360 {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+
 /* Icons
 /* ---------------------------------------------------------- */
 /* CUSTOM GENERATED FILE */

ghost/admin/app/templates/components/gh-task-button.hbs

@@ -10,6 +10,6 @@
     {{#if isRunning}}{{inline-svg "spinner"}}{{/if}}
     {{if (or isIdle isRunning) buttonText}}
     {{#if isSuccess}}{{inline-svg "check-circle"}} {{successText}}{{/if}}
-    {{#if isFailure}}{{inline-svg "close"}} {{failureText}}{{/if}}
+    {{#if isFailure}}{{inline-svg "retry"}} {{failureText}}{{/if}}
     </span>
 {{/if}}

ghost/admin/ember-cli-build.js

@@ -150,7 +150,13 @@ module.exports = function (defaults) {
                 plugins: [
                     {removeDimensions: true},
                     {removeTitle: true},
-                    {removeXMLNS: true}
+                    {removeXMLNS: true},
+                    // Transforms on groups are necessary to work around Firefox
+                    // not supporting transform-origin on line/path elements.
+                    {convertPathData: {
+                        applyTransforms: false
+                    }},
+                    {moveGroupAttrsToElems: false}
                 ]
             }
         }

ghost/admin/public/assets/icons/retry.svg

@@ -0,0 +1,6 @@
+<svg class="retry-animated" viewBox="0 0 24 24">
+    <g transform="translate(12,12)">
+        <path d="M0 -12V12" transform="rotate(-45deg)"></path>
+        <path d="M0 -12V12" transform="rotate(45deg)"></path>
+    </g>
+</svg>