New release 0.9.1-1
[ubi] / qml / ubi / components / ButtonNew.qml
1 import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
2 import "../UIConstants.js" as Const
3
4 Item {
5     id: root
6     property string label
7     property bool disabled: false
8     property int maxSize: 27
9     property string iconSource
10
11     state: mouseArea.pressed && !root.disabled ? "pressed" : "unpressed"
12
13     //width: box.width
14     //height: box.height
15
16     signal buttonClicked(string label)
17
18     Rectangle {
19         id: shadow
20         width: box.width
21         height: box.height
22         color: Const.SHADOW_COLOR;
23         radius: 10
24     }
25
26     Rectangle {
27         id: box
28         color: root.disabled ? Const.COOL_GREY_COLOR : "black"
29         //height: textbox.height+20
30         height: root.height
31         //width: textbox.width<100 ? 120 : textbox.width+20
32         width: root.width
33         radius: 10
34     }
35
36     Rectangle {
37         width: box.width
38         height: box.height
39         x: box.x
40         y: box.y
41         color: Const.WARM_GREY_COLOR
42         radius: 10
43         visible: root.state == "pressed"
44         //border.color: "black"
45         //border.width: Const.SHADOW_OFFSET
46     }
47
48     Image {
49         id: icon
50         width: 40
51         height: 40
52         anchors.centerIn: box
53         source: root.iconSource == "" ? "" : "../" + root.iconSource
54         sourceSize.width: width
55         sourceSize.height: height
56     }
57
58     onLabelChanged: {
59         if(root.label.length>root.maxSize) {
60             //console.log("root.label: "+root.label)
61             //console.log("root.label.length: "+root.label.length)
62             //console.log("root.maxSize: "+root.maxSize)
63             textbox.text = root.label.substring(0,root.maxSize-3)+"...";
64         } else {
65             textbox.text = root.label;
66         }
67     }
68
69     Text {
70         id: textbox
71         //x: 10
72         //y: 10
73         font.pixelSize: 30
74         color: root.disabled ? "gray" : "white"
75         anchors.centerIn: box
76         visible: root.iconSource == ""
77     }
78
79     MouseArea {
80         id: mouseArea
81         width: box.width
82         height: box.height
83         onClicked: root.buttonClicked(root.label)
84         enabled: !root.disabled
85     }
86
87     states: [
88         State {
89             name: "unpressed"
90             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
91             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
92             PropertyChanges {target: box; x: 0}
93             PropertyChanges {target: box; y: 0}
94         },
95         State {
96             name: "pressed"
97             PropertyChanges {target: shadow; x: Const.SHADOW_OFFSET}
98             PropertyChanges {target: shadow; y: Const.SHADOW_OFFSET}
99             PropertyChanges {target: box; x: Const.SHADOW_OFFSET}
100             PropertyChanges {target: box; y: Const.SHADOW_OFFSET}
101         }
102     ]
103 }
104
105
106