diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss index 5e9adce98..93079baf0 100644 --- a/ui/v2.5/src/components/Galleries/styles.scss +++ b/ui/v2.5/src/components/Galleries/styles.scss @@ -216,9 +216,17 @@ $galleryTabWidth: 450px; display: none; } + .star-fill-10 .unfilled-star, + .star-fill-20 .unfilled-star, .star-fill-25 .unfilled-star, + .star-fill-30 .unfilled-star, + .star-fill-40 .unfilled-star, .star-fill-50 .unfilled-star, - .star-fill-75 .unfilled-star { + .star-fill-60 .unfilled-star, + .star-fill-70 .unfilled-star, + .star-fill-75 .unfilled-star, + .star-fill-80 .unfilled-star, + .star-fill-90 .unfilled-star { visibility: hidden; } diff --git a/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx b/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx index e2801ee80..448b55fff 100644 --- a/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx +++ b/ui/v2.5/src/components/Shared/Rating/RatingStars.tsx @@ -32,7 +32,8 @@ export const RatingStars: React.FC = ( starPrecision: props.precision, }); const stars = rating ? Math.floor(rating) : 0; - const fraction = rating ? rating % 1 : 0; + // the upscaling was necesary to fix rounding issue present with tenth place precision + const fraction = rating ? ((rating * 10) % 10) / 10 : 0; const max = 5; const precision = getRatingPrecision(props.precision); @@ -223,11 +224,28 @@ export const RatingStars: React.FC = ( ); }; + const maybeRenderStarRatingNumber = () => { + const ratingFraction = getCurrentSelectedRating(); + if ( + !ratingFraction || + (ratingFraction.rating == 0 && ratingFraction.fraction == 0) + ) { + return; + } + + return ( + + {ratingFraction.rating + ratingFraction.fraction} + + ); + }; + return (
{Array.from(Array(max)).map((value, index) => renderRatingButton(index + 1) )} + {maybeRenderStarRatingNumber()}
); }; diff --git a/ui/v2.5/src/components/Shared/Rating/styles.scss b/ui/v2.5/src/components/Shared/Rating/styles.scss index 2784943bb..f7b463359 100644 --- a/ui/v2.5/src/components/Shared/Rating/styles.scss +++ b/ui/v2.5/src/components/Shared/Rating/styles.scss @@ -21,18 +21,50 @@ width: 0; } + &.star-fill-10 .filled-star { + width: 10%; + } + + &.star-fill-20 .filled-star { + width: 20%; + } + &.star-fill-25 .filled-star { width: 35%; } + &.star-fill-30 .filled-star { + width: 30%; + } + + &.star-fill-40 .filled-star { + width: 40%; + } + &.star-fill-50 .filled-star { width: 50%; } + &.star-fill-60 .filled-star { + width: 60%; + } + &.star-fill-75 .filled-star { width: 65%; } + &.star-fill-70 .filled-star { + width: 70%; + } + + &.star-fill-80 .filled-star { + width: 80%; + } + + &.star-fill-90 .filled-star { + width: 90%; + } + &.star-fill-100 .filled-star { width: 100%; } @@ -56,6 +88,11 @@ } } +.star-rating-number { + font-size: 1rem; + margin: auto 0.5rem; +} + .rating-number.disabled { align-items: center; display: inline-flex; diff --git a/ui/v2.5/src/locales/en-GB.json b/ui/v2.5/src/locales/en-GB.json index 3c81afb4a..598ddc372 100644 --- a/ui/v2.5/src/locales/en-GB.json +++ b/ui/v2.5/src/locales/en-GB.json @@ -511,7 +511,8 @@ "options": { "full": "Full", "half": "Half", - "quarter": "Quarter" + "quarter": "Quarter", + "tenth": "Tenth" } } }, diff --git a/ui/v2.5/src/utils/rating.ts b/ui/v2.5/src/utils/rating.ts index f129239a5..8821f2ef9 100644 --- a/ui/v2.5/src/utils/rating.ts +++ b/ui/v2.5/src/utils/rating.ts @@ -7,6 +7,7 @@ export enum RatingStarPrecision { Full = "full", Half = "half", Quarter = "quarter", + Tenth = "tenth", } export const defaultRatingSystemType: RatingSystemType = RatingSystemType.Stars; @@ -37,6 +38,10 @@ export const ratingStarPrecisionIntlMap = new Map([ RatingStarPrecision.Quarter, "config.ui.editing.rating_system.star_precision.options.quarter", ], + [ + RatingStarPrecision.Tenth, + "config.ui.editing.rating_system.star_precision.options.tenth", + ], ]); export type RatingSystemOptions = { @@ -66,6 +71,8 @@ export function getRatingPrecision(precision: RatingStarPrecision) { return 0.5; case RatingStarPrecision.Quarter: return 0.25; + case RatingStarPrecision.Tenth: + return 0.1; default: return 1; }