From 2f767bef1edbaf4204cafd8df9da1a49e7025be9 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 11 Apr 2017 16:44:37 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20first=20pass=20at=20animated=20i?= =?UTF-8?q?cons=20for=20save-state=20buttons=20(#637)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit refs https://github.com/TryGhost/Ghost/issues/7515 - adds animated spinner and check SVG icons - improves SVG sizing/alignment in buttons - disables old technique of fixing button size because it doesn't work now that buttons have more than a single spinner when running/saved/failed - fixes broken spinner in `gh-spin-button` components --- ghost/admin/app/components/gh-task-button.js | 8 ++--- ghost/admin/app/styles/patterns/buttons.css | 36 ++++++++++++++++--- ghost/admin/app/styles/patterns/icons.css | 16 +++++++++ .../templates/components/gh-spin-button.hbs | 2 +- .../templates/components/gh-task-button.hbs | 2 +- .../public/assets/icons/check-circle.svg | 6 +++- ghost/admin/public/assets/icons/spinner.svg | 1 + .../components/gh-task-button-test.js | 4 +-- 8 files changed, 62 insertions(+), 13 deletions(-) create mode 100644 ghost/admin/public/assets/icons/spinner.svg diff --git a/ghost/admin/app/components/gh-task-button.js b/ghost/admin/app/components/gh-task-button.js index ad5cf58375..2edeeeb3b2 100644 --- a/ghost/admin/app/components/gh-task-button.js +++ b/ghost/admin/app/components/gh-task-button.js @@ -94,11 +94,11 @@ const GhTaskButton = Component.extend({ setSize: observer('isRunning', function () { if (this.get('isRunning')) { this.set('hasRun', true); - this.$().width(this.$().width()); - this.$().height(this.$().height()); + // this.$().width(this.$().width()); + // this.$().height(this.$().height()); } else { - this.$().width(''); - this.$().height(''); + // this.$().width(''); + // this.$().height(''); } }) }); diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css index ca52ff23bb..8c29beb943 100644 --- a/ghost/admin/app/styles/patterns/buttons.css +++ b/ghost/admin/app/styles/patterns/buttons.css @@ -292,23 +292,51 @@ fieldset[disabled] .gh-btn { display: flex; align-items: center; justify-content: center; + } -.gh-btn-icon svg { - margin-right: 10px; - height: 13px; +.gh-btn-icon svg, +.gh-btn-block svg { + width: 1em; + height: 1em; + margin-right: 0.5em; fill: #fff; } .gh-btn-icon-right svg { - margin-left: 10px; + margin-left: 0.5em; margin-right: 0; } +.gh-btn-block svg { + margin-right: 0; +} + + .gh-btn-icon svg path { stroke: #fff; } +/* +/* Animated button icons +/* ---------------------------------------------------------- */ + +path.animated-check-circle { + stroke: white; + stroke-dashoffset: 300; + stroke-dasharray: 300; + animation: dash 4s ease-out forwards; +} + +@keyframes dash { + 0% { + stroke-dashoffset: 300; + } + 100% { + stroke-dashoffset: 0; + } +} + /* /* Loading Button Spinner diff --git a/ghost/admin/app/styles/patterns/icons.css b/ghost/admin/app/styles/patterns/icons.css index 4f398af7a0..1aae3eaaee 100755 --- a/ghost/admin/app/styles/patterns/icons.css +++ b/ghost/admin/app/styles/patterns/icons.css @@ -1,3 +1,19 @@ +path.animated-check-circle { + stroke: white; + stroke-dashoffset: 300; + stroke-dasharray: 300; + animation: dash 4s ease-out forwards; +} + +@keyframes dash { + 0% { + stroke-dashoffset: 300; + } + 100% { + stroke-dashoffset: 0; + } +} + /* Icons /* ---------------------------------------------------------- */ /* CUSTOM GENERATED FILE */ diff --git a/ghost/admin/app/templates/components/gh-spin-button.hbs b/ghost/admin/app/templates/components/gh-spin-button.hbs index 26cf1be6ad..211c4a2659 100644 --- a/ghost/admin/app/templates/components/gh-spin-button.hbs +++ b/ghost/admin/app/templates/components/gh-spin-button.hbs @@ -1,5 +1,5 @@ {{#if showSpinner}} - + {{inline-svg "spinner"}} {{else}} {{#if buttonText}} {{buttonText}} diff --git a/ghost/admin/app/templates/components/gh-task-button.hbs b/ghost/admin/app/templates/components/gh-task-button.hbs index 20d36db842..b205ea2f9d 100644 --- a/ghost/admin/app/templates/components/gh-task-button.hbs +++ b/ghost/admin/app/templates/components/gh-task-button.hbs @@ -7,7 +7,7 @@ )}} {{else}} - {{#if isRunning}}{{/if}} + {{#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}} diff --git a/ghost/admin/public/assets/icons/check-circle.svg b/ghost/admin/public/assets/icons/check-circle.svg index 359954e550..8cbd2aecd3 100644 --- a/ghost/admin/public/assets/icons/check-circle.svg +++ b/ghost/admin/public/assets/icons/check-circle.svg @@ -1 +1,5 @@ - \ No newline at end of file + + + + + diff --git a/ghost/admin/public/assets/icons/spinner.svg b/ghost/admin/public/assets/icons/spinner.svg new file mode 100644 index 0000000000..a348b523aa --- /dev/null +++ b/ghost/admin/public/assets/icons/spinner.svg @@ -0,0 +1 @@ + diff --git a/ghost/admin/tests/integration/components/gh-task-button-test.js b/ghost/admin/tests/integration/components/gh-task-button-test.js index 7159e82f09..03b0c26d26 100644 --- a/ghost/admin/tests/integration/components/gh-task-button-test.js +++ b/ghost/admin/tests/integration/components/gh-task-button-test.js @@ -49,7 +49,7 @@ describe('Integration: Component: gh-task-button', function() { this.get('myTask').perform(); run.later(this, function () { - expect(this.$('button')).to.have.descendants('span.spinner'); + expect(this.$('button')).to.have.descendants('svg'); }, 20); wait().then(done); @@ -189,7 +189,7 @@ describe('Integration: Component: gh-task-button', function() { }); }); - it('keeps button size when showing spinner', function (done) { + it.skip('keeps button size when showing spinner', function (done) { this.set('myTask', task(function* () { yield timeout(50); }));