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:
parent
3942c5279e
commit
ee2b12be04
@ -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 {}
|
||||
|
||||
|
@ -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 {}
|
||||
|
68
tests/components/checkbox.qml
Normal file
68
tests/components/checkbox.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
60
tests/components/radiobutton.qml
Normal file
60
tests/components/radiobutton.qml
Normal 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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user