From 51c422eb82ee6fd16f4fb3a4b138ef3e80e2b1fb Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Thu, 9 Jul 2020 15:47:19 +0200 Subject: [PATCH] External Media: Google Photos Custom Date Range (#16266) * add custom date range filter option add custom date filter option update responsive styles for filters add explainer generate array of months in user locale renamed const with months renamed custom range option * use flex-start, as suggested by the linter * match button size to inputs * External Media: filters styling for desktop / mob * prevent collision with number step arrows * add ability to filter by whole year * remove extra import * external-media: set className to number control * Update styles Also removes unneeded isLarge props. * Remove invalid prop from Fragment Co-authored-by: cpap Co-authored-by: retrofox Co-authored-by: Konstantin Obenland --- extensions/shared/external-media/constants.js | 22 ++++-- extensions/shared/external-media/editor.scss | 70 ++++++++++++++----- .../external-media/media-browser/index.js | 9 +-- .../sources/google-photos/filter-option.js | 66 +++++++++++++++-- .../sources/google-photos/filter-request.js | 21 ++++-- 5 files changed, 146 insertions(+), 42 deletions(-) diff --git a/extensions/shared/external-media/constants.js b/extensions/shared/external-media/constants.js index 9f5692e607bbd..e46547b4b3d8b 100644 --- a/extensions/shared/external-media/constants.js +++ b/extensions/shared/external-media/constants.js @@ -3,6 +3,8 @@ */ import { __ } from '@wordpress/i18n'; +import { dateI18n } from '@wordpress/date'; +import { map, range } from 'lodash'; export const SOURCE_WORDPRESS = 'wordpress'; export const SOURCE_GOOGLE_PHOTOS = 'google_photos'; @@ -162,9 +164,19 @@ export const GOOGLE_PHOTOS_DATE_PRESETS = [ value: DATE_RANGE_LAST_12_MONTHS, label: __( 'Last 12 months', 'jetpack' ), }, - // TODO: Implement a UI for selecting month & year. - //{ - // value: DATE_RANGE_CUSTOM, - // label: __( 'Custom Range', 'jetpack' ), - //}, + { + value: DATE_RANGE_CUSTOM, + label: __( 'Specific Month/Year', 'jetpack' ), + }, +]; + +export const CURRENT_YEAR = new Date().getFullYear(); + +export const MONTH_SELECT_OPTIONS = [ + { label: __( 'Any Month', 'jetpack' ), value: -1 }, + ...map( range( 0, 12 ), value => ( { + // Following call generates a new date object for the particular month and gets its name. + label: dateI18n( 'F', new Date( [ 0, value + 1 ] ) ), + value, + } ) ), ]; diff --git a/extensions/shared/external-media/editor.scss b/extensions/shared/external-media/editor.scss index 0bd6fed39acb4..08df270de63b7 100644 --- a/extensions/shared/external-media/editor.scss +++ b/extensions/shared/external-media/editor.scss @@ -221,13 +221,24 @@ $grid-size: 8px; .jetpack-external-media-header__view { display: flex; - align-items: center; + align-items: flex-start; justify-content: flex-start; margin-bottom: 48px; + flex-direction: column; + + @media only screen and ( min-width: 600px ) { + flex-direction: row; + align-items: center; + } select { max-width: 200px !important; } + + .components-base-control__field { + display: flex; + flex-direction: column; + } } .jetpack-external-media-header__filter, @@ -240,31 +251,54 @@ $grid-size: 8px; padding-right: $grid-size; margin-bottom: 0; } - - .components-base-control__label { - margin-bottom: 0; - } - - .components-base-control__field { - display: flex; - align-items: center; - margin-bottom: 0; - } - - .components-base-control + .components-base-control { - padding-left: $grid-size * 2; - } } .jetpack-external-media-header__filter { display: flex; flex-wrap: wrap; align-items: center; + flex-grow: 1; + justify-content: flex-start; - .jetpack-external-media-googlephotos-filter { + @media only screen and ( min-width: 600px ) { + border-left: 1px solid $light-gray-secondary; + margin-left: $grid-size * 2; + padding-left: $grid-size * 2; + } + + .jetpack-external-media-date-filter { display: flex; - align-items: center; - margin-right: 7px; + flex-wrap: wrap; + + button { + // Adjust button to match the size and position of inputs. + margin-top: 27px; + height: 40px; + + @media only screen and ( min-width: 783px ) { + height: 30px; + } + } + + .components-base-control { + .components-input-control__label { + margin-bottom: 3px; + } + + .components-input-control__backdrop { + border-color: $dark-gray-200; + border-radius: 3px; + } + + .components-input-control__input { + height: 40px; + width: 70px; // This input holds only years, so 4 digits width is enough. + + @media only screen and ( min-width: 783px ) { + height: 30px; + } + } + } } } diff --git a/extensions/shared/external-media/media-browser/index.js b/extensions/shared/external-media/media-browser/index.js index 1eb207290b0d0..a4188ab6e1c14 100644 --- a/extensions/shared/external-media/media-browser/index.js +++ b/extensions/shared/external-media/media-browser/index.js @@ -86,13 +86,7 @@ function MediaBrowser( props ) { return (
-
@@ -118,7 +112,6 @@ function MediaBrowser( props ) { { pageHandle && ! isLoading && ( + + ) } + ); } diff --git a/extensions/shared/external-media/sources/google-photos/filter-request.js b/extensions/shared/external-media/sources/google-photos/filter-request.js index cb3010c6bc084..dfeaae6932572 100644 --- a/extensions/shared/external-media/sources/google-photos/filter-request.js +++ b/extensions/shared/external-media/sources/google-photos/filter-request.js @@ -34,24 +34,37 @@ export default function getFilterRequest( filters ) { if ( date ) { let startDate = null; - let endDate = TODAY; + let endDate = null; switch ( date.range ) { case DATE_RANGE_LAST_7_DAYS: startDate = moment( TODAY ).subtract( 7, 'days' ); + endDate = TODAY; break; case DATE_RANGE_LAST_30_DAYS: startDate = moment( TODAY ).subtract( 30, 'days' ); + endDate = TODAY; break; case DATE_RANGE_LAST_6_MONTHS: startDate = moment( TODAY ).subtract( 6, 'months' ); + endDate = TODAY; break; case DATE_RANGE_LAST_12_MONTHS: startDate = moment( TODAY ).subtract( 1, 'year' ); + endDate = TODAY; break; case DATE_RANGE_CUSTOM: - if ( date.year && date.month ) { - startDate = moment( [ date.year, date.month - 1 ] ); - endDate = moment( startDate ).endOf( 'month' ); + const month = parseInt( date.month ); + const year = parseInt( date.year ); + if ( ! isNaN( month ) && ! isNaN( year ) ) { + if ( month === -1 ) { + // Whole year. + startDate = moment( [ year, 0 ] ); + endDate = moment( startDate ).endOf( 'year' ); + } else { + // Specific month. + startDate = moment( [ year, month ] ); + endDate = moment( startDate ).endOf( 'month' ); + } } break; }