id: rectangle
property alias pathToIcon: image.source;
+ property int iconWidth:rectangle.width-8;
+ property int iconHeight:rectangle.height-8;
signal clicked;
+ function press() { mouseArea.pressed }
+
radius: 50
+ Keys.onReturnPressed: {
+ rectangle.clicked();
+ }
+
MouseArea {
id: mouseArea
anchors.centerIn: parent;
Image {
id: image
z:4;
+ smooth: true
anchors.centerIn: parent
- width: rectangle.width;
- height: rectangle.height;
+ width: iconWidth;
+ height: iconHeight;
}
Image {
id: image1
- z: 1
smooth: true
- width: (35*parent.height)/107 +1
+ width: (image1.sourceSize.width*parent.height)/image1.sourceSize.height +1 //(35*parent.height)/107 +1
height: parent.height
anchors.left: parent.left
source: "qrc:/button/buttonLeft.png"
+ fillMode:Image.Stretch
}
Image {
id: image3
- z: 1
smooth: true
- width: parent.width - (70*parent.height)/107 +1
height: parent.height
- anchors.horizontalCenter: parent.horizontalCenter
+ anchors.right: image2.left
+ anchors.rightMargin: -1
+ anchors.left: image1.right
+ anchors.leftMargin: -1
source: "qrc:/button/buttonCenter.png"
+ fillMode:Image.Stretch
+ //fillMode: Image.TileHorizontally
}
Image {
id: image2
- z: 1
smooth: true
- width: (35*parent.height)/107 +1
+ width: (image1.sourceSize.width*parent.height)/image1.sourceSize.height +1//(35*parent.height)/107 +1
height: parent.height
anchors.right: parent.right
source: "qrc:/button/buttonR.png"
+ fillMode:Image.Stretch
}
- Rectangle {
- id: shade
- z: 4
- anchors.centerIn: parent;
- color: "black";
- radius: 20;
- opacity: 1;
- width: rectangle.width;
- height: rectangle.height;
- }
states: [
State {
- name: "enable";
- when: (mouseArea.pressed == false && rectangle.enabled == true);
- PropertyChanges { target: shade;
- opacity: 0; }
- },
- State {
name: "disable";
when: (rectangle.enabled == false);
- PropertyChanges { target: shade;
- color: "black";
- opacity: .5; }
+ PropertyChanges { target: image1; source: "qrc:/button/buttonLeftDisabled.png" }
+ PropertyChanges { target: image3; source: "qrc:/button/buttonCenterDisabled.png" }
+ PropertyChanges { target: image2; source: "qrc:/button/buttonRightDisabled.png" }
},
State {
name: "clicked";
when: (mouseArea.pressed == true && rectangle.enabled == true);
- PropertyChanges { target: shade;
- color: "#fffead"
- opacity: 0.5; }
+ PropertyChanges { target: image1; source: "qrc:/button/buttonLeftPushed.png" }
+ PropertyChanges { target: image3; source: "qrc:/button/buttonCenterPushed.png" }
+ PropertyChanges { target: image2; source: "qrc:/button/buttonRightPushed.png" }
+ },
+ State {
+ name: "focused";
+ when: (rectangle.enabled && !mouseArea.pressed && rectangle.focus)
+
+ PropertyChanges { target: image1; source: "qrc:/button/buttonLeftFocus.png" }
+ PropertyChanges { target: image3; source: "qrc:/button/buttonCenterFocus.png" }
+ PropertyChanges { target: image2; source: "qrc:/button/buttonRFocus.png" }
}
]
}