Ticket #27440: 27440-return-and-display-banners.9.diff

wp-admin/includes/plugin-install.php

@@ -311 +311 @@
 function install_plugin_information() {
         global $tab;
 
-        $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl() ) );
+        $api = plugins_api( 'plugin_information', array( 'slug' => wp_unslash( $_REQUEST['plugin'] ), 'is_ssl' => is_ssl(), 'fields' => array( 'banners' => true, 'reviews' => true ) ) );
 
         if ( is_wp_error( $api ) )
                 wp_die( $api );
@@ -354 +354 @@
 
         iframe_header( __('Plugin Install') );
 
-        echo "<div id='{$_tab}-title'>{$api->name}</div>";
-        echo "<div id='{$_tab}-tabs'>\n";
+        $_with_banner = '';
 
+        if ( !empty( $api->banners ) && ( !empty( $api->banners['low'] ) || !empty( $api->banners['high'] ) ) ) {
+                $_with_banner = 'with-banner';
+                $low  = ( !empty( $api->banners['low'] ) ) ? $api->banners['low'] : $api->banners['high'];
+                $high = ( !empty( $api->banners['high'] ) ) ? $api->banners['high'] : $api->banners['low'];
+                ?>
+                <style type="text/css">
+                        #plugin-information-title.with-banner {
+                                background-image: url(<?php echo $low ?>);
+                        }
+                        @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
+                                #plugin-information-title.with-banner {
+                                        background-image: url(<?php echo $high ?>});
+                                }
+                        }
+                </style>
+                <?php
+        }
+
+        echo "<div id='{$_tab}-title' class='{$_with_banner}'><div class='vignette'></div><h2>{$api->name}</h2></div>";
+        echo "<div id='{$_tab}-tabs' class='{$_with_banner}'>\n";
+
         foreach ( (array)$api->sections as $section_name => $content ) {
 
                 if ( isset( $plugins_section_titles[ $section_name ] ) )
@@ -374 +394 @@
         echo "</div>\n";
 
         ?>
-        <div id="<?php echo $_tab; ?>-content">
+        <div id="<?php echo $_tab; ?>-content" class='<?php echo $_with_banner; ?>'>
         <div class="fyi">
                 <ul>
 <?php if ( ! empty( $api->version ) ) : ?>
@@ -394 +414 @@
                         <li><a target="_blank" href="https://wordpress.org/plugins/<?php echo $api->slug ?>/"><?php _e('WordPress.org Plugin Page &#187;') ?></a></li>
 <?php endif; if ( ! empty( $api->homepage ) ) : ?>
                         <li><a target="_blank" href="<?php echo $api->homepage ?>"><?php _e('Plugin Homepage &#187;') ?></a></li>
+<?php endif;if ( ! empty( $api->donate_link ) && empty( $api->contributors ) ) : ?>
+                        <li><a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a></li>
 <?php endif; ?>
                 </ul>
                 <?php if ( ! empty( $api->rating ) ) : ?>
@@ -401 +423 @@
                 <?php wp_star_rating( array( 'rating' => $api->rating, 'type' => 'percent', 'number' => $api->num_ratings ) ); ?>
                 <small><?php printf( _n('(based on %s rating)', '(based on %s ratings)', $api->num_ratings), number_format_i18n($api->num_ratings) ); ?></small>
                 <?php endif; ?>
+                <?php
+                if ( ! empty( $api->ratings ) ) {
+                        foreach( $api->ratings as $key=>$ratecount ) {
+                                // avoid div-by-zero
+                                $_rating = $api->num_ratings ? ( $ratecount / $api->num_ratings ) : 0;
+                                ?>
+                                <div class="counter-container">
+                                        <a href="./plugin-install.php?tab=plugin-information&plugin=json-rest-api&section=reviews"
+                                           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 ) ); ?>" -->
+                                                <span class="counter-label" style="float:left; margin-right:5px;"><?php echo $key; ?> stars</span>
+                                                <span class="counter-back" style="height:17px;width:92px;background-color:#ececec;float:left;">
+                                                        <span class="counter-bar" style="width: <?php echo 92 * $_rating; ?>px;height:17px;background-color:#fddb5a;float:left;"></span>
+                                                </span>
+                                        </a>
+                                        <span class="counter-count" style="margin-left:5px;"><?php echo $ratecount; ?></span>
+                                </div>
+                        <?php
+                        }
+                }
+                if ( ! empty( $api->contributors ) ) : ?>
+                        <h3><?php _e('Contributors') ?></h3>
+                        <ul class="contributors">
+                                <?php
+                                foreach ( (array) $api->contributors as $contrib_username => $contrib_profile ) {
+                                        if ( empty( $contrib_username ) && empty( $contrib_profile ) )
+                                                continue;
+                                        if ( empty( $contrib_username ) )
+                                                $contrib_username = preg_replace( '/^.+\/(.+)\/?$/', '\1', $contrib_profile );
+                                        $contrib_username = sanitize_user( $contrib_username );
+                                        if ( empty( $contrib_profile ) )
+                                                echo "<li><img src='https://wordpress.org/grav-redirect.php?user={$contrib_username}&s=36' width='18' height='18' />{$contrib_username}</li>";
+                                        else
+                                                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>";
+                                }
+                                ?>
+                        </ul>
+                        <?php if ( ! empty( $api->donate_link ) ) : ?>
+                                <a target="_blank" href="<?php echo $api->donate_link ?>"><?php _e('Donate to this plugin &#187;') ?></a>
+                        <?php endif; ?>
+                <?php endif; ?>
         </div>
         <div id="section-holder" class="wrap">
         <?php

wp-admin/css/common.css

@@ -1799 +1799 @@
 }
 
 /* Plugin install thickbox */
+.plugin-install-php .tb-close-icon {
+        color: #444;
+        background: rgba(255,255,255,.3);
+}
+
+.plugin-install-php .tb-close-icon:hover {
+        color: #2ea2cc;
+        background: rgba(255,255,255,.6);
+}
+
 #plugin-information {
         background: #fcfcfc;
         position: fixed;
@@ -1824 +1834 @@
         white-space: nowrap;
 }
 
+#plugin-information-title.with-banner {
+        height: 250px;
+        bottom: 250px;
+        background-size: 100% auto;
+}
+
+@media only screen and (max-width: 800px) {
+        #plugin-information-title.with-banner {
+                height: 100px;
+                bottom: 100px;
+        }
+}
+
+#plugin-information-title h2 {
+        font-family: "Helvetica Neue", sans-serif;
+        padding:0;
+        margin: 0;
+        max-width: 760px;
+}
+
+#plugin-information-title.with-banner h2 {
+        font-size: 30px;
+        font-weight: bold;
+        max-width: 760px;
+        position: absolute;
+        left: 20px;
+        top: 175px;
+        padding: 0 15px;
+        margin: 0;
+        color: #fff;
+        background: rgba( 30, 30, 30, 0.9 );
+        text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
+        -webkit-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
+        -moz-box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
+        box-shadow: 0 0 30px rgba( 255, 255, 255, 0.1 );
+        -webkit-border-radius: 8px;
+        border-radius: 8px;
+}
+
+@media only screen and (max-width: 800px) {
+        #plugin-information-title.with-banner h2 {
+                top:25px;
+        }
+}
+
+#plugin-information-title div.vignette {
+        display: none;
+}
+
+#plugin-information-title.with-banner div.vignette {
+        display: block;
+        top: 0;
+        height: 250px;
+        width: 830px;
+        margin: 0 -20px;
+        background: transparent;
+        -webkit-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
+        -moz-box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
+        box-shadow: inset 0 0 50px 4px rgba( 0, 0, 0, 0.2 ), inset 0 -1px 0 rgba( 0, 0, 0, 0.1 );
+}
+
+@media only screen and (max-width: 800px) {
+        #plugin-information-title.with-banner div.vignette {
+                height: 100px;
+                bottom: 100px;
+                width: 800%;
+        }
+}
+
 #plugin-information-tabs {
         padding: 0 16px;
         position: absolute;
@@ -1834 +1913 @@
         z-index: 1;
 }
 
+#plugin-information-tabs.with-banner {
+        top:250px;
+}
+
+@media only screen and (max-width: 800px) {
+        #plugin-information-tabs.with-banner {
+                top:100px;
+        }
+}
+
 #plugin-information-tabs a {
         position: relative;
         float: left;
@@ -1871 +1960 @@
         left: 0;
 }
 
+#plugin-information-content.with-banner {
+        top:284px;
+}
+
+@media only screen and (max-width: 800px) {
+        #plugin-information-content.with-banner {
+                top:134px;
+        }
+}
+
 #section-holder {
         margin: 0;
         padding: 10px 26px;
@@ -1927 +2026 @@
         margin: 0 0 10px;
 }
 
+#plugin-information .counter-label {
+        float: left;
+        margin-right: 5px;
+}
+
+#plugin-information .counter-back {
+        height: 17px;
+        width: 92px;
+        background-color: #ececec;
+        float: left;
+}
+
+#plugin-information .counter-bar {
+        height: 17px;
+        background-color: #fddb5a;
+        float: left;
+}
+
+#plugin-information .counter-count {
+        margin-left: 5px;
+}
+
+#plugin-information .fyi ul.contributors {
+        margin-top: 10px;
+}
+
+#plugin-information .fyi ul.contributors li {
+        display: inline-block;
+        margin-right: 8px;
+        vertical-align: middle;
+}
+
+#plugin-information .fyi ul.contributors li {
+        display: inline-block;
+        margin-right: 8px;
+        vertical-align: middle;
+}
+
+#plugin-information .fyi ul.contributors li img {
+        vertical-align: middle;
+        margin-right: 4px;
+}
+
 #plugin-information-footer {
         padding: 15px 16px;
         position: absolute;