Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Updated time formatting for drafts and scheduled posts (#19924)

Browse source 
Ref TRI-27
- Published posts now show the published date in post list, instead of
updated date.
- The `gh-format-post-time` helper now has a `relative` and `absolute`
and option instead of formatting being tied to `draft` and `published`
state. This allows for more flexibility in how dates are displayed.
- Draft, scheduled and published posts now follow the same time
formatting pattern: today, yesterday, or explicit dates if further in
the past.
- Hover states for dates in the post list have been removed.
- Title attributes are added indicating whether timestamp refers to updated_at or published_at
- The scheduling logic on the publish page still uses relative
formatting.
This commit is contained in:
Sanne de Vries 2024-03-27 11:30:14 +01:00 • committed by GitHub
parent dcbbfbba70
commit c39c2de067
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 50 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/editor/modals/publish-flow/options.hbs
View file

@ -129,7 +129,7 @@
<div class="gh-publish-setting-trigger"> <div class="gh-publish-setting-trigger">
<span> <span>
{{#if @publishOptions.isScheduled}} {{#if @publishOptions.isScheduled}}
{{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}} {{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC relative=true)}}
{{else}} {{else}}
Right now Right now
{{/if}} {{/if}}

31
ghost/admin/app/components/posts-list/list-item.hbs
View file

@ -22,13 +22,15 @@
- -
</span> </span>
<span class="gh-content-entry-date"> {{#if (or @post.isDraft @post.isScheduled)}}
{{#if this.isHovered}} <span class="gh-content-entry-date" title="Updated {{gh-format-post-time @post.updatedAtUTC absolute=true}}">
{{gh-format-post-time @post.updatedAtUTC format="D MMM YYYY"}} {{gh-format-post-time @post.updatedAtUTC absolute=true short=true}}
{{else}} </span>
{{gh-format-post-time @post.updatedAtUTC draft=true}} {{else}}
{{/if}} <span class="gh-content-entry-date" title="Published {{gh-format-post-time @post.publishedAtUTC absolute=true}}">
</span> {{gh-format-post-time @post.publishedAtUTC absolute=true short=true}}
</span>
{{/if}}
</p> </p>
<p class="gh-content-entry-status"> <p class="gh-content-entry-status">
<span class="published"> <span class="published">
@ -72,12 +74,15 @@
{{/if}} {{/if}}
- -
</span> </span>
<span class="gh-content-entry-date" {{on "mouseover" (fn (mut this.isDateHovered) true)}} {{on "mouseleave" (fn (mut this.isDateHovered) false)}}> {{#if (or @post.isDraft @post.isScheduled)}}
{{gh-format-post-time @post.updatedAtUTC draft=true}} <span class="gh-content-entry-date" title="Updated {{gh-format-post-time @post.updatedAtUTC absolute=true}}">
{{#if this.isDateHovered}} {{gh-format-post-time @post.updatedAtUTC absolute=true short=true}}
<span {{css-transition "anim-fade-in-scale"}}>on {{gh-format-post-time @post.updatedAtUTC format="D MMM YYYY"}}</span> </span>
{{/if}} {{else}}
</span> <span class="gh-content-entry-date" title="Published {{gh-format-post-time @post.publishedAtUTC absolute=true}}">
{{gh-format-post-time @post.publishedAtUTC absolute=true short=true}}
</span>
{{/if}}
{{!-- {{#if @post.lexical}} {{!-- {{#if @post.lexical}}
<span class="gh-content-entry-date">– Lexical</span> <span class="gh-content-entry-date">– Lexical</span>
{{/if}} --}} {{/if}} --}}

22
ghost/admin/app/helpers/gh-format-post-time.js
View file

@ -3,9 +3,9 @@ import moment from 'moment-timezone';
import {assert} from '@ember/debug'; import {assert} from '@ember/debug';
import {inject as service} from '@ember/service'; import {inject as service} from '@ember/service';
export function formatPostTime(timeago, {timezone = 'etc/UTC', format, draft, scheduled, published}) { export function formatPostTime(timeago, {timezone = 'etc/UTC', format, relative, absolute, scheduled, short}) {
if (draft) { if (relative) {
// No special handling for drafts, just use moment.from // No special handling, just use moment.from
return moment(timeago).from(moment.utc()); return moment(timeago).from(moment.utc());
} }
@ -24,7 +24,8 @@ export function formatPostTime(timeago, {timezone = 'etc/UTC', format, draft, sc
utcOffset = `(UTC${time.format('Z').replace(/([+-])0/, '$1').replace(/:00/, '')})`; utcOffset = `(UTC${time.format('Z').replace(/([+-])0/, '$1').replace(/:00/, '')})`;
} }
// If not a draft and post was published <= 12 hours ago // If draft was edited <= 12 hours ago
// or post was published <= 12 hours ago
// or scheduled to be published <= 12 hours from now, use moment.from // or scheduled to be published <= 12 hours from now, use moment.from
if (Math.abs(now.diff(time, 'hours')) <= 12) { if (Math.abs(now.diff(time, 'hours')) <= 12) {
return time.from(now); return time.from(now);
@ -36,11 +37,16 @@ export function formatPostTime(timeago, {timezone = 'etc/UTC', format, draft, sc
return scheduled ? `at ${formatted}` : formatted; return scheduled ? `at ${formatted}` : formatted;
} }
// if published yesterday, render time + yesterday // if draft was edited yesterday, render time + yesterday
// if post was published yesterday, render time + yesterday
// if short format, just render Yesterday (without time)
// This check comes before scheduled, because there are likely to be more published // This check comes before scheduled, because there are likely to be more published
// posts than scheduled posts. // posts than scheduled posts.
if (published && time.isSame(now.clone().subtract(1, 'days').startOf('day'), 'day')) { if (absolute && time.isSame(now.clone().subtract(1, 'days').startOf('day'), 'day')) {
return time.format(`HH:mm [${utcOffset}] [Yesterday]`); if (short) {
return time.format(`[Yesterday]`);
}
return time.format(`HH:mm [${utcOffset}] [yesterday]`);
} }
// if scheduled for tomorrow, render the time + tomorrow // if scheduled for tomorrow, render the time + tomorrow
@ -48,7 +54,7 @@ export function formatPostTime(timeago, {timezone = 'etc/UTC', format, draft, sc
return time.format(`[at] HH:mm [${utcOffset}] [tomorrow]`); return time.format(`[at] HH:mm [${utcOffset}] [tomorrow]`);
} }
// Else, render just the date if published, or the time & date if scheduled // Else, render just the date if edited or published, or the time & date if scheduled
let f = scheduled ? `[at] HH:mm [${utcOffset}] [on] DD MMM YYYY` : 'DD MMM YYYY'; let f = scheduled ? `[at] HH:mm [${utcOffset}] [on] DD MMM YYYY` : 'DD MMM YYYY';
return time.format(f); return time.format(f);
} }

23
ghost/admin/tests/integration/helpers/gh-format-post-time-test.js
View file

@ -42,7 +42,7 @@ describe('Integration: Helper: gh-format-post-time', function () {
let mockDate = moment.utc().subtract(1, 'hour'); let mockDate = moment.utc().subtract(1, 'hour');
this.set('mockDate', mockDate); this.set('mockDate', mockDate);
await render(hbs`{{gh-format-post-time mockDate draft=true}}`); await render(hbs`{{gh-format-post-time mockDate relative=true}}`);
expect(this.element).to.have.trimmed.text('an hour ago'); expect(this.element).to.have.trimmed.text('an hour ago');
}); });
@ -50,7 +50,7 @@ describe('Integration: Helper: gh-format-post-time', function () {
let mockDate = moment.utc().subtract(13, 'minutes'); let mockDate = moment.utc().subtract(13, 'minutes');
this.set('mockDate', mockDate); this.set('mockDate', mockDate);
await render(hbs`{{gh-format-post-time mockDate published=true}}`); await render(hbs`{{gh-format-post-time mockDate absolute=true}}`);
expect(this.element).to.have.trimmed.text('13 minutes ago'); expect(this.element).to.have.trimmed.text('13 minutes ago');
}); });
@ -70,7 +70,7 @@ describe('Integration: Helper: gh-format-post-time', function () {
}); });
this.set('mockDate', mockDate); this.set('mockDate', mockDate);
await render(hbs`{{gh-format-post-time mockDate published=true}}`); await render(hbs`{{gh-format-post-time mockDate absolute=true}}`);
expect(this.element).to.have.trimmed.text(`${expectedTime} (UTC) Today`); expect(this.element).to.have.trimmed.text(`${expectedTime} (UTC) Today`);
}); });
@ -93,8 +93,19 @@ describe('Integration: Helper: gh-format-post-time', function () {
}); });
this.set('mockDate', mockDate); this.set('mockDate', mockDate);
await render(hbs`{{gh-format-post-time mockDate published=true}}`); await render(hbs`{{gh-format-post-time mockDate absolute=true}}`);
expect(this.element).to.have.trimmed.text(`${expectedTime} (UTC) Yesterday`); expect(this.element).to.have.trimmed.text(`${expectedTime} (UTC) yesterday`);
});
it('returns correct short format if post was published yesterday', async function () {
let {mockDate} = setupMockDate({
date: '2017-09-05T16:00:00Z',
utcDate: '2017-09-06T18:00:00Z'
});
this.set('mockDate', mockDate);
await render(hbs`{{gh-format-post-time mockDate absolute=true short=true}}`);
expect(this.element).to.have.trimmed.text(`Yesterday`);
}); });
it('returns correct format if post is scheduled for tomorrow', async function () { it('returns correct format if post is scheduled for tomorrow', async function () {
@ -115,7 +126,7 @@ describe('Integration: Helper: gh-format-post-time', function () {
}); });
this.set('mockDate', mockDate); this.set('mockDate', mockDate);
await render(hbs`{{gh-format-post-time mockDate published=true}}`); await render(hbs`{{gh-format-post-time mockDate absolute=true}}`);
expect(this.element).to.have.trimmed.text('02 Sep 2017'); expect(this.element).to.have.trimmed.text('02 Sep 2017');
}); });