Fix button graphics when button was pressed or disabled. Add disabled state to button...
[mdictionary] / src / mdictionary / qml / Button.qml
1 import Qt 4.7
2
3 BorderImage {
4     id: button
5     property alias textInButton: buttonText.text
6     signal clicked
7     opacity: 1
8
9     function setText(string) { textInButton = string; }
10     border { left: 10; top: 10; right: 10; bottom: 10 }
11
12     MouseArea {
13         id: mouseArea
14         anchors.centerIn: parent;
15         width:  parent.width;
16         height: parent.height;
17         onClicked: {
18             button.clicked();
19         }
20     }
21
22     Text {
23         z:1
24         id: buttonText
25         anchors.centerIn: parent;
26         font.pixelSize: parent.height * .5
27         style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
28     }
29
30 //    Rectangle {
31 //        id: shade
32 //        anchors.centerIn: parent;
33 //        radius: parent.height*.4;
34 //        color: "black";
35 //        opacity: 0
36 //        width:  parent.width;
37 //        height: parent.height;
38 //    }
39
40     Image {
41         id: image1
42         width: (35*parent.height)/107 +1
43         height: parent.height
44         anchors.left: parent.left
45         source: "qrc:/button/buttonLeft.png"
46         fillMode:Image.Stretch
47     }
48
49     Image {
50         id: image3
51         smooth: true
52         width: parent.width - ((70*parent.height)/107) +1;
53         height: parent.height
54         anchors.horizontalCenter: parent.horizontalCenter
55         source: "qrc:/button/buttonCenter.png"
56         fillMode:Image.Stretch
57     }
58
59     Image {
60         id: image2
61         smooth: true
62         width: (35*parent.height)/107 +1
63         height: parent.height
64         anchors.right: parent.right
65         source: "qrc:/button/buttonR.png"
66         fillMode:Image.Stretch
67     }
68
69     states: [
70         State {
71             name: "pressed";
72             when: (mouseArea.pressed == true && button.enabled == true);
73
74             PropertyChanges { target: image1; source: "qrc:/button/buttonLeftPushed.png" }
75             PropertyChanges { target: image3; source: "qrc:/button/buttonCenterPushed.png" }
76             PropertyChanges { target: image2; source: "qrc:/button/buttonRightPushed.png" }
77         },
78         State {
79             name: "disabled";
80             when: (button.enabled == false);
81
82             PropertyChanges { target: image1; source: "qrc:/button/buttonLeftDisabled.png" }
83             PropertyChanges { target: image3; source: "qrc:/button/buttonCenterDisabled.png" }
84             PropertyChanges { target: image2; source: "qrc:/button/buttonRightDisabled.png" }
85         }
86     ]
87
88
89
90 /*    MouseArea {
91         id: mouseArea
92         anchors.centerIn: parent;
93         width:  ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)) - ((70*parent.height)/107)
94         height: parent.height
95         onClicked: {
96             button.clicked();
97         }
98     }
99
100     Text {
101         z:1
102         id: buttonText
103         anchors.centerIn: parent;
104         font.pixelSize: parent.height * .5
105         style: Text.Sunken; color: "white"; styleColor: "black"; smooth: true
106         PropertyChanges {
107             target: button;
108             width: (button.width> buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.8)
109         }
110     }
111
112     Rectangle {
113         id: shade
114         anchors.centerIn: parent;
115         radius: parent.height*.4;
116         color: "black";
117         opacity: 0
118         width:  ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60))
119         height: parent.height
120     }
121
122     Image {
123         id: image1
124         width: (35*parent.height)/107 +1
125         height: parent.height
126         anchors.left: parent.left
127         anchors.leftMargin: (parent.width - ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)))/2
128         source: "qrc:/button/buttonLeft.png"
129     }
130
131     Image {
132         id: image3
133         smooth: true
134         width: (((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)) - ((70*parent.height)/107))+1
135         height: parent.height
136         anchors.horizontalCenter: parent.horizontalCenter
137         source: "qrc:/button/buttonCenter.png"
138     }
139
140     Image {
141         id: image2
142         smooth: true
143         width: (35*parent.height)/107 +1
144         height: parent.height
145         anchors.right: parent.right
146         anchors.rightMargin: (parent.width - ((parent.width > buttonText.text.length*buttonText.font.pixelSize*.8) ? (parent.width) : (buttonText.text.length*buttonText.font.pixelSize*.60)))/2
147         source: "qrc:/button/buttonR.png"
148     }
149
150     states: [
151         State {
152             name: "pressed"; when: mouseArea.pressed == true
153             PropertyChanges { target: shade; opacity: 0.4 }
154             PropertyChanges { target: image1; opacity: 0.5 }
155             PropertyChanges { target: image3; opacity: 0.5 }
156             PropertyChanges { target: image2; opacity: 0.5 }
157         }
158     ]
159     */
160 }