Add extra visual indicator for Checkbox/Radio keyboard focus

Summary:
This draws a line underneath a Plasma checkbox label when it has
keyboard focus. This is needed as when an item is checked, the focus
shadow is practically invisible.

Visuals when clicking is completely unchanged
This brings it more in line with our QStyle.

Test Plan: Attached runtime tests

Reviewers: #plasma, #vdg, mart

Reviewed By: #plasma, mart

Subscribers: plasma-devel, #frameworks

Tags: #plasma, #frameworks

Differential Revision: https://phabricator.kde.org/D7819
This commit is contained in:
David Edmundson 2017-09-19 13:50:44 +01:00
parent 3942c5279e
commit ee2b12be04
4 changed files with 144 additions and 0 deletions

View File

@ -29,6 +29,14 @@ QtQuickControlStyle.CheckBoxStyle {
label: PlasmaComponents.Label {
text: control.text
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.bottom
height: 1 * units.devicePixelRatio
color: theme.highlightColor
visible: control.activeFocus
}
}
background: Item {}

View File

@ -29,6 +29,14 @@ QtQuickControlStyle.RadioButtonStyle {
label: PlasmaComponents.Label {
text: control.text
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.bottom
height: 1 * units.devicePixelRatio
color: theme.highlightColor
visible: control.activeFocus
}
}
//Not needed?
background: Item {}

View File

@ -0,0 +1,68 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2
Rectangle
{
width: 500
height: 500
color: "white"
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 4
columns: 2
Label {
text: "text"
}
PlasmaComponents.CheckBox {
text: "Some awesome checkbox"
}
Label {
text: "focus"
}
PlasmaComponents.CheckBox {
text: "Some awesome checkbox"
focus: true
}
Label {
text: "checked"
}
PlasmaComponents.CheckBox {
text: "Some awesome checkbox"
checkedState: Qt.Checked
}
Label {
text: "tri-state"
}
PlasmaComponents.CheckBox {
text: "Some awesome checkbox"
checkedState: Qt.PartiallyChecked
}
Label {
text: "disabled"
}
PlasmaComponents.CheckBox {
text: "Some awesome checkbox"
enabled: false
}
Label {
text: "disabled and checked"
}
PlasmaComponents.CheckBox {
text: "Some awesome checkbox"
enabled: false
checkedState: Qt.Checked
}
}
}

View File

@ -0,0 +1,60 @@
import QtQuick 2.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2
Rectangle
{
width: 500
height: 500
color: "white"
Grid {
anchors.fill: parent
anchors.margins: 20
spacing: 4
columns: 2
Label {
text: "text"
}
PlasmaComponents.RadioButton {
text: "Some awesome radiobutton"
}
Label {
text: "focus"
}
PlasmaComponents.RadioButton {
text: "Some awesome radiobutton"
focus: true
}
Label {
text: "checked"
}
PlasmaComponents.RadioButton {
text: "Some awesome radiobutton"
checked: true
}
Label {
text: "disabled"
}
PlasmaComponents.RadioButton {
text: "Some awesome radiobutton"
enabled: false
}
Label {
text: "disabled and checked"
}
PlasmaComponents.RadioButton {
text: "Some awesome radiobutton"
enabled: false
checked: true
}
}
}