From 24e7814bf0c95753d45125b28e1e5f2386bff25b Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 22 Feb 2019 14:26:17 +0100 Subject: [PATCH 1/3] PostTime block: migrate CSS to webpack, use withLocalizedMoment --- assets/stylesheets/_components.scss | 1 - client/blocks/post-time/index.jsx | 28 ++++++++++++++++------------ 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 1cd62222c0c678..248b620c499b44 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -38,7 +38,6 @@ @import 'blocks/post-likes/style'; @import 'blocks/post-share/style'; @import 'blocks/post-status/style'; -@import 'blocks/post-time/style'; @import 'blocks/privacy-policy-banner/style'; @import 'blocks/sharing-preview-pane/style'; @import 'blocks/site-address-changer/style'; diff --git a/client/blocks/post-time/index.jsx b/client/blocks/post-time/index.jsx index 8c8c918eb3100c..3254f935e047b6 100644 --- a/client/blocks/post-time/index.jsx +++ b/client/blocks/post-time/index.jsx @@ -9,22 +9,29 @@ import PropTypes from 'prop-types'; import classNames from 'classnames'; import { connect } from 'react-redux'; import { includes } from 'lodash'; -import { localize } from 'i18n-calypso'; /** * Internal dependencies */ import { getNormalizedPost } from 'state/posts/selectors'; +import withLocalizedMoment from 'components/with-localized-moment'; + +/** + * Style dependencies + */ +import './style.scss'; function getDisplayedTimeFromPost( moment, post ) { + const now = moment(); + if ( ! post ) { // Placeholder text: "a few seconds ago" in English locale - return moment().fromNow(); + return now.fromNow(); } const { status, modified, date } = post; const time = moment( includes( [ 'draft', 'pending' ], status ) ? modified : date ); - if ( time.isBefore( moment().subtract( 7, 'days' ) ) ) { + if ( now.diff( time, 'days' ) >= 7 ) { // Like "Mar 15, 2013 6:23 PM" in English locale return time.format( 'lll' ); } @@ -34,11 +41,10 @@ function getDisplayedTimeFromPost( moment, post ) { } export function PostTime( { moment, post } ) { - const classes = classNames( 'post-time', { - 'is-placeholder': ! post, - } ); + const classes = classNames( 'post-time', { 'is-placeholder': ! post } ); + const displayedTime = getDisplayedTimeFromPost( moment, post ); - return { getDisplayedTimeFromPost( moment, post ) }; + return { displayedTime }; } PostTime.propTypes = { @@ -47,8 +53,6 @@ PostTime.propTypes = { post: PropTypes.object, }; -export default connect( ( state, { globalId } ) => { - return { - post: getNormalizedPost( state, globalId ), - }; -} )( localize( PostTime ) ); +export default connect( ( state, { globalId } ) => ( { + post: getNormalizedPost( state, globalId ), +} ) )( withLocalizedMoment( PostTime ) ); From 3ea6a17db3f12c4ae8eca5252f246e74a921a7ce Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 22 Feb 2019 14:39:56 +0100 Subject: [PATCH 2/3] Post Status block: migrate CSS and fix ESLint warning in the docs example --- assets/stylesheets/_components.scss | 1 - client/blocks/post-status/docs/example.jsx | 24 +++++++++++++--------- client/blocks/post-status/index.jsx | 13 +++++++----- 3 files changed, 22 insertions(+), 16 deletions(-) diff --git a/assets/stylesheets/_components.scss b/assets/stylesheets/_components.scss index 248b620c499b44..b64ca662af5792 100644 --- a/assets/stylesheets/_components.scss +++ b/assets/stylesheets/_components.scss @@ -37,7 +37,6 @@ @import 'blocks/post-item/style'; @import 'blocks/post-likes/style'; @import 'blocks/post-share/style'; -@import 'blocks/post-status/style'; @import 'blocks/privacy-policy-banner/style'; @import 'blocks/sharing-preview-pane/style'; @import 'blocks/site-address-changer/style'; diff --git a/client/blocks/post-status/docs/example.jsx b/client/blocks/post-status/docs/example.jsx index da05e1c8c08e6c..1120afb033508a 100644 --- a/client/blocks/post-status/docs/example.jsx +++ b/client/blocks/post-status/docs/example.jsx @@ -41,23 +41,27 @@ function PostStatusExample( { queries, primarySiteId, primarySiteUrl, globalIdBy ); } +const queries = { + Scheduled: { status: 'future', number: 1, type: 'any' }, + Trashed: { status: 'trash', number: 1, type: 'any' }, + 'Pending Review': { status: 'pending', number: 1, type: 'any' }, + Sticky: { sticky: 'require', number: 1, type: 'any' }, +}; + +const getFirstGlobalIdByQueryLabel = ( state, siteId ) => + mapValues( queries, query => { + const postsForQuery = getPostsForQuery( state, siteId, query ); + return get( postsForQuery, [ 0, 'global_ID' ] ); + } ); + const ConnectedPostStatusExample = connect( state => { const user = getCurrentUser( state ); const primarySiteId = get( user, 'primary_blog' ); - const queries = { - Scheduled: { status: 'future', number: 1, type: 'any' }, - Trashed: { status: 'trash', number: 1, type: 'any' }, - 'Pending Review': { status: 'pending', number: 1, type: 'any' }, - Sticky: { sticky: 'require', number: 1, type: 'any' }, - }; - return { queries, primarySiteId, primarySiteUrl: get( user, 'primary_blog_url' ), - globalIdByQueryLabel: mapValues( queries, query => { - return get( getPostsForQuery( state, primarySiteId, query ), [ 0, 'global_ID' ] ); - } ), + globalIdByQueryLabel: getFirstGlobalIdByQueryLabel( state, primarySiteId ), }; } )( PostStatusExample ); diff --git a/client/blocks/post-status/index.jsx b/client/blocks/post-status/index.jsx index bff2eb5142511f..c8bfde36498eaf 100644 --- a/client/blocks/post-status/index.jsx +++ b/client/blocks/post-status/index.jsx @@ -16,6 +16,11 @@ import Gridicon from 'gridicons'; */ import { getNormalizedPost } from 'state/posts/selectors'; +/** + * Style dependencies + */ +import './style.scss'; + export function PostStatus( { translate, post, showAll, showIcon = true } ) { if ( ! post ) { return null; @@ -73,8 +78,6 @@ PostStatus.propTypes = { showIcon: PropTypes.bool, }; -export default connect( ( state, { globalId } ) => { - return { - post: getNormalizedPost( state, globalId ), - }; -} )( localize( PostStatus ) ); +export default connect( ( state, { globalId } ) => ( { + post: getNormalizedPost( state, globalId ), +} ) )( localize( PostStatus ) ); From acde337c91c5c960a7af0b117dcca44eaa5f719c Mon Sep 17 00:00:00 2001 From: Jarda Snajdr Date: Fri, 22 Feb 2019 15:45:42 +0100 Subject: [PATCH 3/3] Remove usage of PostStatus block in EditorPostType It was never visible anyway because of `showIcon=false` prop and `display: none` style. It was added a long time ago in #8679. You can see on the screenshots that the editor looked very differently back then. Then the editor was redesigned to the current look in #11536, where `PostStatus` was hidden, but not completely removed. --- client/post-editor/editor-post-type/index.jsx | 19 ++++++++----------- .../post-editor/editor-post-type/style.scss | 7 ------- 2 files changed, 8 insertions(+), 18 deletions(-) diff --git a/client/post-editor/editor-post-type/index.jsx b/client/post-editor/editor-post-type/index.jsx index 824ecdc30ec9c9..4a450f5c88db8b 100644 --- a/client/post-editor/editor-post-type/index.jsx +++ b/client/post-editor/editor-post-type/index.jsx @@ -14,19 +14,18 @@ import { localize } from 'i18n-calypso'; * Internal dependencies */ import { getEditedPost } from 'state/posts/selectors'; -import { getSelectedSite } from 'state/ui/selectors'; +import { getSelectedSiteId } from 'state/ui/selectors'; import { getEditorPostId } from 'state/ui/editor/selectors'; import { getPostType } from 'state/post-types/selectors'; import QueryPostTypes from 'components/data/query-post-types'; import { decodeEntities } from 'lib/formatting'; -import PostStatus from 'blocks/post-status'; /** * Style dependencies */ import './style.scss'; -function EditorPostType( { translate, siteId, typeSlug, type, globalId, isSettings } ) { +function EditorPostType( { translate, siteId, typeSlug, type, isSettings } ) { let label; if ( 'page' === typeSlug ) { if ( isSettings ) { @@ -64,7 +63,7 @@ function EditorPostType( { translate, siteId, typeSlug, type, globalId, isSettin { siteId && 'page' !== typeSlug && 'post' !== typeSlug && ( ) } - { label } + { label } ); } @@ -74,26 +73,24 @@ EditorPostType.propTypes = { siteId: PropTypes.number, typeSlug: PropTypes.string, type: PropTypes.object, - globalId: PropTypes.string, isSettings: PropTypes.bool, }; export default connect( state => { const props = {}; - const site = getSelectedSite( state ); - if ( ! site ) { + const siteId = getSelectedSiteId( state ); + if ( ! siteId ) { return props; } - props.siteId = site.ID; - const post = getEditedPost( state, site.ID, getEditorPostId( state ) ); + props.siteId = siteId; + const post = getEditedPost( state, siteId, getEditorPostId( state ) ); if ( ! post ) { return props; } return Object.assign( props, { typeSlug: post.type, - type: getPostType( state, site.ID, post.type ), - globalId: post.global_ID, + type: getPostType( state, siteId, post.type ), } ); } )( localize( EditorPostType ) ); diff --git a/client/post-editor/editor-post-type/style.scss b/client/post-editor/editor-post-type/style.scss index d8c830b4489f35..606ba61666e28d 100644 --- a/client/post-editor/editor-post-type/style.scss +++ b/client/post-editor/editor-post-type/style.scss @@ -2,11 +2,4 @@ &.is-loading { @include placeholder; } - - .post-status__text { - display: none; - color: var( --color-neutral-400 ); - margin-left: 4px; - vertical-align: baseline; - } }