Add focus and key events handling on Buttton plasma component
- When a button is clicked it aqcuires the focus. - The space and return keys now can be used to press the button if it has the activeFocus Signed-off-by: Daker Fernandes Pinheiro <dakerfp@gmail.com>
This commit is contained in:
parent
38284f8e1a
commit
83bd875a44
@ -36,9 +36,45 @@ Item {
|
|||||||
// Plasma API
|
// Plasma API
|
||||||
property QtObject theme: PlasmaCore.Theme { }
|
property QtObject theme: PlasmaCore.Theme { }
|
||||||
|
|
||||||
|
function pressButton() {
|
||||||
|
surface.prefix = "pressed";
|
||||||
|
}
|
||||||
|
|
||||||
|
function releaseButton() {
|
||||||
|
if (button.checkable)
|
||||||
|
button.checked = !button.checked;
|
||||||
|
|
||||||
|
// TODO: "checked" state must have special graphics?
|
||||||
|
if (button.checked)
|
||||||
|
surface.prefix = "pressed";
|
||||||
|
else
|
||||||
|
surface.prefix = "normal";
|
||||||
|
|
||||||
|
button.clicked();
|
||||||
|
button.forceActiveFocus();
|
||||||
|
}
|
||||||
|
|
||||||
width: 50
|
width: 50
|
||||||
height: 20
|
height: 20
|
||||||
|
|
||||||
|
Keys.onSpacePressed: pressButton();
|
||||||
|
Keys.onReturnPressed: pressButton();
|
||||||
|
Keys.onReleased: {
|
||||||
|
if (event.key == Qt.Key_Space ||
|
||||||
|
event.key == Qt.Key_Return)
|
||||||
|
releaseButton();
|
||||||
|
}
|
||||||
|
|
||||||
|
onActiveFocusChanged: {
|
||||||
|
if (activeFocus) {
|
||||||
|
shadow.opacity = 0;
|
||||||
|
hover.opacity = 1;
|
||||||
|
}else {
|
||||||
|
shadow.opacity = 1;
|
||||||
|
hover.opacity = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
PlasmaCore.FrameSvgItem {
|
PlasmaCore.FrameSvgItem {
|
||||||
id: hover
|
id: hover
|
||||||
|
|
||||||
@ -125,28 +161,24 @@ Item {
|
|||||||
hoverEnabled: true
|
hoverEnabled: true
|
||||||
|
|
||||||
onPressed: {
|
onPressed: {
|
||||||
surface.prefix = "pressed";
|
pressButton();
|
||||||
}
|
}
|
||||||
onReleased: {
|
onReleased: {
|
||||||
if (button.checkable)
|
releaseButton();
|
||||||
button.checked = !button.checked;
|
|
||||||
|
|
||||||
// TODO: "checked" state must have special graphics?
|
|
||||||
if (button.checked)
|
|
||||||
surface.prefix = "pressed";
|
|
||||||
else
|
|
||||||
surface.prefix = "normal";
|
|
||||||
|
|
||||||
button.clicked();
|
|
||||||
}
|
}
|
||||||
onEntered: {
|
onEntered: {
|
||||||
shadow.opacity = 0;
|
shadow.opacity = 0;
|
||||||
hover.opacity = 1;
|
hover.opacity = 1;
|
||||||
}
|
}
|
||||||
onExited: {
|
onExited: {
|
||||||
|
if (button.activeFocus) {
|
||||||
|
shadow.opacity = 0;
|
||||||
|
hover.opacity = 1;
|
||||||
|
} else {
|
||||||
shadow.opacity = 1;
|
shadow.opacity = 1;
|
||||||
hover.opacity = 0;
|
hover.opacity = 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@ -29,6 +29,7 @@ Column {
|
|||||||
}
|
}
|
||||||
|
|
||||||
PlasmaComponents.Button {
|
PlasmaComponents.Button {
|
||||||
|
id: bt1
|
||||||
width: 140
|
width: 140
|
||||||
height: 30
|
height: 30
|
||||||
text: "Button"
|
text: "Button"
|
||||||
@ -36,9 +37,12 @@ Column {
|
|||||||
onClicked: {
|
onClicked: {
|
||||||
console.log("Clicked");
|
console.log("Clicked");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Keys.onTabPressed: bt2.forceActiveFocus();
|
||||||
}
|
}
|
||||||
|
|
||||||
PlasmaComponents.Button {
|
PlasmaComponents.Button {
|
||||||
|
id: bt2
|
||||||
width: 140
|
width: 140
|
||||||
height: 30
|
height: 30
|
||||||
text: "Checkable Button"
|
text: "Checkable Button"
|
||||||
@ -50,9 +54,12 @@ Column {
|
|||||||
else
|
else
|
||||||
console.log("Button Unchecked");
|
console.log("Button Unchecked");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Keys.onTabPressed: bt3.forceActiveFocus();
|
||||||
}
|
}
|
||||||
|
|
||||||
PlasmaComponents.Button {
|
PlasmaComponents.Button {
|
||||||
|
id: bt3
|
||||||
width: 140
|
width: 140
|
||||||
height: 30
|
height: 30
|
||||||
text: "Different Font"
|
text: "Different Font"
|
||||||
@ -60,18 +67,26 @@ Column {
|
|||||||
pixelSize: 20
|
pixelSize: 20
|
||||||
family: "Helvetica"
|
family: "Helvetica"
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Keys.onTabPressed: bt4.forceActiveFocus();
|
||||||
}
|
}
|
||||||
|
|
||||||
PlasmaComponents.Button {
|
PlasmaComponents.Button {
|
||||||
|
id: bt4
|
||||||
width: 140
|
width: 140
|
||||||
height: 30
|
height: 30
|
||||||
text: "Icon Button"
|
text: "Icon Button"
|
||||||
iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
|
iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
|
||||||
|
|
||||||
|
Keys.onTabPressed: bt5.forceActiveFocus();
|
||||||
}
|
}
|
||||||
|
|
||||||
PlasmaComponents.Button {
|
PlasmaComponents.Button {
|
||||||
|
id: bt5
|
||||||
width: 140
|
width: 140
|
||||||
height: 30
|
height: 30
|
||||||
iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
|
iconSource: "/home/dakerfp/work/comics-reader/ui/images/random.png"
|
||||||
|
|
||||||
|
Keys.onTabPressed: bt1.forceActiveFocus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user