Rating: Rework the component for better UX and a11y
This is a library-grade component which I would be happy to upstream into Kirigami and reuse in other places, such as KNewStuff and Elisa.
It supports keyboard interaction, RTL layout mirroring, optional half-star display mode, and different editing policies.
Its interaction area now spans entire control (and slightly beyond -- across control's paddings, for convenience), and allows for press and drag editing.
A minor improvement opportunity would be to support fractional values beyond half-star precision, but it is not currently possible with a set of 3 fixed icons.
One Kirigami-specific caveat, mouse stealing prevention had to be enabled in order to make drag actually work in OverlaySheet.
Note: this component can be tested independently with qml
tool. All the modes work and can be experimented with. For example, add this to the bottom of the component and comment out some lines to your liking:
Rectangle {
anchors.fill: parent
color: Kirigami.Theme.backgroundColor
z: -1
}
QQC2.Label {
z: 1
opacity: 0.8
anchors.centerIn: parent
text: `${control.hoveredValue} — ${control.value} — ${control.effectiveValue}`
color: "#1EA8F7"
font.bold: true
Rectangle {
anchors.fill: parent
anchors.margins: -parent.height/4
z: -1
radius: parent.height
color: "#262828"
}
}
Component.onCompleted: {
height = 100;
precision = Rating.Precision.HalfStar;
precision = Rating.Precision.FullStar;
readOnly = false;
editPolicy |= Rating.EditPolicy.AllowTapToUnset;
editPolicy |= Rating.EditPolicy.AllowSetZero;
value = 3;
LayoutMirroring.enabled = true;
LayoutMirroring.childrenInherit = true;
}