WordPress.org
Get WordPress

Make WordPress Core

Changeset 29040


Ignore:
Timestamp:
07/09/2014 05:27:22 PM (10 years ago)
Author:
helen
Message:

Improvements to the plugin information modal:

  • Show the banner image when available.
  • Show contributors and ratings breakdown in the FYI box.
  • Show reviews in a tab.

props stephdau, tellyworth, paulwilde, michalzuber. see #27440. fixes #19784, #22599, #26202.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/common.css

    r28940 r29040  
    18121812
    18131813#plugin-information-title {
    1814     padding: 0 76px 0 20px;
     1814    margin-right: 56px; /* avoid collisions with the close icon */
     1815    padding: 0 20px;
    18151816    font-size: 22px;
    18161817    font-weight: 600;
    … …  
    18251826}
    18261827
     1828#plugin-information-title.with-banner {
     1829    margin-right: 0;
     1830    height: 250px;
     1831    bottom: 250px;
     1832    background-size: 100% auto;
     1833}
     1834
     1835@media only screen and (max-width: 800px) {
     1836    #plugin-information-title.with-banner {
     1837        height: 100px;
     1838        bottom: 100px;
     1839    }
     1840}
     1841
     1842#plugin-information-title h2 {
     1843    font-family: "Helvetica Neue", sans-serif;
     1844    padding:0;
     1845    margin: 0;
     1846    max-width: 760px;
     1847}
     1848
     1849#plugin-information-title.with-banner h2 {
     1850    font-size: 30px;
     1851    line-height: 50px;
     1852    font-weight: bold;
     1853    max-width: 760px;
     1854    position: absolute;
     1855    left: 20px;
     1856    top: 145px;
     1857    padding: 0 15px;
     1858    margin: 0;
     1859    color: #fff;
     1860    background: rgba( 30, 30, 30, 0.9 );
     1861    text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
     1862    -webkit-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1863    -moz-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1864    box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
     1865    -webkit-border-radius: 8px;
     1866    border-radius: 8px;
     1867}
     1868
     1869@media only screen and (max-width: 800px) {
     1870    #plugin-information-title.with-banner h2 {
     1871        top: 12px;
     1872        font-size: 20px;
     1873        line-height: 40px;
     1874    }
     1875}
     1876
     1877#plugin-information-title div.vignette {
     1878    display: none;
     1879}
     1880
     1881#plugin-information-title.with-banner div.vignette {
     1882    display: block;
     1883    top: 0;
     1884    height: 215px;
     1885    width: 830px;
     1886    margin: 0 -20px;
     1887    background: transparent;
     1888    -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1889    -moz-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1890    box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
     1891}
     1892
     1893@media only screen and (max-width: 800px) {
     1894    #plugin-information-title.with-banner div.vignette {
     1895        height: 65px;
     1896        bottom: 65px;
     1897        width: 800%;
     1898    }
     1899}
     1900
    18271901#plugin-information-tabs {
    18281902    padding: 0 16px;
    … …  
    18331907    height: 36px;
    18341908    z-index: 1;
     1909}
     1910
     1911#plugin-information-tabs.with-banner {
     1912    top: 215px;
     1913    background: rgba( 255, 255, 255, 0.85 );
     1914}
     1915
     1916@media only screen and (max-width: 800px) {
     1917    #plugin-information-tabs.with-banner {
     1918        top: 65px;
     1919    }
    18351920}
    18361921
    … …  
    18721957}
    18731958
     1959#plugin-information-content.with-banner {
     1960    top:249px;
     1961}
     1962
     1963@media only screen and (max-width: 800px) {
     1964    #plugin-information-content.with-banner {
     1965        top:99px;
     1966    }
     1967}
     1968
    18741969#section-holder {
    18751970    margin: 0;
    … …  
    18881983
    18891984#plugin-information .fyi {
     1985    display: block;
    18901986    background: #f3f3f3;
    18911987    border-left: 1px solid #ddd;
    … …  
    19282024}
    19292025
     2026#plugin-information .counter-label {
     2027    float: left;
     2028    margin-right: 5px;
     2029}
     2030
     2031#plugin-information .counter-back {
     2032    height: 17px;
     2033    width: 92px;
     2034    background-color: #ececec;
     2035    float: left;
     2036}
     2037
     2038#plugin-information .counter-bar {
     2039    height: 17px;
     2040    background-color: #fddb5a;
     2041    float: left;
     2042}
     2043
     2044#plugin-information .counter-count {
     2045    margin-left: 5px;
     2046}
     2047
     2048#plugin-information .fyi ul.contributors {
     2049    margin-top: 10px;
     2050}
     2051
     2052#plugin-information .fyi ul.contributors li {
     2053    display: inline-block;
     2054    margin-right: 8px;
     2055    vertical-align: middle;
     2056}
     2057
     2058#plugin-information .fyi ul.contributors li {
     2059    display: inline-block;
     2060    margin-right: 8px;
     2061    vertical-align: middle;
     2062}
     2063
     2064#plugin-information .fyi ul.contributors li img {
     2065    vertical-align: middle;
     2066    margin-right: 4px;
     2067}
     2068
    19302069#plugin-information-footer {
    19312070    padding: 15px 16px;
    … …  
    20542193body.update-core-php .tb-close-icon,
    20552194body.index-php .tb-close-icon {
     2195    background: rgba( 255, 255, 255, .5);
     2196    color: #444;
    20562197    line-height: 48px;
    20572198    width: 48px;
    20582199    height: 48px;
     2200}
     2201
     2202body.plugin-install-php .tb-close-icon:hover,
     2203body.import-php .tb-close-icon:hover,
     2204body.plugins-php .tb-close-icon:hover,
     2205body.update-core-php .tb-close-icon:hover,
     2206body.index-php .tb-close-icon:hover {
     2207    background: #0074a2;
     2208    color: #fff;
    20592209}
    20602210

  • trunk/src/wp-admin/includes/plugin-install.php

    r28749 r29040  
    312312    global $tab;
    313313
    314     $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl() ) );
     314    $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl(), 'fields' => array( 'banners' => true, 'reviews' => true ) ) );
    315315
    316316    if ( is_wp_error( $api ) )
    … …  
    332332        'screenshots'  => _x('Screenshots',  'Plugin installer section title'),
    333333        'changelog'    => _x('Changelog',    'Plugin installer section title'),
     334        'reviews'      => _x('Reviews',      'Plugin installer section title'),
    334335        'other_notes'  => _x('Other Notes',  'Plugin installer section title')
    335336    );
    … …  
    355356    iframe_header( __('Plugin Install') );
    356357
    357     echo "<div id='{$_tab}-title'>{$api->name}</div>";
    358     echo "<div id='{$_tab}-tabs'>\n";
     358    $_with_banner = '';
     359
     360    if ( !empty( $api->banners ) && ( !empty( $api->banners['low'] ) || !empty( $api->banners['high'] ) ) ) {
     361        $_with_banner = 'with-banner';
     362        $low  = ( !empty( $api->banners['low'] ) ) ? $api->banners['low'] : $api->banners['high'];
     363        $high = ( !empty( $api->banners['high'] ) ) ? $api->banners['high'] : $api->banners['low'];
     364        ?>
     365        <style type="text/css">
     366            #plugin-information-title.with-banner {
     367                background-image: url(<?php echo $low ?>);
     368            }
     369            @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
     370                #plugin-information-title.with-banner {
     371                    background-image: url(<?php echo $high ?>});
     372                }
     373            }
     374        </style>
     375        <?php
     376    }
     377
     378    echo "<div id='{$_tab}-title' class='{$_with_banner}'><div class='vignette'></div><h2>{$api->name}</h2></div>";
     379    echo "<div id='{$_tab}-tabs' class='{$_with_banner}'>\n";
    359380
    360381    foreach ( (array)$api->sections as $section_name => $content ) {
     382        if ( 'reviews' == $section_name && ( empty( $api->ratings ) || 0 == array_sum( (array) $api->ratings ) ) )
     383            continue;
    361384
    362385        if ( isset( $plugins_section_titles[ $section_name ] ) )
    … …  
    375398
    376399    ?>
    377     <div id="<?php echo $_tab; ?>-content">
     400    <div id="<?php echo $_tab; ?>-content" class='<?php echo $_with_banner; ?>'>
    378401    <div class="fyi">
    379402        <ul>
    … …  
    395418<?php endif; if ( ! empty( $api->homepage ) ) : ?>
    396419            <li><a target="_blank" href="<?php echo $api->homepage ?>"><?php _e('Plugin Homepage &#187;') ?></a></li>
     420<?php endif;if ( ! empty( $api->donate_link ) && empty( $api->contributors ) ) : ?>
     421            <li><a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a></li>
    397422<?php endif; ?>
    398423        </ul>
    … …  
    401426        <?php wp_star_rating( array( 'rating' => $api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?>
    402427        <small><?php printf( _n('(based on %s rating)', '(based on %s ratings)', $api->num_ratings), number_format_i18n($api->num_ratings) ); ?></small>
     428        <?php endif; ?>
     429        <?php
     430        if ( ! empty( $api->ratings ) && array_sum( (array) $api->ratings ) > 0 ) {
     431            foreach( $api->ratings as $key=>$ratecount ) {
     432                // avoid div-by-zero
     433                $_rating = $api->num_ratings ? ( $ratecount / $api->num_ratings ) : 0;
     434                ?>
     435                <div class="counter-container">
     436                    <a href="./plugin-install.php?tab=plugin-information&plugin=<?php echo $api->slug; ?>&section=reviews"
     437                       title="<?php echo esc_attr( sprintf( _n( 'Click to see reviews that provided a rating of %d star', 'Click to see reviews that provided a rating of %d stars', $key ), $key ) ); ?>" -->
     438                        <span class="counter-label" style="float:left; margin-right:5px;"><?php echo $key; ?> stars</span>
     439                        <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;">
     440                            <span class="counter-bar" style="width: <?php echo 92 * $_rating; ?>px;height:17px;background-color:#fddb5a;float:left;"></span>
     441                        </span>
     442                    </a>
     443                    <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span>
     444                </div>
     445            <?php
     446            }
     447        }
     448        if ( ! empty( $api->contributors ) ) : ?>
     449            <h3><?php _e('Contributors') ?></h3>
     450            <ul class="contributors">
     451                <?php
     452                foreach ( (array) $api->contributors as $contrib_username => $contrib_profile ) {
     453                    if ( empty( $contrib_username ) && empty( $contrib_profile ) )
     454                        continue;
     455                    if ( empty( $contrib_username ) )
     456                        $contrib_username = preg_replace( '/^.+\/(.+)\/?$/', '\1', $contrib_profile );
     457                    $contrib_username = sanitize_user( $contrib_username );
     458                    if ( empty( $contrib_profile ) )
     459                        echo "<li><img src='https://wordpress.org/grav-redirect.php?user={$contrib_username}&s=36' width='18' height='18' />{$contrib_username}</li>";
     460                    else
     461                        echo "<li><a href='{$contrib_profile}' target='_blank'><img src='https://wordpress.org/grav-redirect.php?user={$contrib_username}&s=36' width='18' height='18' />{$contrib_username}</a></li>";
     462                }
     463                ?>
     464            </ul>
     465            <?php if ( ! empty( $api->donate_link ) ) : ?>
     466                <a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a>
     467            <?php endif; ?>
    403468        <?php endif; ?>
    404469    </div>

  • trunk/src/wp-admin/js/plugin-install.js

    r27559 r29040  
    5454        $( '#plugin-information-tabs a.current' ).removeClass( 'current' );
    5555        $( this ).addClass( 'current' );
     56        //Only show the fyi box in the description section, on smaller screen, where it's otherwise always displayed at the top.
     57        if ( 'description' != $( this ).attr( 'name' ) && $( 'body').width() < 830 )
     58            $( '#plugin-information-content div.fyi' ).hide();
     59        else
     60            $( '#plugin-information-content div.fyi' ).show();
    5661        //Flip the content.
    5762        $( '#section-holder div.section' ).hide(); //Hide 'em all
Note: See TracChangeset for help on using the changeset viewer.