From c478564513b43e8324bf54210e1fddbf43eb53db Mon Sep 17 00:00:00 2001 From: Aileen Nowak Date: Thu, 20 Jul 2017 17:46:31 +0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=20Publish=20menu=20wording=20an?= =?UTF-8?q?d=20saving=20states=20improvements=20(#788)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes TryGhost/Ghost#8696 - Changes the `gh-save-button` component to allow a custom `runningText` which would be rendered in the button when the current task is running. - Adds a `runningText` CP to `gh-publishmenu` component, which will render (depending of post status and desired save type) 'Unpublishing', 'Publishing', 'Scheduling', 'Updating', 'Unpublishing', 'Rescheduling', and 'Unscheduling'. --- .../app/components/gh-publishmenu-draft.js | 2 +- ghost/admin/app/components/gh-publishmenu.js | 37 ++++++++++++++++--- .../templates/components/gh-publishmenu.hbs | 1 + .../templates/components/gh-task-button.hbs | 4 +- ghost/admin/tests/acceptance/editor-test.js | 14 +++---- .../components/gh-task-button-test.js | 17 +++++++++ 6 files changed, 59 insertions(+), 16 deletions(-) diff --git a/ghost/admin/app/components/gh-publishmenu-draft.js b/ghost/admin/app/components/gh-publishmenu-draft.js index d2708a707b..00af72a381 100644 --- a/ghost/admin/app/components/gh-publishmenu-draft.js +++ b/ghost/admin/app/components/gh-publishmenu-draft.js @@ -35,7 +35,7 @@ export default Component.extend({ this.get('setSaveType')(type); // when publish: switch to now to avoid validation errors - // when schedule: switch to last valid or new minimum scheduled date + // when schedule: switch to last valid or new minimum scheduled date if (type === 'publish') { if (!hasDateError && !hasTimeError) { this._publishedAtBlogTZ = this.get('post.publishedAtBlogTZ'); diff --git a/ghost/admin/app/components/gh-publishmenu.js b/ghost/admin/app/components/gh-publishmenu.js index 428c3249ab..6ad85e7c86 100644 --- a/ghost/admin/app/components/gh-publishmenu.js +++ b/ghost/admin/app/components/gh-publishmenu.js @@ -39,9 +39,31 @@ export default Component.extend({ } }), - buttonText: computed('postState', 'saveType', function() { - let postState = this.get('postState'); + _runningText: computed('postState', 'saveType', function() { let saveType = this.get('saveType'); + let postState = this.get('postState'); + let runningText; + + if (postState === 'draft') { + runningText = saveType === 'publish' ? 'Publishing' : 'Scheduling'; + } + + if (postState === 'published') { + runningText = saveType === 'publish' ? 'Updating' : 'Unpublishing'; + } + + if (postState === 'scheduled') { + runningText = saveType === 'schedule' ? 'Rescheduling' : 'Unscheduling'; + } + + return runningText || 'Publishing'; + }), + + runningText: null, + + buttonText: computed('postState', 'saveType', function() { + let saveType = this.get('saveType'); + let postState = this.get('postState'); let buttonText; if (postState === 'draft') { @@ -49,11 +71,11 @@ export default Component.extend({ } if (postState === 'published') { - buttonText = saveType === 'publish' ? 'Update' : 'Un-publish'; + buttonText = saveType === 'publish' ? 'Update' : 'Unpublish'; } if (postState === 'scheduled') { - buttonText = saveType === 'schedule' ? 'Re-schedule' : 'Un-schedule'; + buttonText = saveType === 'schedule' ? 'Reschedule' : 'Unschedule'; } return buttonText || 'Publish'; @@ -69,17 +91,20 @@ export default Component.extend({ } if (previousStatus === 'published') { - buttonText = postState === 'draft' ? 'Un-published' : 'Updated'; + buttonText = postState === 'draft' ? 'Unpublished' : 'Updated'; } if (previousStatus === 'scheduled') { - buttonText = postState === 'draft' ? 'Un-scheduled' : 'Re-scheduled'; + buttonText = postState === 'draft' ? 'Unscheduled' : 'Rescheduled'; } return buttonText; }), save: task(function* () { + // runningText needs to be declared before the other states change during the + // save action. + this.set('runningText', this.get('_runningText')); this.set('_previousStatus', this.get('post.status')); this.get('setSaveType')(this.get('saveType')); diff --git a/ghost/admin/app/templates/components/gh-publishmenu.hbs b/ghost/admin/app/templates/components/gh-publishmenu.hbs index 646587f41b..9791d5edb0 100644 --- a/ghost/admin/app/templates/components/gh-publishmenu.hbs +++ b/ghost/admin/app/templates/components/gh-publishmenu.hbs @@ -34,6 +34,7 @@ {{gh-task-button buttonText task=save successText=successText + runningText=runningText class="gh-btn gh-btn-blue gh-publishmenu-button gh-btn-icon" data-test-publishmenu-save=true}} diff --git a/ghost/admin/app/templates/components/gh-task-button.hbs b/ghost/admin/app/templates/components/gh-task-button.hbs index e509b7693e..9217adba0c 100644 --- a/ghost/admin/app/templates/components/gh-task-button.hbs +++ b/ghost/admin/app/templates/components/gh-task-button.hbs @@ -7,8 +7,8 @@ )}} {{else}} - {{#if isRunning}}{{inline-svg "spinner" class="gh-icon-spinner"}}{{/if}} - {{if (or isIdle isRunning) buttonText}} + {{#if isRunning}}{{inline-svg "spinner" class="gh-icon-spinner"}}{{runningText}}{{/if}} + {{#if isIdle}}{{buttonText}}{{/if}} {{#if isSuccess}}{{inline-svg "check-circle"}} {{successText}}{{/if}} {{#if isFailure}}{{inline-svg "retry"}} {{failureText}}{{/if}} diff --git a/ghost/admin/tests/acceptance/editor-test.js b/ghost/admin/tests/acceptance/editor-test.js index 77008286f4..dc50ed7cac 100644 --- a/ghost/admin/tests/acceptance/editor-test.js +++ b/ghost/admin/tests/acceptance/editor-test.js @@ -188,7 +188,7 @@ describe('Acceptance: Editor', function() { expect( find(testSelector('publishmenu-save')).text().trim(), 'published post unpublish button text' - ).to.equal('Un-publish'); + ).to.equal('Unpublish'); // post id 2 is a published post, checking for published post behaviour now await visit('/editor/2'); @@ -258,14 +258,14 @@ describe('Acceptance: Editor', function() { expect( find(testSelector('publishmenu-save')).text().trim(), 'published post unpublish button text' - ).to.equal('Un-publish'); + ).to.equal('Unpublish'); await click(testSelector('publishmenu-save')); expect( find(testSelector('publishmenu-save')).text().trim(), 'publish menu save button updated after published post is unpublished' - ).to.equal('Un-published'); + ).to.equal('Unpublished'); expect( find(testSelector('publishmenu-draft')), @@ -324,14 +324,14 @@ describe('Acceptance: Editor', function() { expect( find(testSelector('publishmenu-save')).text().trim(), 'scheduled post button reschedule text' - ).to.equal('Re-schedule'); + ).to.equal('Reschedule'); await click(testSelector('publishmenu-save')); expect( find(testSelector('publishmenu-save')).text().trim(), 'publish menu save button text for a rescheduled post' - ).to.equal('Re-scheduled'); + ).to.equal('Rescheduled'); await click(testSelector('publishmenu-cancel')); @@ -352,14 +352,14 @@ describe('Acceptance: Editor', function() { expect( find(testSelector('publishmenu-save')).text().trim(), 'publish menu save button updated after scheduled post is unscheduled' - ).to.equal('Un-schedule'); + ).to.equal('Unschedule'); await click(testSelector('publishmenu-save')); expect( find(testSelector('publishmenu-save')).text().trim(), 'publish menu save button updated after scheduled post is unscheduled' - ).to.equal('Un-scheduled'); + ).to.equal('Unscheduled'); await click(testSelector('publishmenu-cancel')); 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 6d2c7d283a..135e8f9040 100644 --- a/ghost/admin/tests/integration/components/gh-task-button-test.js +++ b/ghost/admin/tests/integration/components/gh-task-button-test.js @@ -55,6 +55,23 @@ describe('Integration: Component: gh-task-button', function() { wait().then(done); }); + it('shows running text when passed whilst running', function (done) { + this.set('myTask', task(function* () { + yield timeout(50); + })); + + this.render(hbs`{{gh-task-button task=myTask runningText="Running"}}`); + + this.get('myTask').perform(); + + run.later(this, function () { + expect(this.$('button')).to.have.descendants('svg'); + expect(this.$('button')).to.contain('Running'); + }, 20); + + wait().then(done); + }); + it('appears disabled whilst running', function (done) { this.set('myTask', task(function* () { yield timeout(50);