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">
<span>
{{#if @publishOptions.isScheduled}}
{{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC draft=true)}}
{{capitalize (gh-format-post-time @publishOptions.scheduledAtUTC relative=true)}}
{{else}}
Right now
{{/if}}

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

@ -22,13 +22,15 @@
-
</span>
<span class="gh-content-entry-date">
{{#if this.isHovered}}
{{gh-format-post-time @post.updatedAtUTC format="D MMM YYYY"}}
{{else}}
{{gh-format-post-time @post.updatedAtUTC draft=true}}
{{/if}}
</span>
{{#if (or @post.isDraft @post.isScheduled)}}
<span class="gh-content-entry-date" title="Updated {{gh-format-post-time @post.updatedAtUTC absolute=true}}">
{{gh-format-post-time @post.updatedAtUTC absolute=true short=true}}
</span>
{{else}}
<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}}
</p>
<p class="gh-content-entry-status">
<span class="published">
@ -72,12 +74,15 @@
{{/if}}
-
</span>
<span class="gh-content-entry-date" {{on "mouseover" (fn (mut this.isDateHovered) true)}} {{on "mouseleave" (fn (mut this.isDateHovered) false)}}>
{{gh-format-post-time @post.updatedAtUTC draft=true}}
{{#if this.isDateHovered}}
<span {{css-transition "anim-fade-in-scale"}}>on {{gh-format-post-time @post.updatedAtUTC format="D MMM YYYY"}}</span>
{{/if}}
</span>
{{#if (or @post.isDraft @post.isScheduled)}}
<span class="gh-content-entry-date" title="Updated {{gh-format-post-time @post.updatedAtUTC absolute=true}}">
{{gh-format-post-time @post.updatedAtUTC absolute=true short=true}}
</span>
{{else}}
<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}}
<span class="gh-content-entry-date">– Lexical</span>
{{/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 {inject as service} from '@ember/service';
export function formatPostTime(timeago, {timezone = 'etc/UTC', format, draft, scheduled, published}) {
if (draft) {
// No special handling for drafts, just use moment.from
export function formatPostTime(timeago, {timezone = 'etc/UTC', format, relative, absolute, scheduled, short}) {
if (relative) {
// No special handling, just use moment.from
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/, '')})`;
}
// 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
if (Math.abs(now.diff(time, 'hours')) <= 12) {
return time.from(now);
@ -36,11 +37,16 @@ export function formatPostTime(timeago, {timezone = 'etc/UTC', format, draft, sc
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
// posts than scheduled posts.
if (published && time.isSame(now.clone().subtract(1, 'days').startOf('day'), 'day')) {
return time.format(`HH:mm [${utcOffset}] [Yesterday]`);
if (absolute && time.isSame(now.clone().subtract(1, 'days').startOf('day'), 'day')) {
if (short) {
return time.format(`[Yesterday]`);
}
return time.format(`HH:mm [${utcOffset}] [yesterday]`);
}
// 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]`);
}
// 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';
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');
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');
});
@ -50,7 +50,7 @@ describe('Integration: Helper: gh-format-post-time', function () {
let mockDate = moment.utc().subtract(13, 'minutes');
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');
});
@ -70,7 +70,7 @@ describe('Integration: Helper: gh-format-post-time', function () {
});
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`);
});
@ -93,8 +93,19 @@ describe('Integration: Helper: gh-format-post-time', function () {
});
this.set('mockDate', mockDate);
await render(hbs`{{gh-format-post-time mockDate published=true}}`);
expect(this.element).to.have.trimmed.text(`${expectedTime} (UTC) Yesterday`);
await render(hbs`{{gh-format-post-time mockDate absolute=true}}`);
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 () {
@ -115,7 +126,7 @@ describe('Integration: Helper: gh-format-post-time', function () {
});
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');
});