Changeset 35006

Timestamp:

10/10/2015 06:50:35 AM (11 years ago)

Author:

SergeyBiryukov

Message:

Use wp_star_rating() on Add Themes screen:

• It works correctly for RTL
• Requires less CSS styling
• Is visually consistent with plugin ratings
• Is more accessible

Fixes #34080.

Location:

trunk/src/wp-admin

Files:

• css/themes.css (modified) (2 diffs)
• includes/ajax-actions.php (modified) (1 diff)
• theme-install.php (modified) (1 diff)

trunk/src/wp-admin/css/themes.css

@@ -1155 +1155 @@
 }
 
+.theme-details .theme-rating {
+        line-height: 23px;
+}
+
 .theme-details .star-rating {
-        margin: 15px 0 0;
-}
-
-.theme-details .star-rating span:before {
-        color: #ffb900;
-        content: "\f154";
-        display: inline-block;
-        -webkit-font-smoothing: antialiased;
-        font: normal 20px/1 dashicons;
-        vertical-align: top;
-}
-
-/* Half stars */
-.star-rating.rating-10 span.one:before,
-.star-rating.rating-30 span.two:before,
-.star-rating.rating-50 span.three:before,
-.star-rating.rating-70 span.four:before,
-.star-rating.rating-90 span.five:before {
-        content: "\f459";
-}
-
-/* Full stars */
-.star-rating.rating-20 span.one:before,
-.star-rating.rating-30 span.one:before,
-.star-rating.rating-40 span.one:before,
-.star-rating.rating-40 span.two:before,
-.star-rating.rating-50 span.one:before,
-.star-rating.rating-50 span.two:before,
-.star-rating.rating-60 span.one:before,
-.star-rating.rating-60 span.two:before,
-.star-rating.rating-60 span.three:before,
-.star-rating.rating-70 span.one:before,
-.star-rating.rating-70 span.two:before,
-.star-rating.rating-70 span.three:before,
-.star-rating.rating-80 span.one:before,
-.star-rating.rating-80 span.two:before,
-.star-rating.rating-80 span.three:before,
-.star-rating.rating-80 span.four:before,
-.star-rating.rating-90 span.one:before,
-.star-rating.rating-90 span.two:before,
-.star-rating.rating-90 span.three:before,
-.star-rating.rating-90 span.four:before,
-.star-rating.rating-100 > span:before {
-        content: "\f155";
-}
-
-.theme-details .star-rating .ratings {
+        display: inline;
+}
+
+.theme-details .num-ratings,
+.theme-details .no-rating {
+        font-size: 11px;
+        color: #999;
+}
+
+.theme-details .no-rating {
         display: block;
         line-height: 20px;
-        color: #999;
 }
 
@@ -1629 +1595 @@
 
 .install-theme-info .theme-screenshot {
-        margin-top: 15px;
+        margin: 15px 0;
         width: 258px;
         border: 1px solid #ccc;

trunk/src/wp-admin/includes/ajax-actions.php

@@ -2802 +2802 @@
                 $theme->version     = wp_kses( $theme->version, $themes_allowedtags );
                 $theme->description = wp_kses( $theme->description, $themes_allowedtags );
-                $theme->num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
+                $theme->stars       = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
+                $theme->num_ratings = number_format_i18n( $theme->num_ratings );
                 $theme->preview_url = set_url_scheme( $theme->preview_url );
         }

trunk/src/wp-admin/theme-install.php

@@ -243 +243 @@
                                 <div class="theme-details">
                                         <# if ( data.rating ) { #>
-                                                <div class="star-rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
-                                                        <span class="one"></span><span class="two"></span><span class="three"></span><span class="four"></span><span class="five"></span>
-                                                        <small class="ratings">{{ data.num_ratings }}</small>
+                                                <div class="theme-rating">
+                                                        {{{ data.stars }}}
+                                                        <span class="num-ratings">({{ data.num_ratings }})</span>
                                                 </div>
                                         <# } else { #>
-                                                <div class="star-rating">
-                                                        <small class="ratings"><?php _e( 'This theme has not been rated yet.' ); ?></small>
-                                                </div>
+                                                <span class="no-rating"><?php _e( 'This theme has not been rated yet.' ); ?></span>
                                         <# } #>
                                         <div class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></div>