From 4f2fc80f6591d417a1215137a8eb462c726033f9 Mon Sep 17 00:00:00 2001 From: Sergey Biryukov Date: Sat, 14 Sep 2019 14:28:47 +0000 Subject: [PATCH] Site Health: Modify the grading indicator to remove percentage score in favor of a "Good" or "Should be improved" status. This removes arbitrary confusion about what the numbers mean. Props Clorith, hedgefield, Cybr, arena, DavidAnderson, earnjam, daveshine, Otto42, azaozz, asadkn, KARTHOST, tigertech, maximejobin, johnbillion, raboodesign, ramiy, afragen. Fixes #47046. git-svn-id: https://develop.svn.wordpress.org/trunk@46106 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/admin/site-health.js | 35 ++++++++++++-------------- src/wp-admin/css/site-health.css | 36 ++++++++++++++++----------- src/wp-admin/site-health-info.php | 9 ++++--- src/wp-admin/site-health.php | 9 ++++--- 4 files changed, 50 insertions(+), 39 deletions(-) diff --git a/src/js/_enqueues/admin/site-health.js b/src/js/_enqueues/admin/site-health.js index a8aa67b74b..df8cc62f6c 100644 --- a/src/js/_enqueues/admin/site-health.js +++ b/src/js/_enqueues/admin/site-health.js @@ -87,10 +87,11 @@ jQuery( document ).ready( function( $ ) { function RecalculateProgression() { var r, c, pct; var $progress = $( '.site-health-progress' ); - var $progressCount = $progress.find( '.site-health-progress-count' ); + var $wrapper = $progress.closest( '.site-health-progress-wrapper' ); + var $progressLabel = $( '.site-health-progress-label', $wrapper ); var $circle = $( '.site-health-progress svg #bar' ); var totalTests = parseInt( SiteHealth.site_status.issues.good, 0 ) + parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 ); - var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 ); + var failedTests = ( parseInt( SiteHealth.site_status.issues.recommended, 0 ) * 0.5 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 ); var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 ); if ( 0 === totalTests ) { @@ -98,7 +99,7 @@ jQuery( document ).ready( function( $ ) { return; } - $progress.removeClass( 'loading' ); + $wrapper.removeClass( 'loading' ); r = $circle.attr( 'r' ); c = Math.PI * ( r * 2 ); @@ -122,21 +123,18 @@ jQuery( document ).ready( function( $ ) { $( '#health-check-issues-recommended' ).addClass( 'hidden' ); } - if ( 50 <= val ) { - $circle.addClass( 'orange' ).removeClass( 'red' ); - } + if ( 80 <= val && 0 === parseInt( SiteHealth.site_status.issues.critical, 0 ) ) { + $wrapper.addClass( 'green' ).removeClass( 'orange' ); - if ( 90 <= val ) { - $circle.addClass( 'green' ).removeClass( 'orange' ); - } + $progressLabel.text( __( 'Good' ) ); + wp.a11y.speak( __( 'All site health tests have finished running. Your site is looking good, and the results are now available on the page.' ) ); + } else { + $wrapper.addClass( 'orange' ).removeClass( 'green' ); - if ( 100 === val ) { - $( '.site-status-all-clear' ).removeClass( 'hide' ); - $( '.site-status-has-issues' ).addClass( 'hide' ); + $progressLabel.text( __( 'Should be improved' ) ); + wp.a11y.speak( __( 'All site health tests have finished running. There are items that should be addressed, and the results are now available on the page.' ) ); } - $progressCount.text( val + '%' ); - if ( ! isDebugTab ) { $.post( ajaxurl, @@ -147,11 +145,10 @@ jQuery( document ).ready( function( $ ) { } ); - wp.a11y.speak( sprintf( - // translators: %s: The percentage score for the tests. - __( 'All site health tests have finished running. Your site scored %s, and the results are now available on the page.' ), - val + '%' - ) ); + if ( 100 === val ) { + $( '.site-status-all-clear' ).removeClass( 'hide' ); + $( '.site-status-has-issues' ).addClass( 'hide' ); + } } } diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css index f320d4f4c9..07807eba1d 100644 --- a/src/wp-admin/css/site-health.css +++ b/src/wp-admin/css/site-health.css @@ -7,7 +7,7 @@ .health-check-header h1 { display: inline-block; font-weight: 600; - margin: 1rem 0.8rem; + margin: 0 0.8rem 1rem; font-size: 23px; padding: 9px 0 4px 0; line-height: 1.3; @@ -37,10 +37,14 @@ clear: both; } +.site-health-progress-wrapper { + margin-bottom: 1rem; +} + .site-health-progress { display: inline-block; - height: 40px; - width: 40px; + height: 20px; + width: 20px; margin: 0; border-radius: 100%; position: relative; @@ -62,15 +66,7 @@ font-size: 2em; } -.site-health-progress-count::after { - content: ""; -} - -.site-health-progress.loading .site-health-progress-count::after { - content: "ยทยทยท"; -} - -.site-health-progress.loading svg #bar { +.loading .site-health-progress svg #bar { stroke-dashoffset: 0; stroke: #adc5d2; animation: loadingPulse 3s infinite ease-in-out; @@ -88,13 +84,25 @@ stroke: #dc3232; } -.site-health-progress svg #bar.green { +.green .site-health-progress #bar { stroke: #46b450; } +.green .site-health-progress .site-health-progress-label { + color: #46b450; +} -.site-health-progress svg #bar.orange { +.orange .site-health-progress #bar { stroke: #ffb900; } +.orange .site-health-progress .site-health-progress-label { + color: #ffb900; +} + +.site-health-progress-label { + font-weight: 600; + line-height: 20px; + margin-left: 0.3rem; +} @keyframes loadingPulse { 0% { diff --git a/src/wp-admin/site-health-info.php b/src/wp-admin/site-health-info.php index e63ff24ef3..34471a0968 100644 --- a/src/wp-admin/site-health-info.php +++ b/src/wp-admin/site-health-info.php @@ -34,14 +34,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );

+ -
+
+
- - +
+
+
diff --git a/src/wp-admin/site-health.php b/src/wp-admin/site-health.php index c5396f30cb..9e3a847f6a 100644 --- a/src/wp-admin/site-health.php +++ b/src/wp-admin/site-health.php @@ -39,14 +39,17 @@ require_once( ABSPATH . 'wp-admin/admin-header.php' );

+
-
+
+
- - +
+
+