Rating stars

[WithoutPants]

Replaces the numeric rating display and selection to graphical stars in the Scene Details and Edit panels.

Example on the details panel:

This field is currently read-only, but I've considered perhaps allowing the user to click to edit the rating and saving immediately. Not sure if it would be a popular use case or not.

In the Edit panel:

Mousing over the stars fills in the number of stars that will be set to. If this is less than current, then the remaining stars are not filled:

To unset the rating, click on the same value as the current value. When moused over, this is shown as unfilling all the current stars:

In the Edit panel, setting the rating does not take effect until the save button is clicked, as per existing behaviour.

[ghost]

Looks good. I do prefer not using mouseover events for styling stuff though since it can easily get stuck, and leads to a lot of code.

I've made a jsfiddle to demonstrate how we could do it in css. It's a bit of a hack since css doesn't have lookahead so we have to reverse the order of the html, but it works well enough.

https://jsfiddle.net/1kfvugd9/

[ghost]

Oh, and it seems the difference between solid and regular fonts is basically just the font-weight, so if you go the css route it'll be a lot easier just to set .star { font-weight: 500 } .star.active { font-weight: 900 }. The only thing the component needs to do is set the active class on the current rating.

[WithoutPants]

I tried adding the font-weight changes, but it had no impact on display of the stars. It only makes sense to do the css stuff if we can get rid of the mouse events, but it doesn't look like I can implement the star outline behaviour using css only.

[ghost]

My bad, that only applies if we used the fontawesome web font, but we use svgs. SVGs are more efficient since we only include the ones we use, but it sucks not being able to define them in css.

The other alternative is to render both types of stars and hide/show with css, but it's such a small component that I'm not sure it's worth the hassle.