Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Added a star-rating input for the product card

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

- This is a proof-of-concept as there are so many ways to implement a star-rating component
- The component is only available when editing the product card
- Uses the unicode star character: ★
- The inspiration is an old article from Lea Verou: https://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/ (minus the clever use of :not(:checked) on something that's not an input to filter-out IE)
- There is currently no way to remove the star rating as it'll get designed this week
This commit is contained in:
Thibaut Patel 2021-11-30 18:02:44 +01:00
parent f07e5b8c9c
commit fc208558dd
3 changed files with 72 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
ghost/admin/app/styles/components/koenig.css
View file

@ -1731,6 +1731,59 @@ button.emoji-picker__category-button.active {
margin-top: 24px;
}
.kg-product-card-rating-edit {
float:left;
}
.kg-product-card-rating-edit + * {
clear: both;
}
.kg-product-card-rating-edit > input {
position:absolute;
left:-9999px;
clip:rect(0,0,0,0);
}
.kg-product-card-rating-edit > label {
float:right;
width:1em;
padding:0 .1em;
overflow:hidden;
white-space:nowrap;
cursor:pointer;
font-size:200%;
line-height:1.2;
color:#ddd;
}
.kg-product-card-rating-edit > label:before {
content: '★ ';
}
.kg-product-card-rating-edit > input:checked ~ label {
color: #f70;
}
.kg-product-card-rating-edit:not(:checked) > label:hover,
.kg-product-card-rating-edit:not(:checked) > label:hover ~ label {
color: gold;
}
.kg-product-card-rating-edit > input:checked + label:hover,
.kg-product-card-rating-edit > input:checked + label:hover ~ label,
.kg-product-card-rating-edit > input:checked ~ label:hover,
.kg-product-card-rating-edit > input:checked ~ label:hover ~ label,
.kg-product-card-rating-edit > label:hover ~ input:checked ~ label {
color: #ea0;
}
.kg-product-card-rating-edit > label:active {
position:relative;
top:2px;
left:2px;
}
/* Button card
/* --------------------------------------------------------------- */
.kg-button-card {

11
ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.hbs
View file

@ -91,11 +91,18 @@
@onChange={{action "setProductDescription"}}
@didCreateEditor={{action "registerEditor"}}
/>
<div class="kg-product-card-rating-edit" style="height: auto;">
<input type="radio" id="star5" name="rating" value="5" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "5"}}/><label for="star5" title="5 stars">5 stars</label>
<input type="radio" id="star4" name="rating" value="4" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "4"}}/><label for="star4" title="4 stars">4 stars</label>
<input type="radio" id="star3" name="rating" value="3" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "3"}}/><label for="star3" title="3 stars">3 stars</label>
<input type="radio" id="star2" name="rating" value="2" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "2"}}/><label for="star2" title="2 stars">2 stars</label>
<input type="radio" id="star1" name="rating" value="1" onchange={{action "changeStars"}} checked={{eq @payload.productStarRating "1"}}/><label for="star1" title="1 star">1 star</label>
</div>
{{#if (and @payload.productButton @payload.productUrl)}}
<a href={{@payload.productUrl}} class="gh-btn gh-btn-accent kg-product-card-button" target="_blank" rel="noopener noreferrer"><span>{{@payload.productButton}}</span></a>
{{/if}}
</div>
</div>
<KoenigSettingsPanel>
@ -144,7 +151,7 @@
<a href={{@payload.productUrl}} class="gh-btn gh-btn-accent kg-product-card-button" target="_blank" rel="noopener noreferrer"><span>{{@payload.productButton}}</span></a>
{{/if}}
</div>
</div>
{{/if}}
</KoenigCard>

13
ghost/admin/lib/koenig-editor/addon/components/koenig-card-product.js
View file

@ -25,13 +25,13 @@ export default class KoenigCardProductComponent extends Component {
get isEmpty() {
const {productTitle, productDescription, productUrl, productButton, productImageSrc} = this.args.payload;
return isBlank(productTitle) && isBlank(productDescription) && isBlank(productUrl) && isBlank(productButton) && isBlank(productImageSrc);
return isBlank(productTitle) && isBlank(productDescription) && (isBlank(productUrl) || isBlank(productButton)) && isBlank(productImageSrc);
}
get isIncomplete() {
const {productTitle, productDescription, productUrl, productButton, productImageSrc} = this.args.payload;
const {productTitle, productDescription} = this.args.payload;
return isBlank(productTitle) || isBlank(productDescription) || isBlank(productUrl) || isBlank(productButton) || isBlank(productImageSrc);
return isBlank(productTitle) || isBlank(productDescription);
}
get toolbar() {
@ -234,4 +234,11 @@ export default class KoenigCardProductComponent extends Component {
.find('input[type="file"]')
.click();
}
@action
changeStars(event) {
if (event.target.checked) {
this._updatePayloadAttr('productStarRating', event.target.value);
}
}
}