TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-24 19:33:02 +03:00
Code Issues Projects Releases Wiki Activity

Added hover-over on product card stars in edit mode

Browse Source 
refs https://github.com/TryGhost/Team/issues/1245

- Used onmouseover because a CSS-only approach wouldn't work
- CSS can only highligh next siblings on hover, while we want to highlight previous sibling in our case
- This adds a hover class on mouseover to the right stars and removes it onmouseout
This commit is contained in:
Thibaut Patel 2021-12-08 17:18:22 +01:00
parent cd5a14dc46
commit b1d0c33c09
3 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/styles/components/koenig.css
View File

@ -1820,7 +1820,7 @@ button.emoji-picker__category-button.active {
fill: #fff;
}
.kg-product-card-rating-edit .kg-product-card-rating-star:hover {
.kg-product-card-rating-star-hovered {
opacity: 0.7;
}

10
ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs
View File

@ -94,19 +94,19 @@
/>
{{#if @payload.productRatingEnabled}}
<div class="kg-product-card-rating-edit icons" style="line-height: auto;">
<button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="1" onclick={{action "changeStars"}}>
<button class="{{if (gte @payload.productStarRating 1) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="1" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
<span>{{svg-jar "koenig/kg-star"}}</span>
</button>
<button class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="2" onclick={{action "changeStars"}}>
<button class="{{if (gte @payload.productStarRating 2) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="2" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
<span>{{svg-jar "koenig/kg-star"}}</span>
</button>
<button class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="3" onclick={{action "changeStars"}}>
<button class="{{if (gte @payload.productStarRating 3) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="3" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
<span>{{svg-jar "koenig/kg-star"}}</span>
</button>
<button class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="4" onclick={{action "changeStars"}}>
<button class="{{if (gte @payload.productStarRating 4) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="4" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
<span>{{svg-jar "koenig/kg-star"}}</span>
</button>
<button class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="5" onclick={{action "changeStars"}}>
<button class="{{if (gte @payload.productStarRating 5) "kg-product-card-rating-active"}} kg-product-card-rating-star" value="5" onclick={{action "changeStars"}} onmouseover={{this.hoverStarOn}} onmouseout={{this.hoverStarOff}}>
<span>{{svg-jar "koenig/kg-star"}}</span>
</button>
</div>

17
ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js
View File

@ -302,4 +302,21 @@ export default class KoenigCardProductComponent extends Component {
toggleProductRating() {
this._updatePayloadAttr('productRatingEnabled', !this.args.payload.productRatingEnabled);
}
@action
hoverStarOn(event) {
const val = event.currentTarget.value;
const stars = this.element.querySelectorAll('.kg-product-card-rating-star');
for (let i = 0; i + 1 <= val && i < stars.length; i++) {
stars[i].classList.add('kg-product-card-rating-star-hovered');
}
}
@action
hoverStarOff() {
const stars = this.element.querySelectorAll('.kg-product-card-rating-star');
for (let i = 0; i < stars.length; i++) {
stars[i].classList.remove('kg-product-card-rating-star-hovered');
}
}
}