diff --git a/assets/css/admin.scss b/assets/css/admin.scss index e79d66094bf..68929fc13f3 100644 --- a/assets/css/admin.scss +++ b/assets/css/admin.scss @@ -768,11 +768,23 @@ margin-top: 4px; .product-rating-star { - background: url(../images/icons/star.svg) no-repeat; + background-repeat: no-repeat; background-size: contain; height: 16px; margin: 4px 4px 4px 0; width: 17px; + + &__fill { + background-image: url(../images/icons/star-golden.svg); + } + + &__half-fill { + background-image: url(../images/icons/star-half-filled.svg); + } + + &__no-fill { + background-image: url(../images/icons/star-gray.svg); + } } .product-reviews-count { diff --git a/assets/images/icons/star.svg b/assets/images/icons/star-golden.svg similarity index 100% rename from assets/images/icons/star.svg rename to assets/images/icons/star-golden.svg diff --git a/assets/images/icons/star-gray.svg b/assets/images/icons/star-gray.svg new file mode 100644 index 00000000000..a530f2298af --- /dev/null +++ b/assets/images/icons/star-gray.svg @@ -0,0 +1,13 @@ + + diff --git a/assets/images/icons/star-half-filled.svg b/assets/images/icons/star-half-filled.svg new file mode 100644 index 00000000000..33b07e8ca1b --- /dev/null +++ b/assets/images/icons/star-half-filled.svg @@ -0,0 +1,18 @@ + + diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php index e0b5830b25a..2f2b9a78011 100644 --- a/includes/admin/views/html-admin-page-addons.php +++ b/includes/admin/views/html-admin-page-addons.php @@ -13,6 +13,40 @@ if ( ! defined( 'ABSPATH' ) ) { $current_section_name = __( 'Browse Categories', 'woocommerce' ); +/** + * Determine which class should be used for a rating star: + * - golden + * - half-filled (50/50 golden and gray) + * - gray + * + * Consider ratings from 3.0 to 4.0 as an example + * 3.0 will produce 3 stars + * 3.1 to 3.5 will produce 3 stars and a half star + * 3.6 to 4.0 will product 4 stars + * + * @param float $rating Rating of a product. + * @param int $index Index of a star in a row. + * + * @return string CSS class to use. + */ +function wccom_get_star_class( $rating, $index ) { + if ( $rating >= $index ) { + // Rating more that current star to show. + return 'fill'; + } else if ( + abs( $index - 1 - floor( $rating ) ) < 0.0000001 && + 0 < ( $rating - floor( $rating ) ) + ) { + // For rating more than x.0 and less than x.5 or equal it will show a half star. + return 50 >= floor( ( $rating - floor( $rating ) ) * 100 ) + ? 'half-fill' + : 'fill'; + } + + // Don't show a golden star otherwise. + return 'no-fill'; +} + ?>