From c9533087602d767f939512c5aac4690a07bdf706 Mon Sep 17 00:00:00 2001 From: Vlad Rusu Date: Wed, 16 Oct 2024 11:41:02 +0300 Subject: [PATCH 1/3] Rating fixes: - readonly class not added to a "readonly" .rating element, making the stars to grow when hovering - hovering over a readonly or disabled rating now shows a default cursor, not pointer (since you cannot click on it) --- js/src/rating.js | 5 +++++ scss/_rating.scss | 8 +++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/js/src/rating.js b/js/src/rating.js index 2929a9eb1..28c61309e 100644 --- a/js/src/rating.js +++ b/js/src/rating.js @@ -34,6 +34,7 @@ const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}` const CLASS_NAME_ACTIVE = 'active' const CLASS_NAME_DISABLED = 'disabled' +const CLASS_NAME_READONLY = 'readonly' const CLASS_NAME_RATING = 'rating' const CLASS_NAME_RATING_ITEM = 'rating-item' const CLASS_NAME_RATING_ITEM_ICON = 'rating-item-icon' @@ -355,6 +356,10 @@ class Rating extends BaseComponent { this._element.classList.add(CLASS_NAME_DISABLED) } + if (this._config.readOnly) { + this._element.classList.add(CLASS_NAME_READONLY) + } + this._element.setAttribute('role', 'radiogroup') Array.from({ length: this._config.itemCount }, (_, index) => this._createRatingItem(index)) } diff --git a/scss/_rating.scss b/scss/_rating.scss index d05676a14..52ef5aa64 100644 --- a/scss/_rating.scss +++ b/scss/_rating.scss @@ -18,7 +18,9 @@ &:not(.disabled):not(.readonly) { .rating-item { - cursor: pointer; + .rating-item-label { + cursor: pointer; + } &:hover { transform: var(--#{$prefix}rating-item-scale-transform); @@ -47,7 +49,7 @@ font-size: var(--#{$prefix}rating-item-height); line-height: 0; color: var(--#{$prefix}rating-item-color); - cursor: pointer; + cursor: default; // has cursor pointer only if the rating is not disabled or readonly (see above) * { pointer-events: none; @@ -83,7 +85,7 @@ .rating-item-icon { width: var(--#{$prefix}rating-item-height); height: var(--#{$prefix}rating-item-height); - cursor: pointer; + //cursor: pointer; // has the cursor of rating-item-label (parent) background-color: var(--#{$prefix}rating-item-color); mask: var(--#{$prefix}rating-item-icon) center / var(--#{$prefix}rating-item-height) no-repeat; } From 8b7fce823ab0a7998a7f4fda264c8f09448e3f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Wed, 16 Oct 2024 12:19:07 +0200 Subject: [PATCH 2/3] reorder classnames --- js/src/rating.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/rating.js b/js/src/rating.js index 28c61309e..1923912e6 100644 --- a/js/src/rating.js +++ b/js/src/rating.js @@ -34,7 +34,6 @@ const EVENT_MOUSELEAVE = `mouseleave${EVENT_KEY}` const CLASS_NAME_ACTIVE = 'active' const CLASS_NAME_DISABLED = 'disabled' -const CLASS_NAME_READONLY = 'readonly' const CLASS_NAME_RATING = 'rating' const CLASS_NAME_RATING_ITEM = 'rating-item' const CLASS_NAME_RATING_ITEM_ICON = 'rating-item-icon' @@ -42,6 +41,7 @@ const CLASS_NAME_RATING_ITEM_CUSTOM_ICON = 'rating-item-custom-icon' const CLASS_NAME_RATING_ITEM_CUSTOM_ICON_ACTIVE = 'rating-item-custom-icon-active' const CLASS_NAME_RATING_ITEM_INPUT = 'rating-item-input' const CLASS_NAME_RATING_ITEM_LABEL = 'rating-item-label' +const CLASS_NAME_READONLY = 'readonly' const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="rating"]' const SELECTOR_RATING_ITEM_INPUT = '.rating-item-input' From 567424bcce29d7a518ccc9d5135cc8db60f5172a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Wed, 16 Oct 2024 12:20:21 +0200 Subject: [PATCH 3/3] improve syntax --- scss/_rating.scss | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/scss/_rating.scss b/scss/_rating.scss index 52ef5aa64..6d9b06033 100644 --- a/scss/_rating.scss +++ b/scss/_rating.scss @@ -17,14 +17,13 @@ } &:not(.disabled):not(.readonly) { - .rating-item { - .rating-item-label { - cursor: pointer; - } - - &:hover { - transform: var(--#{$prefix}rating-item-scale-transform); - } + .rating-item:hover { + transform: var(--#{$prefix}rating-item-scale-transform); + } + + .rating-item-icon, + .rating-item-label { + cursor: pointer; } } } @@ -49,7 +48,6 @@ font-size: var(--#{$prefix}rating-item-height); line-height: 0; color: var(--#{$prefix}rating-item-color); - cursor: default; // has cursor pointer only if the rating is not disabled or readonly (see above) * { pointer-events: none; @@ -85,7 +83,6 @@ .rating-item-icon { width: var(--#{$prefix}rating-item-height); height: var(--#{$prefix}rating-item-height); - //cursor: pointer; // has the cursor of rating-item-label (parent) background-color: var(--#{$prefix}rating-item-color); mask: var(--#{$prefix}rating-item-icon) center / var(--#{$prefix}rating-item-height) no-repeat; }