From e5611f32d55a6dd731681150fc7869137e29a659 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Sat, 18 Apr 2020 12:42:04 +0200 Subject: [PATCH 01/29] Display the right date all the time --- client/my-sites/post-relative-time-status/index.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index d8a73cb9ae7f7d..69b0b592643cc0 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -33,14 +33,20 @@ class PostRelativeTime extends React.PureComponent { target: null, }; + /** + * Get the date to be displayed depending on the status of the post + */ getTimestamp() { switch ( this.props.post.status ) { case 'new': return null; + case 'draft': - case 'future': + case 'trash': case 'pending': return this.props.post.modified; + + case 'future': default: return this.props.post.date; } From 3cee3d44c9de90d8075e883a601d2425da9ef63f Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Sat, 18 Apr 2020 12:43:00 +0200 Subject: [PATCH 02/29] Small refactor as post cannot be null (props.isRequired) --- .../post-relative-time-status/index.jsx | 46 +++++++------------ 1 file changed, 16 insertions(+), 30 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 69b0b592643cc0..f6da1b76becda8 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -4,7 +4,6 @@ import PropTypes from 'prop-types'; import { localize } from 'i18n-calypso'; import React from 'react'; -import { includes } from 'lodash'; /** * Internal dependencies @@ -52,19 +51,13 @@ class PostRelativeTime extends React.PureComponent { } } - getDisplayedTimeFromPost( post ) { + getDisplayedTimeFromPost() { const moment = this.props.moment; const now = moment(); - if ( ! post ) { - // Placeholder text: "a few seconds ago" in English locale - return now.fromNow(); - } - - const { status, modified, date } = post; - const time = moment( includes( [ 'draft', 'pending', 'future' ], status ) ? modified : date ); - if ( now.diff( time, 'days' ) >= 7 ) { + const time = this.getTimestamp(); + if ( now.diff( this.getTimestamp(), 'days' ) >= 7 ) { // Like "Mar 15, 2013 6:23 PM" in English locale return time.format( 'lll' ); } @@ -75,16 +68,16 @@ class PostRelativeTime extends React.PureComponent { getTimeText() { const time = this.getTimestamp(); - if ( ! time ) { - return null; - } - return ( - - + { time && ( + <> + + + + ) } ); } @@ -105,7 +98,7 @@ class PostRelativeTime extends React.PureComponent { } else if ( status === 'future' ) { const moment = this.props.moment; const now = moment(); - const scheduledDate = moment( this.props.post.date ); + const scheduledDate = moment( this.getTimestamp() ); // If the content is scheduled to be release within a year, do not display the year at the end const scheduledTime = scheduledDate.calendar( null, { sameElse: this.props.translate( 'll [at] LT', { @@ -152,18 +145,9 @@ class PostRelativeTime extends React.PureComponent { } render() { - const { post, showPublishedStatus } = this.props; + const { showPublishedStatus } = this.props; const timeText = this.getTimeText(); - const statusText = this.getStatusText(); - const relativeTimeClass = timeText ? 'post-relative-time-status' : null; - const time = this.getTimestamp(); - - let innerText = ( - - { timeText } - { ( post.status === 'future' || showPublishedStatus ) && statusText } - - ); + let innerText = { showPublishedStatus ? this.getStatusText() : timeText }; if ( this.props.link ) { const rel = this.props.target === '_blank' ? 'noopener noreferrer' : null; @@ -180,6 +164,8 @@ class PostRelativeTime extends React.PureComponent { ); } + const relativeTimeClass = timeText ? 'post-relative-time-status' : null; + const time = this.getTimestamp(); return (
{ innerText } From d676b2ed6963ad025a91b73d64ea22d1aa18d0b8 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Sat, 18 Apr 2020 12:50:34 +0200 Subject: [PATCH 03/29] clean up - includeNonDraftStatuses was never used across the project --- client/my-sites/post-relative-time-status/index.jsx | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index f6da1b76becda8..9856e12e3b23ce 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -20,14 +20,12 @@ class PostRelativeTime extends React.PureComponent { static propTypes = { showPublishedStatus: PropTypes.bool.isRequired, post: PropTypes.object.isRequired, - includeNonDraftStatuses: PropTypes.bool, link: PropTypes.string, target: PropTypes.string, gridiconSize: PropTypes.number, }; static defaultProps = { - includeNonDraftStatuses: false, link: null, target: null, }; @@ -124,14 +122,6 @@ class PostRelativeTime extends React.PureComponent { statusText = this.props.translate( 'trashed' ); statusClassName += ' is-trash'; statusIcon = 'trash'; - } else if ( this.props.includeBasicStatus ) { - if ( status === 'draft' ) { - statusText = this.props.translate( 'draft' ); - } else if ( status === 'publish' ) { - statusText = this.props.translate( 'published' ); - } else if ( status === 'new' ) { - statusText = this.props.translate( 'Publish immediately' ); - } } if ( statusText ) { From 36be7c598bb1de2881d3936b335e8ab5f02ca2c8 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Sat, 18 Apr 2020 12:53:51 +0200 Subject: [PATCH 04/29] Fix CamelCase --- client/blocks/post-item/index.jsx | 2 +- client/my-sites/pages/page-card-info/index.jsx | 2 +- client/my-sites/post-relative-time-status/index.jsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/blocks/post-item/index.jsx b/client/blocks/post-item/index.jsx index 425a32e4c454f4..7d492c87869f47 100644 --- a/client/blocks/post-item/index.jsx +++ b/client/blocks/post-item/index.jsx @@ -211,7 +211,7 @@ class PostItem extends React.Component { post={ post } link={ enabledPostLink } target={ null } - gridiconSize={ ICON_SIZE } + gridIconSize={ ICON_SIZE } includeBasicStatus={ true } showPublishedStatus={ showPublishedStatus } /> diff --git a/client/my-sites/pages/page-card-info/index.jsx b/client/my-sites/pages/page-card-info/index.jsx index 0c2efeedc98f3f..71b0d7fe404034 100644 --- a/client/my-sites/pages/page-card-info/index.jsx +++ b/client/my-sites/pages/page-card-info/index.jsx @@ -62,7 +62,7 @@ function PageCardInfo( { post={ page } link={ contentLink.contentLinkURL } target={ contentLink.contentLinkTarget } - gridiconSize={ ICON_SIZE } + gridIconSize={ ICON_SIZE } includeBasicStatus={ true } /> ) } diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 9856e12e3b23ce..5502521f1b125c 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -22,7 +22,7 @@ class PostRelativeTime extends React.PureComponent { post: PropTypes.object.isRequired, link: PropTypes.string, target: PropTypes.string, - gridiconSize: PropTypes.number, + gridIconSize: PropTypes.number, }; static defaultProps = { @@ -70,7 +70,7 @@ class PostRelativeTime extends React.PureComponent { { time && ( <> - + @@ -127,7 +127,7 @@ class PostRelativeTime extends React.PureComponent { if ( statusText ) { return ( - + { statusText } ); From 5ca266b0c30941430e5173e5a870f8bea788ed8d Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Sat, 18 Apr 2020 19:05:13 +0200 Subject: [PATCH 05/29] More refactor. Added "sticky" status for posts on search and listing --- .../post-relative-time-status/index.jsx | 95 +++++++++++++------ 1 file changed, 67 insertions(+), 28 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 5502521f1b125c..5b43368f3da134 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -54,7 +54,7 @@ class PostRelativeTime extends React.PureComponent { const now = moment(); - const time = this.getTimestamp(); + const time = moment( this.getTimestamp() ); if ( now.diff( this.getTimestamp(), 'days' ) >= 7 ) { // Like "Mar 15, 2013 6:23 PM" in English locale return time.format( 'lll' ); @@ -64,6 +64,23 @@ class PostRelativeTime extends React.PureComponent { return time.fromNow(); } + getDisplayedTimeForLabel() { + const moment = this.props.moment; + const now = moment(); + const scheduledDate = moment( this.getTimestamp() ); + // If the content is scheduled to be release within a year, do not display the year at the end + const scheduledTime = scheduledDate.calendar( null, { + sameElse: this.props.translate( 'll [at] LT', { + comment: + 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated', + } ), + } ); + + return scheduledDate.diff( now, 'years' ) > 0 + ? scheduledTime + : scheduledTime.replace( scheduledDate.format( 'Y' ), '' ); + } + getTimeText() { const time = this.getTimestamp(); return ( @@ -80,48 +97,65 @@ class PostRelativeTime extends React.PureComponent { ); } - getStatusText() { + getStatusText( onlySticky = false ) { const status = this.props.post.status; let statusClassName = 'post-relative-time-status__status'; let statusIcon = 'aside'; let statusText; - if ( this.props.post.sticky ) { + if ( onlySticky ) { statusText = this.props.translate( 'sticky' ); statusClassName += ' is-sticky'; statusIcon = 'bookmark-outline'; } else if ( status === 'pending' ) { statusText = this.props.translate( 'pending review' ); statusClassName += ' is-pending'; - } else if ( status === 'future' ) { - const moment = this.props.moment; - const now = moment(); - const scheduledDate = moment( this.getTimestamp() ); - // If the content is scheduled to be release within a year, do not display the year at the end - const scheduledTime = scheduledDate.calendar( null, { - sameElse: this.props.translate( 'll [at] LT', { - comment: - 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated', - } ), - } ); - - const displayScheduleTime = - scheduledDate.diff( now, 'years' ) > 0 - ? scheduledTime - : scheduledTime.replace( scheduledDate.format( 'Y' ), '' ); - - statusText = this.props.translate( 'scheduled for %(displayScheduleTime)s', { - comment: '%(displayScheduleTime)s is when a scheduled post is set to be published', + } else if ( status === 'trash' ) { + statusClassName += ' is-trash'; + statusIcon = 'trash'; + const displayScheduleTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'trashed on %(displayScheduleTime)s', { + comment: '%(displayScheduleTime)s is when a post or page was trashed', args: { displayScheduleTime, }, } ); + } else if ( status === 'future' ) { statusClassName += ' is-scheduled'; statusIcon = 'calendar'; - } else if ( status === 'trash' ) { - statusText = this.props.translate( 'trashed' ); - statusClassName += ' is-trash'; - statusIcon = 'trash'; + const displayScheduleTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'scheduled for %(displayScheduleTime)s', { + comment: '%(displayScheduleTime)s is when a scheduled post or page is set to be published', + args: { + displayScheduleTime, + }, + } ); + } else if ( status === 'draft' ) { + const displayScheduleTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'draft on %(displayScheduleTime)s', { + comment: '%(displayScheduleTime)s is when a draft post or page was last modified', + args: { + displayScheduleTime, + }, + } ); + } else if ( status === 'publish' ) { + const displayScheduleTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'published on %(displayScheduleTime)s', { + comment: '%(displayScheduleTime)s is when a post or page was last modified', + args: { + displayScheduleTime, + }, + } ); + } else if ( status === 'private' ) { + const displayScheduleTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'private on %(displayScheduleTime)s', { + comment: '%(displayScheduleTime)s is when a private post or page was last modified', + args: { + displayScheduleTime, + }, + } ); + } else if ( status === 'new' ) { + statusText = this.props.translate( 'Publish immediately' ); } if ( statusText ) { @@ -135,9 +169,14 @@ class PostRelativeTime extends React.PureComponent { } render() { - const { showPublishedStatus } = this.props; + const { showPublishedStatus, post } = this.props; const timeText = this.getTimeText(); - let innerText = { showPublishedStatus ? this.getStatusText() : timeText }; + let innerText = ( + + { showPublishedStatus ? this.getStatusText() : timeText } + { post.sticky && this.getStatusText( true ) } + + ); if ( this.props.link ) { const rel = this.props.target === '_blank' ? 'noopener noreferrer' : null; From 38dc57d7162afaa90180b6b826434ae2fab6c66c Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Sat, 18 Apr 2020 19:17:08 +0200 Subject: [PATCH 06/29] Refactor label, use only one method to display time label Add sticky Label for posts --- .../post-relative-time-status/index.jsx | 41 +++++++++---------- 1 file changed, 19 insertions(+), 22 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 5b43368f3da134..b15e36a88c8733 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -49,30 +49,21 @@ class PostRelativeTime extends React.PureComponent { } } - getDisplayedTimeFromPost() { + getDisplayedTimeForLabel() { const moment = this.props.moment; - const now = moment(); + const scheduledDate = moment( this.getTimestamp() ); - const time = moment( this.getTimestamp() ); - if ( now.diff( this.getTimestamp(), 'days' ) >= 7 ) { - // Like "Mar 15, 2013 6:23 PM" in English locale - return time.format( 'lll' ); + if ( Math.abs( now.diff( this.getTimestamp(), 'days' ) ) < 7 ) { + const time = moment( this.getTimestamp() ); + return time.fromNow(); } - // Like "3 days ago" in English locale - return time.fromNow(); - } - - getDisplayedTimeForLabel() { - const moment = this.props.moment; - const now = moment(); - const scheduledDate = moment( this.getTimestamp() ); // If the content is scheduled to be release within a year, do not display the year at the end const scheduledTime = scheduledDate.calendar( null, { - sameElse: this.props.translate( 'll [at] LT', { + sameElse: this.props.translate( '[on] ll [at] LT', { comment: - 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated', + 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', } ), } ); @@ -89,7 +80,7 @@ class PostRelativeTime extends React.PureComponent { <> ) } @@ -97,6 +88,12 @@ class PostRelativeTime extends React.PureComponent { ); } + /** + * Get status label + * + * @param {boolean} onlySticky sends back the "sticky" label. Special case as is using the same template but for is unrelated to the status + * + */ getStatusText( onlySticky = false ) { const status = this.props.post.status; let statusClassName = 'post-relative-time-status__status'; @@ -114,7 +111,7 @@ class PostRelativeTime extends React.PureComponent { statusClassName += ' is-trash'; statusIcon = 'trash'; const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'trashed on %(displayScheduleTime)s', { + statusText = this.props.translate( 'trashed %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a post or page was trashed', args: { displayScheduleTime, @@ -124,7 +121,7 @@ class PostRelativeTime extends React.PureComponent { statusClassName += ' is-scheduled'; statusIcon = 'calendar'; const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'scheduled for %(displayScheduleTime)s', { + statusText = this.props.translate( 'scheduled %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a scheduled post or page is set to be published', args: { displayScheduleTime, @@ -132,7 +129,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'draft' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'draft on %(displayScheduleTime)s', { + statusText = this.props.translate( 'draft modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a draft post or page was last modified', args: { displayScheduleTime, @@ -140,7 +137,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'publish' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'published on %(displayScheduleTime)s', { + statusText = this.props.translate( 'published modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a post or page was last modified', args: { displayScheduleTime, @@ -148,7 +145,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'private' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'private on %(displayScheduleTime)s', { + statusText = this.props.translate( 'private modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a private post or page was last modified', args: { displayScheduleTime, From 32b2d1bf15b0eaf3829523fcbe3ac604ce95c4cf Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Mon, 20 Apr 2020 20:19:02 +0200 Subject: [PATCH 07/29] Revert "Fix CamelCase" 36be7c598bb1de2881d3936b335e8ab5f02ca2c8 --- client/blocks/post-item/index.jsx | 2 +- client/my-sites/pages/page-card-info/index.jsx | 2 +- client/my-sites/post-relative-time-status/index.jsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/client/blocks/post-item/index.jsx b/client/blocks/post-item/index.jsx index 7d492c87869f47..425a32e4c454f4 100644 --- a/client/blocks/post-item/index.jsx +++ b/client/blocks/post-item/index.jsx @@ -211,7 +211,7 @@ class PostItem extends React.Component { post={ post } link={ enabledPostLink } target={ null } - gridIconSize={ ICON_SIZE } + gridiconSize={ ICON_SIZE } includeBasicStatus={ true } showPublishedStatus={ showPublishedStatus } /> diff --git a/client/my-sites/pages/page-card-info/index.jsx b/client/my-sites/pages/page-card-info/index.jsx index 71b0d7fe404034..0c2efeedc98f3f 100644 --- a/client/my-sites/pages/page-card-info/index.jsx +++ b/client/my-sites/pages/page-card-info/index.jsx @@ -62,7 +62,7 @@ function PageCardInfo( { post={ page } link={ contentLink.contentLinkURL } target={ contentLink.contentLinkTarget } - gridIconSize={ ICON_SIZE } + gridiconSize={ ICON_SIZE } includeBasicStatus={ true } /> ) } diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index b15e36a88c8733..aedc6687af5b77 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -22,7 +22,7 @@ class PostRelativeTime extends React.PureComponent { post: PropTypes.object.isRequired, link: PropTypes.string, target: PropTypes.string, - gridIconSize: PropTypes.number, + gridiconSize: PropTypes.number, }; static defaultProps = { @@ -78,7 +78,7 @@ class PostRelativeTime extends React.PureComponent { { time && ( <> - + @@ -158,7 +158,7 @@ class PostRelativeTime extends React.PureComponent { if ( statusText ) { return ( - + { statusText } ); From 1434be68968754d71ddff108d62987a9611f0c86 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Mon, 20 Apr 2020 20:22:51 +0200 Subject: [PATCH 08/29] Minor translation fix --- client/my-sites/post-relative-time-status/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index aedc6687af5b77..77351600315f7e 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -129,7 +129,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'draft' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'draft modified %(displayScheduleTime)s', { + statusText = this.props.translate( 'draft, last modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a draft post or page was last modified', args: { displayScheduleTime, @@ -137,7 +137,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'publish' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'published modified %(displayScheduleTime)s', { + statusText = this.props.translate( 'published, last modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a post or page was last modified', args: { displayScheduleTime, @@ -145,7 +145,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'private' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'private modified %(displayScheduleTime)s', { + statusText = this.props.translate( 'private, last modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a private post or page was last modified', args: { displayScheduleTime, From aca3eb58a769c689a4d863a8634233a065688e8d Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Mon, 20 Apr 2020 23:34:39 +0200 Subject: [PATCH 09/29] Fix date for pendingPost --- client/my-sites/post-relative-time-status/index.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 77351600315f7e..a82ea18ab3fcd4 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -54,19 +54,23 @@ class PostRelativeTime extends React.PureComponent { const now = moment(); const scheduledDate = moment( this.getTimestamp() ); - if ( Math.abs( now.diff( this.getTimestamp(), 'days' ) ) < 7 ) { + const isScheduledPost = this.props.post.status === 'future'; + if ( ! isScheduledPost && Math.abs( now.diff( this.getTimestamp(), 'days' ) ) < 7 ) { const time = moment( this.getTimestamp() ); return time.fromNow(); } - // If the content is scheduled to be release within a year, do not display the year at the end const scheduledTime = scheduledDate.calendar( null, { + nextDay: this.props.translate( '[tomorrow at] LT', { + comment: 'LT refers to time (eg. 18:00)', + } ), sameElse: this.props.translate( '[on] ll [at] LT', { comment: 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', } ), } ); + // If the content is scheduled to be release within a year, do not display the year at the end return scheduledDate.diff( now, 'years' ) > 0 ? scheduledTime : scheduledTime.replace( scheduledDate.format( 'Y' ), '' ); From 3f0bb96f5cb059f8c11fd8ba67daea1d4a2e27d9 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Tue, 21 Apr 2020 11:32:06 +0200 Subject: [PATCH 10/29] Fix translation for scheduled posts --- .../my-sites/post-relative-time-status/index.jsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index a82ea18ab3fcd4..c660462f7ee556 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -60,14 +60,21 @@ class PostRelativeTime extends React.PureComponent { return time.fromNow(); } + const sameElseForScheduled = this.props.translate( '[for] ll [at] LT', { + comment: + 'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - "at" and "for" is translated', + } ); + + const sameElse = this.props.translate( '[on] ll [at] LT', { + comment: + 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', + } ); + const scheduledTime = scheduledDate.calendar( null, { nextDay: this.props.translate( '[tomorrow at] LT', { comment: 'LT refers to time (eg. 18:00)', } ), - sameElse: this.props.translate( '[on] ll [at] LT', { - comment: - 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', - } ), + sameElse: isScheduledPost ? sameElseForScheduled : sameElse, } ); // If the content is scheduled to be release within a year, do not display the year at the end From 2ed0eede475a350dfe89ed6f6149b14b311effde Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Tue, 21 Apr 2020 12:18:43 +0200 Subject: [PATCH 11/29] use for scheduled posts --- client/my-sites/post-relative-time-status/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index c660462f7ee556..49c590034566f4 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -71,7 +71,7 @@ class PostRelativeTime extends React.PureComponent { } ); const scheduledTime = scheduledDate.calendar( null, { - nextDay: this.props.translate( '[tomorrow at] LT', { + nextDay: this.props.translate( '[for tomorrow at] LT', { comment: 'LT refers to time (eg. 18:00)', } ), sameElse: isScheduledPost ? sameElseForScheduled : sameElse, From 7be3d6714335d3f2489698cb7886ba35d9e021e6 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Tue, 21 Apr 2020 12:19:27 +0200 Subject: [PATCH 12/29] Small refactor for readability --- .../post-relative-time-status/index.jsx | 44 ++++++++++--------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 49c590034566f4..63cd184ed45df8 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -55,27 +55,31 @@ class PostRelativeTime extends React.PureComponent { const scheduledDate = moment( this.getTimestamp() ); const isScheduledPost = this.props.post.status === 'future'; - if ( ! isScheduledPost && Math.abs( now.diff( this.getTimestamp(), 'days' ) ) < 7 ) { - const time = moment( this.getTimestamp() ); - return time.fromNow(); - } - const sameElseForScheduled = this.props.translate( '[for] ll [at] LT', { - comment: - 'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - "at" and "for" is translated', - } ); - - const sameElse = this.props.translate( '[on] ll [at] LT', { - comment: - 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', - } ); - - const scheduledTime = scheduledDate.calendar( null, { - nextDay: this.props.translate( '[for tomorrow at] LT', { - comment: 'LT refers to time (eg. 18:00)', - } ), - sameElse: isScheduledPost ? sameElseForScheduled : sameElse, - } ); + let scheduledTime; + if ( isScheduledPost ) { + scheduledTime = scheduledDate.calendar( null, { + nextDay: this.props.translate( '[for tomorrow at] LT', { + comment: 'LT refers to time (eg. 18:00)', + } ), + sameElse: this.props.translate( '[for] ll [at] LT', { + comment: + 'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - "at" and "for" is translated', + } ), + } ); + } else { + if ( Math.abs( now.diff( this.getTimestamp(), 'days' ) ) < 7 ) { + const time = moment( this.getTimestamp() ); + return time.fromNow(); + } + + scheduledTime = scheduledDate.calendar( null, { + sameElse: this.props.translate( '[on] ll [at] LT', { + comment: + 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', + } ), + } ); + } // If the content is scheduled to be release within a year, do not display the year at the end return scheduledDate.diff( now, 'years' ) > 0 From 31323cbe449a4cdccf264acfc0ffc2d969b6802d Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Wed, 22 Apr 2020 20:05:48 +0200 Subject: [PATCH 13/29] Added modified date to pending review status --- .../my-sites/post-relative-time-status/index.jsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 63cd184ed45df8..b274c57ac410ba 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -120,8 +120,14 @@ class PostRelativeTime extends React.PureComponent { statusClassName += ' is-sticky'; statusIcon = 'bookmark-outline'; } else if ( status === 'pending' ) { - statusText = this.props.translate( 'pending review' ); statusClassName += ' is-pending'; + const displayScheduleTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'pending review last modified %(displayScheduleTime)s', { + comment: '%(displayScheduleTime)s is when a pending review post or page was last modified', + args: { + displayScheduleTime, + }, + } ); } else if ( status === 'trash' ) { statusClassName += ' is-trash'; statusIcon = 'trash'; @@ -144,7 +150,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'draft' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'draft, last modified %(displayScheduleTime)s', { + statusText = this.props.translate( 'draft last modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a draft post or page was last modified', args: { displayScheduleTime, @@ -152,7 +158,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'publish' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'published, last modified %(displayScheduleTime)s', { + statusText = this.props.translate( 'published on %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a post or page was last modified', args: { displayScheduleTime, @@ -160,7 +166,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'private' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'private, last modified %(displayScheduleTime)s', { + statusText = this.props.translate( 'private last modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a private post or page was last modified', args: { displayScheduleTime, From dc7e1837cf9707d202733c377326cbd2d363c9bc Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Fri, 24 Apr 2020 19:32:57 +0200 Subject: [PATCH 14/29] Remove unnecessary case in a switch --- client/my-sites/post-relative-time-status/index.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index b274c57ac410ba..2196c4b4da3906 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -43,7 +43,6 @@ class PostRelativeTime extends React.PureComponent { case 'pending': return this.props.post.modified; - case 'future': default: return this.props.post.date; } From 75cafee88030bf3ab538610c9825b011ab6e535d Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Fri, 24 Apr 2020 19:33:32 +0200 Subject: [PATCH 15/29] Remove duplicated on --- client/my-sites/post-relative-time-status/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 2196c4b4da3906..6e5b83dc21ffb5 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -157,7 +157,7 @@ class PostRelativeTime extends React.PureComponent { } ); } else if ( status === 'publish' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'published on %(displayScheduleTime)s', { + statusText = this.props.translate( 'published %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a post or page was last modified', args: { displayScheduleTime, From 964df206b88379360dfcbe8d6cf35ab3f147b32d Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Fri, 24 Apr 2020 20:02:10 +0200 Subject: [PATCH 16/29] pending as an extra sticker --- .../my-sites/post-relative-time-status/index.jsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 6e5b83dc21ffb5..6b65cadb810443 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -106,9 +106,10 @@ class PostRelativeTime extends React.PureComponent { * Get status label * * @param {boolean} onlySticky sends back the "sticky" label. Special case as is using the same template but for is unrelated to the status + * @param {boolean} onlyPending sends back the "pendign review" label. Special case as is using the same template but for is unrelated to the status * */ - getStatusText( onlySticky = false ) { + getStatusText( onlySticky = false, onlyPending = false ) { const status = this.props.post.status; let statusClassName = 'post-relative-time-status__status'; let statusIcon = 'aside'; @@ -118,15 +119,9 @@ class PostRelativeTime extends React.PureComponent { statusText = this.props.translate( 'sticky' ); statusClassName += ' is-sticky'; statusIcon = 'bookmark-outline'; - } else if ( status === 'pending' ) { + } else if ( onlyPending ) { + statusText = this.props.translate( 'pending review' ); statusClassName += ' is-pending'; - const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'pending review last modified %(displayScheduleTime)s', { - comment: '%(displayScheduleTime)s is when a pending review post or page was last modified', - args: { - displayScheduleTime, - }, - } ); } else if ( status === 'trash' ) { statusClassName += ' is-trash'; statusIcon = 'trash'; @@ -147,7 +142,7 @@ class PostRelativeTime extends React.PureComponent { displayScheduleTime, }, } ); - } else if ( status === 'draft' ) { + } else if ( status === 'draft' || status === 'pending' ) { const displayScheduleTime = this.getDisplayedTimeForLabel(); statusText = this.props.translate( 'draft last modified %(displayScheduleTime)s', { comment: '%(displayScheduleTime)s is when a draft post or page was last modified', @@ -192,6 +187,7 @@ class PostRelativeTime extends React.PureComponent { { showPublishedStatus ? this.getStatusText() : timeText } { post.sticky && this.getStatusText( true ) } + { post.status === 'pending' && this.getStatusText( false, true ) } ); From 00c312676cd04b2a33c26e80984ed03db27fe531 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Sat, 25 Apr 2020 14:43:41 +0200 Subject: [PATCH 17/29] remove 'on' prefix for dates without text label --- .../post-relative-time-status/index.jsx | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 6b65cadb810443..fb89250c588766 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -48,7 +48,7 @@ class PostRelativeTime extends React.PureComponent { } } - getDisplayedTimeForLabel() { + getDisplayedTimeForLabel( noPrefix = false ) { const moment = this.props.moment; const now = moment(); const scheduledDate = moment( this.getTimestamp() ); @@ -72,11 +72,21 @@ class PostRelativeTime extends React.PureComponent { return time.fromNow(); } - scheduledTime = scheduledDate.calendar( null, { - sameElse: this.props.translate( '[on] ll [at] LT', { + let sameElseTranslation; + if ( noPrefix ) { + sameElseTranslation = this.props.translate( 'll [at] LT', { + comment: + 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated', + } ); + } else { + sameElseTranslation = this.props.translate( '[on] ll [at] LT', { comment: 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', - } ), + } ); + } + + scheduledTime = scheduledDate.calendar( null, { + sameElse: sameElseTranslation, } ); } @@ -94,7 +104,7 @@ class PostRelativeTime extends React.PureComponent { <> ) } From a05f2fe8d226662e41cdebdf52a690dff65c64c2 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Mon, 27 Apr 2020 18:27:01 +0200 Subject: [PATCH 18/29] Change to for draft and pending statuses --- client/my-sites/post-relative-time-status/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index fb89250c588766..6e06a3b5c9c466 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -145,11 +145,11 @@ class PostRelativeTime extends React.PureComponent { } else if ( status === 'future' ) { statusClassName += ' is-scheduled'; statusIcon = 'calendar'; - const displayScheduleTime = this.getDisplayedTimeForLabel(); + const displayTime = this.getDisplayedTimeForLabel(); statusText = this.props.translate( 'scheduled %(displayScheduleTime)s', { - comment: '%(displayScheduleTime)s is when a scheduled post or page is set to be published', + comment: '%(displayTime)s is when a scheduled post or page is set to be published', args: { - displayScheduleTime, + displayTime, }, } ); } else if ( status === 'draft' || status === 'pending' ) { From 75965c251618d38060562e014595abb3e0d461a2 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Mon, 27 Apr 2020 18:27:29 +0200 Subject: [PATCH 19/29] Remove negated variable for clarity --- client/my-sites/post-relative-time-status/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 6e06a3b5c9c466..574ae110be3403 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -48,7 +48,7 @@ class PostRelativeTime extends React.PureComponent { } } - getDisplayedTimeForLabel( noPrefix = false ) { + getDisplayedTimeForLabel( prefix = true ) { const moment = this.props.moment; const now = moment(); const scheduledDate = moment( this.getTimestamp() ); @@ -73,7 +73,7 @@ class PostRelativeTime extends React.PureComponent { } let sameElseTranslation; - if ( noPrefix ) { + if ( ! prefix ) { sameElseTranslation = this.props.translate( 'll [at] LT', { comment: 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated', @@ -104,7 +104,7 @@ class PostRelativeTime extends React.PureComponent { <> ) } From 20c0305364a0027f0e50c12d01af855c73f2dbdb Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Mon, 27 Apr 2020 18:48:33 +0200 Subject: [PATCH 20/29] refactor getLabel to remove onlySticky and onlyPending parameters --- .../post-relative-time-status/index.jsx | 53 ++++++++++++------- 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 574ae110be3403..c1805a29bedcd6 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -104,7 +104,7 @@ class PostRelativeTime extends React.PureComponent { <> ) } @@ -115,25 +115,15 @@ class PostRelativeTime extends React.PureComponent { /** * Get status label * - * @param {boolean} onlySticky sends back the "sticky" label. Special case as is using the same template but for is unrelated to the status - * @param {boolean} onlyPending sends back the "pendign review" label. Special case as is using the same template but for is unrelated to the status - * */ - getStatusText( onlySticky = false, onlyPending = false ) { + getStatusText() { const status = this.props.post.status; - let statusClassName = 'post-relative-time-status__status'; + let extraStatusClassName; let statusIcon = 'aside'; let statusText; - if ( onlySticky ) { - statusText = this.props.translate( 'sticky' ); - statusClassName += ' is-sticky'; - statusIcon = 'bookmark-outline'; - } else if ( onlyPending ) { - statusText = this.props.translate( 'pending review' ); - statusClassName += ' is-pending'; - } else if ( status === 'trash' ) { - statusClassName += ' is-trash'; + if ( status === 'trash' ) { + extraStatusClassName = 'is-trash'; statusIcon = 'trash'; const displayScheduleTime = this.getDisplayedTimeForLabel(); statusText = this.props.translate( 'trashed %(displayScheduleTime)s', { @@ -143,7 +133,7 @@ class PostRelativeTime extends React.PureComponent { }, } ); } else if ( status === 'future' ) { - statusClassName += ' is-scheduled'; + extraStatusClassName = 'is-scheduled'; statusIcon = 'calendar'; const displayTime = this.getDisplayedTimeForLabel(); statusText = this.props.translate( 'scheduled %(displayScheduleTime)s', { @@ -180,7 +170,34 @@ class PostRelativeTime extends React.PureComponent { statusText = this.props.translate( 'Publish immediately' ); } + return this.getLabel( statusText, extraStatusClassName, statusIcon ); + } + + /** + * Get "sticky" label + */ + getStickyLabel() { + return this.getLabel( this.props.translate( 'sticky' ), 'is-sticky', 'bookmark-outline' ); + } + + /** + * Get "Pending" label + */ + getPendingLabel() { + return this.getLabel( this.props.translate( 'pending review' ), 'is-pending' ); + } + + /** + * Get Label for the status + * + * @param {*} statusText text status + * @param {*} extraStatusClassName class + * @param {*} statusIcon icon + */ + getLabel( statusText, extraStatusClassName, statusIcon ) { if ( statusText ) { + const statusClassName = 'post-relative-time-status__status ' + extraStatusClassName; + return ( @@ -196,8 +213,8 @@ class PostRelativeTime extends React.PureComponent { let innerText = ( { showPublishedStatus ? this.getStatusText() : timeText } - { post.sticky && this.getStatusText( true ) } - { post.status === 'pending' && this.getStatusText( false, true ) } + { post.sticky && this.getStickyLabel() } + { post.status === 'pending' && this.getPendingLabel() } ); From 6157493d9ce5a204ed8efaf83b5f6b4ac0eecc71 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Mon, 27 Apr 2020 19:08:46 +0200 Subject: [PATCH 21/29] rename displayedTime vairables to make more sense --- .../post-relative-time-status/index.jsx | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index c1805a29bedcd6..6b3f379148d1aa 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -51,13 +51,13 @@ class PostRelativeTime extends React.PureComponent { getDisplayedTimeForLabel( prefix = true ) { const moment = this.props.moment; const now = moment(); - const scheduledDate = moment( this.getTimestamp() ); + const timestamp = moment( this.getTimestamp() ); const isScheduledPost = this.props.post.status === 'future'; - let scheduledTime; + let displayedTime; if ( isScheduledPost ) { - scheduledTime = scheduledDate.calendar( null, { + displayedTime = timestamp.calendar( null, { nextDay: this.props.translate( '[for tomorrow at] LT', { comment: 'LT refers to time (eg. 18:00)', } ), @@ -85,15 +85,15 @@ class PostRelativeTime extends React.PureComponent { } ); } - scheduledTime = scheduledDate.calendar( null, { + displayedTime = timestamp.calendar( null, { sameElse: sameElseTranslation, } ); } // If the content is scheduled to be release within a year, do not display the year at the end - return scheduledDate.diff( now, 'years' ) > 0 - ? scheduledTime - : scheduledTime.replace( scheduledDate.format( 'Y' ), '' ); + return timestamp.diff( now, 'years' ) > 0 + ? displayedTime + : displayedTime.replace( timestamp.format( 'Y' ), '' ); } getTimeText() { @@ -125,45 +125,45 @@ class PostRelativeTime extends React.PureComponent { if ( status === 'trash' ) { extraStatusClassName = 'is-trash'; statusIcon = 'trash'; - const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'trashed %(displayScheduleTime)s', { - comment: '%(displayScheduleTime)s is when a post or page was trashed', + const displayedTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'trashed %(displayedTime)s', { + comment: '%(displayedTime)s is when a post or page was trashed', args: { - displayScheduleTime, + displayedTime, }, } ); } else if ( status === 'future' ) { extraStatusClassName = 'is-scheduled'; statusIcon = 'calendar'; - const displayTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'scheduled %(displayScheduleTime)s', { + const displayedTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'scheduled %(displayedTime)s', { comment: '%(displayTime)s is when a scheduled post or page is set to be published', args: { - displayTime, + displayedTime, }, } ); } else if ( status === 'draft' || status === 'pending' ) { - const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'draft last modified %(displayScheduleTime)s', { - comment: '%(displayScheduleTime)s is when a draft post or page was last modified', + const displayTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'draft last modified %(displayTime)s', { + comment: '%(displayTime)s is when a draft post or page was last modified', args: { - displayScheduleTime, + displayTime, }, } ); } else if ( status === 'publish' ) { - const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'published %(displayScheduleTime)s', { - comment: '%(displayScheduleTime)s is when a post or page was last modified', + const displayTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'published %(displayTime)s', { + comment: '%(displayTime)s is when a post or page was last modified', args: { - displayScheduleTime, + displayTime, }, } ); } else if ( status === 'private' ) { - const displayScheduleTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'private last modified %(displayScheduleTime)s', { - comment: '%(displayScheduleTime)s is when a private post or page was last modified', + const displayedTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'private last modified %(displayedTime)s', { + comment: '%(displayedTime)s is when a private post or page was last modified', args: { - displayScheduleTime, + displayedTime, }, } ); } else if ( status === 'new' ) { From e651d84124becde37e9bae573a5de190c124f78b Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Tue, 28 Apr 2020 11:03:35 +0200 Subject: [PATCH 22/29] minor JsDocs and formatting fixes --- client/my-sites/post-relative-time-status/index.jsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 6b3f379148d1aa..3419acaec59396 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -114,12 +114,11 @@ class PostRelativeTime extends React.PureComponent { /** * Get status label - * */ getStatusText() { const status = this.props.post.status; let extraStatusClassName; - let statusIcon = 'aside'; + let statusIcon; let statusText; if ( status === 'trash' ) { @@ -190,11 +189,11 @@ class PostRelativeTime extends React.PureComponent { /** * Get Label for the status * - * @param {*} statusText text status - * @param {*} extraStatusClassName class - * @param {*} statusIcon icon + * @param {string} statusText text status + * @param {string} extraStatusClassName extra CSS class to be added to the label + * @param {string} [statusIcon="aside"] icon for the label */ - getLabel( statusText, extraStatusClassName, statusIcon ) { + getLabel( statusText, extraStatusClassName, statusIcon = 'aside' ) { if ( statusText ) { const statusClassName = 'post-relative-time-status__status ' + extraStatusClassName; From db74c4227dafde87f34b62a9774e1ace02f1587d Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Tue, 28 Apr 2020 11:06:22 +0200 Subject: [PATCH 23/29] minor changes in variable names --- .../post-relative-time-status/index.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 3419acaec59396..a8ef77541208bf 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -136,25 +136,25 @@ class PostRelativeTime extends React.PureComponent { statusIcon = 'calendar'; const displayedTime = this.getDisplayedTimeForLabel(); statusText = this.props.translate( 'scheduled %(displayedTime)s', { - comment: '%(displayTime)s is when a scheduled post or page is set to be published', + comment: '%(displayedTime)s is when a scheduled post or page is set to be published', args: { displayedTime, }, } ); } else if ( status === 'draft' || status === 'pending' ) { - const displayTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'draft last modified %(displayTime)s', { - comment: '%(displayTime)s is when a draft post or page was last modified', + const displayedTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'draft last modified %(displayedTime)s', { + comment: '%(displayedTime)s is when a draft post or page was last modified', args: { - displayTime, + displayedTime, }, } ); } else if ( status === 'publish' ) { - const displayTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'published %(displayTime)s', { - comment: '%(displayTime)s is when a post or page was last modified', + const displayedTime = this.getDisplayedTimeForLabel(); + statusText = this.props.translate( 'published %(displayedTime)s', { + comment: '%(displayedTime)s is when a post or page was last modified', args: { - displayTime, + displayedTime, }, } ); } else if ( status === 'private' ) { From cb7b07dfff49b6329093c4c9cc6aa4bbbcc8685a Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Tue, 28 Apr 2020 20:09:15 +0200 Subject: [PATCH 24/29] Pass private as a label Fixes #41245 --- .../post-relative-time-status/index.jsx | 18 ++++++++++-------- .../post-relative-time-status/style.scss | 3 +++ 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index a8ef77541208bf..95b54569863220 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -158,13 +158,7 @@ class PostRelativeTime extends React.PureComponent { }, } ); } else if ( status === 'private' ) { - const displayedTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'private last modified %(displayedTime)s', { - comment: '%(displayedTime)s is when a private post or page was last modified', - args: { - displayedTime, - }, - } ); + statusText = this.getDisplayedTimeForLabel(); } else if ( status === 'new' ) { statusText = this.props.translate( 'Publish immediately' ); } @@ -172,6 +166,13 @@ class PostRelativeTime extends React.PureComponent { return this.getLabel( statusText, extraStatusClassName, statusIcon ); } + /** + * Get "private" label + */ + getPrivateLabel() { + return this.getLabel( this.props.translate( 'private' ), 'is-private' ); + } + /** * Get "sticky" label */ @@ -212,8 +213,9 @@ class PostRelativeTime extends React.PureComponent { let innerText = ( { showPublishedStatus ? this.getStatusText() : timeText } - { post.sticky && this.getStickyLabel() } { post.status === 'pending' && this.getPendingLabel() } + { post.status === 'private' && this.getPrivateLabel() } + { post.sticky && this.getStickyLabel() } ); diff --git a/client/my-sites/post-relative-time-status/style.scss b/client/my-sites/post-relative-time-status/style.scss index 1518eea4c76117..7efc8321a5124d 100644 --- a/client/my-sites/post-relative-time-status/style.scss +++ b/client/my-sites/post-relative-time-status/style.scss @@ -21,6 +21,9 @@ .is-trash { color: var( --color-error ); } + .is-private { + color: var( --color-primary-dark ); + } } a.post-relative-time-status__link { From 5defad55099788d6571ffd9752f7782c685f69c4 Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Tue, 28 Apr 2020 22:08:41 +0200 Subject: [PATCH 25/29] fix translations --- .../post-relative-time-status/index.jsx | 124 ++++++++++-------- 1 file changed, 70 insertions(+), 54 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 95b54569863220..63eb906995fcde 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -48,7 +48,7 @@ class PostRelativeTime extends React.PureComponent { } } - getDisplayedTimeForLabel( prefix = true ) { + getDisplayedTimeForLabel() { const moment = this.props.moment; const now = moment(); const timestamp = moment( this.getTimestamp() ); @@ -58,35 +58,26 @@ class PostRelativeTime extends React.PureComponent { let displayedTime; if ( isScheduledPost ) { displayedTime = timestamp.calendar( null, { - nextDay: this.props.translate( '[for tomorrow at] LT', { + nextDay: this.props.translate( '[tomorrow at] LT', { comment: 'LT refers to time (eg. 18:00)', } ), - sameElse: this.props.translate( '[for] ll [at] LT', { + sameElse: this.props.translate( 'll [at] LT', { comment: - 'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - "at" and "for" is translated', + 'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - and "for" is translated', } ), } ); } else { if ( Math.abs( now.diff( this.getTimestamp(), 'days' ) ) < 7 ) { - const time = moment( this.getTimestamp() ); - return time.fromNow(); + return timestamp.fromNow(); } - let sameElseTranslation; - if ( ! prefix ) { - sameElseTranslation = this.props.translate( 'll [at] LT', { - comment: - 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated', - } ); - } else { - sameElseTranslation = this.props.translate( '[on] ll [at] LT', { - comment: - 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" and "on" is translated', - } ); - } + const sameElse = this.props.translate( 'll [at] LT', { + comment: + 'll refers to date (eg. 21 Apr) & LT refers to time (eg. 18:00) - "at" is translated', + } ); displayedTime = timestamp.calendar( null, { - sameElse: sameElseTranslation, + sameElse, } ); } @@ -112,53 +103,78 @@ class PostRelativeTime extends React.PureComponent { ); } + getStatusText() { + const status = this.props.post.status; + const args = { + displayedTime: this.getDisplayedTimeForLabel(), + }; + const moment = this.props.moment; + const now = moment(); + const displayOn = Math.abs( now.diff( this.getTimestamp(), 'days' ) ) >= 7; + + switch ( status ) { + case 'trash': + if ( displayOn ) { + return this.props.translate( 'trashed on %(displayedTime)s', { + comment: '%(displayedTime)s is when a post or page was trashed', + args, + } ); + } + return this.props.translate( 'trashed %(displayedTime)s', { + comment: '%(displayedTime)s is when a post or page was trashed', + args, + } ); + + case 'future': + return this.props.translate( 'scheduled for %(displayedTime)s', { + comment: '%(displayedTime)s is when a scheduled post or page is set to be published', + args, + } ); + + case 'draft': + case 'pending': + if ( displayOn ) { + return this.props.translate( 'draft last modified on %(displayedTime)s', { + comment: '%(displayedTime)s is when a draft post or page was last modified', + args, + } ); + } + + return this.props.translate( 'draft last modified %(displayedTime)s', { + comment: '%(displayedTime)s is when a draft post or page was last modified', + args, + } ); + + case 'publish': + if ( displayOn ) { + return this.props.translate( 'published on %(displayedTime)s', { + comment: '%(displayedTime)s is when a post or page will be published', + args, + } ); + } + + return this.props.translate( 'published %(displayedTime)s', { + comment: '%(displayedTime)s is when a post or page will be published', + args, + } ); + } + } + /** * Get status label */ - getStatusText() { + getStatus() { const status = this.props.post.status; let extraStatusClassName; let statusIcon; - let statusText; + let statusText = this.getStatusText(); if ( status === 'trash' ) { extraStatusClassName = 'is-trash'; statusIcon = 'trash'; - const displayedTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'trashed %(displayedTime)s', { - comment: '%(displayedTime)s is when a post or page was trashed', - args: { - displayedTime, - }, - } ); } else if ( status === 'future' ) { extraStatusClassName = 'is-scheduled'; statusIcon = 'calendar'; - const displayedTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'scheduled %(displayedTime)s', { - comment: '%(displayedTime)s is when a scheduled post or page is set to be published', - args: { - displayedTime, - }, - } ); - } else if ( status === 'draft' || status === 'pending' ) { - const displayedTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'draft last modified %(displayedTime)s', { - comment: '%(displayedTime)s is when a draft post or page was last modified', - args: { - displayedTime, - }, - } ); - } else if ( status === 'publish' ) { - const displayedTime = this.getDisplayedTimeForLabel(); - statusText = this.props.translate( 'published %(displayedTime)s', { - comment: '%(displayedTime)s is when a post or page was last modified', - args: { - displayedTime, - }, - } ); - } else if ( status === 'private' ) { - statusText = this.getDisplayedTimeForLabel(); } else if ( status === 'new' ) { statusText = this.props.translate( 'Publish immediately' ); } @@ -212,7 +228,7 @@ class PostRelativeTime extends React.PureComponent { const timeText = this.getTimeText(); let innerText = ( - { showPublishedStatus ? this.getStatusText() : timeText } + { showPublishedStatus ? this.getStatus() : timeText } { post.status === 'pending' && this.getPendingLabel() } { post.status === 'private' && this.getPrivateLabel() } { post.sticky && this.getStickyLabel() } From 6b0fcda0567cc39f2530a354b94446464b3b3f4e Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Wed, 29 Apr 2020 18:15:04 +0200 Subject: [PATCH 26/29] Add forgotten case for 'private' posts date --- client/my-sites/post-relative-time-status/index.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 63eb906995fcde..22e2337d672346 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -145,6 +145,7 @@ class PostRelativeTime extends React.PureComponent { args, } ); + case 'private': case 'publish': if ( displayOn ) { return this.props.translate( 'published on %(displayedTime)s', { From effba2a09c32a973eb1a037db5b6499df3a7895f Mon Sep 17 00:00:00 2001 From: Fabien MILLERAND Date: Wed, 29 Apr 2020 18:15:29 +0200 Subject: [PATCH 27/29] Add better comments for translators for dates --- .../post-relative-time-status/index.jsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 22e2337d672346..5542328c84a3a9 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -116,18 +116,21 @@ class PostRelativeTime extends React.PureComponent { case 'trash': if ( displayOn ) { return this.props.translate( 'trashed on %(displayedTime)s', { - comment: '%(displayedTime)s is when a post or page was trashed', + comment: + '%(displayedTime)s is the absolute date (ie. Apr 21, at 10:07 PM) when a post or page was trashed', args, } ); } return this.props.translate( 'trashed %(displayedTime)s', { - comment: '%(displayedTime)s is when a post or page was trashed', + comment: + '%(displayedTime)s is the relative date (ie. 3 days ago) when a post or page was trashed', args, } ); case 'future': return this.props.translate( 'scheduled for %(displayedTime)s', { - comment: '%(displayedTime)s is when a scheduled post or page is set to be published', + comment: + '%(displayedTime)s is when a scheduled post or page is set to be published. It can be either "tomorrow at 16H", or an absoltute date (ie. Apr 21, at 10:07 PM)', args, } ); @@ -135,13 +138,15 @@ class PostRelativeTime extends React.PureComponent { case 'pending': if ( displayOn ) { return this.props.translate( 'draft last modified on %(displayedTime)s', { - comment: '%(displayedTime)s is when a draft post or page was last modified', + comment: + '%(displayedTime)s is the absolute date (ie. Apr 21, at 10:07 PM) when a draft post or page was last modified', args, } ); } return this.props.translate( 'draft last modified %(displayedTime)s', { - comment: '%(displayedTime)s is when a draft post or page was last modified', + comment: + '%(displayedTime)s is the relative date (ie. 3 days ago) when a draft post or page was last modified', args, } ); @@ -149,13 +154,15 @@ class PostRelativeTime extends React.PureComponent { case 'publish': if ( displayOn ) { return this.props.translate( 'published on %(displayedTime)s', { - comment: '%(displayedTime)s is when a post or page will be published', + comment: + '%(displayedTime)s is the absolute date (ie. Apr 21, at 10:07 PM ) when a post or page was published', args, } ); } return this.props.translate( 'published %(displayedTime)s', { - comment: '%(displayedTime)s is when a post or page will be published', + comment: + '%(displayedTime)s is the relative date (ie. 3 days ago) when a post or page was published', args, } ); } From edd82c64538fd94d528b0fc76e9cc88cafa6941c Mon Sep 17 00:00:00 2001 From: MILLER/F Date: Thu, 30 Apr 2020 12:03:54 +0200 Subject: [PATCH 28/29] Update client/my-sites/post-relative-time-status/index.jsx Co-Authored-By: Miguel Torres --- client/my-sites/post-relative-time-status/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 5542328c84a3a9..47027a13810b3d 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -95,7 +95,7 @@ class PostRelativeTime extends React.PureComponent { <> ) } From 0380076e7a63c72f1adc30032f665e9e6961c936 Mon Sep 17 00:00:00 2001 From: MILLER/F Date: Thu, 30 Apr 2020 12:04:14 +0200 Subject: [PATCH 29/29] Update client/my-sites/post-relative-time-status/index.jsx Co-Authored-By: Miguel Torres --- client/my-sites/post-relative-time-status/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/my-sites/post-relative-time-status/index.jsx b/client/my-sites/post-relative-time-status/index.jsx index 47027a13810b3d..d4a0cd10ab659f 100644 --- a/client/my-sites/post-relative-time-status/index.jsx +++ b/client/my-sites/post-relative-time-status/index.jsx @@ -63,7 +63,7 @@ class PostRelativeTime extends React.PureComponent { } ), sameElse: this.props.translate( 'll [at] LT', { comment: - 'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - and "for" is translated', + 'll refers to date (eg. 21 Apr) for when the post will be published & LT refers to time (eg. 18:00) - "at" is translated', } ), } ); } else {