From 9487c4e04d55f4c1dd8e1a0e49555430500016ee Mon Sep 17 00:00:00 2001 From: Timmy Crawford Date: Wed, 15 Feb 2017 13:19:33 -0800 Subject: [PATCH 1/2] Stats: use svg country flags instead of gravatar hosted flags. --- .../stats/stats-list/stats-list-item.jsx | 2 +- client/my-sites/stats/stats-list/style.scss | 14 +++-- client/state/stats/lists/test/utils.js | 54 +++++-------------- client/state/stats/lists/utils.js | 7 +-- 4 files changed, 27 insertions(+), 50 deletions(-) diff --git a/client/my-sites/stats/stats-list/stats-list-item.jsx b/client/my-sites/stats/stats-list/stats-list-item.jsx index 255969b6b270a..d2617bb020f6f 100644 --- a/client/my-sites/stats/stats-list/stats-list-item.jsx +++ b/client/my-sites/stats/stats-list/stats-list-item.jsx @@ -181,7 +181,7 @@ module.exports = React.createClass( { } if ( labelItem.icon ) { - avatar = ( ); + avatar = ( ); } icon = avatar; diff --git a/client/my-sites/stats/stats-list/style.scss b/client/my-sites/stats/stats-list/style.scss index 99e819b919f1c..a54ca36e77cb7 100644 --- a/client/my-sites/stats/stats-list/style.scss +++ b/client/my-sites/stats/stats-list/style.scss @@ -190,12 +190,10 @@ } .icon { - $icon-size: 24px; - position: relative; display: inline-block; - width: $icon-size; - height: $icon-size; + width: 24px; + height: 24px; overflow: hidden; vertical-align: middle; min-width: 24px; @@ -205,6 +203,14 @@ display: block; background: $white; position: relative; + width: 20px; + height: 20px; + + &.is-flag { + width: 24px; + height: 18px; + padding-top: 2px; + } } // Hide for user avatars diff --git a/client/state/stats/lists/test/utils.js b/client/state/stats/lists/test/utils.js index da36de03f4568..7a8dd40a6d2e5 100644 --- a/client/state/stats/lists/test/utils.js +++ b/client/state/stats/lists/test/utils.js @@ -524,7 +524,8 @@ describe( 'utils', () => { label: 'United States', value: 1, region: '021', - icon: 'https://secure.gravatar.com/blavatar/9f4faa5ad0c723474f7a6d810172447c?s=48' + icon: '/calypso/images/flags/us.svg', + iconClassName: 'is-flag' } ] ); } ); @@ -560,7 +561,8 @@ describe( 'utils', () => { label: 'United States', value: 10, region: '021', - icon: 'https://secure.gravatar.com/blavatar/9f4faa5ad0c723474f7a6d810172447c?s=48' + icon: '/calypso/images/flags/us.svg', + iconClassName: 'is-flag' } ] ); } ); @@ -595,7 +597,8 @@ describe( 'utils', () => { label: 'United States', value: 100, region: '021', - icon: 'https://secure.gravatar.com/blavatar/9f4faa5ad0c723474f7a6d810172447c?s=48' + icon: '/calypso/images/flags/us.svg', + iconClassName: 'is-flag' } ] ); } ); @@ -631,43 +634,8 @@ describe( 'utils', () => { label: 'United States', value: 100, region: '021', - icon: 'https://secure.gravatar.com/blavatar/9f4faa5ad0c723474f7a6d810172447c?s=48' - } - ] ); - } ); - - it( 'should ignore missing grey flag icons', () => { - const parsedData = normalizers.statsCountryViews( { - date: '2015-12-25', - days: { - '2015-12-01': { - views: [ { - country_code: 'US', - views: 100 - } ], - other_views: 0, - total_views: 100 - } - }, - 'country-info': { - US: { - flag_icon: 'https://secure.gravatar.com/blavatar/5a83891a81b057fed56930a6aaaf7b3c?s=48', - flat_flag_icon: 'https://s-ssl.wordpress.com/i/stats/square-grey.png', - country_full: 'United States', - map_region: '021' - } - } - }, { - period: 'month', - date: '2015-12-25' - } ); - - expect( parsedData ).to.eql( [ - { - label: 'United States', - value: 100, - region: '021', - icon: null + icon: '/calypso/images/flags/us.svg', + iconClassName: 'is-flag' } ] ); } ); @@ -703,7 +671,8 @@ describe( 'utils', () => { label: 'US\'A', value: 100, region: '021', - icon: null + icon: '/calypso/images/flags/us.svg', + iconClassName: 'is-flag' } ] ); } ); @@ -742,7 +711,8 @@ describe( 'utils', () => { label: 'United States', value: 100, region: '021', - icon: 'https://secure.gravatar.com/blavatar/9f4faa5ad0c723474f7a6d810172447c?s=48' + icon: '/calypso/images/flags/us.svg', + iconClassName: 'is-flag' } ] ); } ); diff --git a/client/state/stats/lists/utils.js b/client/state/stats/lists/utils.js index a81555c29e33a..cdf8dd36802ef 100644 --- a/client/state/stats/lists/utils.js +++ b/client/state/stats/lists/utils.js @@ -227,14 +227,15 @@ export const normalizers = { return map( countryData, ( viewData ) => { const country = countryInfo[ viewData.country_code ]; - const icon = country.flat_flag_icon.match( /grey\.png/ ) ? null : country.flat_flag_icon; - + //const icon = country.flat_flag_icon.match( /grey\.png/ ) ? null : country.flat_flag_icon; + const icon = `/calypso/images/flags/${ viewData.country_code.toLowerCase() }.svg` // ’ in country names causes google's geo viz to break return { label: country.country_full.replace( /’/, "'" ), value: viewData.views, region: country.map_region, - icon: icon + icon: icon, + iconClassName: 'is-flag' }; } ); }, From 04da1a1b06066ea661536b3ca444a0115b61aac1 Mon Sep 17 00:00:00 2001 From: Timmy Crawford Date: Wed, 15 Feb 2017 13:31:44 -0800 Subject: [PATCH 2/2] Remove grey icon check, fix typo --- client/state/stats/lists/utils.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/state/stats/lists/utils.js b/client/state/stats/lists/utils.js index cdf8dd36802ef..63bba7f59bbb4 100644 --- a/client/state/stats/lists/utils.js +++ b/client/state/stats/lists/utils.js @@ -227,8 +227,8 @@ export const normalizers = { return map( countryData, ( viewData ) => { const country = countryInfo[ viewData.country_code ]; - //const icon = country.flat_flag_icon.match( /grey\.png/ ) ? null : country.flat_flag_icon; - const icon = `/calypso/images/flags/${ viewData.country_code.toLowerCase() }.svg` + const icon = `/calypso/images/flags/${ viewData.country_code.toLowerCase() }.svg`; + // ’ in country names causes google's geo viz to break return { label: country.country_full.replace( /’/, "'" ),