diff --git a/ghost/admin/app/components/gh-task-button.js b/ghost/admin/app/components/gh-task-button.js index 2edeeeb3b2..9d4504ce88 100644 --- a/ghost/admin/app/components/gh-task-button.js +++ b/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'); + } }) }); diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index 8c29beb943..bf2ab8eeb7 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/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 /* ---------------------------------------------------------- */ diff --git a/ghost/admin/app/styles/patterns/icons.css b/ghost/admin/app/styles/patterns/icons.css index 1aae3eaaee..4abfef3720 100755 --- a/ghost/admin/app/styles/patterns/icons.css +++ b/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 */ diff --git a/ghost/admin/app/templates/components/gh-task-button.hbs b/ghost/admin/app/templates/components/gh-task-button.hbs index b205ea2f9d..c4a859e497 100644 --- a/ghost/admin/app/templates/components/gh-task-button.hbs +++ b/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}} {{/if}} diff --git a/ghost/admin/ember-cli-build.js b/ghost/admin/ember-cli-build.js index 9394a4d357..9ced5d5fb2 100644 --- a/ghost/admin/ember-cli-build.js +++ b/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} ] } } diff --git a/ghost/admin/public/assets/icons/retry.svg b/ghost/admin/public/assets/icons/retry.svg new file mode 100644 index 0000000000..f2fdede92b --- /dev/null +++ b/ghost/admin/public/assets/icons/retry.svg @@ -0,0 +1,6 @@ + + + + + +