WordPress.org
Get WordPress

Make WordPress Core

Ticket #46621: 46621.diff

File 46621.diff, 6.9 KB (added by afercia, 5 years ago)

  • src/js/_enqueues/admin/site-health.js

     
    8282         */
    8383        function RecalculateProgression() {
    8484                var r, c, pct;
    85                 var $progressBar = $( '#progressbar' );
    86                 var $circle = $( '#progressbar svg #bar' );
     85                var $progress = $( '.site-health-progress' );
     86                var $progressCount = $progress.find( '.progress-count' );
     87                var $circle = $( '.site-health-progress svg #bar' );
    8788                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 );
    8889                var failedTests = parseInt( SiteHealth.site_status.issues.recommended, 0 ) + ( parseInt( SiteHealth.site_status.issues.critical, 0 ) * 1.5 );
    8990                var val = 100 - Math.ceil( ( failedTests / totalTests ) * 100 );
    9091
    9192                if ( 0 === totalTests ) {
    92                         $progressBar.addClass( 'hidden' );
     93                        $progress.addClass( 'hidden' );
    9394                        return;
    9495                }
    9596
    96                 $progressBar.removeClass( 'loading' );
     97                $progress.removeClass( 'loading' );
    9798
    9899                r = $circle.attr( 'r' );
    99100                c = Math.PI * ( r * 2 );
    … …  
    130131                        $( '.site-status-has-issues' ).addClass( 'hide' );
    131132                }
    132133
    133                 $progressBar.attr( 'data-pct', val );
    134                 $progressBar.attr( 'aria-valuenow', val );
     134                $progressCount.text( val + '%' );
    135135
    136136                $.post(
    137137                        ajaxurl,

  • src/wp-admin/css/site-health.css

     
    3939        margin: 1rem 0.8rem 1rem 0.8rem;
    4040}
    4141
    42 body.site-health .health-check-header .title-section #progressbar {
     42.site-health-progress {
    4343        display: inline-block;
    4444        height: 40px;
    4545        width: 40px;
    … …  
    5050        font-size: 0.4rem;
    5151}
    5252
    53 body.site-health .health-check-header .title-section #progressbar:after {
     53.site-health-progress .progress-count {
    5454        position: absolute;
    5555        display: block;
    5656        height: 80px;
    … …  
    5757        width: 80px;
    5858        left: 50%;
    5959        top: 50%;
    60         content: attr(data-pct) "%";
    6160        margin-top: -40px;
    6261        margin-left: -40px;
    6362        border-radius: 100%;
    … …  
    6564        font-size: 2em;
    6665}
    6766
    68 body.site-health .health-check-header .title-section #progressbar.hidden {
     67.site-health-progress .progress-count::after {
     68        content: "";
     69}
     70
     71.site-health-progress.hidden {
    6972        display: none;
    7073}
    7174
    72 body.site-health .health-check-header .title-section #progressbar.loading:after {
     75.site-health-progress.loading .progress-count::after {
    7376        animation: loadingEllipsis 3s infinite ease-in-out;
    7477}
    7578
    76 body.site-health .health-check-header .title-section #progressbar.loading svg #bar {
     79.site-health-progress.loading svg #bar {
    7780        stroke-dashoffset: 0;
    7881        stroke: #adc5d2;
    7982        animation: loadingPulse 3s infinite ease-in-out;
    8083}
    8184
    82 body.site-health .health-check-header .title-section #progressbar svg circle {
     85.site-health-progress svg circle {
    8386        stroke-dashoffset: 0;
    8487        transition: stroke-dashoffset 1s linear;
    8588        stroke: #ccc;
    … …  
    8689        stroke-width: 2em;
    8790}
    8891
    89 body.site-health .health-check-header .title-section #progressbar svg #bar {
     92.site-health-progress svg #bar {
    9093        stroke-dashoffset: 565;
    9194        stroke: #dc3232;
    9295}
    9396
    94 body.site-health .health-check-header .title-section #progressbar svg #bar.green {
     97.site-health-progress svg #bar.green {
    9598        stroke: #46b450;
    9699}
    97100
    98 body.site-health .health-check-header .title-section #progressbar svg #bar.orange {
     101.site-health-progress svg #bar.orange {
    99102        stroke: #ffb900;
    100103}
    101104
    … …  
    171174        margin: 0;
    172175}
    173176
    174 body.site-health .pass:before,
    175 body.site-health .good:before {
     177.site-health .pass::before,
     178.site-health .good::before {
    176179        content: "\f147";
    177180        display: inline-block;
    178181        color: #46b450;
    … …  
    180183        vertical-align: top;
    181184}
    182185
    183 body.site-health .warning:before {
     186.site-health .warning::before {
    184187        content: "\f460";
    185188        display: inline-block;
    186189        color: #ffb900;
    … …  
    187190        font-family: dashicons;
    188191}
    189192
    190 body.site-health .info:before {
     193.site-health .info::before {
    191194        content: "\f348";
    192195        display: inline-block;
    193196        color: #00a0d2;
    … …  
    194197        font-family: dashicons;
    195198}
    196199
    197 body.site-health .fail:before,
    198 body.site-health .error:before {
     200.site-health .fail::before,
     201.site-health .error::before {
    199202        content: "\f335";
    200203        display: inline-block;
    201204        color: #dc3232;
    … …  
    447450                margin: 0 22px;
    448451                width: initial;
    449452        }
    450 }
    451  No newline at end of file
     453}

  • src/wp-admin/site-health-info.php

     
    3434                                <?php _ex( 'Site Health', 'Menu, Section and Page Title' ); ?>
    3535                        </h1>
    3636
    37                         <div id="progressbar" class="loading" data-pct="0" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-valuetext="<?php esc_attr_e( 'Site tests are running, please wait a moment.' ); ?>">
    38                                 <svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
     37                        <div class="site-health-progress loading">
     38                                <svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    3939                                        <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4040                                        <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4141                                </svg>
     42                                <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
     43                                <span class="progress-count"></span>
    4244                        </div>
    4345                </div>
    4446

  • src/wp-admin/site-health.php

     
    3636                        <?php _ex( 'Site Health', 'Menu, Section and Page Title' ); ?>
    3737                </h1>
    3838
    39                 <div id="progressbar" class="loading" data-pct="0" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" aria-valuetext="<?php esc_attr_e( 'Site tests are running, please wait a moment.' ); ?>">
    40                         <svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
     39                <div class="site-health-progress loading">
     40                        <svg role="img" aria-hidden="true" focusable="false" width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    4141                                <circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4242                                <circle id="bar" r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
    4343                        </svg>
     44                        <span class="screen-reader-text"><?php _e( 'Current health score:' ); ?></span>
     45                        <span class="progress-count"></span>
    4446                </div>
    4547        </div>
    4648